@comicrelief/component-library 8.83.0 → 8.84.0

package/src/data/data.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import picture1 from '../assets/picture-1.jpg';
 import picture2 from '../assets/picture-2.jpg';
 import picture3 from '../assets/picture-3.jpg';
@@ -6,6 +7,8 @@ import heroBannerImg from '../assets/PromoLW.jpg';
 import heroBannerLogoSquare from '../assets/HeroBannerLogo-Square.png';
 import heroBannerLogoWide from '../assets/HeroBannerLogo-Wide.png';
 import heroBannerLogoTall from '../assets/HeroBannerLogo-Tall.png';
+import Text from '../components/Atoms/Text/Text';
+import { FilterCardNodes4, FilterCardNodes5, FilterCardNodes20 } from './TestFilterCardNodeData';
 
 const defaultData = {
   title: 'What your money does',
@@ -344,12 +347,72 @@ const RichtextCarouselItemsWithPadding = {
 
 const ButtonIconImgPath = 'https://images.ctfassets.net/zsfivwzfgl3t/4IlLxZnddkg1pHWZP3AZnA/447078df666932751c9c618a296f24db/Icon__Shelter.png';
 
+const ButtonIconImagePath2 = 'https://images.ctfassets.net/zsfivwzfgl3t/1olBuz2b2baO5qKsOFvNjr/7df1553e56b7b50ff3d27cfbeae92370/Legal_assistance_packages.png';
+
 const ButtonIconSvgPath = 'https://images.ctfassets.net/0p265iutoxgq/3GaahqcCBaXrLBm5fu8HAj/d965a32d93fe82bf103c2f444e0bb9ec/Phone--white.svg';
 
+// Reused config and 'top' content for the FilterCard examples:
+const filterCardConfig = {
+  paddingAbove: '2rem',
+  paddingBelow: '2rem',
+  pageBackgroundColour: 'grey_light',
+  loadingBehaviour: 'Load all cards at once',
+  body:
+  <Text>
+    From fundraising packs to bunting, certificates, cake labels and more, find everything
+    you need to take yourself funny for money this Red Nose Day. Select a resource type to
+    filters the results.
+  </Text>
+};
+
+const filterCardTestDataStandard = {
+  ...filterCardConfig,
+  id: 'filtercard--standard',
+  title: 'Your fundraising resources: STANDARD',
+  filterCardNodes: FilterCardNodes4
+};
+
+const filterCardTestDataHero = {
+  ...filterCardConfig,
+  id: 'filtercard--hero',
+  title: 'Your fundraising resources: HERO',
+  firstFilterCardNodeAsHero: true,
+  filterCardNodes: FilterCardNodes5
+};
+
+const filterCardTestDataExpanded = {
+  ...filterCardConfig,
+  id: 'filtercard--expanded',
+  title: 'Your fundraising resources: EXPANDED',
+  filterCardNodes: FilterCardNodes20
+};
+
+const filterCardTestDataExpandedLoader = {
+  ...filterCardConfig,
+  id: 'filtercard--expanded-loader',
+  title: 'Your fundraising resources: EXPANDED + LOADER',
+  loadingBehaviour: 'Load 6 cards at a time + Hero Node (if set)',
+  filterCardNodes: FilterCardNodes20
+};
+
+const filterCardTestDataExpandedLoaderHero = {
+  ...filterCardConfig,
+  id: 'filtercard--expanded-loader-hero',
+  title: 'Your fundraising resources: EXPANDED + LOADER + HERO',
+  loadingBehaviour: 'Load 6 cards at a time + Hero Node (if set)',
+  filterCardNodes: FilterCardNodes20,
+  firstFilterCardNodeAsHero: true
+};
+
 export {
   defaultData, mobileImages, testImpactSliderItems,
   carouselItemsComplete, carouselItemsCompleteWithPadding,
   carouselItemsIncomplete, carouselItemsMinimal,
   RichtextCarouselItems, RichtextCarouselItemsWithPadding,
-  ButtonIconImgPath, ButtonIconSvgPath
+  ButtonIconImgPath, ButtonIconSvgPath, ButtonIconImagePath2,
+  filterCardTestDataStandard,
+  filterCardTestDataHero,
+  filterCardTestDataExpanded,
+  filterCardTestDataExpandedLoader,
+  filterCardTestDataExpandedLoaderHero
 };

package/src/data/test-icons/Children--black.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 7.984C17.6545 7.984 19 6.6415 19 4.992C19 3.3425 17.654 2 16 2C14.346 2 13 3.3425 13 4.992C13 6.6415 14.3455 7.984 16 7.984ZM16 4C16.5515 4 17 4.445 17 4.992C17 5.539 16.5515 5.984 16 5.984C15.4485 5.984 15 5.539 15 4.992C15 4.445 15.4485 4 16 4Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 11.968C9.1545 11.968 10.5 10.6255 10.5 8.97601C10.5 7.32651 9.1545 5.98401 7.5 5.98401C5.8455 5.98401 4.5 7.32601 4.5 8.97601C4.5 10.626 5.846 11.968 7.5 11.968ZM7.5 7.98401C8.0515 7.98401 8.5 8.42901 8.5 8.97551C8.5 9.52201 8.0515 9.96751 7.5 9.96751C6.9485 9.96751 6.5 9.52251 6.5 8.97551C6.5 8.42851 6.9485 7.98401 7.5 7.98401Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5615 8.07754C21.0575 7.83504 21.6565 8.04104 21.8985 8.53754C22.1405 9.03354 21.9345 9.63254 21.439 9.87454C20.7935 10.1895 20.0445 10.358 19.2555 10.46C20.1315 13.179 21.475 19.8405 20.928 20.8655C20.742 21.213 20.3865 21.4295 20.0005 21.4295C19.191 21.4295 18.8915 20.7786 18.1676 19.2053L18.1604 19.1897C17.9008 18.6261 17.4491 17.6459 17.0745 17.0255C15.445 20.165 14.1835 21.8155 13.3075 21.958C13.242 21.969 13.1765 21.974 13.112 21.974C12.805 21.974 12.515 21.8555 12.2945 21.636C11.6785 21.022 11.8685 20.125 12.7735 16.4225C13.2105 14.6355 13.7315 12.501 13.9235 10.9835C13.2265 11.1775 12.6725 11.4895 12.3575 12.0145C11.9475 12.6975 11.3755 13.221 10.7065 13.619C11.5 15.742 11.4325 20.227 11.039 21.18C10.7525 21.8735 10.1715 21.9275 10 21.9275C9.11552 21.9275 8.83333 21.1235 8.36582 19.7914L8.365 19.789C8.259 19.4865 8.1065 19.0515 7.952 18.6665C7.033 20.1275 5.518 21.804 4.43 21.981C4.352 21.994 4.274 22 4.1975 22C3.8525 22 3.532 21.873 3.294 21.6365C2.55955 20.9046 2.97194 19.7842 3.87581 17.3285C4.19231 16.4695 4.537 15.529 4.783 14.6905C4.055 14.6425 3.375 14.5525 2.805 14.439C2.263 14.331 1.9115 13.805 2.0195 13.263C2.1275 12.7215 2.653 12.369 3.1955 12.4775C5.4585 12.9285 9.4815 12.922 10.6425 10.9865C11.9079 8.87765 14.6052 8.74505 16.9851 8.62806L16.9884 8.6279C18.3255 8.56194 19.7081 8.49374 20.5615 8.07754ZM8.041 16.008C8.5655 16.042 8.9535 16.357 9.2755 16.8465C9.2065 15.8125 9.0755 14.8455 8.884 14.362C8.2255 14.5365 7.536 14.641 6.8485 14.6905C6.5815 15.746 6.15 16.939 5.753 18.0185C5.6825 18.21 5.6065 18.4165 5.5305 18.626C5.925 18.139 6.317 17.5695 6.6065 16.993C7.0625 16.0855 7.698 15.99 8.041 16.008ZM16.97 14.567C17.5305 14.5765 17.9915 14.8995 18.436 15.4845C18.0335 13.3905 17.536 11.264 17.2165 10.618C17.172 10.6205 17.1275 10.623 17.0835 10.625L17.0371 10.6274C16.6739 10.6456 16.3146 10.6636 15.965 10.6875C15.821 12.375 15.239 14.759 14.716 16.8975L14.601 17.368C14.9425 16.7725 15.289 16.131 15.606 15.499C16.02 14.675 16.65 14.576 16.97 14.567Z" fill="black"/>
+</svg>

package/src/data/test-icons/Children--white.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 7.984C17.6545 7.984 19 6.6415 19 4.992C19 3.3425 17.654 2 16 2C14.346 2 13 3.3425 13 4.992C13 6.6415 14.3455 7.984 16 7.984ZM16 4C16.5515 4 17 4.445 17 4.992C17 5.539 16.5515 5.984 16 5.984C15.4485 5.984 15 5.539 15 4.992C15 4.445 15.4485 4 16 4Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 11.968C9.1545 11.968 10.5 10.6255 10.5 8.97601C10.5 7.32651 9.1545 5.98401 7.5 5.98401C5.8455 5.98401 4.5 7.32601 4.5 8.97601C4.5 10.626 5.846 11.968 7.5 11.968ZM7.5 7.98401C8.0515 7.98401 8.5 8.42901 8.5 8.97551C8.5 9.52201 8.0515 9.96751 7.5 9.96751C6.9485 9.96751 6.5 9.52251 6.5 8.97551C6.5 8.42851 6.9485 7.98401 7.5 7.98401Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5615 8.07754C21.0575 7.83504 21.6565 8.04104 21.8985 8.53754C22.1405 9.03354 21.9345 9.63254 21.439 9.87454C20.7935 10.1895 20.0445 10.358 19.2555 10.46C20.1315 13.179 21.475 19.8405 20.928 20.8655C20.742 21.213 20.3865 21.4295 20.0005 21.4295C19.191 21.4295 18.8915 20.7786 18.1676 19.2053L18.1604 19.1897C17.9008 18.6261 17.4491 17.6459 17.0745 17.0255C15.445 20.165 14.1835 21.8155 13.3075 21.958C13.242 21.969 13.1765 21.974 13.112 21.974C12.805 21.974 12.515 21.8555 12.2945 21.636C11.6785 21.022 11.8685 20.125 12.7735 16.4225C13.2105 14.6355 13.7315 12.501 13.9235 10.9835C13.2265 11.1775 12.6725 11.4895 12.3575 12.0145C11.9475 12.6975 11.3755 13.221 10.7065 13.619C11.5 15.742 11.4325 20.227 11.039 21.18C10.7525 21.8735 10.1715 21.9275 10 21.9275C9.11552 21.9275 8.83333 21.1235 8.36582 19.7914L8.365 19.789C8.259 19.4865 8.1065 19.0515 7.952 18.6665C7.033 20.1275 5.518 21.804 4.43 21.981C4.352 21.994 4.274 22 4.1975 22C3.8525 22 3.532 21.873 3.294 21.6365C2.55955 20.9046 2.97194 19.7842 3.87581 17.3285C4.19231 16.4695 4.537 15.529 4.783 14.6905C4.055 14.6425 3.375 14.5525 2.805 14.439C2.263 14.331 1.9115 13.805 2.0195 13.263C2.1275 12.7215 2.653 12.369 3.1955 12.4775C5.4585 12.9285 9.4815 12.922 10.6425 10.9865C11.9079 8.87765 14.6052 8.74505 16.9851 8.62806L16.9884 8.6279C18.3255 8.56194 19.7081 8.49374 20.5615 8.07754ZM8.041 16.008C8.5655 16.042 8.9535 16.357 9.2755 16.8465C9.2065 15.8125 9.0755 14.8455 8.884 14.362C8.2255 14.5365 7.536 14.641 6.8485 14.6905C6.5815 15.746 6.15 16.939 5.753 18.0185C5.6825 18.21 5.6065 18.4165 5.5305 18.626C5.925 18.139 6.317 17.5695 6.6065 16.993C7.0625 16.0855 7.698 15.99 8.041 16.008ZM16.97 14.567C17.5305 14.5765 17.9915 14.8995 18.436 15.4845C18.0335 13.3905 17.536 11.264 17.2165 10.618C17.172 10.6205 17.1275 10.623 17.0835 10.625L17.0371 10.6274C16.6739 10.6456 16.3146 10.6636 15.965 10.6875C15.821 12.375 15.239 14.759 14.716 16.8975L14.601 17.368C14.9425 16.7725 15.289 16.131 15.606 15.499C16.02 14.675 16.65 14.576 16.97 14.567Z" fill="white"/>
+</svg>

package/src/demos/index.jsx

@@ -126,26 +126,47 @@ import marketingPreferencesDSExampleSrc from '../components/Organisms/MarketingP
 import { MembershipExample1, MembershipExample2 } from '../components/Organisms/Membership/MembershipExample.jsx';
 import DonateBannerExample from '../components/Organisms/DonateBanner/DonateBannerExample.jsx';
 import donateBannerExampleSrc from '../components/Organisms/DonateBanner/DonateBannerExample.jsx?raw';
-import { EmailBannerExample1, EmailBannerExample2, EmailBannerExample3, EmailBannerExample4, EmailBannerExample5 } from '../components/Organisms/EmailBanner/EmailBannerExample.jsx';
+import {
+  EmailBannerExample1, EmailBannerExample2, EmailBannerExample3, EmailBannerExample4, EmailBannerExample5
+} from '../components/Organisms/EmailBanner/EmailBannerExample.jsx';
 import FooterNewExample from '../components/Organisms/FooterNew/FooterNewExample.jsx';
 import footerNewExampleSrc from '../components/Organisms/FooterNew/FooterNewExample.jsx?raw';
-import { HeaderExample1, HeaderExample2, HeaderExample3, HeaderExample4, HeaderExample5 } from '../components/Organisms/Header/HeaderExample.jsx';
+import {
+  HeaderExample1, HeaderExample2, HeaderExample3, HeaderExample4, HeaderExample5
+} from '../components/Organisms/Header/HeaderExample.jsx';
 import Header2025Example from '../components/Organisms/Header2025/Header2025Example.jsx';
 import header2025ExampleSrc from '../components/Organisms/Header2025/Header2025Example.jsx?raw';
-import { DonateExample1, DonateExample2, DonateExample3, DonateExample4, DonateExample5, DonateExample6, DonateExample7, DonateExample8, DonateExample9, DonateExample10, DonateExample11, DonateExample12, DonateExample13, DonateExample14, DonateExample15, DonateExample16, DonateExample17, DonateExample18, DonateExample19, DonateExample20, DonateExample21, DonateExample22 } from '../components/Organisms/Donate/DonateExample.jsx';
+
+import {
+  DonateExample1, DonateExample2, DonateExample3, DonateExample4, DonateExample5, DonateExample6, DonateExample7, DonateExample8, DonateExample9, DonateExample10, DonateExample11, DonateExample12, DonateExample13, DonateExample14, DonateExample15, DonateExample16, DonateExample17, DonateExample18, DonateExample19, DonateExample20, DonateExample21, DonateExample22
+} from '../components/Organisms/Donate/DonateExample.jsx';
+
 import CookieBannerExample from '../components/Organisms/CookieBanner/CookieBannerExample.jsx';
 import cookieBannerExampleSrc from '../components/Organisms/CookieBanner/CookieBannerExample.jsx?raw';
 import { ImpactSliderExample1, ImpactSliderExample2 } from '../components/Organisms/ImpactSlider/ImpactSliderExample.jsx';
+
 import WYMDCarouselExample from '../components/Organisms/WYMDCarousel/WYMDCarouselExample.jsx';
 import wymdCarouselExampleSrc from '../components/Organisms/WYMDCarousel/WYMDCarouselExample.jsx?raw';
+
 import RichtextCarouselExample from '../components/Organisms/RichtextCarousel/RichtextCarouselExample.jsx';
 import richtextCarouselExampleSrc from '../components/Organisms/RichtextCarousel/RichtextCarouselExample.jsx?raw';
+
 import DynamicGalleryExample from '../components/Organisms/DynamicGallery/DynamicGalleryExample.jsx';
 import dynamicGalleryExampleSrc from '../components/Organisms/DynamicGallery/DynamicGalleryExample.jsx?raw';
 
+import FilterCardExample from '../components/Organisms/FilterCard/FilterCardExample.jsx';
+import filterCardExampleSrc from '../components/Organisms/FilterCard/FilterCardExample.jsx?raw';
+
 const Placeholder = ({ name }) => (
-  <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', color: '#666' }}>
-    <em>{name} — no example in place.</em>
+  <div style={{
+    padding: '1rem', background: '#f5f5f5', borderRadius: '4px', color: '#666'
+  }}
+  >
+    <em>
+      {name}
+      {' '}
+      — no example in place.
+    </em>
   </div>
 );
 
@@ -175,7 +196,7 @@ export const atoms = [
   { name: 'SocialIcons', demo: demo(SocialIconsExample, socialIconsExampleSrc) },
   { name: 'Text', demo: demo(TextExample, textExampleSrc) },
   { name: 'TextArea', demo: demo(TextAreaExample, textAreaExampleSrc) },
-  { name: 'TextInputWithDropdown', demo: demo(TextInputWithDropdownExample, textInputWithDropdownExampleSrc) },
+  { name: 'TextInputWithDropdown', demo: demo(TextInputWithDropdownExample, textInputWithDropdownExampleSrc) }
 ];
 
 export const molecules = [
@@ -210,7 +231,7 @@ export const molecules = [
   { name: 'SingleMessageDs', demo: demo(SingleMessageDsExample, singleMessageDsExampleSrc) },
   { name: 'StatsSlice', demo: demo(StatsSliceExample, statsSliceExampleSrc) },
   { name: 'Typeahead', demo: demo(TypeaheadExample, typeaheadExampleSrc) },
-  { name: 'VideoBanner', demo: demo(VideoBannerExample, videoBannerExampleSrc) },
+  { name: 'VideoBanner', demo: demo(VideoBannerExample, videoBannerExampleSrc) }
 ];
 
 export const organisms = [
@@ -220,6 +241,7 @@ export const organisms = [
   { name: 'DynamicGallery', demo: demo(DynamicGalleryExample, dynamicGalleryExampleSrc) },
   { name: 'EmailBanner', examples: [<EmailBannerExample1 />, <EmailBannerExample2 />, <EmailBannerExample3 />, <EmailBannerExample4 />, <EmailBannerExample5 />] },
   { name: 'EmailSignUpForm', demo: demo(EmailSignUpExample, emailSignUpExampleSrc) },
+  { name: 'FilterCard', demo: demo(FilterCardExample, filterCardExampleSrc) },
   { name: 'Footer', examples: [<FooterExample1 />, <FooterExample2 />, <FooterExample3 />] },
   { name: 'FooterNew', demo: demo(FooterNewExample, footerNewExampleSrc) },
   { name: 'Header', examples: [<HeaderExample1 />, <HeaderExample2 />, <HeaderExample3 />, <HeaderExample4 />, <HeaderExample5 />] },
@@ -228,12 +250,12 @@ export const organisms = [
   { name: 'MarketingPreferencesDSForm', demo: demo(MarketingPreferencesDSExample, marketingPreferencesDSExampleSrc) },
   { name: 'Membership', examples: [<MembershipExample1 />, <MembershipExample2 />] },
   { name: 'RichtextCarousel', demo: demo(RichtextCarouselExample, richtextCarouselExampleSrc) },
-  { name: 'WYMDCarousel', demo: demo(WYMDCarouselExample, wymdCarouselExampleSrc) },
+  { name: 'WYMDCarousel', demo: demo(WYMDCarouselExample, wymdCarouselExampleSrc) }
 ];
 
 export const docs = [
   { name: 'Introduction', demo: <IntroductionDoc /> },
   { name: 'Installation', demo: <InstallationDoc /> },
   { name: 'Utils', demo: <UtilsDoc /> },
-  { name: 'Theme', demo: <ThemeExample /> },
+  { name: 'Theme', demo: <ThemeExample /> }
 ];

package/src/index.js

@@ -96,3 +96,4 @@ export {
 export { default as Membership } from './components/Organisms/Membership/Membership';
 export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
 export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
+export { default as FilterCard } from './components/Organisms/FilterCard/FilterCard';

package/src/theme/crTheme/buttonColors.js

@@ -83,7 +83,6 @@ const buttonColors = {
     textColour: color('black'),
     hoverBackground: color('grey_light'),
     hovertextColour: color('black')
-
   },
   grey_dark: {
     background: color('grey_dark'),
@@ -94,8 +93,8 @@ const buttonColors = {
   grey_light: {
     background: color('grey_light'),
     textColour: color('black'),
-    hoverBackground: color('grey_dark'),
-    hovertextColour: color('white')
+    hoverBackground: color('grey_medium'),
+    hovertextColour: color('black')
   },
   magenta: {
     background: color('magenta'),
@@ -226,7 +225,7 @@ export default (colorName, buttonType) => {
 
       &:disabled {
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: 0.35;
       }
 
       // 'Secondary' and 'Tertiary' buttonType tweaks