@comicrelief/component-library 8.48.2 → 8.49.1

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

@@ -179,7 +179,6 @@ const ArticleTeaser = ({
           tag="h3"
           height="2rem"
           weight="normal"
-          uppercase
           family={family}
         >
           {title}

package/src/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 {
@@ -362,7 +361,6 @@ it('renders press realese correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c10 span {

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"

package/src/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/src/components/Molecules/Countdown/Countdown.js

@@ -58,7 +58,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.days}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             days
           </Text>
         </Digits>
@@ -69,7 +69,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.hours}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             hours
           </Text>
         </Digits>
@@ -80,7 +80,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.minutes}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             minutes
           </Text>
         </Digits>
@@ -88,7 +88,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.seconds}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             seconds
           </Text>
         </Digits>

package/src/components/Molecules/Descriptor/Descriptor.js

@@ -124,7 +124,6 @@ const TagWrapper = styled.div`
 
 const Tag = styled(Text)`
   position: relative;
-  text-transform: uppercase;
 `;
 
 const Description = styled.div`
@@ -172,7 +171,6 @@ const Descriptor = ({
           tag="h3"
           height="2rem"
           weight="normal"
-          uppercase
           family="Anton"
         >
           {title}

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

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

package/src/components/Molecules/InfoBanner/InfoBanner.js

@@ -42,7 +42,7 @@ const InfoBanner = ({
 }) => (
   <Container>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Project Name
       </Text>
       <Text tag="p" size="s">
@@ -50,7 +50,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         End Date
       </Text>
       <Text tag="p" size="s">
@@ -58,7 +58,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Funding theme
       </Text>
       <Text tag="p" size="s">
@@ -68,7 +68,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Amount Awarded
       </Text>
       <Text tag="p" size="s">
@@ -82,7 +82,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Start Date
       </Text>
       <Text tag="p" size="s">
@@ -90,7 +90,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Beneficiary Country
       </Text>
       <Text tag="p" size="s">

package/src/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/src/components/Molecules/Lookup/Lookup.js

@@ -1,22 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
 import TextInputWithDropdown from '../../Atoms/TextInputWithDropdown/TextInputWithDropdown';
 import spacing from '../../../theme/shared/spacing';
 import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
 
-const StyledButton = styled(ButtonWithStates)`${({ theme }) => css`
-  color: ${theme.color('grey_dark')};
-  border: 2px solid ${theme.color('grey_dark')};
-  background-color: ${theme.color('white')};
-  padding-left: ${spacing('lg')};
-  padding-right: ${spacing('lg')};
-  &:hover {
-    color: ${theme.color('grey_dark')};
-    background-color: ${theme.color('white')};
-  }
-`}`;
-
 const KEY_CODE_ENTER = 13;
 
 /**
@@ -114,16 +101,18 @@ const Lookup = ({
         errorMsg={errorMessage}
         dropdownInstruction={dropdownInstruction}
       />
-      <StyledButton
+      <ButtonWithStates
         type="button"
         onClick={() => handler()}
         loading={isSearching}
         disabled={isSearching}
         loadingText="Searching"
         data-test="lookupButton"
+        buttonType="secondary"
+        color="black"
       >
         {buttonText}
-      </StyledButton>
+      </ButtonWithStates>
     </div>
   );
 };