@comicrelief/component-library 8.79.0 → 8.81.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.79.0",
+  "version": "8.81.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [

package/src/components/Atoms/Logos/Logo.js

@@ -1,33 +1,13 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import zIndex from '../../../theme/shared/zIndex';
-import spacing from '../../../theme/shared/spacing';
+import { Image, LogoWrapper } from './Logo.style';
+
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
 import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
 import crLogoWide from './assets/cr-logo--wide.svg';
 
-const Image = styled.img`
-  object-fit: cover;
-  width: 100%;
-  display: block;
-  height: auto;
-  margin-right: ${spacing('md')};
-`;
-
-const LogoWrapper = styled.div`
-  display: inline-block;
-  ${zIndex('high')}
-  width: ${props => props.$sizeSm};
-  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
-  vertical-align: bottom; // height fix
-  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
-    width: ${props => props.$sizeMd};
-  }
-`;
-
 const themeSwitcher = theme => {
   switch (theme) {
     case 'Sport Relief':
@@ -42,9 +22,9 @@ const themeSwitcher = theme => {
 };
 
 const Logo = ({
-  rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
+  rotate = false, sizeSm = '51px', sizeMd = '51px', sizeLg = '70px', campaign = 'Comic Relief'
 }) => (
-  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd}>
+  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd} $sizeLg={sizeLg}>
     <Image
       src={themeSwitcher(campaign)}
       alt={
@@ -61,6 +41,7 @@ Logo.propTypes = {
   rotate: PropTypes.bool,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
   campaign: PropTypes.string
 };
 

package/src/components/Atoms/Logos/Logo.style.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import zIndex from '../../../theme/shared/zIndex';
+import spacing from '../../../theme/shared/spacing';
+
+const Image = styled.img`
+  object-fit: cover;
+  width: 100%;
+  display: block;
+  height: auto;
+  margin-right: ${spacing('md')};
+`;
+
+const LogoWrapper = styled.div`
+  display: inline-block;
+  ${zIndex('high')}
+  width: ${props => props.$sizeSm};
+  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
+  vertical-align: bottom; // height fix
+  
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: ${props => props.$sizeMd};
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: ${props => props.$sizeLg};
+  }
+`;
+
+export { Image, LogoWrapper };

package/src/components/Atoms/Logos/Logo.test.js

@@ -23,6 +23,12 @@ it('renders correctly', () => {
   vertical-align: bottom;
 }
 
+@media (min-width: 740px) {
+  .c0 {
+    width: 51px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c0 {
     width: 70px;

package/src/components/Atoms/Logos/LogoExample.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import Logo from './Logo';
 import LogoNav2026 from '../LogoNav2026/_LogoNav2026';
 import { ExampleContainer } from '../../../demos/SharedStyles';
@@ -9,12 +8,12 @@ export default function LogoExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Sport Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" campaign="Sport Relief" />
       </ExampleContainer>
 
       <ExampleContainer>

package/src/components/Molecules/LogoLinked/LogoLinked.js

@@ -5,7 +5,7 @@ import Logo from '../../Atoms/Logos/Logo';
 import { TitleLabel, LogoLink } from './LogoLinked.style';
 
 const LogoLinked = ({
-  sizeSm, sizeMd,
+  sizeSm, sizeMd, sizeLg,
   campaign = 'Comic Relief',
   title = 'Go to Comic Relief homepage',
   url = '/',
@@ -25,6 +25,9 @@ const LogoLinked = ({
           rotate={false}
           campaign="Sport Relief"
           title="Sport Relief in homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Sport Relief homepage</TitleLabel>
       </LogoLink>
@@ -45,6 +48,7 @@ const LogoLinked = ({
           title="Go to Comic Relief homepage"
           sizeSm={sizeSm}
           sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
@@ -67,6 +71,7 @@ const LogoLinked = ({
           title="Go to Comic Relief homepage"
           sizeSm={sizeSm}
           sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
@@ -86,6 +91,7 @@ const LogoLinked = ({
         title={title}
         sizeSm={sizeSm}
         sizeMd={sizeMd}
+        sizeLg={sizeLg}
       />
       <TitleLabel>{title}</TitleLabel>
     </LogoLink>
@@ -100,6 +106,7 @@ LogoLinked.propTypes = {
   url: PropTypes.string,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
   newTab: PropTypes.bool
 };
 

package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx

@@ -7,7 +7,7 @@ export default function LogoLinkedExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief (default)</h3>
-        <LogoLinked sizeSm="50px" sizeMd="60px" />
+        <LogoLinked sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
@@ -16,6 +16,7 @@ export default function LogoLinkedExample() {
           campaign="Comic Relief wide"
           sizeSm="150px"
           sizeMd="150px"
+          sizeLg="150px"
           url="https://www.comicrelief.com"
           newTab
           animatePulse
@@ -27,7 +28,8 @@ export default function LogoLinkedExample() {
         <LogoLinked
           campaign="Sport Relief"
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
         />
       </ExampleContainer>
 
@@ -36,7 +38,8 @@ export default function LogoLinkedExample() {
         <LogoLinked
           campaign="Pride"
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
         />
       </ExampleContainer>
 
@@ -44,7 +47,8 @@ export default function LogoLinkedExample() {
         <h3>Comic Relief (default) w/rotation animation</h3>
         <LogoLinked
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
           animateRotate
         />
       </ExampleContainer>

package/src/components/Organisms/ExpandedButton/ExpandedButton.js

@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Arrow from '../../Atoms/Icons/Arrow';
+import {
+  Wrapper,
+  Grid,
+  ButtonCard,
+  CardTopWrapper,
+  ArrowWrapper,
+  HeadingContentWrapper,
+  HeadingIconWrapper,
+  CardHeading,
+  CardBlurb
+} from './ExpandedButton.style';
+
+function ExpandedButton({ options = [], selectedId, onSelect }) {
+  const handleClick = useCallback(id => {
+    if (onSelect) {
+      onSelect(id);
+    }
+  }, [onSelect]);
+
+  return (
+    <Wrapper>
+      <Grid>
+        {options.map(option => (
+          <ButtonCard
+            key={option.id}
+            onClick={() => handleClick(option.id)}
+            $isSelected={selectedId === option.id}
+            data-test={`expanded-button-${option.id}`}
+          >
+
+            <CardTopWrapper>
+
+              <HeadingContentWrapper>
+                {option.icon && (
+                  <HeadingIconWrapper>
+                    <img src={option.icon} alt="" />
+                  </HeadingIconWrapper>
+                )}
+                <CardHeading>{option.title}</CardHeading>
+              </HeadingContentWrapper>
+
+              <ArrowWrapper>
+                <Arrow colour="black" />
+              </ArrowWrapper>
+
+            </CardTopWrapper>
+
+            <CardBlurb>{option.description}</CardBlurb>
+
+          </ButtonCard>
+        ))}
+      </Grid>
+    </Wrapper>
+  );
+}
+
+ExpandedButton.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      icon: PropTypes.string
+    })
+  ),
+  selectedId: PropTypes.string,
+  onSelect: PropTypes.func
+};
+
+export default ExpandedButton;

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

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+import crTheme from '../../../theme/crTheme/theme';
+import containers from '../../../theme/shared/containers';
+import Text from '../../Atoms/Text/Text';
+
+const Wrapper = styled.div`
+  background: ${crTheme.color('grey_light')};
+  padding: 3rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: center;
+
+  @media ${crTheme.allBreakpoints('M')} {
+    padding: 3rem 2rem;
+  }
+`;
+
+const Grid = styled.div`
+  display: flex;
+  width: 100%;
+  max-width: ${containers.medium};
+  margin: 0 auto;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const ButtonCard = styled.button`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background: ${crTheme.color('white')};
+  border: 1px solid ${crTheme.color('grey')};
+  border-radius: 8px;
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  transition: all linear 0.2s;
+  width: 100%;
+
+  &:hover {
+    background-color: ${crTheme.color('grey_medium')};
+  }
+
+  @media ${crTheme.allBreakpoints('M')} {
+    padding: 1rem;
+  }
+`;
+
+const ArrowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  transform: rotate(45deg);
+  flex-shrink: 0;
+
+  svg {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const CardTopWrapper = styled.div`
+  margin: 0 0 8px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;
+
+const HeadingContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeadingIconWrapper = styled.span`
+  margin-right: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const CardHeading = styled.h3`
+  font-family: 'Montserrat', sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  color: ${crTheme.color('black')};
+`;
+
+const CardBlurb = styled(Text)`
+  font-size: 14px;
+  @media ${crTheme.allBreakpoints('M')} {
+    font-size: 16px;
+  }
+`;
+
+export {
+  Wrapper,
+  Grid,
+  ButtonCard,
+  CardTopWrapper,
+  ArrowWrapper,
+  HeadingContentWrapper,
+  HeadingIconWrapper,
+  CardHeading,
+  CardBlurb
+};

package/src/components/Organisms/ExpandedButton/ExpandedButtonExample.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import ExpandedButton from './ExpandedButton';
+import CalendarIcon from '../../../data/expanded-button-icons/calendar.svg';
+import HeartHandIcon from '../../../data/expanded-button-icons/heart-hand.svg';
+import CupcakeIcon from '../../../data/expanded-button-icons/cupcake.svg';
+
+export default function ExpandedButtonExample() {
+  const [selectedId, setSelectedId] = useState('monthly');
+
+  useEffect(() => {
+    console.log('Selected option:', selectedId);
+  }, [selectedId]);
+
+  const baseOptions = [
+    {
+      id: 'monthly',
+      title: 'Set up a regular gift',
+      description: 'Your monthly gift could make a lasting impact where it matters most.'
+    },
+    {
+      id: 'single',
+      title: 'Make a one off donation',
+      description: 'Help fund life-changing projects in the UK and around the world.'
+    },
+    {
+      id: 'payin',
+      title: 'Pay in your fundraising money',
+      description: 'You\'re amazing and we thank you! Let\'s start paying in all of your fantastic work!'
+    }
+  ];
+
+  const icons = [CalendarIcon, HeartHandIcon, CupcakeIcon];
+
+  const optionsWithIcons = baseOptions.map((option, index) => ({
+    ...option,
+    icon: icons[index]
+  }));
+
+  return (
+    <>
+      <h3>Expanded Button with icons</h3>
+      <ExpandedButton
+        options={optionsWithIcons}
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+      />
+      <h3>Expanded Button without icons</h3>
+      <ExpandedButton
+        options={baseOptions}
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+      />
+    </>
+  );
+}

package/src/components/Organisms/Footer/Footer.js

@@ -35,7 +35,7 @@ const Footer = ({
             </SocialIconWrapper>
 
             <Brand href="/" title={`Go to ${campaign} homepage`} data-test="footer-logo">
-              <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="48px" sizeMd="48px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
           <FooterNav navItems={navItems} overrideallowList={overrideallowList} {...rest} />

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -403,6 +403,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c10 {
+    width: 48px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c10 {
     width: 72px;

package/src/components/Organisms/FooterNew/FooterNew.js

@@ -80,7 +80,7 @@ const FooterNew = ({
 
           <LogosContainer $mobileOnly>
             <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-              <Logo sizeSm="59px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="59px" sizeMd="59px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </LogosContainer>
 
@@ -110,12 +110,12 @@ const FooterNew = ({
             </TopSectionLeft>
             <LogosContainer $desktopOnly $showCRLogoOnly>
               <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="59px" rotate={false} campaign={campaign} />
               </Brand>
             </LogosContainer>
             <LogosContainer $desktopOnly $showPairedLogos>
               <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="59px" rotate={false} campaign={campaign} />
               </Brand>
               {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo animateOnHover noMargin />}
             </LogosContainer>

package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap

@@ -625,12 +625,24 @@ exports[`does not render copyright text when not supplied 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;
@@ -1953,12 +1965,24 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;

package/src/components/Organisms/Header2025/Header2025.js

@@ -18,7 +18,8 @@ const Header2025 = ({
         <LogoLinked
           campaign={campaign}
           sizeSm="50px"
-          sizeMd="55px"
+          sizeMd="50px"
+          sizeLg="55px"
           animateRotate
         />
       </Brand>

package/src/data/expanded-button-icons/calendar.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.24023 16.6191C9.36949 16.6191 9.49551 16.6712 9.58691 16.7627C9.6783 16.8541 9.73047 16.9801 9.73047 17.1094C9.73047 17.2387 9.67832 17.3647 9.58691 17.4561C9.49553 17.5475 9.36951 17.5996 9.24023 17.5996C9.11093 17.5996 8.98492 17.5474 8.89355 17.4561C8.80215 17.3647 8.75 17.2387 8.75 17.1094C8.75 16.9801 8.80217 16.8541 8.89355 16.7627C8.98496 16.6712 9.11097 16.6191 9.24023 16.6191Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.24023 9.33691C9.42688 9.33701 9.59706 9.44299 9.67969 9.61035L10.3838 11.0352L11.957 11.2646C12.1417 11.2916 12.2949 11.4211 12.3525 11.5986C12.4101 11.7761 12.3622 11.9713 12.2285 12.1016L11.0898 13.21L11.3594 14.7773C11.391 14.9614 11.3152 15.1481 11.1641 15.2578C11.0786 15.3199 10.9767 15.3516 10.875 15.3516C10.7971 15.3515 10.719 15.3325 10.6475 15.2949L9.23926 14.5537L7.83301 15.2949C7.66786 15.3817 7.46747 15.3674 7.31641 15.2578C7.16529 15.1481 7.0895 14.9614 7.12109 14.7773L7.38965 13.21L6.25098 12.1016C6.11723 11.9712 6.06926 11.7753 6.12695 11.5977C6.18479 11.4203 6.33875 11.2915 6.52344 11.2646L8.0957 11.0352L8.7998 9.61035C8.88243 9.44289 9.05346 9.33691 9.24023 9.33691ZM8.8623 11.7012C8.7909 11.8459 8.65282 11.9464 8.49316 11.9697L7.64746 12.0918L8.25977 12.6885C8.37506 12.8011 8.42756 12.9632 8.40039 13.1221L8.25586 13.9629L9.01172 13.5664C9.08314 13.5289 9.16183 13.5098 9.24023 13.5098C9.31854 13.5098 9.39737 13.5289 9.46875 13.5664L10.2227 13.9629L10.0791 13.1221C10.052 12.9631 10.1053 12.8011 10.2207 12.6885L10.832 12.0918L9.9873 11.9697C9.82755 11.9465 9.68965 11.8459 9.61816 11.7012L9.24023 10.9355L8.8623 11.7012Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0215 0.681641C15.766 0.681641 16.3711 1.28676 16.3711 2.03125V2.40039H17.209C17.9104 2.40039 18.4805 2.97047 18.4805 3.67188V4.11914H18.9277C19.6291 4.11914 20.1992 4.68922 20.1992 5.39062V18.0469C20.1992 18.7483 19.6291 19.3184 18.9277 19.3184H2.99023C2.28883 19.3184 1.71875 18.7483 1.71875 18.0469V17.5996H1.27148C0.570084 17.5996 0 17.0295 0 16.3281V3.67188C0 2.97047 0.570084 2.40039 1.27148 2.40039H2.10938V2.03125C2.10938 1.28676 2.7145 0.681641 3.45898 0.681641C4.20347 0.681641 4.80859 1.28676 4.80859 2.03125V2.40039H7.89062V2.03125C7.89062 1.28676 8.49575 0.681641 9.24023 0.681641C9.98472 0.681641 10.5898 1.28676 10.5898 2.03125V2.40039H13.6719V2.03125C13.6719 1.28676 14.277 0.681641 15.0215 0.681641ZM18.4805 16.3281C18.4805 17.0295 17.9104 17.5996 17.209 17.5996H10.998C10.7271 17.5996 10.5078 17.3803 10.5078 17.1094C10.5078 16.8384 10.7271 16.6191 10.998 16.6191H17.209C17.3691 16.6191 17.5 16.4883 17.5 16.3281V8.06836H0.980469V16.3281C0.980469 16.4883 1.11132 16.6191 1.27148 16.6191H7.48242C7.7534 16.6191 7.97266 16.8384 7.97266 17.1094C7.97266 17.3803 7.7534 17.5996 7.48242 17.5996H2.69922V18.0469C2.69922 18.207 2.83007 18.3379 2.99023 18.3379H18.9277C19.0879 18.3379 19.2188 18.207 19.2188 18.0469V5.39062C19.2188 5.23046 19.0879 5.09961 18.9277 5.09961H18.4805V16.3281ZM1.27148 3.38086C1.11132 3.38086 0.980469 3.51171 0.980469 3.67188V7.08789H17.5V3.67188C17.5 3.51171 17.3691 3.38086 17.209 3.38086H16.3711V3.75C16.3711 4.49449 15.766 5.09961 15.0215 5.09961C14.277 5.09961 13.6719 4.49449 13.6719 3.75V3.38086H10.5898V3.75C10.5898 4.49449 9.98472 5.09961 9.24023 5.09961C8.49575 5.09961 7.89062 4.49449 7.89062 3.75V3.38086H4.80859V3.75C4.80859 4.49449 4.20347 5.09961 3.45898 5.09961C2.7145 5.09961 2.10938 4.49449 2.10938 3.75V3.38086H1.27148ZM3.45898 1.66211C3.25574 1.66211 3.08984 1.828 3.08984 2.03125V3.75C3.08984 3.95325 3.25574 4.11914 3.45898 4.11914C3.66223 4.11914 3.82812 3.95325 3.82812 3.75V2.03125C3.82812 1.828 3.66223 1.66211 3.45898 1.66211ZM9.24023 1.66211C9.03699 1.66211 8.87109 1.828 8.87109 2.03125V3.75C8.87109 3.95325 9.03699 4.11914 9.24023 4.11914C9.44348 4.11914 9.60938 3.95325 9.60938 3.75V2.03125C9.60938 1.828 9.44348 1.66211 9.24023 1.66211ZM15.0215 1.66211C14.8182 1.66211 14.6523 1.828 14.6523 2.03125V3.75C14.6523 3.95325 14.8182 4.11914 15.0215 4.11914C15.2247 4.11914 15.3906 3.95325 15.3906 3.75V2.03125C15.3906 1.828 15.2247 1.66211 15.0215 1.66211Z" fill="#E52630"/>
+</svg>

package/src/data/expanded-button-icons/cupcake.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1992 16.1415C10.4753 16.1415 10.6992 16.3654 10.6992 16.6415V16.6434C10.6991 16.9195 10.4753 17.1434 10.1992 17.1434C9.92326 17.1432 9.69923 16.9194 9.69915 16.6434V16.6415C9.69915 16.3655 9.92322 16.1417 10.1992 16.1415Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.97259 0.244035C6.1137 0.00692771 6.42091 -0.0705775 6.65814 0.0702065C6.89522 0.211415 6.97295 0.517557 6.83196 0.754777C6.70814 0.962907 6.65813 1.11666 6.65423 1.26259C6.65259 1.326 6.66157 1.39926 6.68353 1.48622C7.54278 1.23036 8.50233 1.55669 9.01263 2.34853L9.10052 2.49794C9.13789 2.56811 9.16956 2.64018 9.19818 2.71278C9.47262 2.46443 9.68939 2.16527 9.82318 1.76454L9.85345 1.6288C9.87229 1.48398 9.857 1.31631 9.81439 1.15712L9.81341 1.15614C9.77057 0.993941 9.72747 0.747149 9.81243 0.513566C9.86092 0.380393 9.95348 0.248541 10.1025 0.159074C10.2457 0.073157 10.3983 0.0517875 10.5273 0.0575112C10.7677 0.0682301 11.0242 0.174659 11.2783 0.315324C11.5457 0.463435 11.8682 0.682831 12.2538 0.983292C13.3977 1.87448 14.0354 2.82375 14.0898 3.77431C14.0914 3.80211 14.0902 3.82981 14.0908 3.85732C14.6705 4.09216 15.1549 4.55463 15.3925 5.13271C15.6309 5.71284 15.6066 6.37597 15.2402 6.99696C16.6986 7.81408 17.7025 9.39355 17.4618 11.1747C17.6723 11.2914 17.8639 11.4349 18.0224 11.6073C18.4378 12.0594 18.614 12.6915 18.332 13.372L16.1904 18.537L16.0449 18.8778C15.8898 19.2246 15.7035 19.5831 15.4589 19.8778C15.1138 20.2935 14.6354 20.6024 13.9726 20.6024H6.42767C5.76481 20.6024 5.28648 20.2936 4.94134 19.8778C4.61525 19.4849 4.39306 18.979 4.20989 18.538L2.06829 13.372C1.78586 12.6914 1.96225 12.0595 2.37786 11.6073C2.54542 11.4251 2.7499 11.2751 2.97454 11.1552C2.80095 10.2911 2.94973 9.52589 3.33587 8.8954C3.77718 8.17499 4.49732 7.67962 5.27337 7.3954C5.33947 7.37116 5.40992 7.3491 5.48236 7.32509C5.35769 6.42685 5.46582 5.72391 5.77728 5.1581C5.8083 5.10177 5.84268 5.04843 5.87689 4.99599C5.78433 4.91121 5.69858 4.81693 5.62103 4.71376L5.53509 4.59071C4.99885 3.75955 5.1342 2.68627 5.80364 2.01161C5.70044 1.74891 5.64849 1.49294 5.65521 1.23622C5.66524 0.856351 5.80052 0.533317 5.97259 0.244035ZM5.24212 12.0683C4.92503 11.8574 4.50685 11.7806 4.09075 11.8339C3.67031 11.8878 3.31438 12.0665 3.11419 12.2841C2.9357 12.4783 2.87281 12.7025 2.99114 12.9882L2.99212 12.9892L5.13275 18.1542L5.27142 18.4765C5.40922 18.7836 5.54758 19.0424 5.71087 19.2392C5.90979 19.4788 6.12457 19.6024 6.42767 19.6024H7.3222L5.87689 13.2919C5.87251 13.2727 5.86921 13.2529 5.86712 13.2333C5.80221 12.6231 5.54422 12.2692 5.24212 12.0683ZM12.1181 11.7626C11.3346 11.7626 10.6993 12.3975 10.6992 13.1806V14.8573C10.699 15.1333 10.4752 15.3573 10.1992 15.3573C9.92331 15.3571 9.6993 15.1332 9.69915 14.8573V13.1806C9.69896 12.3972 9.06525 11.7626 8.28216 11.7626C7.51523 11.7626 6.89143 12.3726 6.86712 13.1347L8.34759 19.6024H9.69915V18.4247C9.69934 18.1489 9.92333 17.9249 10.1992 17.9247C10.4752 17.9247 10.699 18.1487 10.6992 18.4247V19.6024H12.0517L13.5322 13.1337C13.5073 12.3721 12.8847 11.7626 12.1181 11.7626ZM16.3085 11.8339C15.8926 11.7806 15.4751 11.8576 15.1581 12.0683C14.8561 12.2691 14.5981 12.623 14.5331 13.2333L14.5224 13.2919L13.0771 19.6024H13.9726C14.2756 19.6024 14.4905 19.4787 14.6894 19.2392C14.9068 18.9771 15.0796 18.6051 15.2665 18.1552L17.4081 12.9892C17.5265 12.7033 17.4647 12.4785 17.2861 12.2841C17.0858 12.0663 16.7291 11.8878 16.3085 11.8339ZM13.8749 4.86318C13.6406 5.35706 13.2327 5.77837 12.7206 6.11122C11.8214 6.69555 10.3962 7.1053 9.06732 7.43739C7.85847 7.73948 6.72411 7.9797 5.9345 8.22743L5.6181 8.33388L5.38958 8.42665C4.8702 8.65775 4.44622 8.99701 4.18841 9.41786C3.95878 9.79292 3.84424 10.2634 3.93743 10.8466C3.94621 10.8454 3.95502 10.8438 3.9638 10.8427C4.56695 10.7654 5.23894 10.865 5.79583 11.2352C6.00169 11.3722 6.18466 11.543 6.33978 11.745C6.78026 11.1499 7.48549 10.7626 8.28216 10.7626C9.06475 10.7626 9.75744 11.1365 10.1992 11.7128C10.6412 11.1361 11.3354 10.7626 12.1181 10.7626C12.9146 10.7626 13.619 11.1502 14.0595 11.745C14.2146 11.5429 14.3985 11.3722 14.6044 11.2352C15.1612 10.8652 15.8325 10.7654 16.4355 10.8427C16.4521 10.8448 16.4686 10.8481 16.4853 10.8505C16.5719 9.54458 15.7742 8.35774 14.5683 7.77138C14.1152 8.16802 13.5607 8.52152 12.9951 8.83193C12.3141 9.20557 11.5856 9.53738 10.9531 9.82509C10.7018 9.9391 10.4052 9.82824 10.2909 9.57704C10.1767 9.32584 10.288 9.02941 10.539 8.91493C11.1762 8.62511 11.8707 8.30775 12.5136 7.95497C13.1604 7.6 13.7238 7.22526 14.1122 6.83193L14.2714 6.65028C14.5965 6.22788 14.5971 5.82751 14.4677 5.51259C14.3576 5.24478 14.1412 5.01274 13.8749 4.86318ZM10.8417 1.21864C10.8697 1.43857 10.8706 1.68259 10.8154 1.9247L10.7714 2.08193C10.4946 2.91063 9.97105 3.43734 9.39837 3.82216C9.30046 3.88795 9.1998 3.94818 9.09954 4.00673C9.0912 4.01186 9.0828 4.01674 9.07415 4.02138C8.8943 4.12536 8.71406 4.22077 8.539 4.30849C8.24791 4.45434 7.9912 4.57538 7.73529 4.71278C7.23119 4.98345 6.86656 5.2532 6.65325 5.64052C6.48525 5.94575 6.38329 6.37935 6.45599 7.04677C7.18158 6.85928 8.02155 6.66848 8.82513 6.46767C10.1796 6.12919 11.4391 5.75195 12.1757 5.27333C12.846 4.83776 13.1202 4.33435 13.0917 3.83193C13.0613 3.30006 12.6854 2.58714 11.6396 1.77235C11.304 1.51082 11.0413 1.33381 10.8417 1.21864ZM8.17181 2.89052C7.85212 2.39444 7.19079 2.25132 6.69427 2.57118C6.19892 2.891 6.05614 3.55327 6.37591 4.04872L6.46868 4.17177C6.49942 4.20711 6.53297 4.23902 6.56732 4.26943C6.79138 4.09928 7.02852 3.95712 7.26165 3.83193C7.53297 3.68625 7.8319 3.54513 8.09173 3.41493C8.17169 3.37487 8.24862 3.33229 8.32513 3.29189C8.30147 3.1534 8.25298 3.01669 8.17181 2.89052Z" fill="#E52630"/>
+</svg>

package/src/data/expanded-button-icons/heart-hand.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.10645 11.2881C2.39152 11.2885 2.62305 11.5205 2.62305 11.8057C2.62285 12.0907 2.3914 12.3218 2.10645 12.3223C1.82111 12.3223 1.58906 12.091 1.58887 11.8057C1.58887 11.5202 1.82099 11.2881 2.10645 11.2881Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.89941 9.7002C3.43916 9.7002 3.90364 10.0279 4.10449 10.4941H6.83789C7.33542 10.4941 7.82702 10.6233 8.25977 10.8672L10.3574 12.0469C10.3986 12.07 10.4465 12.083 10.4941 12.083H13.0654C14.0076 12.083 14.7743 12.849 14.7744 13.791C14.7744 13.8262 14.7708 13.8618 14.7686 13.8965L18.333 12.6719C19.1107 12.3939 19.9827 12.6953 20.3584 13.3906C20.862 14.3228 20.4266 15.3858 19.541 15.7451L19.54 15.7441L12.1328 19.0059L12.1338 19.0068C11.4559 19.3147 10.7343 19.4707 9.99023 19.4707C9.05088 19.4707 8.12861 19.2147 7.32324 18.7314L5.24609 17.4854C4.95953 17.3136 4.50169 17.1902 4.08105 17.1299C3.87048 17.5727 3.42168 17.8818 2.89941 17.8818H0.517578C0.232152 17.8818 0.00030278 17.6506 0 17.3652V10.2178C0 9.93216 0.231965 9.7002 0.517578 9.7002H2.89941ZM4.21094 16.1025C4.73969 16.1763 5.34269 16.3374 5.77832 16.5986L7.85547 17.8447C8.50004 18.2316 9.23833 18.4365 9.99023 18.4365C10.5866 18.4365 11.1645 18.3107 11.708 18.0635C11.7228 18.057 13.5733 17.2427 15.4219 16.4287C16.3497 16.0202 17.2777 15.6111 17.9736 15.3047C18.3214 15.1516 18.6115 15.0239 18.8145 14.9346C18.9157 14.89 18.9955 14.855 19.0498 14.8311L19.1279 14.7969L19.1318 14.7949L19.1367 14.793C19.1367 14.793 19.1389 14.7922 19.1416 14.791C19.1441 14.79 19.1481 14.7877 19.1523 14.7861C19.4842 14.6515 19.6511 14.2558 19.4492 13.8818C19.3251 13.6524 18.9902 13.534 18.6787 13.6465L18.6768 13.6475C18.6691 13.6501 18.3693 13.7534 17.9219 13.9072L14.6035 15.0479C14.3775 15.1255 14.1886 15.19 14.0566 15.2354C13.9908 15.258 13.9386 15.2759 13.9033 15.2881C13.8859 15.2941 13.8724 15.2996 13.8633 15.3027C13.86 15.3038 13.8566 15.304 13.8545 15.3047C13.6126 15.4312 13.3412 15.5 13.0654 15.5H9.02832C8.74311 15.4998 8.51198 15.2675 8.51172 14.9824C8.51186 14.6971 8.743 14.4661 9.02832 14.4658H13.0654C13.4366 14.4658 13.74 14.161 13.7402 13.791C13.74 13.4194 13.437 13.1172 13.0654 13.1172H10.4941C10.2692 13.1172 10.0463 13.0585 9.85059 12.9482L7.75293 11.7686C7.47454 11.6117 7.15795 11.5283 6.83789 11.5283H4.21094V16.1025ZM1.03418 16.8477H2.89941C3.05115 16.8477 3.17534 16.7246 3.17676 16.5732V11.0117C3.17676 10.859 3.05204 10.7344 2.89941 10.7344H1.03418V16.8477Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4756 0.879883C16.29 0.879883 17.5701 2.39254 17.5703 4.19434C17.5703 5.34126 17.0467 6.27657 16.1309 7.26953C15.4468 8.01118 14.5336 8.79631 13.4385 9.73242L12.2842 10.7227C12.187 10.8068 12.0658 10.8486 11.9453 10.8486C11.8249 10.8485 11.7046 10.8066 11.6074 10.7227C11.1165 10.2971 10.6503 9.90559 10.2129 9.53809C9.77563 9.17073 9.36622 8.82631 8.98926 8.49805C8.33033 7.92424 7.76608 7.39368 7.32031 6.85742L7.13574 6.62695C6.96288 6.39991 7.00646 6.07569 7.2334 5.90234C7.46035 5.7291 7.78466 5.77233 7.95801 5.99902C8.36074 6.5265 8.91971 7.06377 9.60938 7.66699C10.2813 8.25465 11.0629 8.89437 11.9443 9.64941C13.4038 8.39276 14.5471 7.45689 15.332 6.61719C16.1286 5.76506 16.5361 5.0326 16.5361 4.19434C16.536 2.88104 15.6414 1.91406 14.4756 1.91406C13.7108 1.91411 13.1956 2.36177 12.8643 2.82812C12.699 3.06071 12.5816 3.29421 12.5059 3.47168C12.4681 3.56009 12.4409 3.63442 12.4229 3.68652C12.4139 3.71257 12.4077 3.73396 12.4033 3.74805C12.399 3.76194 12.3965 3.76953 12.3965 3.76953C12.3343 3.99305 12.1306 4.1473 11.8984 4.14746C11.6661 4.14746 11.4614 3.99258 11.3994 3.76855C11.1387 2.85666 10.3755 1.91428 9.32129 1.91406C8.41011 1.91406 7.64083 2.5127 7.36523 3.45312C7.28499 3.72713 6.9977 3.88404 6.72363 3.80371C6.44961 3.72334 6.29264 3.43627 6.37305 3.16211L6.45703 2.90918C6.92275 1.67145 8.02112 0.879883 9.32129 0.879883C10.4482 0.880013 11.3181 1.4956 11.8975 2.41211C12.478 1.49336 13.3499 0.879925 14.4756 0.879883Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.83203 4.37891C7.1171 4.37936 7.34863 4.61131 7.34863 4.89648C7.34818 5.18127 7.11682 5.41263 6.83203 5.41309C6.54685 5.41309 6.31491 5.18155 6.31445 4.89648C6.31445 4.61103 6.54657 4.37891 6.83203 4.37891ZM6.44141 4.97266L6.44238 4.97656C6.44707 4.99914 6.45356 5.02099 6.46191 5.04199C6.4531 5.01979 6.44599 4.99664 6.44141 4.97266Z" fill="#E52630"/>
+</svg>

package/src/demos/index.jsx

@@ -140,6 +140,8 @@ import RichtextCarouselExample from '../components/Organisms/RichtextCarousel/Ri
 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 ExpandedButtonExample from '../components/Organisms/ExpandedButton/ExpandedButtonExample.jsx';
+import expandedButtonExampleSrc from '../components/Organisms/ExpandedButton/ExpandedButtonExample.jsx?raw';
 
 const Placeholder = ({ name }) => (
   <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', color: '#666' }}>
@@ -215,6 +217,7 @@ export const organisms = [
   { name: 'Donate', examples: [<DonateExample1 />, <DonateExample2 />, <DonateExample3 />, <DonateExample4 />, <DonateExample5 />, <DonateExample6 />, <DonateExample7 />, <DonateExample8 />, <DonateExample9 />, <DonateExample10 />, <DonateExample11 />, <DonateExample12 />, <DonateExample13 />, <DonateExample14 />, <DonateExample15 />, <DonateExample16 />, <DonateExample17 />, <DonateExample18 />, <DonateExample19 />, <DonateExample20 />, <DonateExample21 />, <DonateExample22 />] },
   { name: 'DonateBanner', demo: demo(DonateBannerExample, donateBannerExampleSrc) },
   { name: 'DynamicGallery', demo: demo(DynamicGalleryExample, dynamicGalleryExampleSrc) },
+  { name: 'ExpandedButton', demo: demo(ExpandedButtonExample, expandedButtonExampleSrc) },
   { name: 'EmailBanner', examples: [<EmailBannerExample1 />, <EmailBannerExample2 />, <EmailBannerExample3 />, <EmailBannerExample4 />, <EmailBannerExample5 />] },
   { name: 'EmailSignUpForm', demo: demo(EmailSignUpExample, emailSignUpExampleSrc) },
   { name: 'Footer', examples: [<FooterExample1 />, <FooterExample2 />, <FooterExample3 />] },

package/src/index.js

@@ -77,6 +77,7 @@ export { default as Donate } from './components/Organisms/Donate/Donate';
 export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
 export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
 export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
+export { default as ExpandedButton } from './components/Organisms/ExpandedButton/ExpandedButton';
 export {
   EmailSignUp,
   buildEsuValidationSchema,