@comicrelief/component-library 8.48.2 → 8.49.1

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

@@ -1,43 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import spacing from '../../../theme/shared/spacing';
-
-const StyledButton = styled.button`
-  display: inline-flex;
-  position: relative;
-  padding: 0.5rem 1.25rem;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  border-radius: 2rem;
-  transition: all 0.3s;
-  height: 3.125rem;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  > a {
-    text-decoration: none;
-  }
-  ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-  }
-
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-    padding: ${spacing('md')} ${spacing('l')};
-    margin: 0 auto ${spacing('l')};
-  }
-`;
+import StyledButton from './Button.style';
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
 
 const Button = React.forwardRef(({
-  children, wrapper = false, fullWidth = false, ...rest
+  children,
+  color = 'red',
+  wrapper = false,
+  fullWidth = false,
+  buttonType = buttonTypes.PRIMARY,
+  ...rest
 }, ref) => (
-  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} fullWidth={fullWidth}>
+  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} fullWidth={fullWidth} color={color} buttonType={buttonType}>
     {children}
   </StyledButton>
 ));
@@ -45,7 +19,15 @@ const Button = React.forwardRef(({
 Button.propTypes = {
   children: PropTypes.node.isRequired,
   wrapper: PropTypes.bool, // Buttons as span
-  fullWidth: PropTypes.bool
+  fullWidth: PropTypes.bool,
+  color: 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([
+    buttonTypes.PRIMARY,
+    buttonTypes.SECONDARY,
+    buttonTypes.TERTIARY
+  ])
 };
 
 export default Button;

package/src/components/Atoms/Button/Button.md

@@ -1,5 +1,95 @@
 ```js
-<Button type="button">My button</Button>
+
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
+
+<>
+    <h1>Primary</h1>
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button">Primary red button (default)</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" disabled>Primary red button (default): disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black">Primary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" disabled>Primary black button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white">Primary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" disabled>Primary white button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="non-existent-colour">Using a non-existent colour will default to red</Button>
+    </div>
+
+    <br/>
+    <h1>Secondary</h1>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.SECONDARY}>Secondary red button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.SECONDARY} disabled>Secondary red button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.SECONDARY}>Secondary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.SECONDARY} disabled>Secondary black button: disabled</Button>
+    </div>
+
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.SECONDARY} buttonType={buttonTypes.SECONDARY}>Secondary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.SECONDARY} disabled>Secondary white button: disabled</Button>
+    </div>
+
+    <br/>
+    <h1>Teritary</h1>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.TERTIARY}>Tertiary red button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" buttonType={buttonTypes.TERTIARY} disabled>Tertiary red button: disabled</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.TERTIARY}>Tertiary black button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="black" buttonType={buttonTypes.TERTIARY} disabled>Tertiary black button: disabled</Button>
+    </div>
+
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.TERTIARY} buttonType={buttonTypes.TERTIARY}>Tertiary white button</Button>
+    </div>
+
+    <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+        <Button type="button" color="white" buttonType={buttonTypes.TERTIARY} disabled>Tertiary white button: disabled</Button>
+    </div>
+</>
+
+
 ```
 
 ```js

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

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import fontHelper from '../../../theme/crTheme/fontHelper';
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  position: relative;
+  text-decoration: none;
+  transition: all 0.2s;
+  height: 2.5rem;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+
+  > a {
+    text-decoration: none;
+  }
+
+  ${({ color, theme, buttonType }) => (theme.buttonColors(color, buttonType))};
+
+  ${({ theme }) => css`${fontHelper(theme, 'button')}`}
+  
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    // I don't *believe* this needs to be reinstated, but leaving in
+    // place for now, just to avoid breaking anything downstream...
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  }
+`;
+
+export default StyledButton;

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

@@ -1,9 +1,9 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Button from "./Button";
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Button from './Button';
 
-it("renders a standard styled link correctly", () => {
+it('renders a standard styled link correctly', () => {
   const tree = renderWithTheme(
     <Button type="submit">A standard link</Button>
   ).toJSON();
@@ -15,15 +15,11 @@ it("renders a standard styled link correctly", () => {
       display: -ms-inline-flexbox;
       display: inline-flex;
       position: relative;
-      padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      font-weight: 700;
-      font-size: 1rem;
-      border-radius: 2rem;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      height: 3.125rem;
+      -webkit-transition: all 0.2s;
+      transition: all 0.2s;
+      height: 2.5rem;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
@@ -35,8 +31,19 @@ it("renders a standard styled link correctly", () => {
       align-items: center;
       border: none;
       cursor: pointer;
+      padding: 0.6rem 1rem;
+      border-radius: 0.5rem;
       background-color: #E52630;
       color: #FFFFFF;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 700;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c0 > a {
@@ -44,9 +51,31 @@ it("renders a standard styled link correctly", () => {
       text-decoration: none;
     }
 
-    .c0:hover {
+    .c0:hover,
+    .c0:focus,
+    .c0:focus-within,
+    .c0:focus-visible {
       background-color: #890B11;
-      color: #FFFFFF;
+      outline-offset: 3px;
+    }
+
+    .c0:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
     }
 
     @media (min-width:740px) {
@@ -58,13 +87,12 @@ it("renders a standard styled link correctly", () => {
     @media (min-width:1024px) {
       .c0 {
         width: auto;
-        padding: 1rem 2rem;
-        margin: 0 auto 2rem;
       }
     }
 
     <button
       className="c0"
+      color="red"
       type="submit"
     >
       A standard link

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.75;
+    opacity: 0.5;
   }
 `;
 

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

@@ -4,21 +4,23 @@ import PropTypes from 'prop-types';
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
 import allowListed from '../../../utils/allowListed';
 import { getDomain } from '../../../utils/internalLinkHelper';
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
 
 let window = '';
 
 const Link = ({
+  href,
   children,
   color = 'red',
-  mobileColour = null,
-  href,
-  target = null,
   type = 'standard',
   home = false,
   underline = true,
-  icon = null,
   iconFirst = false,
   fullWidth = false,
+  buttonType = buttonTypes.PRIMARY,
+  target = null,
+  mobileColour = null,
+  icon = null,
   ...rest
 }) => {
   const [documentHost, setDocumentHost] = useState('');
@@ -64,6 +66,7 @@ const Link = ({
       iconFirst={iconFirst}
       underline={underline}
       fullWidth={fullWidth}
+      buttonType={buttonType}
     >
       {children}
       {window === '_blank' && <HelperText>(opens in new window)</HelperText>}
@@ -90,7 +93,14 @@ Link.propTypes = {
   iconFirst: PropTypes.bool,
   /** Embed icons */
   icon: PropTypes.node,
-  fullWidth: PropTypes.bool
+  fullWidth: PropTypes.bool,
+  // Primary will the default for the vast majority of contexts; with
+  // Secondary and Tertirary being manually set by developers where required
+  buttonType: PropTypes.oneOf([
+    buttonTypes.PRIMARY,
+    buttonTypes.SECONDARY,
+    buttonTypes.TERTIARY
+  ])
 };
 
 export default Link;

package/src/components/Atoms/Link/Link.md

@@ -1,28 +1,23 @@
 ```js
 import { External, Download, Favourite, Internal } from '../Icons/index';
+
 <div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link href="#anchor" target="blank" type="standard">
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link href="#anchor" target="blank">
       Link standard
     </Link>
   </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       href="#anchor"
       target="blank"
-      type="standard"
       icon={<Download colour="black" />}
     >
       Link standard icon
     </Link>
   </div>
   <div
-    style={{
-      display: 'block',
-      padding: '10px',
-      marginBottom: '10px',
-      backgroundColor: '#000'
-    }}
+    style={{backgroundColor:"#000", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}
   >
     <Link href="#anchor" type="standard_white">
       Link standard white
@@ -31,13 +26,78 @@ import { External, Download, Favourite, Internal } from '../Icons/index';
 </div>;
 ```
 
-## Iconography
+```js
+
+import buttonTypes from '../../../theme/crTheme/buttonTypes';
+
+<div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="#anchor" target="self" type="button">
+      Link as button
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="/test" target="self" type="button">
+      Link as button
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="yellow" href="/test" target="blank" type="button">
+      Link as button
+    </Link>
+  </div>
+
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="#anchor" target="self" type="button" buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="/test" target="self" type="button"buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="white" href="/test" target="blank" type="button" buttonType={buttonTypes.SECONDARY}>
+      Link as button (secondary)
+    </Link>
+  </div>
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="red" href="#anchor" target="self" type="button" buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="black" href="/test" target="self" type="button"buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+  <div style={{backgroundColor:"#222222", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+    <Link color="white" href="/test" target="blank" type="button" buttonType={buttonTypes.TERTIARY}>
+      Link as button (tertiary)
+    </Link>
+  </div>
+
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
+
+    <div style={{ display: 'block', marginTop: '10px' }}>
+      <Link color="red" href="/test" target="blank" type="button" fullWidth>
+        Link as full-width red button
+      </Link>
+    </div>
+  </div>
+</div>
+```
+
 
+## Iconography
 ```js
 import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from '../Icons/index';
 
 <div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       mobileColour="blue"
@@ -50,7 +110,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="blue"
       mobileColour="black"
@@ -63,7 +123,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -75,7 +135,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -87,7 +147,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-    <div style={{ display: 'block', marginBottom: '10px' }}>
+    <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -99,7 +159,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -111,7 +171,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -123,7 +183,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -135,7 +195,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -148,7 +208,7 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
     </Link>
   </div>
 
-  <div style={{ display: 'block', marginBottom: '10px' }}>
+  <div style={{backgroundColor:"#ddd", padding: "15px", marginBottom: "10px", borderRadius: "5px"}}>
     <Link
       color="red"
       href="#anchor"
@@ -161,60 +221,3 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
   </div>
 </div>;
 ```
-
-```js
-<div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="black" href="#anchor" target="self" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="red" href="/test" target="self" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow_light" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="yellow_dark" href="/test" target="blank" type="button">
-      Link as button
-    </Link>
-  </div>
-  <div
-    style={{
-      display: 'block',
-      padding: '10px',
-      marginBottom: '10px',
-      backgroundColor: '#22CFD8'
-    }}
-  >
-    <div style={{ display: 'block', marginBottom: '10px' }}>
-      <Link color="grey" href="/test" target="blank" type="button">
-        Link as button
-      </Link>
-    </div>
-    <Link color="transparent" href="/test" target="blank" type="button">
-      Link as transparent button
-    </Link>
-    <div style={{ display: 'block', marginTop: '10px' }}>
-      <Link color="white" href="/test" target="blank" type="button">
-        White button
-      </Link>
-    </div>
-    <div style={{ display: 'block', marginTop: '10px' }}>
-      <Link color="red" href="/test" target="blank" type="button" fullWidth>
-        Full-width red button
-      </Link>
-    </div>
-  </div>
-</div>
-```