@comicrelief/component-library 8.54.1 → 8.55.1

package/src/theme/shared/animations.js

@@ -1,4 +1,43 @@
-import { css } from 'styled-components';
+import { keyframes, css } from 'styled-components';
+
+const pulseIn = keyframes`
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(1.04, 1.04, 1.04);
+  }
+  60% {
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+  to {
+    transform: scale3d(1.04, 1.04, 1.04);
+  }
+`;
+
+const pulseOut = keyframes`
+  from {
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+  30% {
+    transform: scale3d(0.99, 0.99, 0.99);
+  }
+  60% {
+    transform: scale3d(1.01, 1.01, 1.01);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+const pulseInAnimation = css`
+  animation: ${pulseIn} 0.4s ease-in-out forwards;
+`;
+
+const pulseOutAnimation = css`
+  ${pulseInAnimation}
+  animation-name: ${pulseOut};
+`;
 
 /**
  * Logo rotation animation on hover
@@ -84,9 +123,14 @@ const formFieldInputAnimation = (shiftPx = 4) => css`
  * @param {boolean} animateScale - Whether to enable the scale animation
  * @param {number} pixelMovement - Amount of movement to apply on hover
  * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @param {boolean} targetChild - Where to apply the transform
+
  * @returns {css} template literal for the animation
  */
-const bounceUpAnimation = (animateScale, pixelMovement = 10, bounceIntensity = 1) => {
+const bounceUpAnimation = (animateScale,
+  pixelMovement = 10,
+  bounceIntensity = 1,
+  targetChild = false) => {
   if (!animateScale) {
     return css``;
   }
@@ -95,6 +139,24 @@ const bounceUpAnimation = (animateScale, pixelMovement = 10, bounceIntensity = 1
   const overshoot = 1.55 + (bounceIntensity * 0.4);
   const duration = 0.2 + (bounceIntensity * 0.1);
 
+  // The Hero Banner requires us to apply the transform inside
+  // the anchor, in order to address the 'infinity bounce' bug
+  if (targetChild) {
+    return css`
+    > div {
+      transition: transform ${duration}s cubic-bezier(0.68, ${pullBack}, 0.265, ${overshoot});
+      transform-origin: center;
+    }
+
+    &:hover,
+    &:focus {
+      > div {
+        transform: translateY(-${pixelMovement}px);
+      }
+    }
+  `;
+  }
+
   return css`
     transition: transform ${duration}s cubic-bezier(0.68, ${pullBack}, 0.265, ${overshoot});
     transform-origin: center;
@@ -110,5 +172,7 @@ export {
   logoRotateAnimation,
   springScaleAnimation,
   formFieldInputAnimation,
-  bounceUpAnimation
+  bounceUpAnimation,
+  pulseInAnimation,
+  pulseOutAnimation
 };

package/src/utils/navHelper.js

@@ -1,9 +1,11 @@
 /* Determine where to grab the URL, depending on the component type and values supplied */
 const NavHelper = navItem => {
+  if (!navItem) return '';
+
   /* Default url path location for 'Pages' */
   let thisUrl = navItem.path;
 
-  if (navItem.internal.type === 'ContentfulComponentLink') {
+  if (navItem.internal && navItem.internal.type === 'ContentfulComponentLink') {
     thisUrl = navItem.reference && navItem.reference.path
       ? navItem.reference.path
       : navItem.url;
@@ -12,6 +14,40 @@ const NavHelper = navItem => {
   return thisUrl;
 };
 
+/* NavHelper for new Contentful data structure (headerPageGroups format) */
+const NavHelperNew = pageLink => {
+  if (!pageLink) return '';
+
+  // pageSelector path takes priority
+  if (pageLink.pageSelector && pageLink.pageSelector.path) {
+    return `/${pageLink.pageSelector.path}`;
+  }
+
+  // Otherwise use external URL
+  if (pageLink.pageUrlIfExternal) {
+    return pageLink.pageUrlIfExternal;
+  }
+
+  return '';
+};
+
+/* Get URL for primary page in new data structure */
+const NavHelperPrimary = group => {
+  if (!group) return '';
+
+  // primaryPageSelector path takes priority
+  if (group.primaryPageSelector && group.primaryPageSelector.path) {
+    return `/${group.primaryPageSelector.path}`;
+  }
+
+  // Otherwise use external URL
+  if (group.primaryPageUrlIfExternal) {
+    return group.primaryPageUrlIfExternal;
+  }
+
+  return '';
+};
+
 const MoreNavPreProcess = (menuGroups, characterLimit) => {
   let characterCount = 0;
   const overLimit = false;
@@ -35,4 +71,48 @@ const MoreNavPreProcess = (menuGroups, characterLimit) => {
   return { standardGroups, moreNavGroups };
 };
 
-export { NavHelper, MoreNavPreProcess };
+/* MoreNavPreProcess for new Contentful data structure */
+const MoreNavPreProcessNew = (headerPageGroups, characterLimit) => {
+  let characterCount = 0;
+  const overLimit = false;
+  const standardGroups = [];
+  const moreNavGroups = [];
+
+  headerPageGroups.map(group => {
+    // Use primaryPageName for character count
+    characterCount += group.primaryPageName.length;
+
+    // Assign groups to the relevant array if we're over the limit
+    return characterCount > characterLimit !== overLimit
+      ? moreNavGroups.push(group)
+      : standardGroups.push(group);
+  });
+
+  return { standardGroups, moreNavGroups };
+};
+
+/* Combine all column links into a single array for submenu rendering */
+const getColumnLinks = group => {
+  const links = [];
+
+  if (group.column1PageLinks) {
+    links.push(...group.column1PageLinks);
+  }
+  if (group.column2PageLinks) {
+    links.push(...group.column2PageLinks);
+  }
+  if (group.column3PageLinks) {
+    links.push(...group.column3PageLinks);
+  }
+
+  return links;
+};
+
+export {
+  NavHelper,
+  NavHelperNew,
+  NavHelperPrimary,
+  MoreNavPreProcess,
+  MoreNavPreProcessNew,
+  getColumnLinks
+};

package/src/utils/remove-extra-styles-in-preview.css

@@ -0,0 +1,14 @@
+/* Overiding the extra Styleguidest / preview styles */
+.rsg--preview-35 {
+    padding: 0 !important;
+    border: none !important;
+}
+
+.rsg--content-3 {
+    padding: 0 !important;
+}
+
+.rsg--header-11,
+.rsg--tabs-12 {
+    display: none !important;;
+}

package/src/utils/urlHelper.js

@@ -0,0 +1,27 @@
+const BASE_URL = 'https://www.comicrelief.com';
+
+/**
+ * Prepends base URL to relative paths when in dev mode
+ * @param {string} path - The path to process into url
+ * @param {boolean} devMode - for adding real world urls when dev in CL
+ * @returns {string} The processed path / url
+ */
+const prependBaseUrl = (path, devMode) => {
+  // Return the url as-is if not in dev mode
+  if (!devMode) return path;
+
+  // Don't prepend if it's already an absolute URL
+  if (path.startsWith('http://')
+      || path.startsWith('https://')
+      || path.startsWith('//')) {
+    return path;
+  }
+
+  // Don't prepend to anchor-only links
+  if (path === '#') return path;
+
+  // Prepend base URL
+  return `${BASE_URL}${path.startsWith('/') ? '' : '/'}${path}`;
+};
+
+export default prependBaseUrl;