@comicrelief/component-library 8.18.1 → 8.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/Atoms/Checkbox/Checkbox.js +5 -1
- package/dist/components/Atoms/Checkbox/Checkbox.md +8 -7
- package/dist/components/Atoms/Checkbox/Checkbox.test.js +5 -5
- package/package.json +1 -1
- package/playwright/components/atoms/checkbox.spec.js +2 -3
- package/src/components/Atoms/Checkbox/Checkbox.js +4 -0
- package/src/components/Atoms/Checkbox/Checkbox.md +8 -7
- package/src/components/Atoms/Checkbox/Checkbox.test.js +10 -6
package/README.md
CHANGED
|
@@ -73,12 +73,16 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
|
|
|
73
73
|
checkboxBgChecked,
|
|
74
74
|
checkboxBorderChecked,
|
|
75
75
|
checkboxBorderFocus,
|
|
76
|
+
name,
|
|
76
77
|
...rest
|
|
77
78
|
} = _ref8;
|
|
78
79
|
return /*#__PURE__*/_react.default.createElement(Label, {
|
|
79
80
|
hasLabelAsString: !!label,
|
|
80
|
-
labelColour: labelColour
|
|
81
|
+
labelColour: labelColour,
|
|
82
|
+
htmlFor: name
|
|
81
83
|
}, /*#__PURE__*/_react.default.createElement(StyledCheckboxInput, Object.assign({}, rest, {
|
|
84
|
+
id: rest.id || name,
|
|
85
|
+
name: name,
|
|
82
86
|
value: value,
|
|
83
87
|
ref: ref,
|
|
84
88
|
checkboxBg: checkboxBg,
|
|
@@ -24,13 +24,14 @@ const LongLabel = () => (
|
|
|
24
24
|
|
|
25
25
|
<>
|
|
26
26
|
<p>List of checkboxes</p>
|
|
27
|
-
<Checkbox name="
|
|
28
|
-
<Checkbox name="
|
|
29
|
-
<Checkbox name="
|
|
27
|
+
<Checkbox id="sport1" name="sport1" value="Tennis" label="Tennis" />
|
|
28
|
+
<Checkbox id="sport2" name="sport2" value="Basketball" label="Basketball" />
|
|
29
|
+
<Checkbox id="sport3" name="sport3" value="Cycling" label="Cycling" />
|
|
30
30
|
<Checkbox
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
id="sport4"
|
|
32
|
+
name="sport4"
|
|
33
|
+
value="Football (with wacky styling to test props)"
|
|
34
|
+
label="Football (with wacky styling to test props)"
|
|
34
35
|
labelColour="purple_dark"
|
|
35
36
|
checkboxBg="white"
|
|
36
37
|
checkboxBorder="black"
|
|
@@ -40,7 +41,7 @@ const LongLabel = () => (
|
|
|
40
41
|
/>
|
|
41
42
|
<br/>
|
|
42
43
|
<p>A checkbox with a long label containing links</p>
|
|
43
|
-
<Checkbox name="node_label" value="node_label">
|
|
44
|
+
<Checkbox id="node_label" name="node_label" value="node_label">
|
|
44
45
|
<LongLabel />
|
|
45
46
|
</Checkbox>
|
|
46
47
|
</>
|
|
@@ -7,13 +7,13 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/sh
|
|
|
7
7
|
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
8
8
|
it('renders correctly', () => {
|
|
9
9
|
const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
|
|
10
|
-
name: "
|
|
11
|
-
value: "
|
|
12
|
-
label: "
|
|
10
|
+
name: "sport1",
|
|
11
|
+
value: "Tennis",
|
|
12
|
+
label: "Tennis"
|
|
13
13
|
}), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
|
|
14
|
-
name: "
|
|
14
|
+
name: "sport2",
|
|
15
15
|
value: "Handball",
|
|
16
16
|
label: "Handball"
|
|
17
17
|
}))).toJSON();
|
|
18
|
-
expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"
|
|
18
|
+
expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"sport1\"\n >\n <input\n className=\"c1\"\n id=\"sport1\"\n name=\"sport1\"\n type=\"checkbox\"\n value=\"Tennis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tennis\n </span>\n </label>,\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"sport2\"\n >\n <input\n className=\"c1\"\n id=\"sport2\"\n name=\"sport2\"\n type=\"checkbox\"\n value=\"Handball\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Handball\n </span>\n </label>,\n ]\n ");
|
|
19
19
|
});
|
package/package.json
CHANGED
|
@@ -2,7 +2,6 @@ const { test, expect } = require('@playwright/test');
|
|
|
2
2
|
|
|
3
3
|
test.describe('checkbox', () => {
|
|
4
4
|
test('checkbox component', async ({ page }) => {
|
|
5
|
-
|
|
6
5
|
await page.goto('/#checkbox');
|
|
7
6
|
|
|
8
7
|
// checkbox component should be visible
|
|
@@ -27,7 +26,7 @@ test.describe('checkbox', () => {
|
|
|
27
26
|
|
|
28
27
|
// football checkbox
|
|
29
28
|
await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
|
|
30
|
-
await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
|
|
29
|
+
await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football (with wacky styling to test props)');
|
|
31
30
|
expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeTruthy();
|
|
32
31
|
|
|
33
32
|
// terms and conditions
|
|
@@ -52,7 +51,7 @@ test.describe('checkbox', () => {
|
|
|
52
51
|
|
|
53
52
|
// football checkbox
|
|
54
53
|
await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
|
|
55
|
-
await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
|
|
54
|
+
await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football (with wacky styling to test props)');
|
|
56
55
|
expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeFalsy();
|
|
57
56
|
|
|
58
57
|
// terms and conditions
|
|
@@ -59,14 +59,18 @@ const Checkbox = React.forwardRef(({
|
|
|
59
59
|
checkboxBgChecked,
|
|
60
60
|
checkboxBorderChecked,
|
|
61
61
|
checkboxBorderFocus,
|
|
62
|
+
name,
|
|
62
63
|
...rest
|
|
63
64
|
}, ref) => (
|
|
64
65
|
<Label
|
|
65
66
|
hasLabelAsString={!!label}
|
|
66
67
|
labelColour={labelColour}
|
|
68
|
+
htmlFor={name}
|
|
67
69
|
>
|
|
68
70
|
<StyledCheckboxInput
|
|
69
71
|
{...rest}
|
|
72
|
+
id={rest.id || name}
|
|
73
|
+
name={name}
|
|
70
74
|
value={value}
|
|
71
75
|
ref={ref}
|
|
72
76
|
checkboxBg={checkboxBg}
|
|
@@ -24,13 +24,14 @@ const LongLabel = () => (
|
|
|
24
24
|
|
|
25
25
|
<>
|
|
26
26
|
<p>List of checkboxes</p>
|
|
27
|
-
<Checkbox name="
|
|
28
|
-
<Checkbox name="
|
|
29
|
-
<Checkbox name="
|
|
27
|
+
<Checkbox id="sport1" name="sport1" value="Tennis" label="Tennis" />
|
|
28
|
+
<Checkbox id="sport2" name="sport2" value="Basketball" label="Basketball" />
|
|
29
|
+
<Checkbox id="sport3" name="sport3" value="Cycling" label="Cycling" />
|
|
30
30
|
<Checkbox
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
id="sport4"
|
|
32
|
+
name="sport4"
|
|
33
|
+
value="Football (with wacky styling to test props)"
|
|
34
|
+
label="Football (with wacky styling to test props)"
|
|
34
35
|
labelColour="purple_dark"
|
|
35
36
|
checkboxBg="white"
|
|
36
37
|
checkboxBorder="black"
|
|
@@ -40,7 +41,7 @@ const LongLabel = () => (
|
|
|
40
41
|
/>
|
|
41
42
|
<br/>
|
|
42
43
|
<p>A checkbox with a long label containing links</p>
|
|
43
|
-
<Checkbox name="node_label" value="node_label">
|
|
44
|
+
<Checkbox id="node_label" name="node_label" value="node_label">
|
|
44
45
|
<LongLabel />
|
|
45
46
|
</Checkbox>
|
|
46
47
|
</>
|
|
@@ -6,8 +6,8 @@ import Checkbox from './Checkbox';
|
|
|
6
6
|
it('renders correctly', () => {
|
|
7
7
|
const tree = renderWithTheme(
|
|
8
8
|
<>
|
|
9
|
-
<Checkbox name="
|
|
10
|
-
<Checkbox name="
|
|
9
|
+
<Checkbox name="sport1" value="Tennis" label="Tennis" />
|
|
10
|
+
<Checkbox name="sport2" value="Handball" label="Handball" />
|
|
11
11
|
</>
|
|
12
12
|
).toJSON();
|
|
13
13
|
|
|
@@ -73,12 +73,14 @@ it('renders correctly', () => {
|
|
|
73
73
|
|
|
74
74
|
<label
|
|
75
75
|
className="c0"
|
|
76
|
+
htmlFor="sport1"
|
|
76
77
|
>
|
|
77
78
|
<input
|
|
78
79
|
className="c1"
|
|
79
|
-
|
|
80
|
+
id="sport1"
|
|
81
|
+
name="sport1"
|
|
80
82
|
type="checkbox"
|
|
81
|
-
value="
|
|
83
|
+
value="Tennis"
|
|
82
84
|
/>
|
|
83
85
|
<span />
|
|
84
86
|
<span
|
|
@@ -86,7 +88,7 @@ it('renders correctly', () => {
|
|
|
86
88
|
color="inherit"
|
|
87
89
|
size="s"
|
|
88
90
|
>
|
|
89
|
-
|
|
91
|
+
Tennis
|
|
90
92
|
</span>
|
|
91
93
|
</label>,
|
|
92
94
|
.c2 {
|
|
@@ -149,10 +151,12 @@ it('renders correctly', () => {
|
|
|
149
151
|
|
|
150
152
|
<label
|
|
151
153
|
className="c0"
|
|
154
|
+
htmlFor="sport2"
|
|
152
155
|
>
|
|
153
156
|
<input
|
|
154
157
|
className="c1"
|
|
155
|
-
|
|
158
|
+
id="sport2"
|
|
159
|
+
name="sport2"
|
|
156
160
|
type="checkbox"
|
|
157
161
|
value="Handball"
|
|
158
162
|
/>
|