@comicrelief/component-library 8.48.2 → 8.49.0

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

@@ -10,49 +10,53 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
 var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", " font-weight:700;", ";", ";@media ", "{width:", ";}@media ", "{", ";}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;text-decoration:none;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;", ";", " ", ";@media ", "{width:", ";}@media ", "{width:", ";", ";}"], _ref => {
   let {
-    theme
+    color,
+    theme,
+    buttonType
   } = _ref;
-  return theme.fontSize('s');
+  return theme.buttonColors(color, buttonType);
 }, _ref2 => {
   let {
     theme
   } = _ref2;
-  return (0, _styledComponents.css)(["", ""], (0, _fontHelper.default)(theme, 'button'));
+  return (0, _styledComponents.css)([" ", ""], (0, _fontHelper.default)(theme, 'button'));
 }, _ref3 => {
   let {
-    color,
-    theme
+    mobileColour,
+    theme,
+    buttonType
   } = _ref3;
-  return color ? theme.buttonColors(color) : theme.buttonColors('red');
+  return mobileColour ? theme.buttonColors(mobileColour, buttonType) : null;
 }, _ref4 => {
   let {
-    mobileColour,
     theme
   } = _ref4;
-  return mobileColour ? theme.buttonColors(mobileColour) : null;
+  return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
-    theme
+    fullWidth
   } = _ref5;
