@comicrelief/component-library 8.77.7 → 8.79.0

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`handles data structure correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -28,20 +42,6 @@ exports[`handles data structure correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -703,6 +703,20 @@ exports[`handles data structure correctly 1`] = `
 `;
 
 exports[`renders 2 columns layout correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -730,20 +744,6 @@ exports[`renders 2 columns layout correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -1438,6 +1438,20 @@ exports[`renders 2 columns layout correctly 1`] = `
 `;
 
 exports[`renders carousel mode correctly 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -1465,20 +1479,6 @@ exports[`renders carousel mode correctly 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;
@@ -2153,6 +2153,20 @@ exports[`renders carousel mode correctly 1`] = `
 `;
 
 exports[`renders correctly with data prop 1`] = `
+.c11 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c12 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -2180,20 +2194,6 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
 }
 
-.c11 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c12 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c20 {
   height: 4px;
   width: 100%;

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly with data prop 1`] = `
+.c9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c10 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c14 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -28,20 +42,6 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
 }
 
-.c9 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c10 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c19 {
   height: 4px;
   width: 100%;

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Column view correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c9 {
   fill: #FFFFFF;
 }
@@ -17,7 +31,8 @@ exports[`renders Column view correctly 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -40,6 +55,7 @@ exports[`renders Column view correctly 1`] = `
 .c7:focus-within,
 .c7:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -48,20 +64,6 @@ exports[`renders Column view correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;
@@ -251,6 +253,20 @@ exports[`renders Column view correctly 1`] = `
 `;
 
 exports[`renders correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
 .c9 {
   fill: #FFFFFF;
 }
@@ -267,7 +283,8 @@ exports[`renders correctly 1`] = `
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
@@ -290,6 +307,7 @@ exports[`renders correctly 1`] = `
 .c7:focus-within,
 .c7:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -298,20 +316,6 @@ exports[`renders correctly 1`] = `
   opacity: 0.5;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   display: flex;
   position: relative;

package/src/components/Molecules/EmailSignUp/EmailSignUp.style.js

@@ -105,6 +105,8 @@ export const StyledEmailSignUpButton = styled(Button)`
   border-radius: 0.5rem;
   overflow: hidden;
   min-width: max-content;
+  // Customised for this context
+  min-height: 2.25rem;
   width: 100%;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {

package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c8 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -37,20 +51,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   line-height: inherit;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: auto;
@@ -276,6 +276,20 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 `;
 
 exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
+.c3 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c8 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -312,20 +326,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   line-height: inherit;
 }
 
-.c3 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c4 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c0 {
   width: 100%;
   height: auto;
@@ -769,34 +769,6 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
 `;
 
 exports[`renders "Text Banner" Hero Banner correctly 2`] = `
-.c8 {
-  font-family: 'Anton',Impact,sans-serif;
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: 0;
-  font-size: 2rem;
-  line-height: 2rem;
-}
-
-.c8 span {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.c9 {
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
-  text-transform: inherit;
-  letter-spacing: 0;
-  font-size: 1rem;
-  line-height: 1.25rem;
-}
-
-.c9 span {
-  font-size: inherit;
-  line-height: inherit;
-}
-
 .c3 {
   display: block;
   width: 100%;
@@ -825,6 +797,34 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
   object-fit: contain;
 }
 
+.c8 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c9 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c9 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   width: 100%;
   height: auto;

package/src/components/Molecules/LogoLinked/LogoLinked.js

@@ -1,60 +1,92 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 
 import Logo from '../../Atoms/Logos/Logo';
-import { logoRotateAnimation } from '../../../theme/shared/animations';
-
-const TitleLabel = styled.span`
-  line-height: 0;
-  font-size: 0;
-  color: transparent;
-`;
-
-const LogoLink = styled.a`
-  ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
-`;
+import { TitleLabel, LogoLink } from './LogoLinked.style';
 
 const LogoLinked = ({
   sizeSm, sizeMd,
-  campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', url = '/', animateRotate = false
+  campaign = 'Comic Relief',
+  title = 'Go to Comic Relief homepage',
+  url = '/',
+  animateRotate = false,
+  animatePulse = false,
+  newTab = false
 }) => {
-  if (campaign === 'Sport Relief Gameon') {
+  if (campaign === 'Sport Relief') {
     return (
-      <>
-        <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" title="Go to Comic Relief homepage" />
-          <TitleLabel>Go to Comic Relief homepage</TitleLabel>
-        </LogoLink>
-        <LogoLink href="/sportrelief/" title="Go to Sport Relief homepage" animateRotate={animateRotate}>
-          <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" title="Go to Sport Relief homepage" />
-          <TitleLabel>Go to Sport Relief homepage</TitleLabel>
-        </LogoLink>
-      </>
+      <LogoLink
+        href={url}
+        title="Go to Sport Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animateRotate={animateRotate}
+      >
+        <Logo
+          rotate={false}
+          campaign="Sport Relief"
+          title="Sport Relief in homepage"
+        />
+        <TitleLabel>Go to Sport Relief homepage</TitleLabel>
+      </LogoLink>
     );
   }
 
-  if (campaign === 'Sport Relief') {
+  if (campaign === 'Pride') {
     return (
-      <LogoLink href={url} title="Go to Sport Relief homepage" animateRotate={animateRotate}>
-        <Logo rotate={false} campaign="Sport Relief" title="Sport Relief in homepage" />
-        <TitleLabel>Go to Sport Relief homepage</TitleLabel>
+      <LogoLink
+        href={url}
+        title="Go to Comic Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animateRotate={animateRotate}
+      >
+        <Logo
+          rotate={false}
+          campaign="Pride"
+          title="Go to Comic Relief homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+        />
+        <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
     );
   }
 
-  if (campaign === 'Pride') {
+  // Our 'modern' alt, as used within the CRcom header nav
+  // (which exists 100% within that codebase, for now):
+  if (campaign === 'Comic Relief wide') {
     return (
-      <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-        <Logo rotate={false} campaign="Pride" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
+      <LogoLink
+        href={url}
+        title="Go to Comic Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animatePulse={animatePulse}
+      >
+        <Logo
+          rotate={false}
+          campaign="Comic Relief wide"
+          title="Go to Comic Relief homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+        />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
     );
   }
 
   return (
-    <LogoLink href={url} title={title} animateRotate={animateRotate}>
-      <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
+    <LogoLink
+      href={url}
+      title={title}
+      target={newTab ? '_blank' : '_self'}
+      animateRotate={animateRotate}
+    >
+      <Logo
+        rotate={false}
+        campaign="Comic Relief"
+        title={title}
+        sizeSm={sizeSm}
+        sizeMd={sizeMd}
+      />
       <TitleLabel>{title}</TitleLabel>
     </LogoLink>
   );
@@ -63,10 +95,12 @@ const LogoLinked = ({
 LogoLinked.propTypes = {
   campaign: PropTypes.string,
   animateRotate: PropTypes.bool,
+  animatePulse: PropTypes.bool,
   title: PropTypes.string,
   url: PropTypes.string,
   sizeSm: PropTypes.string,
-  sizeMd: PropTypes.string
+  sizeMd: PropTypes.string,
+  newTab: PropTypes.bool
 };
 
 export default LogoLinked;

package/src/components/Molecules/LogoLinked/LogoLinked.style.js

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+import { logoRotateAnimation, pulseInAnimation, pulseOutAnimation } from '../../../theme/shared/animations';
+
+const TitleLabel = styled.span`
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+`;
+
+const LogoLink = styled.a`
+  ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
+  
+  ${({ animatePulse }) => animatePulse && css`
+    img {
+        ${pulseOutAnimation};
+    }
+        
+    &:hover,
+    &:focus {
+        img {
+            ${pulseInAnimation};
+        }
+    }
+  `}
+`;
+
+export { TitleLabel, LogoLink };

package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx

@@ -11,23 +11,42 @@ export default function LogoLinkedExample() {
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>Sport Relief</h3>
-        <LogoLinked campaign="Sport Relief" sizeSm="50px" sizeMd="60px" />
+        <h3>Comic Relief wide, w/pulse animation and new tab functionality</h3>
+        <LogoLinked
+          campaign="Comic Relief wide"
+          sizeSm="150px"
+          sizeMd="150px"
+          url="https://www.comicrelief.com"
+          newTab
+          animatePulse
+        />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>Sport Relief Gameon</h3>
-        <LogoLinked campaign="Sport Relief Gameon" sizeSm="50px" sizeMd="60px" />
+        <h3>Sport Relief</h3>
+        <LogoLinked
+          campaign="Sport Relief"
+          sizeSm="50px"
+          sizeMd="60px"
+        />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Pride</h3>
-        <LogoLinked campaign="Pride" sizeSm="50px" sizeMd="60px" />
+        <LogoLinked
+          campaign="Pride"
+          sizeSm="50px"
+          sizeMd="60px"
+        />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>With rotation animation</h3>
-        <LogoLinked sizeSm="50px" sizeMd="60px" animateRotate />
+        <h3>Comic Relief (default) w/rotation animation</h3>
+        <LogoLinked
+          sizeSm="50px"
+          sizeMd="60px"
+          animateRotate
+        />
       </ExampleContainer>
     </>
   );