@comicrelief/component-library 8.44.3 → 8.45.0

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -117,8 +117,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Tennis
         </span>
@@ -223,8 +221,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Handball
         </span>

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

@@ -48,8 +48,6 @@ exports[`renders correctly 1`] = `
 
 <span
   className="c0"
-  color="red"
-  size="error"
 >
   <span
     className="c1"

package/dist/components/Atoms/Input/input.test.js

@@ -146,7 +146,6 @@ it('renders correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Label",
@@ -322,7 +321,6 @@ it('renders with responsive max widths correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Responsive Width Input",

package/dist/components/Atoms/RadioButton/RadioButton.test.js

@@ -128,8 +128,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Male
         </span>
@@ -243,8 +241,6 @@ it('renders correctly', () => {
         <span />
         <span
           className="c2"
-          color="inherit"
-          size="s"
         >
           Female
         </span>

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

@@ -111,7 +111,6 @@ exports[`renders correctly 1`] = `
 >
   <span
     className="c1 c2"
-    color="inherit"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Label",

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;