Skip to content

Commit 0eb1b0c

Browse files
iberdinsky-skillddawehner
iberdinsky-skilld
authored and
dawehner
committed
Added checkBox Component (#712)
1 parent 3876b96 commit 0eb1b0c

File tree

5 files changed

+238
-3
lines changed

5 files changed

+238
-3
lines changed

‎packages/components/src/Components/Button/Button.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import { css } from 'emotion';
44
import Button from '@material-ui/core/Button';
55

6-
import colors from '../../Utils/colors';
6+
import { colors } from '../../Utils/colors';
77

88
const styles = css`
99
padding: 1em 1.5em;

‎packages/components/src/Components/FormElements/InputCheckbox/InputCheckbox.js

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { css } from 'emotion';
4+
import { colors, formColors } from '../../../Utils/colors';
5+
6+
const styles = {
7+
checkbox: css`
8+
appearance: none;
9+
border: 1px solid ${formColors.colorInputBorder};
10+
width: 18px;
11+
height: 18px;
12+
background: ${formColors.colorInputBg};
13+
border-radius: 2px;
14+
box-shadow: 0 0 0 4px transparent;
15+
box-sizing: border-box;
16+
&:focus {
17+
box-shadow: 0 0 0 4px ${formColors.colorInputFocusShadow};
18+
outline: none;
19+
}
20+
&:hover {
21+
border-color: ${formColors.colorInputFg};
22+
box-shadow: inset 0 0 0 1px ${formColors.colorInputFg};
23+
}
24+
&:focus:hover {
25+
box-shadow: 0 0 0 4px ${formColors.colorInputFocusShadow},
26+
inset 0 0 0 1px ${formColors.colorInputFg};
27+
}
28+
&:checked {
29+
background-color: ${formColors.colorInputBorderFocus};
30+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
31+
background-position: center;
32+
background-repeat: no-repeat;
33+
background-size: 100% 100%;
34+
border-color: ${formColors.colorInputBorderFocus};
35+
}
36+
&:checked:focus {
37+
border-color: ${formColors.colorInputBorderFocus};
38+
box-shadow: 0 0 0 4px ${formColors.colorInputFocusShadow},
39+
inset 0 0 0 1px ${formColors.colorInputBorderFocus};
40+
}
41+
&:checked:hover {
42+
background-color: ${formColors.colorInputFg};
43+
border-color: ${formColors.colorInputFg};
44+
}
45+
`,
46+
checkboxWithError: css`
47+
background-color: ${formColors.colorInputBg};
48+
border-color: ${formColors.colorInputBorderError};
49+
box-shadow: inset 0 0 0 1px ${formColors.colorInputBorderError};
50+
&:hover {
51+
box-shadow: inset 0 0 0 1px ${formColors.colorInputBorderError};
52+
}
53+
&:focus:hover {
54+
box-shadow: 0 0 0 4px ${formColors.colorInputFocusShadow},
55+
inset 0 0 0 1px ${formColors.colorInputBorderError};
56+
}
57+
&:checked {
58+
background-color: ${formColors.colorInputBorderError};
59+
border-color: ${formColors.colorInputBorderError};
60+
}
61+
&:checked:focus {
62+
border-color: ${formColors.colorInputBorderError};
63+
box-shadow: inset 0 0 0 1px ${formColors.colorInputBorderError};
64+
}
65+
&:checked:hover {
66+
box-shadow: inset 0 0 0 1px ${formColors.colorInputBorderError};
67+
background-color: ${formColors.colorInputBorderError};
68+
border-color: ${formColors.colorInputBorderError};
69+
}
70+
&:checked:focus:hover {
71+
box-shadow: 0 0 0 4px ${formColors.colorInputFocusShadow},
72+
inset 0 0 0 1px ${formColors.colorInputBorderError};
73+
border-color: ${formColors.colorInputBorderError};
74+
}
75+
`,
76+
label: css`
77+
color: ${colors.text};
78+
`,
79+
labelRequired: css`
80+
:after {
81+
content: ' *';
82+
color: ${colors.maximumRed};
83+
}
84+
`,
85+
labelWithError: css`
86+
color: ${colors.maximumRed};
87+
`,
88+
};
89+
90+
/**
91+
* Renders an Input type checkbox.
92+
*
93+
* Example:
94+
*
95+
* @code
96+
* <InputCheckbox required={true}>Checkbox</InputCheckbox>
97+
* @endcode
98+
*/
99+
const InputCheckbox = props => {
100+
const {
101+
checked,
102+
children,
103+
error,
104+
required,
105+
htmlAttributes,
106+
onChange,
107+
} = props;
108+
const labelClasses = [styles.label];
109+
const cbClasses = [styles.checkbox];
110+
if (required) {
111+
labelClasses.push(styles.labelRequired);
112+
}
113+
if (error) {
114+
labelClasses.push(styles.labelWithError);
115+
cbClasses.push(styles.checkboxWithError);
116+
}
117+
118+
const inputId = `${props.fieldName}-cb`;
119+
120+
return (
121+
<label
122+
id={`${props.fieldName}-label`}
123+
htmlFor={inputId}
124+
className={css`
125+
${labelClasses}
126+
`}
127+
{...htmlAttributes}
128+
>
129+
<input
130+
type="checkbox"
131+
id={inputId}
132+
defaultChecked={checked}
133+
name={props.fieldName}
134+
className={css`
135+
${cbClasses}
136+
`}
137+
onChange={event => onChange(event.target.checked)}
138+
/>
139+
{children}
140+
</label>
141+
);
142+
};
143+
144+
InputCheckbox.propTypes = {
145+
children: PropTypes.oneOfType([
146+
PropTypes.arrayOf(PropTypes.node),
147+
PropTypes.node,
148+
]).isRequired,
149+
150+
error: PropTypes.bool,
151+
152+
htmlAttributes: PropTypes.objectOf([
153+
PropTypes.string,
154+
PropTypes.number,
155+
PropTypes.bool,
156+
]),
157+
158+
required: PropTypes.bool,
159+
};
160+
161+
InputCheckbox.defaultProps = {
162+
error: false,
163+
htmlAttributes: {},
164+
required: false,
165+
};
166+
167+
export default InputCheckbox;

‎packages/components/src/Components/FormElements/InputCheckbox/InputCheckbox.stories.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
import { storiesOf } from '@storybook/react';
4+
import { action } from '@storybook/addon-actions';
5+
import { boolean, object, text } from '@storybook/addon-knobs/react';
6+
import figmaDecorator from 'storybook-addon-figma';
7+
/* eslint-enable import/no-extraneous-dependencies */
8+
import InputCheckbox from './InputCheckbox';
9+
10+
/**
11+
* There is a known issue with addWithJSX and action() calls.
12+
*
13+
* https://github.com/storybooks/addon-jsx/issues/30
14+
*
15+
* To get both the logger to function while still pretty printing sample code
16+
* in the JSX tab a toSting() method must be provided.
17+
*/
18+
const onChangeAction = action('onChange');
19+
onChangeAction.toString = () => "action('onChange')";
20+
21+
storiesOf('FormElements/InputCheckbox', module)
22+
.addDecorator(
23+
figmaDecorator({
24+
url:
25+
'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=2061%3A2386',
26+
}),
27+
)
28+
.addWithJSX('Default', () => (
29+
<InputCheckbox
30+
checked={false}
31+
fieldName="ControlCheckbox"
32+
error={boolean('Checkbox: error', false)}
33+
required={boolean('Checkbox: required', false)}
34+
htmlAttributes={object('Checkbox: htmlAttributes', {
35+
'data-test': 'test',
36+
})}
37+
onChange={onChangeAction}
38+
>
39+
{text('Checkbox: label', 'Input Checkbox')}
40+
</InputCheckbox>
41+
))
42+
.addWithJSX('Checked', () => (
43+
<InputCheckbox
44+
checked
45+
fieldName="ControlCheckbox"
46+
error={boolean('Checkbox: error', false)}
47+
required={boolean('Checkbox: required', false)}
48+
htmlAttributes={object('Checkbox: htmlAttributes', {
49+
'data-test': 'test',
50+
})}
51+
onChange={onChangeAction}
52+
>
53+
{text('Checkbox: label', 'Input Checkbox')}
54+
</InputCheckbox>
55+
));

‎packages/components/src/Components/FormElements/Label.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { css } from 'emotion';
44

5-
import colors from '../../Utils/colors';
5+
import { colors } from '../../Utils/colors';
66

77
const styles = {
88
label: css`

‎packages/components/src/Utils/colors.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default {
1+
const colors = {
22
// Primary
33
absoluteZero: '#004ADC',
44
white: '#FFFFFF',
@@ -21,3 +21,16 @@ export default {
2121
bgRedHover: '#FDF5F5',
2222
bgRedActive: '#FCEDED',
2323
};
24+
25+
const formColors = {
26+
colorInputBg: colors.white,
27+
colorInputBorder: colors.grayBlue,
28+
colorInputBorderError: colors.maximumRed,
29+
colorInputBorderFocus: colors.absoluteZero,
30+
colorInputFg: colors.text,
31+
colorInputFocusShadow:
32+
'rgba(0, 74, 220, 0.3)' /* Absolute zero with opacity. */,
33+
};
34+
35+
export default colors;
36+
export { colors, formColors };

0 commit comments

Comments
 (0)