@comicrelief/component-library 8.83.1 → 8.84.0

package/src/components/Organisms/FilterCard/FilterCard.style.js

@@ -0,0 +1,425 @@
+import styled, { css, keyframes } from 'styled-components';
+import Picture from '../../Atoms/Picture/Picture';
+import Text from '../../Atoms/Text/Text';
+import Button from '../../Atoms/Button/Button';
+import { Copywrapper, IconWrapper } from '../../Atoms/Button/Button.style';
+import defaultBoxShadow from '../../../theme/shared/boxShadows';
+import Link from '../../Atoms/Link/Link';
+import { IconWrapper as LinkIconWrapper } from '../../Atoms/Link/Link.style';
+import Rectangle from './assets/Rectangle.svg';
+
+// To reduce icon flash when switching between images:
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+// Just for the lovely clean markup:
+const OuterWrapper = styled.div`
+//
+`;
+
+const Title = styled(Text)`
+   @media ${({ theme }) => theme.allBreakpoints('L')} {
+    margin-bottom: 2rem;
+  }
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: ${({ theme, $pageBackgroundColour }) => theme.color($pageBackgroundColour)};
+  justify-content: center;
+  ${({ $paddingAbove, $paddingBelow }) => css`padding: ${$paddingAbove} 1rem ${$paddingBelow};`}
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    padding-inline: 2rem;
+  }
+`;
+
+const HeaderWrapper = styled.div`
+  background: ${({ theme }) => theme.color('white')};
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  ${defaultBoxShadow()};
+
+  // Down 'arrow':
+  &:after {
+    --size: 3rem;
+    position: absolute;
+    content: "";
+    width: var(--size); 
+    height: var(--size); 
+    bottom: calc((var(--size) * -0.5));
+    left: calc(50% - (var(--size) / 2));
+    background: center / contain no-repeat url("${Rectangle}");
+    // Since the boxShadow won't extend to cover this, adding a little dropshadow to help it blend better:
+    filter: drop-shadow(0px 6px 3px rgba(0, 0, 0, 0.05));
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    &:after {
+      left: 3rem;
+    }
+  }
+  
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    padding: 4rem;
+    
+    &:after {
+      left: 4rem;
+    }
+  }
+`;
+
+const Body = styled.div`
+  margin-bottom: 40px;
+`;
+
+const ControlsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex-direction: row;
+  }
+`;
+
+// Tweaks to suit this context:
+const CustomisedButton = styled(Button)`
+  // Override 'Button w/icon' styles for this use-case:
+  display: inline-flex;
+  grid-column-gap: 0.5rem;
+  width: auto;
+
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    justify-content: left;
+  }
+  
+  ${({ theme }) => css`
+    color: ${theme.color('black')};
+    box-shadow: 0px 0px 0px 1px ${theme.color('black')} inset;
+  `};
+
+  > ${Copywrapper} {
+    padding-right: 0;
+    text-align: left;
+  }
+
+  > ${IconWrapper} {
+    margin-left: 0;
+    height: calc(2.25rem - (0.6rem * 2));
+  }
+`;
+
+const ShowHideFiltersButton = styled(CustomisedButton)`
+  // Override all normal button styles to make this work more as a 'toggle':
+  &,
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    background-color: ${({ theme, $isActive }) => ($isActive ? `${theme.color('grey_medium')}` : `${theme.color('white')}`)};
+  }
+
+  > ${Copywrapper} {
+    // Fixed label width to prevent squirming when the label copy changes:
+    width: 7rem;
+    text-align: center;
+
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
+      width: 8rem;
+    }
+  }
+
+  // More squirm-prevention when switching icons:
+  > ${IconWrapper} {
+    width: 1rem;
+  }
+`;
+
+const ResultsWrapper = styled.div`
+  text-align: center;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const ClearSelectionButton = styled(CustomisedButton)`
+  display: ${({ $show }) => ($show ? 'flex' : 'none')};
+`;
+
+const FilterButtonsWrapper = styled.div`
+  display: ${({ $show }) => ($show ? 'flex' : 'none')};
+  margin-top: 2rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  animation: ${fadeIn} 0.1s ease-in;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    gap: 1rem;
+  }
+`;
+
+const FilterButton = styled(CustomisedButton)`
+  box-shadow: 0px 0px 0px 1px ${({ theme }) => theme.color('grey_medium')} inset;
+  display: inline-flex;
+  flex-grow: 1;
+  background-color: ${({ theme }) => theme.color('grey_light')};
+
+  ${({ $isSelected }) => ($isSelected && css`
+    &,
+    &:hover,
+    &:focus {
+      background-color: ${({ theme }) => theme.color('red')};
+      color: ${({ theme }) => theme.color('white')};
+      box-shadow: none;
+    }
+  `)};
+
+  // Increase specificity to override style defaults:
+  ${FilterButtonsWrapper} & {
+
+    // Match the pre-existing transition with the icon animation so it looks as natural as poss:
+    transition: all 0.2s ease-in;
+
+    > ${IconWrapper} {
+      // Squirm-reduction
+      width: 1.25rem;
+      margin: 0;
+      animation: ${fadeIn} 0.2s ease-in;
+    }
+
+    > ${Copywrapper} {
+      padding-inline: 0;
+    }
+    
+    // Match the focus and hover states to default, as it makes for confusing UX:
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 0px 1px ${({ theme }) => theme.color('grey')} inset;
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex-grow: 0;
+  }
+`;
+
+const NodeWrapper = styled.ul`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 3rem 0 0;
+  gap: 1.5rem;
+  padding: 0;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    gap: 2rem;
+    margin-top: 4rem;
+  }
+`;
+
+const NodeImageWrapper = styled.div`
+  flex: 0 0 20%;
+  aspect-ratio: 1;
+  align-self: start;
+  min-width: 75px;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex: 0 0 20%;
+    min-width: 165px;
+  }
+`;
+
+const NodeCopyWrapper = styled.div`
+  flex: 0 0 calc(auto - var(--s-gap));
+  align-self: start;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex: 0 0 calc(auto - var(--m-gap));
+  }
+`;
+
+const Node = styled.li`
+  --s-gap: 1rem;
+  --m-gap: 2rem;
+  --l-gap: 4rem;
+  position: relative;
+  display: flex;
+  flex: 0 0 100%;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--s-gap);
+  border-radius: 0.5rem;
+  height: fit-content;
+  animation: ${fadeIn} 0.2s ease-in;
+
+  // Hero-only customisations:
+  ${({ $isHero }) => ($isHero ? css`
+    flex-direction: column;
+    margin-bottom: 1.5rem;
+
+    ${NodeImageWrapper},
+    ${NodeCopyWrapper} {
+      width: 100%;
+    }`
+    : css`
+    // Add a funky underline accent to all non-Hero, non-last nodes:
+    &:not(:last-child) {
+      // Space for funky accent
+      padding-bottom: 1.5rem;
+
+      // The titular funky accent
+      &:after {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 1px;
+        bottom: 0;
+        left: 0;
+        background-color:  ${({ theme }) => theme.color('grey_medium')};
+      }
+    }
+  `)};
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    gap: var(--m-gap);
+
+    ${({ $isHero }) => ($isHero ? css`
+      flex-direction: row;
+      margin-bottom: 2rem;
+
+      ${NodeImageWrapper} {
+        flex: 0 0 calc(40% - var(--s-gap));
+      }
+
+      ${NodeCopyWrapper} {
+        flex: 0 0 calc(60% - var(--s-gap));
+        align-self: center;
+      }
+  ` : css`
+    // Remove funky underline from all non-Hero nodes on this breakpoint
+    && {
+      padding-bottom: 0;
+      
+      &:after {
+        content: none;
+      }
+    }
+  `)}
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    flex-direction: row;
+
+    ${({ $isHero }) => ($isHero
+    ? css`
+      gap: var(--l-gap);
+      flex: 0 0 100%;
+
+      ${NodeImageWrapper} {
+        flex: 0 0 40%;
+      }
+
+      ${NodeCopyWrapper} {
+        flex: 0 0 calc(60% - var(--m-gap));
+      }`
+    : css`
+    flex: 0 0 calc(50% - 1rem);
+  `)};
+  }
+`;
+
+const NodeImage = styled(Picture)`
+  img {
+    ${defaultBoxShadow()};
+    border-radius: ${({ $isHero }) => ($isHero ? '1rem' : '0.5rem')};
+
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      border-radius: 1rem;
+    }
+  }
+`;
+
+const NodeCopyLabel = styled(Text)`
+  font-size: 14px;
+
+  ${({ $isHero }) => (!$isHero && css`
+    margin-bottom: 6px;
+
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      margin-bottom: 12px;
+    }`
+  )}
+`;
+
+const NodeCopyDescription = styled(Text)`
+  margin-bottom: ${({ $isHero }) => ($isHero ? '2rem' : '1.5rem')};
+`;
+
+const NodeCopyHeading = styled(Text)`
+    ${({ $isHero }) => ($isHero ? css`
+      ${({ $hasDescription }) => (!$hasDescription && css`margin-bottom: 2rem;`)};
+      font-weight: normal;
+      margin-top: 0;`
+    : css`
+    // Replicates the larger, standard margin Description usually has, allowing
+    // spacing above the CTA to be consistent when Desciption isn't present:
+    margin-bottom: ${({ $hasDescription }) => ($hasDescription ? '6px' : '1.5rem')};
+
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      margin-bottom: ${({ $hasDescription }) => ($hasDescription ? '12px' : '1.5rem')};
+    }
+  `)}
+`;
+
+// Override 'interesting' styling choices made within the underlying Link
+// component in the past to ensure icon doesn't escape constraints of the parent:
+// without accidentally borking anything in other contexts:
+const NodeCopyLink = styled(Link)`
+  display: inline-block;
+  padding-right: 2rem;
+
+  ${LinkIconWrapper} {
+    right: 0;
+    margin: 0;
+  }
+`;
+
+const ShowMoreButtonWrapper = styled.div`
+  display: flex;
+  margin-top: 2rem;
+  justify-content: center;
+`;
+
+export {
+  Container,
+  OuterWrapper,
+  HeaderWrapper,
+  Title,
+  Body,
+  ControlsWrapper,
+  ShowHideFiltersButton,
+  ClearSelectionButton,
+  ResultsWrapper,
+  FilterButtonsWrapper,
+  FilterButton,
+  NodeWrapper,
+  Node,
+  NodeImageWrapper,
+  NodeImage,
+  NodeCopyWrapper,
+  NodeCopyLabel,
+  NodeCopyHeading,
+  NodeCopyDescription,
+  NodeCopyLink,
+  ShowMoreButtonWrapper
+};

