Merge branch 'master' of https://github.com/comicrelief/component-lib…

…rary into df_183_add_more_props_text_component
comicrelief · Jan 31, 2025 · edbf8f4 · edbf8f4
2 parents 925f753 + 2015c5c
commit edbf8f4
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 127 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -89,7 +89,7 @@ jobs:
 
       # Test run video was always captured, so this action uses "always()" condition
       - name: Upload videos
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
@@ -5,50 +5,67 @@ import styled from 'styled-components';
 import Text from '../Text/Text';
 import checkBoxIcon from './assets/tick.svg';
 
+// This label wraps both the input and the span that is the visual square checkbox you see */
+const Label = styled.label`
+  display: flex;
+  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
+  margin-bottom: 8px;
+  ${({ labelColour }) => labelColour && `color: ${labelColour};`}
+`;
+
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
-  font-size: ${({ theme }) => theme.fontSize('sm')};
-  display: block;
-  box-sizing: border-box;
-  opacity: 0;
-  position: absolute;
-  left: 0px;
-  width: 24px;
-  height: 24px;
+  /* This input is not visible */
+  width: 0;
+  height: 0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
+  /* This span is actually the visual square Checkbox you see */
   + span {
     margin-right: 12px;
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme }) => theme.color('white')};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
+    background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
+    border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
     float: left;
     flex-shrink: 0;
   }
+  /* Visual checkbox when ticked */
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme }) => theme.color('red')};
     background-size: contain;
+    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
+  /* Visual checkbox when focused */
   :focus + span {
-    border-color: ${({ theme }) => theme.color('red')};
-    border-width: 1px;
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
 `;
 
-const Label = styled.label`
-  display: flex;
-  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
-  margin-bottom: 8px;
-`;
-
 const Checkbox = React.forwardRef(({
-  label = undefined, value, children = undefined, ...rest
+  label = undefined,
+  value,
+  children = undefined,
+  labelColour,
+  checkboxBg,
+  checkboxBorder,
+  checkboxBgChecked,
+  checkboxBorderChecked,
+  ...rest
 }, ref) => (
-  <Label hasLabelAsString={!!label}>
-    <StyledCheckboxInput {...rest} value={value} ref={ref} />
+  <Label
+    hasLabelAsString={!!label}
+    labelColour={labelColour}
+  >
+    <StyledCheckboxInput
+      {...rest}
+      value={value}
+      ref={ref}
+      checkboxBg={checkboxBg}
+      checkboxBorder={checkboxBorder}
+      checkboxBgChecked={checkboxBgChecked}
+      checkboxBorderChecked={checkboxBorderChecked}
+    />
     <span />
     {label ? <Text weight="bold">{label}</Text> : children}
   </Label>
@@ -57,8 +74,13 @@ const Checkbox = React.forwardRef(({
 Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  children: PropTypes.node,
   label: PropTypes.string,
-  children: PropTypes.node
+  labelColour: PropTypes.string,
+  checkboxBg: PropTypes.string,
+  checkboxBorder: PropTypes.string,
+  checkboxBgChecked: PropTypes.string,
+  checkboxBorderChecked: PropTypes.string
 };
 
 export default Checkbox;
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
@@ -27,7 +27,16 @@ const LongLabel = () => (
     <Checkbox name="sport" value="Tennis" label="Tennis" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
+    <Checkbox
+        name="sport"
+        value="Football"
+        label="Tennis (with wacky styling to test props)"
+        labelColour="pink"
+        checkboxBg="red"
+        checkboxBorder="blue"
+        checkboxBgChecked="green"
+        checkboxBorderChecked="red"
+    />
     <br/>
     <p>A checkbox with a long label containing links</p>
     <Checkbox name="node_label" value="node_label">

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -22,16 +22,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -49,26 +55,13 @@ it('renders correctly', () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
 
     <label
@@ -98,16 +91,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -125,26 +124,13 @@ it('renders correctly', () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
 
     <label

diff --git a/src/components/Molecules/Logos/Logos.js → ...onents/Molecules/LogoLinked/LogoLinked.js b/src/components/Molecules/Logos/Logos.js → ...onents/Molecules/LogoLinked/LogoLinked.js
@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components';
 import Logo from '../../Atoms/Logo/Logo';
 
 const TitleLabel = styled.span`
-  line-height: 0; 
+  line-height: 0;
   font-size: 0;
-  color: transparent; 
+  color: transparent;
 `;
 
 const LogoLink = styled.a`
@@ -25,8 +25,8 @@ const LogoLink = styled.a`
   `}
 `;
 
-const Logos = ({
-  campaign = 'Comic Relief', animateRotate = false, sizeSm, sizeMd
+const LogoLinked = ({
+  campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', animateRotate = false, sizeSm, sizeMd
 }) => {
   if (campaign === 'Sport Relief Gameon') {
     return (
@@ -62,18 +62,19 @@ const Logos = ({
   }
 
   return (
-    <LogoLink href="/" title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-      <Logo rotate={false} campaign="Comic Relief" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
-      <TitleLabel>Go to Comic Relief homepage</TitleLabel>
+    <LogoLink href="/" title={title} animateRotate={animateRotate}>
+      <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
+      <TitleLabel>{title}</TitleLabel>
     </LogoLink>
   );
 };
 
-Logos.propTypes = {
+LogoLinked.propTypes = {
   campaign: PropTypes.string,
   animateRotate: PropTypes.bool,
+  title: PropTypes.string,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string
 };
 
-export default Logos;
+export default LogoLinked;
diff --git a/src/components/Molecules/LogoLinked/LogoLinked.md b/src/components/Molecules/LogoLinked/LogoLinked.md
@@ -0,0 +1,11 @@
+# Comic Relief Logo without animation
+
+```js
+<LogoLinked sizeSm="50px" sizeMd="60px" />
+```
+
+# Comic Relief Logo with hover animation and custom hovertext
+
+```js
+<LogoLinked animateRotate sizeSm="50px" title="I'm a custom title" sizeMd="60px" />
+```
diff --git a/src/components/Molecules/Logos/Logos.md b/src/components/Molecules/Logos/Logos.md