@comicrelief/component-library 8.44.4 → 8.45.0

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

@@ -11,12 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
 var _Text = _interopRequireDefault(require("../../Text/Text"));
+var _animations = require("../../../../theme/shared/animations");
 const RevealTextWidth = 55;
 const RevealTextSpeed = 0.35;
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Icon__StyledLink",
   componentId: "sc-no6fx6-0"
-})(["text-decoration:none;cursor:pointer;display:block;position:relative;transition:opacity 0.2s;&:hover,&:focus{opacity:0.6;}", "};"], _ref => {
+})(["text-decoration:none;cursor:pointer;display:block;position:relative;transition:opacity 0.2s;&:hover,&:focus{opacity:0.6;}", "};", ""], _ref => {
   let {
     isHeader
   } = _ref;
@@ -24,52 +25,74 @@ const StyledLink = _styledComponents.default.a.withConfig({
     let {
       theme
     } = _ref2;
-    return theme.allBreakpoints('M');
+    return theme.breakpoints2026('M');
   }, _ref3 => {
     let {
       theme
     } = _ref3;
     return theme.allBreakpoints('NavWide');
   }, RevealTextWidth);
+}, _ref4 => {
+  let {
+    newStyle
+  } = _ref4;
+  return newStyle && (0, _styledComponents.css)(["background-color:", ";border-radius:0.5rem;padding:0.5rem;display:flex;align-items:center;justify-content:center;width:100%;height:100%;", " &:hover,&:focus{background-color:", ";opacity:1;}"], _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.color('grey_4');
+  }, (0, _animations.springScaleAnimation)(true, 1.15, 2), _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.color('grey_4_hover');
+  });
 });
 const RevealText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Icon__RevealText",
   componentId: "sc-no6fx6-1"
-})(["width:auto;color:", ";position:absolute;top:50%;transform:translateY(-50%);left:70px;@media ", "{width:100%;text-align:center;position:absolute;top:8px;left:15px;transform:translateX(0);display:none;color:", ";}"], _ref4 => {
+})(["width:auto;color:", ";position:absolute;top:50%;transform:translateY(-50%);left:70px;@media ", "{width:100%;text-align:center;position:absolute;top:8px;left:15px;transform:translateX(0);display:none;color:", ";}"], _ref7 => {
   let {
     theme
-  } = _ref4;
+  } = _ref7;
   return theme.color('black');
-}, _ref5 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref5;
+  } = _ref8;
   return theme.allBreakpoints('Nav');
-}, _ref6 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref6;
+  } = _ref9;
   return theme.color('red');
 });
 const StyledImage = _styledComponents.default.img.withConfig({
   displayName: "Icon__StyledImage",
   componentId: "sc-no6fx6-2"
-})(["width:100%;"]);
+})(["width:100%;", ""], _ref10 => {
+  let {
+    invertColor
+  } = _ref10;
+  return invertColor && (0, _styledComponents.css)(["filter:brightness(0) invert(1);"]);
+});
 const HelperText = _styledComponents.default.span.withConfig({
   displayName: "Icon__HelperText",
   componentId: "sc-no6fx6-3"
 })(["", ";"], _hideVisually.default);
