@comicrelief/component-library 8.44.4 → 8.45.0

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testSecondaryLinksList = exports.testPrimaryLinksList = exports.secondaryLinksList = exports.primaryLinksList = void 0;
+const primaryLinksList = exports.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'
+  }
+}];
+const secondaryLinksList = exports.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'
+  }
+}];
+const testPrimaryLinksList = exports.testPrimaryLinksList = [{
+  title: 'Contact us',
+  path: 'contact-us',
+  internal: {
+    type: 'ContentfulPageLandingPage'
+  }
+}, {
+  title: 'FAQs',
+  path: 'https://www.comicrelief.com/frequently-asked-questions',
+  internal: {
+    type: 'ContentfulPageLandingPage'
+  }
+}];
+const testSecondaryLinksList = exports.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/dist/index.js

@@ -130,6 +130,12 @@ Object.defineProperty(exports, "Footer", {
     return _Footer.default;
   }
 });
+Object.defineProperty(exports, "FooterNew", {
+  enumerable: true,
+  get: function () {
+    return _FooterNew.default;
+  }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function () {
@@ -400,6 +406,12 @@ Object.defineProperty(exports, "hideVisually", {
     return _hideVisually.default;
   }
 });
+Object.defineProperty(exports, "logoRotateAnimation", {
+  enumerable: true,
+  get: function () {
+    return _animations.logoRotateAnimation;
+  }
+});
 Object.defineProperty(exports, "setInitialValues", {
   enumerable: true,
   get: function () {
@@ -412,6 +424,12 @@ Object.defineProperty(exports, "spacing", {
     return _spacing.default;
   }
 });
+Object.defineProperty(exports, "springScaleAnimation", {
+  enumerable: true,
+  get: function () {
+    return _animations.springScaleAnimation;
+  }
+});
 Object.defineProperty(exports, "zIndex", {
   enumerable: true,
   get: function () {
@@ -426,6 +444,7 @@ var _allowListed = _interopRequireDefault(require("./utils/allowListed"));
 var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 var _allBreakpoints = _interopRequireDefault(require("./theme/shared/allBreakpoints"));
 var _containers = _interopRequireDefault(require("./theme/shared/containers"));
+var _animations = require("./theme/shared/animations");
 var _Text = _interopRequireDefault(require("./components/Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("./components/Atoms/Logo/Logo"));
 var _Picture = _interopRequireDefault(require("./components/Atoms/Picture/Picture"));
@@ -459,6 +478,7 @@ var _Donate = _interopRequireDefault(require("./components/Organisms/Donate/Dona
 var _DoubleCopy = _interopRequireDefault(require("./components/Molecules/DoubleCopy/DoubleCopy"));
 var _PartnerLink = _interopRequireDefault(require("./components/Molecules/PartnerLink/PartnerLink"));
 var _Footer = _interopRequireDefault(require("./components/Organisms/Footer/Footer"));
+var _FooterNew = _interopRequireDefault(require("./components/Organisms/FooterNew/FooterNew"));
 var _SearchResult = _interopRequireDefault(require("./components/Molecules/SearchResult/SearchResult"));
 var _SearchInput = _interopRequireDefault(require("./components/Molecules/SearchInput/SearchInput"));
 var _ShareButton = _interopRequireDefault(require("./components/Molecules/ShareButton/ShareButton"));

package/dist/theme/crTheme/colors.js

@@ -33,17 +33,22 @@ 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',
   blue_dark: '#274084',

package/dist/theme/shared/animations.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.springScaleAnimation = exports.logoRotateAnimation = void 0;
+var _styledComponents = require("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 (0, _styledComponents.css)([""]);
+  }
+  return (0, _styledComponents.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
+ */
+exports.logoRotateAnimation = logoRotateAnimation;
+const springScaleAnimation = function (animateScale) {
+  let scaleFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1.08;
+  let bounceIntensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  if (!animateScale) {
+    return (0, _styledComponents.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 (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:scale(", ");}"], duration, pullBack, overshoot, scaleFactor);
+};
+exports.springScaleAnimation = springScaleAnimation;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.44.4",
+  "version": "8.45.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/SocialIcons/Icon/Icon.js

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { kebabCase } from 'lodash';
 import hideVisually from '../../../../theme/shared/hideVisually';
 import Text from '../../Text/Text';
+import { springScaleAnimation } from '../../../../theme/shared/animations';
 
 const RevealTextWidth = 55;
 const RevealTextSpeed = 0.35;
@@ -30,11 +31,11 @@ const StyledLink = styled.a`
     &:focus {
       opacity: 1;
     }
-    
+
     // No hover state for mobile, so targetting Medium+:
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
       &:hover,
-      &:focus {        
+      &:focus {
         img {
           filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
         }
@@ -46,24 +47,46 @@ const StyledLink = styled.a`
       &:focus {
         // Default
         padding-right: ${RevealTextWidth}px;
-  
+
         // Tweak for ESU's longer text:
         &[data-test="header-esu"] {
           padding-right: 92px;
         }
-  
+
         // Tweak for Shop's shorter text:
         &[data-test="header-shop"] {
           padding-right: 48px;
         }
-        
-        // Show the Reveal text  
+
+        // Show the Reveal text
         img + span {
           display: block;
         }
       }
     `}
     };
+
+  // New style is rounded square buttons with dark grey background, and animation.
+  // When we've moved fully to the new design,
+  // this prop and the old styles can be removed.
+  ${({ newStyle }) => newStyle && css`
+    background-color: ${({ theme }) => theme.color('grey_4')};
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    ${springScaleAnimation(true, 1.15, 2)}
+
+    &:hover,
+    &:focus {
+      background-color: ${({ theme }) => theme.color('grey_4_hover')};
+      opacity: 1;
+    }
+  `}
 `;
 
 const RevealText = styled(Text)`
@@ -88,6 +111,9 @@ const RevealText = styled(Text)`
 
 const StyledImage = styled.img`
   width: 100%;
+  ${({ invertColor }) => invertColor && css`
+    filter: brightness(0) invert(1);
+  `}
 `;
 
 const HelperText = styled.span`
@@ -95,7 +121,8 @@ const HelperText = styled.span`
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, isHeader = false, id, ...restProps
+  href, target, icon, brand, title, id,
+  isHeader = false, newStyle = false, invertColor = false, ...restProps
 }) => (
   <StyledLink
     href={href}
@@ -105,9 +132,9 @@ const Icon = ({
     rel="noopener noreferrer"
     data-test={`${isHeader ? 'header' : 'icon'}-${kebabCase(id)}`}
     isHeader={isHeader}
+    newStyle={newStyle}
   >
-    <StyledImage src={icon} alt={brand} />
-
+    <StyledImage src={icon} alt={brand} invertColor={invertColor} />
     { isHeader && (
       <RevealText>{title}</RevealText>
     )}
@@ -125,7 +152,16 @@ Icon.propTypes = {
   icon: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   isHeader: PropTypes.bool,
-  id: PropTypes.string.isRequired
+  id: PropTypes.string.isRequired,
+  /** This applies the newer style, fitting with the new footer design for our pre-RND 2026
+   * website redesign.
+   * Currently only in use in the new footer. Once we have moved fully to the new design,
+   * this prop and the old styles can be removed. */
+  newStyle: PropTypes.bool,
+  /** Invert the color of the svg icon, e.g. for if you're using a dark background
+   * (currently only in use in the new footer)
+   */
+  invertColor: PropTypes.bool
 };
 
 export default Icon;

package/src/components/Atoms/SocialIcons/SocialIcons.js

@@ -2,50 +2,107 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import getLinks from './Utils/Links';
-import icons from './Utils/Icons';
+import { circledIcons, standardIcons } from './Utils/Icons';
 import Icon from './Icon/Icon';
 import spacing from '../../../theme/shared/spacing';
 
 const StyledList = styled.ul`
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  justify-content: center;
+  justify-content: ${newStyle => (newStyle ? 'space-around' : 'center')};
+  margin: ${({ newStyle }) => (newStyle ? `${spacing('lg')} 0` : '0 auto 0 0')};
   padding: 0;
   align-items: center;
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
     justify-content: start;
+     margin: ${({ newStyle }) => (newStyle ? `${spacing('sm')} 0` : '0 auto 0 0')};
   }
 `;
 
 const StyledItem = styled.li`
-  width: 32px;
-  margin-right: ${spacing('m')};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: 48px;
+  width: 48px;
+  margin-right: ${({ newStyle }) => (newStyle ? '0' : spacing('m'))};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    margin-right: ${({ newStyle }) => (newStyle ? spacing('md') : spacing('m'))};
   }
 `;
 
-/** Social media icons with customizable style linked to campaign social media accounts */
-const SocialIcons = ({ target = 'blank', campaign, ...restProps }) => {
+const StyledIcon = styled(Icon)`
+  width: auto;
+`;
+
+const SocialIcons = ({
+  campaign,
+  showFacebookSocialIcon,
+  showInstagramSocialIcon,
+  showXSocialIcon,
+  showTikTokSocialIcon,
+  showYouTubeSocialIcon,
+  target = 'blank',
+  newStyle = false,
+  invertColor = false,
+  ...restProps
+}) => {
   const links = getLinks(campaign);
 
+  // We've got two sets now - one better suited to the new footer design,
+  // and one for the legacy footer.
+  const iconSet = newStyle ? standardIcons : circledIcons;
+
+  // Map brand names to their show props
+  const brandVisibilityMap = {
+    facebook: showFacebookSocialIcon,
+    instagram: showInstagramSocialIcon,
+    twitter: showXSocialIcon,
+    x: showXSocialIcon,
+    tiktok: showTikTokSocialIcon,
+    youtube: showYouTubeSocialIcon
+  };
+
+  // If prop is explicitly false, hide; otherwise show
+  // (for backward compatibility with the 'old' footer)
+  const shouldShowIcon = brand => {
+    const visibilityProp = brandVisibilityMap[brand];
+    return visibilityProp !== false;
+  };
+
+  // Get the list of brands to display
+  // For newStyle, include tiktok and use 'x' instead of twitter
+  const brandsToShow = newStyle
+    ? ['facebook', 'instagram', 'x', 'tiktok', 'youtube']
+    : ['facebook', 'instagram', 'twitter', 'youtube'];
+
   return (
-    <StyledList>
-      {Object.keys(icons).map(brand => (
-        <StyledItem key={brand}>
-          <Icon
-            target={target}
-            icon={icons[brand]}
-            href={links[brand].url}
-            title={links[brand].title}
-            brand={brand}
-            id={links[brand].id}
-            {...restProps}
-          />
-        </StyledItem>
-      ))}
+    <StyledList newStyle={newStyle}>
+      {brandsToShow
+        .filter(brand => shouldShowIcon(brand))
+        .map(brand => {
+          const linkData = links[brand];
+          if (!linkData) {
+            return null;
+          }
+          const icon = iconSet[brand];
+          if (!icon) {
+            return null;
+          }
+          return (
+            <StyledItem key={brand} newStyle={newStyle}>
+              <StyledIcon
+                target={target}
+                icon={icon}
+                href={linkData.url}
+                title={linkData.title}
+                brand={brand}
+                id={linkData.id}
+                newStyle={newStyle}
+                invertColor={invertColor}
+                {...restProps}
+              />
+            </StyledItem>
+          );
+        })}
     </StyledList>
   );
 };
@@ -54,7 +111,24 @@ SocialIcons.propTypes = {
   /** Campaign, used to get social media accounts' links */
   campaign: PropTypes.string.isRequired,
   /** Social media account link target */
-  target: PropTypes.string
+  target: PropTypes.string,
+  /** This applies the newer style, fitting with the new footer design for
+   * our pre-RND 2026 website redesign.
+  Currently only in use in the new footer. Once we have moved fully to
+  the new design, this prop and the old styles can be removed. */
+  newStyle: PropTypes.bool,
+  /** Show/hide Facebook social icon */
+  showFacebookSocialIcon: PropTypes.bool,
+  /** Show/hide Instagram social icon */
+  showInstagramSocialIcon: PropTypes.bool,
+  /** Show/hide X (Twitter) social icon */
+  showXSocialIcon: PropTypes.bool,
+  /** Show/hide TikTok social icon */
+  showTikTokSocialIcon: PropTypes.bool,
+  /** Show/hide YouTube social icon */
+  showYouTubeSocialIcon: PropTypes.bool,
+  /** Invert the color of the svg icon, e.g. for if you're using a dark background */
+  invertColor: PropTypes.bool
 };
 
 export default SocialIcons;

package/src/components/Atoms/SocialIcons/Utils/Icons.js

@@ -1,11 +1,30 @@
-import facebook from '../assets/facebook.svg';
-import twitter from '../assets/X-white-Subtract.svg';
-import youtube from '../assets/youtube.svg';
-import instagram from '../assets/instagram.svg';
-
-export default {
-  facebook,
-  instagram,
-  twitter,
-  youtube
+// Icons with drawn circular border (old style)
+import facebookCircled from '../assets/circled/facebook.svg';
+import twitterCircled from '../assets/circled/X-white-Subtract.svg';
+import youtubeCircled from '../assets/circled/youtube.svg';
+import instagramCircled from '../assets/circled/instagram.svg';
+
+// Standard icons without drawn border (new style)
+import facebookStandard from '../assets/standard/facebook.svg';
+import xStandard from '../assets/standard/x.svg';
+import youtubeStandard from '../assets/standard/youtube.svg';
+import instagramStandard from '../assets/standard/instagram.svg';
+import tiktokStandard from '../assets/standard/tiktok.svg';
+
+export const circledIcons = {
+  facebook: facebookCircled,
+  instagram: instagramCircled,
+  twitter: twitterCircled,
+  youtube: youtubeCircled
 };
+
+export const standardIcons = {
+  facebook: facebookStandard,
+  instagram: instagramStandard,
+  x: xStandard,
+  youtube: youtubeStandard,
+  tiktok: tiktokStandard
+};
+
+// Default export for backward compatibility (circled icons)
+export default circledIcons;

package/src/components/Atoms/SocialIcons/Utils/Links.js

@@ -14,6 +14,11 @@ export default campaign => ({
     title: 'Check out our Twitter account',
     id: 'twitter'
   },
+  x: {
+    url: `https://x.com/${campaign}`,
+    title: 'Check out our X account',
+    id: 'x'
+  },
   youtube: {
     url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
     title: 'Check out our YouTube channel',
@@ -23,5 +28,10 @@ export default campaign => ({
     url: `https://www.instagram.com/${campaign}`,
     title: 'Check out our Instagram account',
     id: 'instagram'
+  },
+  tiktok: {
+    url: `https://www.tiktok.com/@${campaign}`,
+    title: 'Check out our TikTok account',
+    id: 'tiktok'
   }
 });