package/src/components/Organisms/FilterCard/FilterCard.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import FilterCard from './FilterCard';
+
+
+import {
+  filterCardTestDataStandard,
+  filterCardTestDataHero,
+  filterCardTestDataExpanded,
+  filterCardTestDataExpandedLoader,
+  filterCardTestDataExpandedLoaderHero,
+} from '../../../data/data';
+
+it('renders standard FilterCard correctly', () => {
+  const tree = renderWithTheme(
+    <FilterCard
+      data={filterCardTestDataStandard}
+    />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders standard FilterCard w/hero correctly', () => {
+  const tree = renderWithTheme(
+    <FilterCard
+      data={filterCardTestDataHero}
+    />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+
+it('renders standard FilterCard w/expanded content', () => {
+  const tree = renderWithTheme(
+    <FilterCard
+      data={filterCardTestDataExpanded}
+    />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+
+it('renders standard FilterCard w/expanded content + loader', () => {
+  const tree = renderWithTheme(
+    <FilterCard
+      data={filterCardTestDataExpandedLoader}
+    />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders standard FilterCard w/expanded content, loader + hero', () => {
+  const tree = renderWithTheme(
+    <FilterCard
+      data={filterCardTestDataExpandedLoaderHero}
+    />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/Organisms/FilterCard/FilterCardExample.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ExampleContainer } from '../../../demos/SharedStyles';
+import FilterCard from './FilterCard';
+import {
+  filterCardTestDataStandard,
+  filterCardTestDataHero,
+  filterCardTestDataExpanded,
+  filterCardTestDataExpandedLoader,
+  filterCardTestDataExpandedLoaderHero
+
+} from '../../../data/data';
+
+export default function FilterCardExample() {
+  return (
+    <>
+      <ExampleContainer $bg="#F4F3F5" style={{ padding: 0 }}>
+        <FilterCard
+          data={filterCardTestDataStandard}
+        />
+      </ExampleContainer>
+
+      <ExampleContainer $bg="#F4F3F5" style={{ padding: 0 }}>
+        <FilterCard
+          data={filterCardTestDataHero}
+        />
+      </ExampleContainer>
+
+      <ExampleContainer $bg="#F4F3F5" style={{ padding: 0 }}>
+        <FilterCard
+          data={filterCardTestDataExpanded}
+        />
+      </ExampleContainer>
+
+      <ExampleContainer $bg="#F4F3F5" style={{ padding: 0 }}>
+        <FilterCard
+          data={filterCardTestDataExpandedLoader}
+        />
+      </ExampleContainer>
+
+      <ExampleContainer $bg="#F4F3F5" style={{ padding: 0 }}>
+        <FilterCard
+          data={filterCardTestDataExpandedLoaderHero}
+        />
+      </ExampleContainer>
+
+    </>
+  );
+}

package/src/components/Organisms/FilterCard/FilterCardNodes.js

@@ -0,0 +1,155 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Text from '../../Atoms/Text/Text';
+import { getIcon } from './_utils/_utils';
+
+import {
+  Node,
+  NodeWrapper,
+  NodeImageWrapper,
+  NodeImage,
+  NodeCopyWrapper,
+  NodeCopyLabel,
+  NodeCopyHeading,
+  NodeCopyDescription,
+  NodeCopyLink
+} from './FilterCard.style';
+
+const FilterCardNodes = ({
+  updateTotalResult,
+  processedNodes,
+  firstFilterCardNodeAsHero,
+  nodeRenderLimit,
+  currentFilters,
+  hideShowMoreButton
+}) => {
+  // Track of how many nodes we successfully rendered, plus how
+  // many the current filter has associated with it in total:
+  let currentNodeCount = 0;
+  let totalNodeCount = 0;
+
+  const filtersActive = currentFilters.length > 0;
+
+  // Step through all content this FilterCard component has been fed from the CMS:
+  const createNodes = processedNodes.map((thisNode, index) => {
+    // Whether or not this node contains a tag we're currently filtering for:
+    const tagMatch = currentFilters.some(thisTag => thisNode.tags.includes(thisTag));
+
+    // Only insist on a tag match when filtering, otherwise just count _every_ node;
+    if ((filtersActive && tagMatch) || !filtersActive) totalNodeCount += 1;
+
+    // Render this node when all filters are inactive, or when it matches 1+ of our active filters:
+    const renderThisNode = (!filtersActive || tagMatch);
+
+    // Finally, check if we've even got a render limit before comparing to the current counter:
+    const underLimit = nodeRenderLimit === 0
+      || (nodeRenderLimit > 0 && currentNodeCount < nodeRenderLimit);
+
+    // If we meet both criteria, go forth and render:
+    if (renderThisNode && underLimit) {
+      const {
+        id, label, heading, description,
+        image, imageLow, imageSet, imageAltText,
+        url, ctaText, ctaIcon
+      } = thisNode;
+
+      // Applies the Hero styling to the first node, when the CMS is set to do so:
+      const heroFirstNode = index === 0 && firstFilterCardNodeAsHero;
+
+      // Bump the counter for this successful render:
+      currentNodeCount += 1;
+
+      return (
+        <Node
+          key={id}
+          $isHero={heroFirstNode}
+          data-testid="FilterCard-Node"
+        >
+          <NodeImageWrapper>
+            <NodeImage
+              image={image}
+              images={imageSet}
+              imageLow={imageLow}
+              objectFit="cover"
+              width="100%"
+              height="100%"
+              alt={imageAltText}
+              $isHero={heroFirstNode}
+            />
+          </NodeImageWrapper>
+
+          <NodeCopyWrapper tabIndex="0">
+            <NodeCopyLabel
+              tag="p"
+              color="grey"
+              weight="500"
+              $isHero={heroFirstNode}
+            >
+              {label}
+            </NodeCopyLabel>
+
+            <NodeCopyHeading
+              tag={heroFirstNode ? 'h2' : 'p'}
+              weight="700"
+              $isHero={heroFirstNode}
+              $hasDescription={description}
+              data-testid="FilterCard-Node--Heading"
+            >
+              {heading}
+            </NodeCopyHeading>
+
+            {description && (
+            <NodeCopyDescription
+              tag="p"
+              $isHero={heroFirstNode}
+            >
+              {description}
+            </NodeCopyDescription>
+            )}
+
+            <Text tag="p">
+              <NodeCopyLink
+                href={url}
+                $underline
+                target="blank"
+                icon={getIcon(ctaIcon)}
+              >
+                {ctaText}
+              </NodeCopyLink>
+            </Text>
+          </NodeCopyWrapper>
+        </Node>
+      );
+    }
+    return null;
+  });
+
+  // Remove any nulls from our map-function created createNodes array:
+  const nodesToRender = createNodes.filter(Boolean);
+
+  useEffect(() => {
+    // Let the parent know how many _total_ nodes this filter combination has associated
+    // with it (for the 'Results' readout), rather than how many we're _currently_ rendering:
+    updateTotalResult(totalNodeCount);
+
+    // And also let it know if we've rendered everything we can:
+    hideShowMoreButton(currentNodeCount === totalNodeCount);
+  }, [nodesToRender, updateTotalResult, hideShowMoreButton, currentNodeCount, totalNodeCount]);
+
+  return (
+    <NodeWrapper>
+      {nodesToRender}
+    </NodeWrapper>
+  );
+};
+
+FilterCardNodes.propTypes = {
+  processedNodes: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  currentFilters: PropTypes.arrayOf(PropTypes.string).isRequired,
+  firstFilterCardNodeAsHero: PropTypes.bool.isRequired,
+  updateTotalResult: PropTypes.func.isRequired,
+  nodeRenderLimit: PropTypes.number.isRequired,
+  hideShowMoreButton: PropTypes.func.isRequired
+};
+
+export default FilterCardNodes;