pipe-components

This module provides a component library that can be used by react projects using the node module pipe-automater.

Get started

1. Create an app with pipe-automater
2. $ npm install pipe-components
3. Install the extend script of pipe-scripts
4. $ npm run extend and choose pipe-components setup
5. Now you can import components in any .jsx file as following button example

import { Button } from 'pipe-components';

1. To overwrite any style variables edit the /components/index.scss file

Get started without pipe-scripts

1. Create an app with pipe-automater
2. $ npm install pipe-components
3. Import components in any .jsx file as following button example

import { Button } from 'pipe-components';

1. Create an index.scss file with following content

/*
* Component stylesheet imports and default style variables to overwrite
*/
 
// Button 
$button-color: $base-font-color;
$button-background-color: $c-primary;
$button-hover-background-color: lighten($button-background-color, 10%);
$button-active-background-color: $c-secondary;
$button-disabled-background-color: $c01-30;
$button-hover-active-background-color: lighten($button-active-background-color, 5%);
$button-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/Button/Button';
 
// ButtonBar 
$button-bar-border-color: $c13;
$button-bar-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/ButtonBar/ButtonBar';
 
// Checkbox 
$checkbox-color: $c01;
$checkbox-unchecked-color: $c01-80;
$checkbox-hover-unchecked-color: $c01;
$checkbox-checked-color: $c-primary;
$checkbox-hover-checked-color: lighten($checkbox-checked-color, 10%);
$checkbox-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/Checkbox/Checkbox';
 
// Dropdown 
$dropdown-width: 100%;
$dropdown-border-color: $c02;
$dropdown-border-radius: $ui-border-radius;
$dropdown-closed-hover-background-color: $c01-10;
$dropdown-closed-disabled-color: $c01-30;
$dropdown-closed-readonly-color: $c01-10;
$dropdown-item-background-color: $c04;
$dropdown-item-border-color: $c13;
$dropdown-hover-item-background-color: lighten($dropdown-item-background-color, 10%);
$dropdown-focus-item-background-color: $c-primary;
$dropdown-focus-item-color: $c01;
$dropdown-hover-focus-item-background-color: lighten($dropdown-focus-item-background-color, 10%);
$dropdown-disabled-item-background-color: $c10;
$dropdown-disabled-item-color: $c18;
$dropdown-scrollbar-background-color: $c13;
$dropwdown-scrollbar-thumb-color: $c20;
@import '../../node_modules/pipe-components/src/components/Dropdown/Dropdown';
 
// Grid 
$grid-total-columns: 12;
@import '../../node_modules/pipe-components/src/components/Grid/Grid';
 
// Icon 
$icomoon-font-path: 'assets/fonts/';
@import '../../node_modules/pipe-components/src/components/Icon/Icon';
 
// Input 
$input-background-color: $c00;
$input-border-color: $c01-30;
$input-hover-background-color: $c01-10;
$input-hover-border-color: $c01-70;
$input-disabled-border-color: $c01-30;
$input-disabled-color: $c01-30;
$input-readonly-backround-color: $c01-10;
$input-readonly-border-color: $c00;
$input-focus-border-color: $c-primary;
@import '../../node_modules/pipe-components/src/components/Input/Input';
 
// Label 
@import '../../node_modules/pipe-components/src/components/Label/Label';
 
// LoadingSpinner 
$loading-spinner-background-color: $c21-60;
@import '../../node_modules/pipe-components/src/components/LoadingSpinner/LoadingSpinner';
 
// Modal 
$modal-background-color: $c21-60;
$modal-color: $base-font-color;
$modal-primary-action-background-color: $c-primary;
$modal-secondary-action-background-color: $c-secondary;
@import '../../node_modules/pipe-components/src/components/Modal/Modal';
 
// MonospaceString 
@import '../../node_modules/pipe-components/src/components/MonospaceString/MonospaceString';
 
// ProgressBar 
@import '../../node_modules/pipe-components/src/components/ProgressBar/ProgressBar';
 
// CircularProgress 
$circular-progress-background-color: $c01-80;
$circular-progress-color: $c-primary;
@import '../../node_modules/pipe-components/src/components/ProgressBar/CircularProgress/CircularProgress';
 
// LinearProgress 
$linear-progess-bar-height: $ui-grid-step;
$linear-progess-background-color: $c01-80;
$linear-progess-color: $c-primary;
$linear-progess-sub-color: $c-secondary;
@import '../../node_modules/pipe-components/src/components/ProgressBar/LinearProgress/LinearProgress';
 
// SliderBar 
$slider-bar-height: $ui-grid-step-x2;
$slider-bar-color: $c-primary;
$slider-bar-thumb-color: $c01-30;
$slider-bar-track-color: $c01-80;
$slider-bar-input-border-color: $c01-30;
$slider-bar-value-font-size: $default-font-size;
@import '../../node_modules/pipe-components/src/components/SliderBar/SliderBar';
 
// Snackbar 
$snackbar-max-width: 50%;
$snackbar-background-color: $c-primary;
$snackbar-distance-bottom: 4*$ui-grid-step;
$snackbar-distance-left: 5*$ui-grid-step;
@import '../../node_modules/pipe-components/src/components/Snackbar/Snackbar';
 
// ToggleSwitch 
$toggle-switch-background-color: $c01-80;
$toggle-switch-color: $c21;
$toggle-switch-active-color: $c-accent;
$toggle-switch-width: 7.5*$ui-grid-step;
$toggle-switch-height: 3.75*$ui-grid-step;
$toggle-switch-diameter: 2.5*$ui-grid-step;
$toggle-switch-distance-toggle-to-border: 0.625*$ui-grid-step;
@import '../../node_modules/pipe-components/src/components/ToggleSwitch/ToggleSwitch';