@comicrelief/component-library 8.48.2 → 8.49.1

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;height:2.5rem;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;
+      height: 2.5rem;
       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/ArticleTeaser/ArticleTeaser.js

@@ -176,7 +176,6 @@ const ArticleTeaser = _ref15 => {
     tag: "h3",
     height: "2rem",
     weight: "normal",
-    uppercase: true,
     family: family
   }, title), time && /*#__PURE__*/_react.default.createElement(Time, {
     size: "xs",

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -60,7 +60,6 @@ it('renders article teaser correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c10 span {
@@ -358,7 +357,6 @@ it('renders press realese correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c10 span {

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;
+  height: 2.5rem;
   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;
+  height: 2.5rem;
   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/Countdown/Countdown.js

@@ -59,8 +59,7 @@ const Countdown = _ref => {
     size: "xl"
   }, countdownTime.days), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
-    size: "xs",
-    uppercase: true
+    size: "xs"
   }, "days")), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
     family: "Anton",
@@ -71,8 +70,7 @@ const Countdown = _ref => {
     size: "xl"
   }, countdownTime.hours), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
-    size: "xs",
-    uppercase: true
+    size: "xs"
   }, "hours")), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
     family: "Anton",
@@ -83,16 +81,14 @@ const Countdown = _ref => {
     size: "xl"
   }, countdownTime.minutes), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
-    size: "xs",
-    uppercase: true
+    size: "xs"
   }, "minutes")), /*#__PURE__*/_react.default.createElement(_Countdown.Digits, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
     family: "Anton",
     size: "xl"
   }, countdownTime.seconds), /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
-    size: "xs",
-    uppercase: true
+    size: "xs"
   }, "seconds"))));
 };
 var _default = exports.default = Countdown;

package/dist/components/Molecules/Descriptor/Descriptor.js

@@ -94,7 +94,7 @@ const TagWrapper = _styledComponents.default.div.withConfig({
 const Tag = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Descriptor__Tag",
   componentId: "sc-1np5gzw-8"
-})(["position:relative;text-transform:uppercase;"]);
+})(["position:relative;"]);
 const Description = _styledComponents.default.div.withConfig({
   displayName: "Descriptor__Description",
   componentId: "sc-1np5gzw-9"
@@ -145,7 +145,6 @@ const Descriptor = _ref3 => {
     tag: "h3",
     height: "2rem",
     weight: "normal",
-    uppercase: true,
     family: "Anton"
   }, title), /*#__PURE__*/_react.default.createElement(TagWrapper, null, tagItems), /*#__PURE__*/_react.default.createElement(Description, null, children)));
 };

package/dist/components/Molecules/Descriptor/Descriptor.test.js

@@ -58,7 +58,6 @@ it('renders article teaser correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c7 span {
@@ -180,7 +179,6 @@ it('renders article teaser correctly', () => {
 
     .c11 {
       position: relative;
-      text-transform: uppercase;
     }
 
     .c12 {

package/dist/components/Molecules/InfoBanner/InfoBanner.js

@@ -46,22 +46,19 @@ const InfoBanner = _ref3 => {
   } = _ref3;
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "Project Name"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"
   }, title)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "End Date"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"
   }, endDate)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "Funding theme"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"
@@ -71,8 +68,7 @@ const InfoBanner = _ref3 => {
     type: "standard"
   }, theme))), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "Amount Awarded"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"
@@ -84,15 +80,13 @@ const InfoBanner = _ref3 => {
     renderText: value => value
   }))), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "Start Date"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"
   }, startDate)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
-    size: "md",
-    uppercase: true
+    size: "md"
   }, "Beneficiary Country"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s"

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

@@ -16,7 +16,6 @@ exports[`renders correctly 1`] = `
 .c2 {
   font-size: undefined;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c2 span {

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
 }));