-  return theme.allBreakpoints('M');
+  return fullWidth ? '100%' : 'auto';
 }, _ref6 => {
   let {
-    fullWidth
+    theme
   } = _ref6;
-  return fullWidth ? '100%' : 'auto';
+  return theme.allBreakpoints('L');
 }, _ref7 => {
   let {
-    theme
+    fullWidth
   } = _ref7;
-  return theme.allBreakpoints('L');
+  return fullWidth ? '100%' : 'auto';
 }, _ref8 => {
   let {
-    color,
-    theme
+    mobileColour,
+    theme,
+    buttonType,
+    color
   } = _ref8;
-  return color ? theme.buttonColors(color) : theme.buttonColors('red');
+  return mobileColour && theme.buttonColors(color, buttonType);
 });
 const linkStyle = () => (0, _styledComponents.css)(["position:relative;display:inline;", ";"], _ref9 => {
   let {

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

@@ -192,14 +192,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;
@@ -209,9 +206,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;
@@ -219,14 +221,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) {
@@ -251,13 +258,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/dist/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/dist/components/Molecules/CardDs/CardDs.test.js

@@ -26,7 +26,7 @@ it('renders Column view correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CardDs.default, {
     target: "_blank",
     link: "/home",
-    linkLabel: "find out more",
+    linkLabel: "Find out more",
     imageLow: _data.defaultData.image,
     images: _data.defaultData.images,
     imageAltText: "Happy man going to work",

package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -33,14 +33,11 @@ exports[`renders Column view correctly 1`] = `
   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;
@@ -50,9 +47,14 @@ exports[`renders Column view correctly 1`] = `
   -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: #E52630;
+  color: #FFFFFF;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -60,14 +62,19 @@ exports[`renders Column view correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #E52630;
-  color: #FFFFFF;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus,
+.c7:focus-within,
+.c7:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c7:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c9 {
@@ -158,13 +165,7 @@ exports[`renders Column view correctly 1`] = `
 
 @media (min-width:1024px) {
   .c7 {
-    background-color: #E52630;
-    color: #FFFFFF;
-  }
-
-  .c7:hover {
-    background-color: #890B11;
-    color: #FFFFFF;
+    width: auto;
   }
 }
 
@@ -213,7 +214,7 @@ exports[`renders Column view correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
-    data-image-cta-copy="find out more"
+    data-image-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"
@@ -252,13 +253,13 @@ exports[`renders Column view correctly 1`] = `
     <a
       className="c7"
       color="red"
-      data-button-cta-copy="find out more"
+      data-button-cta-copy="Find out more"
       href="/home"
       rel={null}
       target="_self"
       type="button"
     >
-      find out more
+      Find out more
       <span
         className="c8"
         type="button"
@@ -314,14 +315,11 @@ exports[`renders correctly 1`] = `
   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;
@@ -331,9 +329,14 @@ exports[`renders correctly 1`] = `
   -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: #E52630;
+  color: #FFFFFF;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: inherit;
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -341,14 +344,19 @@ exports[`renders correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #E52630;
-  color: #FFFFFF;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus,
+.c7:focus-within,
+.c7:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c7:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c9 {
@@ -439,13 +447,7 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c7 {
-    background-color: #E52630;
-    color: #FFFFFF;
-  }
-
-  .c7:hover {
-    background-color: #890B11;
-    color: #FFFFFF;
+    width: auto;
   }
 }
 

package/dist/components/Molecules/Lookup/Lookup.js

@@ -1,25 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
 var _TextInputWithDropdown = _interopRequireDefault(require("../../Atoms/TextInputWithDropdown/TextInputWithDropdown"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _ButtonWithStates = _interopRequireDefault(require("../../Atoms/ButtonWithStates/ButtonWithStates"));
-const StyledButton = (0, _styledComponents.default)(_ButtonWithStates.default).withConfig({
-  displayName: "Lookup__StyledButton",
-  componentId: "sc-uu5bpv-0"
-})(["", ""], _ref => {
-  let {
-    theme
-  } = _ref;
-  return (0, _styledComponents.css)(["color:", ";border:2px solid ", ";background-color:", ";padding-left:", ";padding-right:", ";&:hover{color:", ";background-color:", ";}"], theme.color('grey_dark'), theme.color('grey_dark'), theme.color('white'), (0, _spacing.default)('lg'), (0, _spacing.default)('lg'), theme.color('grey_dark'), theme.color('white'));
-});
 const KEY_CODE_ENTER = 13;
 
 /**
@@ -50,7 +41,7 @@ const KEY_CODE_ENTER = 13;
  * @returns {JSX.Element}
  * @constructor
  */
-const Lookup = _ref2 => {
+const Lookup = _ref => {
   let {
     name,
     label,
@@ -62,7 +53,7 @@ const Lookup = _ref2 => {
     noResultsMessage = 'Sorry, could not find any results for your search',
     dropdownInstruction = '',
     ...rest
-  } = _ref2;
+  } = _ref;
   const [query, setQuery] = (0, _react.useState)('');
   const [errorMessage, setErrorMessage] = (0, _react.useState)('');
   const [options, setOptions] = (0, _react.useState)([]);
@@ -113,19 +104,21 @@ const Lookup = _ref2 => {
     errorMsg: errorMessage,
     dropdownInstruction: dropdownInstruction,
     $_css: (0, _spacing.default)('md')
-  }), /*#__PURE__*/_react.default.createElement(StyledButton, {
+  }), /*#__PURE__*/_react.default.createElement(_ButtonWithStates.default, {
     type: "button",
     onClick: () => handler(),
     loading: isSearching,
     disabled: isSearching,
     loadingText: "Searching",
-    "data-test": "lookupButton"
+    "data-test": "lookupButton",
+    buttonType: "secondary",
+    color: "black"
   }, buttonText));
 };
 var _default = exports.default = Lookup;
 var _StyledTextInputWithDropdown = (0, _styledComponents.default)(_TextInputWithDropdown.default).withConfig({
   displayName: "Lookup___StyledTextInputWithDropdown",
-  componentId: "sc-uu5bpv-1"
+  componentId: "sc-uu5bpv-0"
 })(p => ({
   marginBottom: p.$_css
 }));

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -72,14 +72,11 @@ exports[`renders Promo correctly 1`] = `
   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;
@@ -89,9 +86,14 @@ exports[`renders Promo correctly 1`] = `
   -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: #FFFFFF;
+  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;
@@ -99,14 +101,19 @@ exports[`renders Promo correctly 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c9:hover {
-  background-color: #969598;
-  color: #000000;
+.c9:hover,
+.c9:focus,
+.c9:focus-within,
+.c9:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c9:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -239,13 +246,7 @@ exports[`renders Promo correctly 1`] = `
 
 @media (min-width:1024px) {
   .c9 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c9:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }
 
@@ -421,14 +422,11 @@ exports[`renders Promo correctly end position 1`] = `
   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;
@@ -438,9 +436,14 @@ exports[`renders Promo correctly end position 1`] = `
   -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: #FFFFFF;
+  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;
@@ -448,14 +451,19 @@ exports[`renders Promo correctly end position 1`] = `
   letter-spacing: 0;
   font-size: 1rem;
   line-height: 1.25rem;
-  font-weight: 700;
-  background-color: #FFFFFF;
-  color: #000000;
 }
 
-.c9:hover {
-  background-color: #969598;
-  color: #000000;
+.c9:hover,
+.c9:focus,
+.c9:focus-within,
+.c9:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c9:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -591,13 +599,7 @@ exports[`renders Promo correctly end position 1`] = `
 
 @media (min-width:1024px) {
   .c9 {
-    background-color: #FFFFFF;
-    color: #000000;
-  }
-
-  .c9:hover {
-    background-color: #969598;
-    color: #000000;
+    width: auto;
   }
 }