@comicrelief/component-library 8.48.2 → 8.49.0

package/dist/theme/crTheme/buttonColors.js

@@ -8,161 +8,171 @@ exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
 const buttonColors = {
+  // "Primary - red"
+  red: {
+    background: (0, _colors.default)('red'),
+    textColour: (0, _colors.default)('white'),
+    hoverBackground: (0, _colors.default)('red_dark'),
+    hovertextColour: (0, _colors.default)('white')
+  },
+  // "Primary - black"
   black: {
-    background: (0, _colors.default)('black'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('white')
+    background: (0, _colors.default)('grey_dark'),
+    textColour: (0, _colors.default)('white'),
+    hoverBackground: (0, _colors.default)('black'),
+    hovertextColour: (0, _colors.default)('white')
+  },
+  // "Primary - white"
+  white: {
+    background: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('black'),
+    hoverBackground: (0, _colors.default)('grey_medium'),
+    hovertextColour: (0, _colors.default)('black')
   },
+  // To be phased out:
   blue: {
     background: (0, _colors.default)('blue'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   blue_dark: {
     background: '#2042AD',
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   blue_light: {
     background: (0, _colors.default)('blue_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   coral: {
     background: (0, _colors.default)('coral'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('coral_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   coral_dark: {
     background: (0, _colors.default)('coral_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('coral'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   coral_light: {
     background: (0, _colors.default)('coral_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('coral_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   green: {
     background: (0, _colors.default)('green'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('green_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   green_dark: {
     background: (0, _colors.default)('green_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('green'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   green_light: {
     background: (0, _colors.default)('green_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('green_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   grey: {
     background: (0, _colors.default)('grey'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('grey_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   grey_dark: {
     background: (0, _colors.default)('grey_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   grey_light: {
     background: (0, _colors.default)('grey_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('grey_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   magenta: {
     background: (0, _colors.default)('magenta'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('magenta_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   magenta_dark: {
     background: (0, _colors.default)('magenta_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('magenta'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   magenta_light: {
     background: (0, _colors.default)('magenta_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('magenta_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   orange: {
     background: (0, _colors.default)('orange'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('orange_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   orange_dark: {
     background: (0, _colors.default)('orange_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('orange'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   orange_light: {
     background: (0, _colors.default)('orange_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('orange_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple: {
     background: (0, _colors.default)('purple'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('purple_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple_dark: {
     background: (0, _colors.default)('purple_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('purple'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple_light: {
     background: (0, _colors.default)('purple_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('purple_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  red: {
-    background: (0, _colors.default)('red'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('red_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   teal: {
     background: (0, _colors.default)('teal'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('teal_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   teal_dark: {
     background: (0, _colors.default)('teal_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('teal'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   teal_light: {
     background: (0, _colors.default)('teal_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('teal_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   transparent: {
     background: 'rgba(255, 255, 255, 0.5)',
@@ -170,35 +180,37 @@ const buttonColors = {
     hoverBackground: 'rgba(255, 255, 255, 0.7)',
     hoverColor: 'inherit'
   },
-  white: {
-    background: (0, _colors.default)('white'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
-  },
   yellow: {
     background: (0, _colors.default)('yellow'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('yellow_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   yellow_dark: {
     background: (0, _colors.default)('yellow_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('yellow'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   yellow_light: {
     background: (0, _colors.default)('yellow_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('yellow_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   }
 };
-var _default = colorName => {
+var _default = (colorName, buttonType) => {
   let style = 'inherit';
+
+  // Add a fallback, just in case someone is trying to use a non-existent colour:
+  const thisColourName = buttonColors[colorName] ? colorName : 'red';
   if (colorName) {
-    style = (0, _styledComponents.css)(["background-color:", ";color:", ";:hover{background-color:", ";color:", ";}"], buttonColors[colorName].background, buttonColors[colorName].color, buttonColors[colorName].hoverBackground, buttonColors[colorName].hoverColor);
+    style = (0, _styledComponents.css)(["background-color:", ";color:", ";&:hover,&:focus,&:focus-within,&:focus-visible{background-color:", ";color:", ";outline-offset:3px;}&:disabled{cursor:not-allowed;opacity:0.5;}", ";"], buttonColors[thisColourName].background, buttonColors[thisColourName].textColour, buttonColors[thisColourName].hoverBackground, buttonColors[thisColourName].hoverColor, _ref => {
+      let {
+        theme
+      } = _ref;
+      return (buttonType === theme.buttonTypes.SECONDARY || buttonType === theme.buttonTypes.TERTIARY) && (0, _styledComponents.css)(["background-color:transparent;color:", ";", ";&:hover,&:focus,&:focus-within,&:focus-visible{color:", ";background-color:transparent;", ";}"], buttonColors[thisColourName].background, buttonType === theme.buttonTypes.SECONDARY && (0, _styledComponents.css)(["box-shadow:0px 0px 0px 2px ", " inset;"], buttonColors[thisColourName].background), buttonColors[thisColourName].hoverBackground, buttonType === theme.buttonTypes.SECONDARY && (0, _styledComponents.css)(["box-shadow:0px 0px 0px 2px ", " inset;"], buttonColors[thisColourName].hoverBackground));
+    });
   }
   return style;
 };

package/dist/theme/crTheme/buttonTypes.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const buttonTypes = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary'
+};
+var _default = exports.default = buttonTypes;

package/dist/theme/crTheme/colors.js

@@ -15,7 +15,7 @@ exports.default = void 0;
  */
 
 const colors = {
-  /* CAMPAIGN COLOURS */
+  /* RND25 CAMPAIGN COLOURS */
   rnd_25_ruby_red: '#AE001B',
   rnd_25_glitzy_grape: '#A20C51',
   rnd_25_glitzy_blue: '#0F1953',
@@ -24,6 +24,18 @@ const colors = {
   rnd_25_party_pink: '#FF9DEC',
   rnd_25_party_blue: '#004EFF',
   rnd_25_party_lilac: '#B07FEA',
+  /* RND26 CAMPAIGN COLOURS */
+  rnd_26_dark_purple: '#7953E8',
+  rnd_26_deep_indigo: '#341A7E',
+  rnd_26_light_purple: '#BA9DFC',
+  rnd_26_teal: '#036D7C',
+  rnd_26_deep_teal: '#024042',
+  rnd_26_green: '#7FFB73',
+  rnd_26_magenta: '#A7268C',
+  rnd_26_deep_magenta: '#601151',
+  rnd_26_yellow: '#F8F440',
+  rnd_26_vibrant_pink: '#E948D5',
+  rnd_26_light_pink: '#FE80EB',
   /* GREYSCALE COLOURS */
   black: '#000000',
   white: '#FFFFFF',

package/dist/theme/crTheme/fontConfig.js

@@ -143,10 +143,9 @@ var _default = exports.default = {
       lineHeight: '1.375rem'
     }
   },
-  // To be used directly (not via fontHelper), but makes sense to keep here:
   button: {
     family: 'Montserrat',
-    weight: 400,
+    weight: 700,
     transform: 'inherit',
     small: {
       fontSize: '1rem',
@@ -161,8 +160,8 @@ var _default = exports.default = {
       lineHeight: '1.375rem'
     }
   },
-  // Admittedly, while the same for each breakpoint, these 2
-  // config objects made sense to keep it here all the same.
+  // Admittedly, while these values are identical for each breakpoint,
+  // it still made sense to keep it here all here for parity:
   formFieldLabel: {
     family: 'Montserrat',
     weight: 400,

package/dist/theme/crTheme/theme.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _colors = _interopRequireDefault(require("./colors"));
 var _buttonColors = _interopRequireDefault(require("./buttonColors"));
+var _buttonTypes = _interopRequireDefault(require("./buttonTypes"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
 var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
@@ -15,6 +16,7 @@ var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
   color: _colors.default,
   buttonColors: _buttonColors.default,
+  buttonTypes: _buttonTypes.default,
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
   allBreakpoints: _allBreakpoints.default,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.48.2",
+  "version": "8.49.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/organisms/emailSignUpForm.spec.js

@@ -101,7 +101,7 @@ test.describe('Email Signup Form component', () => {
     await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('email-signup@email.sls.comicrelief.com');
 
     // submit the ESU form
-    await page.locator('[data-testid="EmailSignUpForm-example-1"] button[type="submit"] > span').click();
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] button[type="submit"]').click();
 
     await page.close();
   });

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