@comicrelief/component-library 8.18.0 → 8.18.2

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.
Files changed (13) hide show
  1. package/README.md +1 -1
  2. package/dist/components/Atoms/Checkbox/Checkbox.js +4 -1
  3. package/dist/components/Atoms/Checkbox/Checkbox.md +8 -7
  4. package/dist/components/Atoms/Checkbox/Checkbox.test.js +1 -1
  5. package/dist/components/Atoms/SocialIcons/Icon/Icon.js +1 -1
  6. package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js +1 -1
  7. package/package.json +1 -1
  8. package/playwright/components/atoms/checkbox.spec.js +2 -3
  9. package/src/components/Atoms/Checkbox/Checkbox.js +3 -0
  10. package/src/components/Atoms/Checkbox/Checkbox.md +8 -7
  11. package/src/components/Atoms/Checkbox/Checkbox.test.js +2 -0
  12. package/src/components/Atoms/SocialIcons/Icon/Icon.js +2 -2
  13. package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js +1 -1
package/README.md CHANGED
@@ -61,7 +61,7 @@ Install Playwright:
61
61
  yarn playwright install
62
62
  ```
63
63
 
64
- Run the tests
64
+ Run the tests:
65
65
  ```
66
66
  yarn test:e2e:local
67
67
  ```
package/dist/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -73,12 +73,15 @@ 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
+ name: name,
82
85
  value: value,
83
86
  ref: ref,
84
87
  checkboxBg: checkboxBg,
package/dist/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -24,13 +24,14 @@ const LongLabel = () => (
24
24
 
25
25
  <>
26
26
  <p>List of checkboxes</p>
27
- <Checkbox name="sport" value="Tennis" label="Tennis" />
28
- <Checkbox name="sport" value="Basketball" label="Basketball" />
29
- <Checkbox name="sport" value="Cycling" label="Cycling" />
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
- name="sport"
32
- value="Football"
33
- label="Tennis (with wacky styling to test props)"
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
  </>
package/dist/components/Atoms/Checkbox/Checkbox.test.js CHANGED
@@ -15,5 +15,5 @@ it('renders correctly', () => {
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=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\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 >\n <input\n className=\"c1\"\n name=\"sport\"\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 ");
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=\"sport\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\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=\"sport\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\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/dist/components/Atoms/SocialIcons/Icon/Icon.js CHANGED
@@ -20,7 +20,7 @@ const StyledLink = _styledComponents.default.a.withConfig({
20
20
  let {
21
21
  isHeader
22
22
  } = _ref;
23
- return isHeader && (0, _styledComponents.css)(["overflow:hidden;padding-right:0px;transition:padding-right ", "s cubic-bezier(0.5,1.5,0.5,0.75);&:hover,&:focus{opacity:1;}@media ", "{&:hover,&:focus{img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}@media ", "{&:hover,&:focus{padding-right:", "px;&[data-testid=\"header-esu\"]{padding-right:92px;}&[data-testid=\"header-shop\"]{padding-right:48px;}img + span{display:block;}}"], RevealTextSpeed, _ref2 => {
23
+ return isHeader && (0, _styledComponents.css)(["overflow:hidden;padding-right:0px;transition:padding-right ", "s cubic-bezier(0.5,1.5,0.5,0.75);&:hover,&:focus{opacity:1;}@media ", "{&:hover,&:focus{img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}@media ", "{&:hover,&:focus{padding-right:", "px;&[data-test=\"header-esu\"]{padding-right:92px;}&[data-test=\"header-shop\"]{padding-right:48px;}img + span{display:block;}}"], RevealTextSpeed, _ref2 => {
24
24
  let {
25
25
  theme
26
26
  } = _ref2;
package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js CHANGED
@@ -47,7 +47,7 @@ const MoreNavLabel = exports.MoreNavLabel = (0, _styledComponents.default)(_Text
47
47
  const MoreNavItem = exports.MoreNavItem = (0, _styledComponents.default)(_HeaderNav.NavItem).withConfig({
48
48
  displayName: "MoreNavstyle__MoreNavItem",
49
49
  componentId: "sc-68lngb-2"
50
- })(["@media ", "{margin-left:22px;display:flex;flex-grow:0.5;", " > ", "{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}:hover,:focus{", "{color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}:hover,:focus,:focus-within{> ", "{border-bottom:none;padding-bottom:10px;}> ", "{visibility:visible;opacity:1;display:flex;flex-direction:column;}}:focus{> ", "{visibility:hidden !important;opacity:0 !important;display:none !important;}}}@media ", "{margin-left:20px;}"], _ref6 => {
50
+ })(["@media ", "{margin-left:22px;display:flex;flex-grow:1;", " > ", "{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}:hover,:focus{", "{color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}:hover,:focus,:focus-within{> ", "{border-bottom:none;padding-bottom:10px;}> ", "{visibility:visible;opacity:1;display:flex;flex-direction:column;}}:focus{> ", "{visibility:hidden !important;opacity:0 !important;display:none !important;}}}@media ", "{margin-left:20px;}"], _ref6 => {
51
51
  let {
52
52
  theme
53
53
  } = _ref6;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.18.0",
4
+ "version": "8.18.2",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/playwright/components/atoms/checkbox.spec.js 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
package/src/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -59,14 +59,17 @@ 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
+ name={name}
70
73
  value={value}
71
74
  ref={ref}
72
75
  checkboxBg={checkboxBg}
package/src/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -24,13 +24,14 @@ const LongLabel = () => (
24
24
 
25
25
  <>
26
26
  <p>List of checkboxes</p>
27
- <Checkbox name="sport" value="Tennis" label="Tennis" />
28
- <Checkbox name="sport" value="Basketball" label="Basketball" />
29
- <Checkbox name="sport" value="Cycling" label="Cycling" />
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
- name="sport"
32
- value="Football"
33
- label="Tennis (with wacky styling to test props)"
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
  </>
package/src/components/Atoms/Checkbox/Checkbox.test.js CHANGED
@@ -73,6 +73,7 @@ it('renders correctly', () => {
73
73
 
74
74
  <label
75
75
  className="c0"
76
+ htmlFor="sport"
76
77
  >
77
78
  <input
78
79
  className="c1"
@@ -149,6 +150,7 @@ it('renders correctly', () => {
149
150
 
150
151
  <label
151
152
  className="c0"
153
+ htmlFor="sport"
152
154
  >
153
155
  <input
154
156
  className="c1"
package/src/components/Atoms/SocialIcons/Icon/Icon.js CHANGED
@@ -48,12 +48,12 @@ const StyledLink = styled.a`
48
48
  padding-right: ${RevealTextWidth}px;
49
49
 
50
50
  // Tweak for ESU's longer text:
51
- &[data-testid="header-esu"] {
51
+ &[data-test="header-esu"] {
52
52
  padding-right: 92px;
53
53
  }
54
54
 
55
55
  // Tweak for Shop's shorter text:
56
- &[data-testid="header-shop"] {
56
+ &[data-test="header-shop"] {
57
57
  padding-right: 48px;
58
58
  }
59
59
 
package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js CHANGED
@@ -59,7 +59,7 @@ const MoreNavItem = styled(NavItem)`
59
59
  margin-left: 22px;
60
60
  // Let it take up all the space to be a bigger target:
61
61
  display: flex;
62
- flex-grow: 0.5;
62
+ flex-grow: 1;
63
63
 
64
64
  // Chevron icon:
65
65
  ${MoreNavLabel} > ${ChevronWrapper} {