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

1import { 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

1import { Button } from 'pipe-components';

4. Create an index.scss file with following content

1/*
2* Component stylesheet imports and default style variables to overwrite
3*/
4
5// Button
6$button-color: $base-font-color;
7$button-background-color: $c-primary;
8$button-hover-background-color: lighten($button-background-color, 10%);
9$button-active-background-color: $c-secondary;
10$button-disabled-background-color: $c01-30;
11$button-hover-active-background-color: lighten($button-active-background-color, 5%);
12$button-border-radius: $ui-border-radius;
13@import '../../node_modules/pipe-components/src/components/Button/Button';
14
15// ButtonBar
16$button-bar-border-color: $c13;
17$button-bar-border-radius: $ui-border-radius;
18@import '../../node_modules/pipe-components/src/components/ButtonBar/ButtonBar';
19
20// Checkbox
21$checkbox-color: $c01;
22$checkbox-unchecked-color: $c01-80;
23$checkbox-hover-unchecked-color: $c01;
24$checkbox-checked-color: $c-primary;
25$checkbox-hover-checked-color: lighten($checkbox-checked-color, 10%);
26$checkbox-border-radius: $ui-border-radius;
27@import '../../node_modules/pipe-components/src/components/Checkbox/Checkbox';
28
29// Dropdown
30$dropdown-width: 100%;
31$dropdown-border-color: $c02;
32$dropdown-border-radius: $ui-border-radius;
33$dropdown-closed-hover-background-color: $c01-10;
34$dropdown-closed-disabled-color: $c01-30;
35$dropdown-closed-readonly-color: $c01-10;
36$dropdown-item-background-color: $c04;
37$dropdown-item-border-color: $c13;
38$dropdown-hover-item-background-color: lighten($dropdown-item-background-color, 10%);
39$dropdown-focus-item-background-color: $c-primary;
40$dropdown-focus-item-color: $c01;
41$dropdown-hover-focus-item-background-color: lighten($dropdown-focus-item-background-color, 10%);
42$dropdown-disabled-item-background-color: $c10;
43$dropdown-disabled-item-color: $c18;
44$dropdown-scrollbar-background-color: $c13;
45$dropwdown-scrollbar-thumb-color: $c20;
46@import '../../node_modules/pipe-components/src/components/Dropdown/Dropdown';
47
48// Grid
49$grid-total-columns: 12;
50@import '../../node_modules/pipe-components/src/components/Grid/Grid';
51
52// Icon
53$icomoon-font-path: 'assets/fonts/';
54@import '../../node_modules/pipe-components/src/components/Icon/Icon';
55
56// Input
57$input-background-color: $c00;
58$input-border-color: $c01-30;
59$input-hover-background-color: $c01-10;
60$input-hover-border-color: $c01-70;
61$input-disabled-border-color: $c01-30;
62$input-disabled-color: $c01-30;
63$input-readonly-backround-color: $c01-10;
64$input-readonly-border-color: $c00;
65$input-focus-border-color: $c-primary;
66@import '../../node_modules/pipe-components/src/components/Input/Input';
67
68// Label
69@import '../../node_modules/pipe-components/src/components/Label/Label';
70
71// LoadingSpinner
72$loading-spinner-background-color: $c21-60;
73@import '../../node_modules/pipe-components/src/components/LoadingSpinner/LoadingSpinner';
74
75// Modal
76$modal-background-color: $c21-60;
77$modal-color: $base-font-color;
78$modal-primary-action-background-color: $c-primary;
79$modal-secondary-action-background-color: $c-secondary;
80@import '../../node_modules/pipe-components/src/components/Modal/Modal';
81
82// MonospaceString
83@import '../../node_modules/pipe-components/src/components/MonospaceString/MonospaceString';
84
85// ProgressBar
86@import '../../node_modules/pipe-components/src/components/ProgressBar/ProgressBar';
87
88// CircularProgress
89$circular-progress-background-color: $c01-80;
90$circular-progress-color: $c-primary;
91@import '../../node_modules/pipe-components/src/components/ProgressBar/CircularProgress/CircularProgress';
92
93// LinearProgress
94$linear-progess-bar-height: $ui-grid-step;
95$linear-progess-background-color: $c01-80;
96$linear-progess-color: $c-primary;
97$linear-progess-sub-color: $c-secondary;
98@import '../../node_modules/pipe-components/src/components/ProgressBar/LinearProgress/LinearProgress';
99
100// SliderBar
101$slider-bar-height: $ui-grid-step-x2;
102$slider-bar-color: $c-primary;
103$slider-bar-thumb-color: $c01-30;
104$slider-bar-track-color: $c01-80;
105$slider-bar-input-border-color: $c01-30;
106$slider-bar-value-font-size: $default-font-size;
107@import '../../node_modules/pipe-components/src/components/SliderBar/SliderBar';
108
109// Snackbar
110$snackbar-max-width: 50%;
111$snackbar-background-color: $c-primary;
112$snackbar-distance-bottom: 4*$ui-grid-step;
113$snackbar-distance-left: 5*$ui-grid-step;
114@import '../../node_modules/pipe-components/src/components/Snackbar/Snackbar';
115
116// ToggleSwitch
117$toggle-switch-background-color: $c01-80;
118$toggle-switch-color: $c21;
119$toggle-switch-active-color: $c-accent;
120$toggle-switch-width: 7.5*$ui-grid-step;
121$toggle-switch-height: 3.75*$ui-grid-step;
122$toggle-switch-diameter: 2.5*$ui-grid-step;
123$toggle-switch-distance-toggle-to-border: 0.625*$ui-grid-step;
124@import '../../node_modules/pipe-components/src/components/ToggleSwitch/ToggleSwitch';