@comicrelief/component-library 8.44.4 → 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/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 };