@comicrelief/component-library 8.83.1 → 8.84.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.83.1",
+  "version": "8.84.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [

package/src/App.styles.js

@@ -55,7 +55,7 @@ export const SidebarItem = styled.button`
 export const Preview = styled.main`
   flex: 1;
   overflow-y: auto;
-  padding: 2rem;
+  padding: ${import.meta.env.VITE_REMOVE_PADDING === 'true' ? '0' : '2rem'};
   background: ${color('grey_light')};
 `;
 
@@ -78,7 +78,7 @@ export const PreviewBox = styled.div`
   background: ${color('white')};
   border: 1px solid ${color('grey_medium')};
   border-radius: 6px;
-  padding: 2rem;
+  padding: ${import.meta.env.VITE_REMOVE_PADDING === 'true' ? '0' : '2rem'};
 `;
 
 export const Logo = styled.div`

package/src/components/Atoms/Button/Button.js

@@ -8,7 +8,9 @@ const Button = React.forwardRef(({
   children,
   color = 'red',
   icon = null,
-  iconDescription = 'Icon',
+  iconDescription = '',
+  iconLeft = false,
+  iconKey = '',
   wrapper = false,
   fullWidth = false,
   buttonType = buttonTypes.PRIMARY,
@@ -19,7 +21,6 @@ const Button = React.forwardRef(({
 
   return (
     <StyledButton
-      {...rest}
       as={wrapper ? 'span' : 'button'}
       ref={ref}
       $fullWidth={fullWidth}
@@ -27,6 +28,8 @@ const Button = React.forwardRef(({
       $buttonType={buttonType}
       data-testid="Button"
       $hasIcon={hasIcon}
+      $iconLeft={iconLeft}
+      {...rest}
     >
 
       {hasIcon
@@ -36,7 +39,12 @@ const Button = React.forwardRef(({
       }
 
       {hasIcon && (
-        <IconWrapper className="icon-wrapper">
+        <IconWrapper
+          // Allows us to force a re-render (to avoid flashing when switching img srcs)
+          // by passing a dynamically-set `iconKey` prop, based on when that src is switched:
+          key={`${children}-${iconKey}`}
+          className="icon-wrapper"
+        >
           {hasIconPath ? (
             <Picture
               image={icon}
@@ -63,6 +71,8 @@ Button.propTypes = {
     PropTypes.string
   ]),
   iconDescription: PropTypes.string,
+  iconLeft: PropTypes.bool,
+  iconKey: PropTypes.string,
   // Primary will the default for the vast majority of contexts; with
   // Secondary and Tertirary being manually set by developers where required
   buttonType: PropTypes.oneOf([

package/src/components/Atoms/Button/Button.style.js

@@ -51,7 +51,7 @@ const StyledButton = styled.button`
     width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
   }
 
-  ${({ $hasIcon }) => $hasIcon && css`
+  ${({ $hasIcon, $iconLeft }) => $hasIcon && css`
     display: inline-grid;
     grid-template-columns: 1fr repeat(1, auto) 1fr;
     grid-column-gap: 0.6rem;
@@ -74,6 +74,24 @@ const StyledButton = styled.button`
       // icon, to prevent silliness:
       height: calc(3rem - (var(--padding-top-and-bottom) * 2));
     }
+
+    ${($iconLeft && css`
+      > ${Copywrapper} {
+        order: 2;
+
+        ${({ $fullWidth }) => (!$fullWidth && css`
+          // Swap sides for the 'aesthetic rebalance' mentioned aobve:
+          padding-inline: 1.5rem 0;
+        `)};
+      }
+
+      > ${IconWrapper} {
+        // Place the icon before the copy in the Grid:
+        order: 1;
+        // Swap other alignment rule:
+        margin-inline: 0 auto;
+       }
+    `)};
   `}
 `;
 

package/src/components/Atoms/Button/Button.test.js

@@ -49,7 +49,7 @@ it('renders a standard styled link correctly', () => {
 
 .c0:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 @media (min-width: 740px) {

package/src/components/Atoms/Button/ButtonExample.jsx

@@ -154,6 +154,17 @@ export default function ButtonExample() {
         </Button>
       </ExampleContainer>
 
+      <ExampleContainer>
+        <Button
+          type="button"
+          icon={ButtonIconImgPath}
+          iconDescription="House with a heart-shaped window"
+          iconLeft
+        >
+          Button w/image URL for (left-aligned) icon
+        </Button>
+      </ExampleContainer>
+
       <ExampleContainer>
         <Button
           type="button"
@@ -224,6 +235,19 @@ export default function ButtonExample() {
         </Button>
       </ExampleContainer>
 
+      <ExampleContainer>
+        <Button
+          type="button"
+          icon={testSvgImg}
+          fullWidth
+          iconDescription="Phone icon"
+          color="blue"
+          iconLeft
+        >
+          Blue full-width Button w/svg URL, rendered as (left-aligned)
+        </Button>
+      </ExampleContainer>
+
       <br />
       <h3>Button variants with Icons</h3>
 

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -8,7 +8,7 @@ import Button from '../Button/Button';
 const ButtonWithDisabledState = styled(Button)`
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: 0.35;
   }
 `;
 

package/src/components/Atoms/Icons/Cross.js

@@ -10,7 +10,6 @@ const Icon = styled.svg`
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ $colour, theme }) => ($colour ? theme.color($colour) : theme.color('white'))};
   }
-
 `;
 
 const Cross = ({

package/src/components/Atoms/Icons/Download.js

@@ -4,11 +4,11 @@ import styled, { withTheme } from 'styled-components';
 
 const StyledSVG = styled.svg`
   // Mobile-colour if available, else use standard prop
-  fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
+  fill: ${({ $mobileColour, $colour, theme }) => ($mobileColour ? theme.color($mobileColour) : theme.color($colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
+    fill: ${({ $colour, theme }) => ($colour ? theme.color($colour) : theme.color('white'))};
   }
 `;
 
@@ -20,8 +20,8 @@ const Download = ({
     width={size}
     height={size}
     fill={theme.color(colour)}
-    colour={colour}
-    mobileColour={mobileColour}
+    $colour={colour}
+    $mobileColour={mobileColour}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 96 96"
   >

package/src/components/Atoms/Icons/External.js

@@ -4,11 +4,11 @@ import styled, { withTheme } from 'styled-components';
 
 const StyledSVG = styled.svg`
   // Mobile-colour if available, else use standard prop
-  fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
+  fill: ${({ $mobileColour, $colour, theme }) => ($mobileColour ? theme.color($mobileColour) : theme.color($colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
+    fill: ${({ $colour, theme }) => ($colour ? theme.color($colour) : theme.color('white'))};
   }
 `;
 
@@ -20,8 +20,8 @@ const External = ({
     width={size}
     height={size}
     fill={theme.color(colour)}
-    colour={colour}
-    mobileColour={mobileColour}
+    $colour={colour}
+    $mobileColour={mobileColour}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 96 96"
   >

package/src/components/Atoms/Icons/Filter.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+
+const Icon = styled.svg`
+  // Mobile-colour if available, else use standard prop
+  fill: ${({ $mobileColour, $colour, theme }) => ($mobileColour ? theme.color($mobileColour) : theme.color($colour))};
+
+  // Reinstate standard styles for 'desktop', adding a fallback for good measure:
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    fill: ${({ $colour, theme }) => ($colour ? theme.color($colour) : theme.color('white'))};
+  }
+`;
+
+const Filter = ({
+  colour = 'black',
+  mobileColour = null,
+  theme,
+  size = 24,
+  ...rest
+}) => (
+  <Icon
+    width={size}
+    height={size}
+    $colour={colour}
+    $mobileColour={mobileColour}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 17 17"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_2092_16160)">
+      <path d="M0.515625 2.90892H8.36618C8.60278 3.9859 9.56455 4.79443 10.7116 4.79443C11.8586 4.79443 12.8203 3.98593 13.0569 2.90892H15.9844C16.2691 2.90892 16.5 2.67805 16.5 2.39329C16.5 2.10854 16.2691 1.87767 15.9844 1.87767H13.0567C12.8196 0.801235 11.8565 -0.0078125 10.7116 -0.0078125C9.56597 -0.0078125 8.60333 0.801107 8.36637 1.87767H0.515625C0.230871 1.87767 0 2.10854 0 2.39329C0 2.67805 0.230871 2.90892 0.515625 2.90892ZM9.34174 2.39465C9.34174 2.39281 9.34177 2.39094 9.34177 2.3891C9.34403 1.63606 9.95849 1.02347 10.7116 1.02347C11.4636 1.02347 12.0781 1.63523 12.0813 2.38791L12.0814 2.39548C12.0802 3.14981 11.4662 3.76321 10.7116 3.76321C9.95727 3.76321 9.34342 3.15042 9.34171 2.39655L9.34174 2.39465ZM15.9844 13.5914H13.0567C12.8196 12.515 11.8565 11.7059 10.7116 11.7059C9.56597 11.7059 8.60333 12.5149 8.36637 13.5914H0.515625C0.230871 13.5914 0 13.8222 0 14.107C0 14.3918 0.230871 14.6227 0.515625 14.6227H8.36618C8.60278 15.6996 9.56455 16.5082 10.7116 16.5082C11.8586 16.5082 12.8203 15.6996 13.0569 14.6227H15.9844C16.2691 14.6227 16.5 14.3918 16.5 14.107C16.5 13.8222 16.2691 13.5914 15.9844 13.5914ZM10.7116 15.4769C9.95727 15.4769 9.34342 14.8641 9.34171 14.1103L9.34174 14.1084C9.34174 14.1065 9.34177 14.1047 9.34177 14.1028C9.34403 13.3498 9.95849 12.7372 10.7116 12.7372C11.4636 12.7372 12.0781 13.3489 12.0813 14.1016L12.0814 14.1092C12.0803 14.8636 11.4662 15.4769 10.7116 15.4769ZM15.9844 7.73455H8.13382C7.89722 6.65758 6.93545 5.84908 5.78844 5.84908C4.64143 5.84908 3.67966 6.65758 3.44305 7.73455H0.515625C0.230871 7.73455 0 7.96543 0 8.25018C0 8.53497 0.230871 8.7658 0.515625 8.7658H3.44331C3.6804 9.8422 4.64346 10.6513 5.78844 10.6513C6.93403 10.6513 7.89667 9.84233 8.13363 8.7658H15.9844C16.2691 8.7658 16.5 8.53497 16.5 8.25018C16.5 7.96543 16.2691 7.73455 15.9844 7.73455ZM7.15826 8.24883C7.15826 8.2507 7.15823 8.25253 7.15823 8.25437C7.15597 9.00741 6.54151 9.62 5.78844 9.62C5.03643 9.62 4.42194 9.00824 4.41868 8.25559L4.41858 8.24805C4.41971 7.49363 5.03379 6.88033 5.78844 6.88033C6.54273 6.88033 7.15658 7.49308 7.15829 8.24699L7.15826 8.24883Z" fill={colour} />
+    </g>
+    <defs>
+      <clipPath id="clip0_2092_16160">
+        <rect width={size} height={size} fill={colour} />
+      </clipPath>
+    </defs>
+  </Icon>
+);
+
+Filter.propTypes = {
+  colour: PropTypes.string,
+  mobileColour: PropTypes.string,
+  size: PropTypes.number,
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  theme: PropTypes.objectOf(PropTypes.shape).isRequired
+};
+
+export default withTheme(Filter);

package/src/components/Atoms/Icons/IconsExample.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Arrow, AtSign, Chevron, CtaArrow, Download, External, Favourite, Internal, Post } from './index';
+import {
+  Arrow, AtSign, Chevron, CtaArrow, Download, External, Favourite, Internal, Post, Filter, Undo
+} from './index';
 import Cross from './Cross';
 import Curve from './Curve';
 import { ExampleContainer } from '../../../demos/SharedStyles';
@@ -21,12 +23,12 @@ const IconCard = styled.div`
   border: 1px solid #e1e2e3;
   border-radius: 6px;
   min-width: 100px;
-  background: ${({ dark }) => dark ? '#222' : '#fff'};
+  background: ${({ $dark }) => ($dark ? '#222' : '#fff')};
 `;
 
 const Name = styled.p`
   font-size: 0.75rem;
-  color: ${({ dark }) => dark ? '#fff' : '#333'};
+  color: ${({ $dark }) => ($dark ? '#fff' : '#333')};
   margin: 0;
   text-align: center;
 `;
@@ -49,6 +51,8 @@ export default function IconsExample() {
             ['AtSign', <AtSign size={48} colour="black" />],
             ['Cross', <Cross size={48} colour="black" />],
             ['Post', <Post size={48} colour="black" />],
+            ['Filter', <Filter size={48} colour="black" />],
+            ['Undo', <Undo size={48} colour="black" />]
           ].map(([name, icon]) => (
             <IconCard key={name}>
               {icon}
@@ -86,9 +90,9 @@ export default function IconsExample() {
         <h3>CtaArrow — directions</h3>
         <Grid>
           {directions.map(dir => (
-            <IconCard key={dir} dark>
+            <IconCard key={dir} $dark>
               <CtaArrow size={48} colour="red" direction={dir} />
-              <Name dark>{dir}</Name>
+              <Name $dark>{dir}</Name>
             </IconCard>
           ))}
         </Grid>

package/src/components/Atoms/Icons/Undo.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+
+const Icon = styled.svg`
+  // Mobile-colour if available, else use standard prop
+  fill: ${({ $mobileColour, $colour, theme }) => ($mobileColour ? theme.color($mobileColour) : theme.color($colour))};
+
+  // Reinstate standard styles for 'desktop', adding a fallback for good measure:
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    fill: ${({ $colour, theme }) => ($colour ? theme.color($colour) : theme.color('white'))};
+  }
+`;
+
+const Undo = ({
+  colour = 'black',
+  mobileColour = null,
+  theme,
+  size = 24,
+  ...rest
+}) => (
+  <Icon
+    width={size}
+    height={size}
+    $colour={colour}
+    $mobileColour={mobileColour}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    {...rest}
+  >
+    <path d="M7.5 6.75H3.75C3.3 6.75 3 6.45 3 6V2.25C3 1.8 3.3 1.5 3.75 1.5C4.2 1.5 4.5 1.8 4.5 2.25V5.25H7.5C7.95 5.25 8.25 5.55 8.25 6C8.25 6.45 7.95 6.75 7.5 6.75Z" fill={colour} />
+    <path d="M8.99844 15.7499C8.17344 15.7499 7.34844 15.5999 6.59844 15.2999C5.24844 14.7749 4.12344 13.8749 3.29844 12.6749C3.07344 12.2999 3.14844 11.8499 3.52344 11.6249C3.89844 11.3999 4.34844 11.4749 4.57344 11.8499C5.17344 12.7499 6.07344 13.4999 7.12344 13.8749C8.17344 14.2499 9.29844 14.3249 10.4234 14.0249C11.4734 13.7249 12.4484 13.0499 13.1234 12.1499C13.7984 11.2499 14.1734 10.1999 14.2484 9.0749C14.2484 7.9499 13.9484 6.8249 13.2734 5.9249C12.5984 5.0249 11.6984 4.3499 10.6484 3.9749C9.59844 3.5999 8.47344 3.5999 7.34844 3.9749C6.29844 4.3499 5.39844 5.0249 4.72344 5.9249C4.49844 6.2999 4.04844 6.3749 3.67344 6.1499C3.29844 5.9249 3.22344 5.3999 3.52344 5.0999C4.34844 3.8999 5.54844 2.9999 6.89844 2.5499C8.24844 2.0999 9.74844 2.0999 11.0984 2.5499C12.4484 2.9999 13.6484 3.8999 14.4734 5.0999C15.2984 6.2999 15.7484 7.6499 15.6734 9.1499C15.6734 10.5749 15.1484 11.9999 14.2484 13.1249C13.3484 14.2499 12.1484 15.0749 10.7234 15.5249C10.2734 15.6749 9.59844 15.7499 8.99844 15.7499Z" fill={colour} />
+  </Icon>
+);
+
+Undo.propTypes = {
+  colour: PropTypes.string,
+  mobileColour: PropTypes.string,
+  size: PropTypes.number,
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  theme: PropTypes.objectOf(PropTypes.shape).isRequired
+};
+
+export default withTheme(Undo);

package/src/components/Atoms/Icons/index.js

@@ -7,3 +7,5 @@ export { default as Arrow } from './Arrow';
 export { default as AtSign } from './AtSign';
 export { default as CtaArrow } from './CtaArrow';
 export { default as Post } from './Post';
+export { default as Filter } from './Filter';
+export { default as Undo } from './Undo';

package/src/components/Atoms/Link/Link.test.js

@@ -218,7 +218,7 @@ it('renders link styled as button correctly', () => {
 
 .c0:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 @media (min-width: 740px) {

package/src/components/Atoms/Link/LinkExample.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Link from './Link';
 import buttonTypes from '../../../theme/crTheme/buttonTypes';
-import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from '../Icons/index';
+import {
+  External, Download, Favourite, Internal, Chevron, Arrow, AtSign
+} from '../Icons/index';
 import { ExampleContainer } from '../../../demos/SharedStyles';
 
 export default function LinkExample() {
@@ -106,7 +108,7 @@ export default function LinkExample() {
           href="#anchor"
           target="blank"
           type="button"
-          icon={<Internal colour="white" mobileColour="red"/>}
+          icon={<Internal colour="white" mobileColour="red" />}
         >
           Internal link, 'blue' with red icon on tablet and mobile
         </Link>