@comicrelief/component-library 8.48.2 → 8.49.0

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;
+      min-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>
-```

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

@@ -6,35 +6,39 @@ import fontHelper from '../../../theme/crTheme/fontHelper';
 const buttonStyle = () => css`
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   text-decoration: none;
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  border-radius: 2rem;
-  transition: all 0.3s;
-  height: 3.125rem;
+  transition: all 0.2s;
+  min-height: 2.5em;
   width: 100%;
   justify-content: center;
   align-items: center;
+  border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
 
-  ${({ theme }) => css`
-    ${fontHelper(theme, 'button')}
-  `}
+  ${({ color, theme, buttonType }) => (theme.buttonColors(color, buttonType))};
 
-  font-weight: 700;
-
-  ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+  ${({ theme }) => css` ${fontHelper(theme, 'button')}`}
 
   // Override with mobile-specific colours where available:
-  ${({ mobileColour, theme }) => (mobileColour ? theme.buttonColors(mobileColour) : null)};
+  ${({ mobileColour, theme, buttonType }) => (mobileColour ? theme.buttonColors(mobileColour, buttonType) : null)};
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   }
 
-  // Reinstate general styles for 'desktop':
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+    // 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')};
+
+    // Reinstate standard colours for desktop where appropriate:
+    ${({
+    mobileColour, theme, buttonType, color
+  }) => (
+    mobileColour && theme.buttonColors(color, buttonType)
+  )};
   }
 `;
 
@@ -51,29 +55,30 @@ export const IconWrapper = styled.span`
   margin-left: ${spacing('md')};
   align-self: center;
   right: ${spacing('m')};
-  ${({ type }) => type === 'standard'
-    && css`
+
+  ${({ type }) => type === 'standard' && css`
+    position: absolute;
+    right: -2rem;
+    top: 0;
+    bottom: 0;
+  `};
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: auto;
+    right: auto;
+    position: relative;
+    ${({ type }) => type === 'standard' && css`
       position: absolute;
       right: -2rem;
       top: 0;
       bottom: 0;
     `};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: auto;
-    right: auto;
-    position: relative;
-    ${({ type }) => type === 'standard'
-      && css`
-        position: absolute;
-        right: -2rem;
-        top: 0;
-        bottom: 0;
-      `};
   }
 `;
 
 const StyledLink = styled.a`
   ${props => (props.type === 'button' ? buttonStyle : linkStyle)}
+
   ${({ iconFirst }) => iconFirst
     && css`
       flex-direction: row-reverse;

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

@@ -200,14 +200,11 @@ it('renders link styled as button correctly', () => {
       display: -ms-inline-flexbox;
       display: inline-flex;
       position: relative;
-      padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      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;
+      min-height: 2.5em;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;
@@ -217,9 +214,14 @@ it('renders link styled as button correctly', () => {
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
+      border: none;
       cursor: pointer;
+      padding: 0.6rem 1rem;
+      border-radius: 0.5rem;
+      background-color: #FFE400;
+      color: #000000;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: 400;
+      font-weight: 700;
       text-transform: inherit;
       -webkit-letter-spacing: 0;
       -moz-letter-spacing: 0;
@@ -227,14 +229,19 @@ it('renders link styled as button correctly', () => {
       letter-spacing: 0;
       font-size: 1rem;
       line-height: 1.25rem;
-      font-weight: 700;
-      background-color: #FFE400;
-      color: #000000;
     }
 
-    .c0:hover {
+    .c0:hover,
+    .c0:focus,
+    .c0:focus-within,
+    .c0:focus-visible {
       background-color: #FEFD5A;
-      color: #000000;
+      outline-offset: 3px;
+    }
+
+    .c0:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
     }
 
     @media (min-width:740px) {
@@ -259,13 +266,7 @@ it('renders link styled as button correctly', () => {
 
     @media (min-width:1024px) {
       .c0 {
-        background-color: #FFE400;
-        color: #000000;
-      }
-
-      .c0:hover {
-        background-color: #FEFD5A;
-        color: #000000;
+        width: auto;
       }
     }
 

package/src/components/Molecules/CardDs/CardDs.md

@@ -18,7 +18,7 @@ import { Internal } from '../../Atoms/Icons/index';
   <CardDs
     target="_blank"
     link="/home"
-    linkLabel="find out more"
+    linkLabel="Find out more"
     imageLow={defaultData.image}
     images={defaultData.images}
     imageAltText="Happy man going to work"
@@ -66,7 +66,7 @@ import { Download } from '../../Atoms/Icons/index';
   <CardDs
     target="blank"
     link="/home"
-    linkLabel="find out more"
+    linkLabel="Find out more"
     backgroundColor="white"
     height="auto"
     icon={<Download colour="white" />}
@@ -149,7 +149,7 @@ import { Internal } from '../../Atoms/Icons/index';
   <CardDs
     target="_blank"
     link="/home"
-    linkLabel="find out more"
+    linkLabel="Find out more"
     imageLow={defaultData.image}
     images={defaultData.images}
     imageAltText="Happy man going to work"

package/src/components/Molecules/CardDs/CardDs.test.js

@@ -28,7 +28,7 @@ it('renders Column view correctly', () => {
     <CardDs
       target="_blank"
       link="/home"
-      linkLabel="find out more"
+      linkLabel="Find out more"
       imageLow={defaultData.image}
       images={defaultData.images}
       imageAltText="Happy man going to work"