-const Icon = _ref7 => {
+const Icon = _ref11 => {
   let {
     href,
     target,
     icon,
     brand,
     title,
-    isHeader = false,
     id,
+    isHeader = false,
+    newStyle = false,
+    invertColor = false,
     ...restProps
-  } = _ref7;
+  } = _ref11;
   return /*#__PURE__*/_react.default.createElement(StyledLink, Object.assign({
     href: href,
     target: `_${target}`
@@ -77,10 +100,12 @@ const Icon = _ref7 => {
     title: title,
     rel: "noopener noreferrer",
     "data-test": `${isHeader ? 'header' : 'icon'}-${(0, _kebabCase2.default)(id)}`,
-    isHeader: isHeader
+    isHeader: isHeader,
+    newStyle: newStyle
   }), /*#__PURE__*/_react.default.createElement(StyledImage, {
     src: icon,
-    alt: brand
+    alt: brand,
+    invertColor: invertColor
   }), isHeader && /*#__PURE__*/_react.default.createElement(RevealText, null, title), id === 'esu' && /*#__PURE__*/_react.default.createElement(HelperText, null, "(opens in new window)"));
 };
 var _default = exports.default = Icon;

package/dist/components/Atoms/SocialIcons/SocialIcons.js

@@ -8,45 +8,114 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Links = _interopRequireDefault(require("./Utils/Links"));
-var _Icons = _interopRequireDefault(require("./Utils/Icons"));
+var _Icons = require("./Utils/Icons");
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const StyledList = _styledComponents.default.ul.withConfig({
   displayName: "SocialIcons__StyledList",
   componentId: "sc-i6jfaw-0"
-})(["display:flex;list-style-type:none;margin:0 auto;justify-content:center;padding:0;align-items:center;@media ", "{justify-content:start;}"], _ref => {
+})(["display:flex;list-style-type:none;justify-content:", ";margin:", ";padding:0;align-items:center;@media ", "{justify-content:start;margin:", ";}"], newStyle => newStyle ? 'space-around' : 'center', _ref => {
   let {
-    theme
+    newStyle
   } = _ref;
-  return theme.allBreakpoints('M');
+  return newStyle ? `${(0, _spacing.default)('lg')} 0` : '0 auto 0 0';
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('M');
+}, _ref3 => {
+  let {
+    newStyle
+  } = _ref3;
+  return newStyle ? `${(0, _spacing.default)('sm')} 0` : '0 auto 0 0';
 });
 const StyledItem = _styledComponents.default.li.withConfig({
   displayName: "SocialIcons__StyledItem",
   componentId: "sc-i6jfaw-1"
-})(["width:32px;margin-right:", ";@media ", "{width:48px;}"], (0, _spacing.default)('m'), _ref2 => {
+})(["width:48px;margin-right:", ";@media ", "{margin-right:", ";}"], _ref4 => {
+  let {
+    newStyle
+  } = _ref4;
+  return newStyle ? '0' : (0, _spacing.default)('m');
+}, _ref5 => {
   let {
     theme
-  } = _ref2;
-  return theme.allBreakpoints('M');
+  } = _ref5;
+  return theme.breakpoints2026('M');
+}, _ref6 => {
+  let {
+    newStyle
+  } = _ref6;
+  return newStyle ? (0, _spacing.default)('md') : (0, _spacing.default)('m');
 });
-
-/** Social media icons with customizable style linked to campaign social media accounts */
-const SocialIcons = _ref3 => {
+const StyledIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "SocialIcons__StyledIcon",
+  componentId: "sc-i6jfaw-2"
+})(["width:auto;"]);
+const SocialIcons = _ref7 => {
   let {
-    target = 'blank',
     campaign,
+    showFacebookSocialIcon,
+    showInstagramSocialIcon,
+    showXSocialIcon,
+    showTikTokSocialIcon,
+    showYouTubeSocialIcon,
+    target = 'blank',
+    newStyle = false,
+    invertColor = false,
     ...restProps
-  } = _ref3;
+  } = _ref7;
   const links = (0, _Links.default)(campaign);
-  return /*#__PURE__*/_react.default.createElement(StyledList, null, Object.keys(_Icons.default).map(brand => /*#__PURE__*/_react.default.createElement(StyledItem, {
-    key: brand
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
-    target: target,
-    icon: _Icons.default[brand],
-    href: links[brand].url,
-    title: links[brand].title,
-    brand: brand,
-    id: links[brand].id
-  }, restProps)))));
+
+  // We've got two sets now - one better suited to the new footer design,
+  // and one for the legacy footer.
+  const iconSet = newStyle ? _Icons.standardIcons : _Icons.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 /*#__PURE__*/_react.default.createElement(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 /*#__PURE__*/_react.default.createElement(StyledItem, {
+      key: brand,
+      newStyle: newStyle
+    }, /*#__PURE__*/_react.default.createElement(StyledIcon, Object.assign({
+      target: target,
+      icon: icon,
+      href: linkData.url,
+      title: linkData.title,
+      brand: brand,
+      id: linkData.id,
+      newStyle: newStyle,
+      invertColor: invertColor
+    }, restProps)));
+  }));
 };
 var _default = exports.default = SocialIcons;

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

