@comicrelief/component-library 8.44.3 → 8.45.0

package/src/components/Organisms/FooterNew/dev-data/data.js

@@ -0,0 +1,123 @@
+export const primaryLinksList = [
+  {
+    title: 'Contact us',
+    path: 'contact-us',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Update your preferences',
+    path: 'https://www.comicrelief.com/update-your-preferences',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Your Gift Aid',
+    path: 'https://giftaid.comicrelief.com/update',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Reporting complaints and concerns',
+    path: 'https://www.comicrelief.com/reporting-complaints',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'FAQs',
+    path: 'https://www.comicrelief.com/frequently-asked-questions',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  }
+];
+
+export const secondaryLinksList = [
+  {
+    title: 'Terms of use',
+    path: 'https://www.comicrelief.com/terms-of-use',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Privacy notice',
+    path: 'https://www.comicrelief.com/privacy-notice',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Cookies',
+    path: 'https://www.comicrelief.com/cookies',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Text to donate terms',
+    path: 'https://www.comicrelief.com/text-to-donate-terms',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Prize draw terms',
+    path: 'https://www.comicrelief.com/prize-draw-terms',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Modern Slavery and Human Trafficking Statement',
+    path: 'https://www.comicrelief.com/modern-slavery-statement',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Positive Practices',
+    path: 'https://www.comicrelief.com/positive-practices',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  }
+];
+
+export const testPrimaryLinksList = [
+  {
+    title: 'Contact us',
+    path: 'contact-us',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'FAQs',
+    path: 'https://www.comicrelief.com/frequently-asked-questions',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  }
+];
+
+export const testSecondaryLinksList = [
+  {
+    title: 'Terms of use',
+    path: 'https://www.comicrelief.com/terms-of-use',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  },
+  {
+    title: 'Privacy notice',
+    path: 'https://www.comicrelief.com/privacy-notice',
+    internal: {
+      type: 'ContentfulPageLandingPage'
+    }
+  }
+];

package/src/components/Organisms/Membership/Membership.test.js

@@ -597,15 +597,11 @@ it('renders correctly', () => {
         >
           <h2
             className="c6"
-            color="inherit"
-            size="l"
           >
             Help someone like Jordan see a better tomorrow
           </h2>
           <p
             className="c7"
-            color="inherit"
-            size="s"
           >
             Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.
           </p>
@@ -625,8 +621,6 @@ it('renders correctly', () => {
               >
                 <h3
                   className="c12"
-                  color="inherit"
-                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -640,7 +634,6 @@ it('renders correctly', () => {
                 >
                   <span
                     className="c16 c17"
-                    color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
                         "__html": "",
@@ -677,7 +670,6 @@ it('renders correctly', () => {
                 >
                   <span
                     className="c16 c17"
-                    color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
                         "__html": "",
@@ -714,7 +706,6 @@ it('renders correctly', () => {
                 >
                   <span
                     className="c16 c17"
-                    color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
                         "__html": "",
@@ -751,8 +742,6 @@ it('renders correctly', () => {
               >
                 <span
                   className="c23 c24"
-                  color="inherit"
-                  size="s"
                 >
                   Other amount
                 </span>
@@ -762,7 +751,6 @@ it('renders correctly', () => {
                 >
                   <span
                     className="c16 c17"
-                    color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
                         "__html": "£",

package/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap

@@ -734,19 +734,16 @@ exports[`renders correctly:
 >
   <p
     className="c1 c2"
-    color="inherit"
   >
     Over the past two years, we’ve supported
   </p>
   <h1
     className="c3 c4"
-    color="red"
   >
     11.7 million people
   </h1>
   <p
     className="c5 c6"
-    color="inherit"
   >
     including...
   </p>

package/src/index.js

@@ -9,6 +9,7 @@ export { default as allowListed } from './utils/allowListed';
 export { default as spacing } from './theme/shared/spacing';
 export { default as allBreakpoints } from './theme/shared/allBreakpoints';
 export { default as containers } from './theme/shared/containers';
+export { logoRotateAnimation, springScaleAnimation } from './theme/shared/animations';
 
 /* Atoms */
 export { default as Text } from './components/Atoms/Text/Text';
@@ -46,6 +47,7 @@ export { default as Donate } from './components/Organisms/Donate/Donate';
 export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
 export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
 export { default as Footer } from './components/Organisms/Footer/Footer';
+export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
 export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
 export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
 export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';

package/src/theme/crTheme/colors.js

@@ -30,17 +30,23 @@ const colors = {
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
   grey_label: '#5C5C5E',
-  // this is the Curtis approved list of 5 greys that will be later numbered grey_1 thru grey_5
-  // grey_1
+
+  grey_1: '#FFFFFF',
   grey_light: '#F4F3F5',
-  // grey_2
   grey_medium: '#E1E2E3',
-  // grey_3
+  grey_2: '#E1E2E3',
+  // TODO: 'grey' is actually 'grey_3'. It is referenced in many places.
+  // We need to rename it to 'grey_3' across all references.
+  // Until then, we need to keep both names for backwards compatibility.
+  // Same story with 'grey_medium' - it should be grey_2, and
+  // grey_dark, should be grey_4.
+  // For the time being we need both of each. I will provision a separate PR.
   grey: '#969598',
-  // grey_4
-  grey_4: '#6E6E6E',
-  // grey_5
+  grey_3: '#969598',
   grey_dark: '#222222',
+  grey_4: '#222222',
+  grey_4_hover: '#3A3A3A',
+  grey_5: '#18181A',
 
   /* GENERAL COLOURS */
   blue: '#0565D1',

package/src/theme/shared/animations.js

@@ -0,0 +1,60 @@
+import { css } from 'styled-components';
+
+/**
+ * Logo rotation animation on hover
+ * Applies a rotation transition that rotates the logo (or whatever else)
+ * -14deg on hover/focus
+ * @param {boolean} animateRotate - Whether to enable the rotation animation
+ * @returns {css} template literal for the animation
+ */
+const logoRotateAnimation = animateRotate => {
+  if (!animateRotate) {
+    return css``;
+  }
+
+  return css`
+    img {
+      transition: transform 0.6s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+    }
+
+    &:hover,
+    &:focus {
+      img {
+        transform: rotate(-14deg);
+      }
+    }
+  `;
+};
+
+/**
+ * Spring scale animation on hover
+ * Applies a smooth spring-like scale transition that expands the element on hover/focus
+ * @param {boolean} animateScale - Whether to enable the scale animation
+ * @param {number} scaleFactor - Scale factor to apply on hover (default 8%)
+ * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @returns {css} template literal for the animation
+ */
+const springScaleAnimation = (animateScale, scaleFactor = 1.08, bounceIntensity = 1) => {
+  if (!animateScale) {
+    return css``;
+  }
+
+  // More negative pull-back and higher overshoot = more bounce
+  // Default intensity (1) gives: cubic-bezier(0.68, -0.85, 0.265, 1.95)
+  // Higher intensity = more pronounced bounce effect
+  const pullBack = -0.55 - (bounceIntensity * 0.3);
+  const overshoot = 1.55 + (bounceIntensity * 0.4);
+  const duration = 0.2 + (bounceIntensity * 0.1);
+
+  return css`
+    transition: transform ${duration}s cubic-bezier(0.68, ${pullBack}, 0.265, ${overshoot});
+    transform-origin: center;
+
+    &:hover,
+    &:focus {
+      transform: scale(${scaleFactor});
+    }
+  `;
+};
+
+export { logoRotateAnimation, springScaleAnimation };