pipe-components v0.1.23

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';

6. 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';

4. 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';