@@ -4,14 +4,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _facebook = _interopRequireDefault(require("../assets/facebook.svg"));
-var _XWhiteSubtract = _interopRequireDefault(require("../assets/X-white-Subtract.svg"));
-var _youtube = _interopRequireDefault(require("../assets/youtube.svg"));
-var _instagram = _interopRequireDefault(require("../assets/instagram.svg"));
-var _default = exports.default = {
+exports.standardIcons = exports.default = exports.circledIcons = void 0;
+var _facebook = _interopRequireDefault(require("../assets/circled/facebook.svg"));
+var _XWhiteSubtract = _interopRequireDefault(require("../assets/circled/X-white-Subtract.svg"));
+var _youtube = _interopRequireDefault(require("../assets/circled/youtube.svg"));
+var _instagram = _interopRequireDefault(require("../assets/circled/instagram.svg"));
+var _facebook2 = _interopRequireDefault(require("../assets/standard/facebook.svg"));
+var _x = _interopRequireDefault(require("../assets/standard/x.svg"));
+var _youtube2 = _interopRequireDefault(require("../assets/standard/youtube.svg"));
+var _instagram2 = _interopRequireDefault(require("../assets/standard/instagram.svg"));
+var _tiktok = _interopRequireDefault(require("../assets/standard/tiktok.svg"));
+// Icons with drawn circular border (old style)
+
+// Standard icons without drawn border (new style)
+
+const circledIcons = exports.circledIcons = {
   facebook: _facebook.default,
   instagram: _instagram.default,
   twitter: _XWhiteSubtract.default,
   youtube: _youtube.default
-};
+};
+const standardIcons = exports.standardIcons = {
+  facebook: _facebook2.default,
+  instagram: _instagram2.default,
+  x: _x.default,
+  youtube: _youtube2.default,
+  tiktok: _tiktok.default
+};
+
+// Default export for backward compatibility (circled icons)
+var _default = exports.default = circledIcons;

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

@@ -20,6 +20,11 @@ var _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',
@@ -29,6 +34,11 @@ var _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'
   }
 });
 exports.default = _default;

package/dist/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -16,7 +16,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -26,11 +26,11 @@ exports[`renders correctly with Comic Relief links 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -39,22 +39,27 @@ exports[`renders correctly with Comic Relief links 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -65,7 +70,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/comicrelief"
       rel="noopener noreferrer"
@@ -74,7 +79,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -83,7 +88,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/comicrelief"
       rel="noopener noreferrer"
@@ -92,7 +97,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -101,7 +106,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/comicrelief"
       rel="noopener noreferrer"
@@ -110,7 +115,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -119,7 +124,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -128,7 +133,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -152,7 +157,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -162,11 +167,11 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -175,22 +180,27 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -201,7 +211,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/rednoseday"
       rel="noopener noreferrer"
@@ -210,7 +220,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -219,7 +229,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/rednoseday"
       rel="noopener noreferrer"
@@ -228,7 +238,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -237,7 +247,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/rednoseday"
       rel="noopener noreferrer"
@@ -246,7 +256,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -255,7 +265,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -264,7 +274,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -288,7 +298,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -298,11 +308,11 @@ exports[`renders correctly with Sport Relief links 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -311,22 +321,27 @@ exports[`renders correctly with Sport Relief links 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -337,7 +352,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/sportrelief"
       rel="noopener noreferrer"
@@ -346,7 +361,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -355,7 +370,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/sportrelief"
       rel="noopener noreferrer"
@@ -364,7 +379,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -373,7 +388,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/sportrelief"
       rel="noopener noreferrer"
@@ -382,7 +397,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -391,7 +406,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -400,7 +415,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>