@comicrelief/component-library 8.12.1 → 8.13.0

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from '../../../Atoms/Text/Text';
+
+import {
+  NavItem, NavLink, DesktopNavLink, SubNavMenu, SubNavItem, SubNavLink, ChevronWrapper, StyledText
+} from './HeaderNav2025.style';
+
+import menuGroupIcon from './Menu-Group-Icon.svg';
+
+const HeaderNavItem2025 = (
+  {
+    thisID, relNoopener, hasSubMenu, index, openedSubMenu,
+    isNotDesktop, hasPopUp, thisUrl, toggleSubMenu, group,
+    thisFirstChild, navHelper, internalLinkHelper, ...rest
+  }
+) => (
+  <NavItem
+    role="none"
+    key={`${index}-${thisID}--item`}
+    index={index}
+    isSubMenuOpen={!!openedSubMenu}
+  >
+    {isNotDesktop ? (
+      <NavLink
+        href={hasPopUp ? '#' : thisUrl}
+        inline
+        rel={relNoopener}
+        aria-expanded={!!openedSubMenu[thisID]}
+        aria-haspopup={hasPopUp}
+        onClick={hasPopUp ? e => toggleSubMenu(e, thisID) : null}
+        role="button"
+        key={`${index}-${thisID}--link`}
+        isExpanded={!!openedSubMenu[thisID]}
+      >
+        {thisFirstChild.title}
+        {hasSubMenu && (
+          <ChevronWrapper>
+            <img src={menuGroupIcon} alt="chevron down icon" />
+          </ChevronWrapper>
+        )}
+      </NavLink>
+    ) : (
+      <StyledText>
+        <DesktopNavLink
+          href={thisUrl}
+          inline
+          rel={relNoopener}
+          aria-haspopup={hasPopUp}
+          key={`${index}-${thisID}`}
+          hasSubMenu={hasSubMenu}
+          {...rest}
+        >
+          {thisFirstChild.title}
+          {hasSubMenu
+              && (
+                <ChevronWrapper>
+                  <img src={menuGroupIcon} alt="chevron down icon" />
+                </ChevronWrapper>
+              )
+            }
+        </DesktopNavLink>
+      </StyledText>
+    )}
+
+    {/* Second level of the navigation (ul tag): Child(ren) */}
+    {/* Used for BOTH nav types */}
+    {hasSubMenu && (
+      <SubNavMenu
+        role="list"
+        isSubMenuOpen={!!openedSubMenu[thisID]}
+        key={`${index}-${thisID}--sub-item`}
+      >
+        {group.links.map((child, childIndex) => {
+          let thisSubUrl = navHelper(child);
+          thisSubUrl = internalLinkHelper(thisSubUrl);
+
+          // Skip the very first child on desktop, since
+          // we've already made a 'button' version above:
+          if (childIndex === 0 && !isNotDesktop) return null;
+
+          // Otherwise, render out as usual:
+          return (
+            <SubNavItem key={`${index}-${thisSubUrl}`}>
+              <SubNavLink href={thisSubUrl} inline role="menuitem">
+                <Text>{child.title}</Text>
+              </SubNavLink>
+            </SubNavItem>
+          );
+        })}
+      </SubNavMenu>
+    )}
+  </NavItem>
+);
+
+HeaderNavItem2025.propTypes = {
+  thisID: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  hasSubMenu: PropTypes.bool,
+  // Non-required fields as this isn't always populated
+  openedSubMenu: PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string,
+    links: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string
+      })
+    )
+  }),
+  toggleSubMenu: PropTypes.func.isRequired,
+  hasPopUp: PropTypes.string,
+  isNotDesktop: PropTypes.bool,
+  thisUrl: PropTypes.string.isRequired,
+  group: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    links: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        url: PropTypes.string
+      })
+    )
+  }),
+  // Non-required fields as this isn't always populated
+  thisFirstChild: PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string,
+    links: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string
+      })
+    )
+  }),
+  navHelper: PropTypes.func.isRequired,
+  internalLinkHelper: PropTypes.func.isRequired,
+  relNoopener: PropTypes.bool
+
+};
+
+export default HeaderNavItem2025;

package/src/components/Organisms/Header2025/HeaderNav2025/Menu-Group-Icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 16.5002C6.744 16.5002 6.48849 16.4027 6.29299 16.2072L0.29288 10.207C-0.0976268 9.81649 -0.0976268 9.18347 0.29288 8.79296C0.683387 8.40245 1.3164 8.40245 1.70691 8.79296L7 14.0856L12.2931 8.79296C12.6836 8.40245 13.3166 8.40245 13.7071 8.79296C14.0976 9.18347 14.0976 9.81649 13.7071 10.207L7.70701 16.2072C7.51151 16.4027 7.256 16.5002 7 16.5002Z" fill="#222222"/>
+</svg>

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

@@ -0,0 +1,171 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from '../../../Atoms/Text/Text';
+
+import { ChevronWrapper } from './HeaderNav2025.style';
+
+import menuGroupIcon from './Menu-Group-Icon.svg';
+
+import {
+  MoreNavLabel,
+  MoreSubNavMenu,
+  MoreNavItem,
+  MoreNestedSubNavMenu,
+  MoreSubNavItem,
+  MoreNavNestedLink,
+  MoreSubNavLink
+} from './MoreNav.style';
+
+const MoreNav = ({
+  processedItems, openedSubMenu,
+  toggleSubMenu, navHelper, allowListed, internalLinkHelper
+}) => {
+  const handleNestedLinkClick = (e, childID, hasPopUp) => {
+    if (hasPopUp) {
+      // Toggle the state for this item:
+      toggleSubMenu(e, childID);
+    }
+  };
+
+  return (
+    <MoreNavItem id="more-nav">
+      {/* The 'More' nav label text, since it doesn't actually function as a button: */}
+      <MoreNavLabel
+        // Used to target focus/blur handlers
+        id="more-nav-label"
+        // Ensure we can tab to this normally non-foccusable element:
+        tabIndex="0"
+        // Shrug off any click-fire focus events to not mess with other events:
+        onClick={e => e.target.blur()}
+        aria-haspopup="true"
+      >
+        More
+        <ChevronWrapper>
+          <img src={menuGroupIcon} alt="Chevron icon" />
+        </ChevronWrapper>
+      </MoreNavLabel>
+
+      {/* The Ul to wrap each of the 'More Nav' menu groups */}
+      <MoreSubNavMenu
+        role="list"
+        id="more-nav-ul"
+        key="more-nav-ul"
+      >
+
+        {/* For each item in this menu group:  */}
+        {processedItems.moreNavGroups.map(child => {
+        /* Grab the first links properties to use for our parent/button */
+          const thisFirstChild = child.links[0];
+          let thisUrl = navHelper(thisFirstChild);
+          const relNoopener = (!allowListed(thisUrl) && 'noopener') || null;
+          const hasSubMenu = child.links && child.links.length > 1;
+          const hasPopUp = hasSubMenu ? 'true' : null;
+          thisUrl = internalLinkHelper(thisUrl);
+
+          return (
+            <MoreSubNavItem key={child.title}>
+              {/* Either the Direct link (for a one-link menu item)
+                or a 'button' to show the submenu: */}
+              <MoreNavNestedLink
+                href={hasPopUp ? '#' : thisUrl}
+                inline
+                rel={relNoopener}
+                aria-haspopup={hasPopUp}
+                role={hasPopUp ? 'button' : 'link'}
+                onClick={e => handleNestedLinkClick(e, child.id, hasPopUp)}
+                isSubMenuOpen={Boolean(openedSubMenu[child.id])}
+                aria-expanded={Boolean(openedSubMenu[child.id])}
+              >
+                {thisFirstChild.title}
+
+                {hasSubMenu && (
+                <ChevronWrapper>
+                  <img src={menuGroupIcon} alt="Chevron icon" />
+                </ChevronWrapper>
+                )}
+
+              </MoreNavNestedLink>
+
+              <>
+                {hasSubMenu && (
+                <MoreNestedSubNavMenu
+                  role="list"
+                  isSubMenuOpen={Boolean(openedSubMenu[child.id])}
+                >
+                  {child.links.map(subChild => {
+                    const thisSubUrl = navHelper(subChild);
+                    return (
+                      // 'More Nav' sub item:
+                      <MoreSubNavItem key={thisSubUrl}>
+                        <MoreSubNavLink
+                          href={thisSubUrl}
+                          inline
+                          role="menuitem"
+                          // Allows us to avoid using the 'display:none'
+                          // approach so we can animate properly:
+                          tabIndex={openedSubMenu[child.id] ? '0' : '-1'}
+                        >
+                          <Text>
+                            {subChild.title}
+                          </Text>
+                        </MoreSubNavLink>
+                      </MoreSubNavItem>
+                    );
+                  })}
+                </MoreNestedSubNavMenu>
+                )}
+              </>
+            </MoreSubNavItem>
+          );
+        })}
+      </MoreSubNavMenu>
+
+    </MoreNavItem>
+  );
+};
+
+MoreNav.propTypes = {
+  processedItems: PropTypes.shape({
+    moreNavGroups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        links: PropTypes.arrayOf(
+          PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            url: PropTypes.string
+          })
+        )
+      })
+    ),
+    standardGroups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        links: PropTypes.arrayOf(
+          PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            url: PropTypes.string
+          })
+        )
+      })
+    )
+  }),
+  // Non-required fields as this isn't always populated
+  openedSubMenu: PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string,
+    links: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string
+      })
+    )
+  }),
+  toggleSubMenu: PropTypes.func.isRequired,
+  navHelper: PropTypes.func.isRequired,
+  allowListed: PropTypes.func.isRequired,
+  internalLinkHelper: PropTypes.func.isRequired
+};
+
+export default MoreNav;

package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js

@@ -0,0 +1,190 @@
+import styled, { css } from 'styled-components';
+import {
+  NavItem, SubNavMenu, NavLink, SubNavItem, SubNavLink, ChevronWrapper
+} from './HeaderNav2025.style';
+import Text from '../../../Atoms/Text/Text';
+
+const MoreSubNavMenu = styled(SubNavMenu)`
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    // Just extending this here to make a clean separation,
+    // despite the fact no additional styles are needed right now
+  }
+`;
+
+const MoreNavLabel = styled(Text)`
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    // Recreating 'NavLink' as a Text element
+    position: relative;
+    font-size: 15px;
+    line-height: 16px;
+    padding: 10px 15px 10px 0;
+    display: flex;
+
+    // Divider
+    :before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 70%;
+      top: 50%;
+      left: -23px;
+      transform: translateY(-50%);
+      border-left: 2px solid ${({ theme }) => theme.color('grey_medium')};
+      border-radius: 2px;
+      pointer-events: none;
+    }:
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('NavWide')} {
+    font-size: 1rem;
+
+    // Divider
+    :before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 70%;
+      top: 50%;
+      left: -21px;
+      transform: translateY(-50%);
+      border-left: 2px solid ${({ theme }) => theme.color('grey_medium')};
+      border-radius: 2px;
+    }:
+  }
+`;
+
+// Use for the 'More' link only
+const MoreNavItem = styled(NavItem)`
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    margin-left: 22px;
+
+    // Chevron icon:
+    ${MoreNavLabel} > ${ChevronWrapper} {
+      transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+    }
+
+    :hover,
+    :focus {
+      // Chevron icon:
+      ${MoreNavLabel} {
+        color: ${({ theme }) => theme.color('red')};
+        > ${ChevronWrapper} {
+          transform: rotate(-180deg);
+          img {
+            // Use fancy filter to colour 'img' version of SVG
+            filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+          }
+        }
+      }
+    }
+
+    :hover,
+    :focus,
+    :focus-within {
+     > ${MoreNavLabel} {
+      border-bottom: none;
+      padding-bottom: 10px;
+     }
+
+      > ${MoreSubNavMenu} {
+        visibility: visible;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    :focus {
+      > ${MoreSubNavMenu} {
+        // Annoyingly having to strongarm styles here;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        display: none !important;
+      }
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('NavWide')} {
+    margin-left: 20px;
+  }
+`;
+
+// Clone Of SubNavMenu, NESTED menu
+const MoreNestedSubNavMenu = styled(SubNavMenu)`
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    top: 0;
+    left: -1px;
+    border-radius: 0;
+    border-bottom: 0;
+    position: relative;
+    transition: max-height 0.5s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+    max-height: 0;
+    border: 0;
+    box-shadow: none;
+
+    ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
+      // Calculating a realistic height ceiling (8 subnav items) 
+      // to make animation as slick as possible
+      max-height: calc(54px * 8);
+  `)};
+  }
+`;
+
+const MoreSubNavItem = styled(SubNavItem)`
+  // Chevron icon
+  > a > ${ChevronWrapper} {
+    position: absolute;
+    width: 15px;
+    top: 13px;
+    right: 25px;
+    transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+  }
+
+  :hover, 
+  :focus,
+  :focus-within {
+    > a {
+      color: ${({ theme }) => theme.color('red')};
+    }
+    > a > ${ChevronWrapper} {
+      img {
+        filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+      }
+    }
+  }
+`;
+
+const MoreNavNestedLink = styled(NavLink)`
+  padding: 20px 25px 22px 42px;
+
+  > div {
+    height: auto;
+  }
+
+  ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
+    color: ${({ theme }) => theme.color('red')};
+
+    > ${ChevronWrapper} {
+      transform: rotate(-180deg);
+      
+      img {
+        filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+      }
+    }
+  `)};
+`;
+
+const MoreSubNavLink = styled(SubNavLink)`
+  // Just extending this here to make a clean separation,
+  // despite the fact no additional styles are needed right now
+`;
+
+export {
+  MoreNavLabel,
+  MoreSubNavMenu,
+  MoreNavItem,
+  MoreNestedSubNavMenu,
+  MoreSubNavItem,
+  MoreNavNestedLink,
+  MoreSubNavLink
+};

package/src/components/Organisms/Header2025/HeaderNav2025/arrow.svg

@@ -0,0 +1,6 @@
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 96 96"
+  >
+    <path transform="rotate(-180 47.998626708984375,48.00019836425781) " id="arrow" d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z" />
+</svg>

package/src/components/Organisms/Header2025/HeaderNav2025/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>

package/src/components/Organisms/Header2025/annoying.css

@@ -0,0 +1,14 @@
+/* Overiding the crummy Styleguidest 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/components/Organisms/Header2025/assets/PayIn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 1H2C1.448 1 1 1.448 1 2V7C1 7.552 1.448 8 2 8H4V19V19.5V22C4 22.552 4.448 23 5 23H19C19.552 23 20 22.552 20 22V19.5V19V8H22C22.552 8 23 7.552 23 7V2C23 1.448 22.552 1 22 1ZM6 21V20.5H18V21H6ZM18 18.5H6V6.0625H18V18.5ZM21 6H20V5.0625C20 4.5105 19.552 4.0625 19 4.0625H5C4.448 4.0625 4 4.5105 4 5.0625V6H3V3H21V6ZM8.293 12.2695C7.9025 11.879 7.9025 11.246 8.293 10.8555L11.2925 7.856C11.339 7.809 11.3905 7.7675 11.446 7.7305C11.4695 7.7145 11.4955 7.704 11.52 7.69C11.5525 7.672 11.5835 7.6525 11.618 7.6385C11.6505 7.625 11.6845 7.6175 11.718 7.6075C11.747 7.599 11.7745 7.588 11.8045 7.582C11.934 7.556 12.067 7.556 12.196 7.582C12.226 7.588 12.2535 7.599 12.2825 7.6075C12.316 7.6175 12.35 7.625 12.3825 7.6385C12.417 7.6525 12.448 7.672 12.4805 7.69C12.5055 7.7035 12.531 7.7145 12.5545 7.7305C12.6095 7.7675 12.661 7.809 12.708 7.856L15.7075 10.8555C16.098 11.246 16.098 11.879 15.7075 12.2695C15.512 12.465 15.2565 12.5625 15.0005 12.5625C14.7445 12.5625 14.489 12.465 14.2935 12.2695L13 10.9765V15.5C13 16.052 12.552 16.5 12 16.5C11.448 16.5 11 16.052 11 15.5V10.9765L9.707 12.2695C9.3165 12.66 8.6835 12.66 8.293 12.2695Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/Header2025/assets/Post.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.404 5.91909C23.439 5.84409 23.4635 5.76309 23.479 5.67859C23.4825 5.65859 23.4875 5.63909 23.4895 5.61909C23.4915 5.60459 23.496 5.59109 23.497 5.57659C23.503 5.49709 23.497 5.41959 23.4855 5.34359C23.483 5.32809 23.4785 5.31409 23.475 5.29859C23.456 5.20659 23.4265 5.11859 23.3835 5.03709C23.381 5.03209 23.381 5.02659 23.378 5.02159C23.377 5.02009 23.3755 5.01859 23.3745 5.01709C23.3275 4.93259 23.267 4.85759 23.198 4.79009C23.185 4.77709 23.1725 4.76459 23.159 4.75259C23.0895 4.69109 23.013 4.63909 22.928 4.59859C22.916 4.59309 22.9035 4.58909 22.8915 4.58409C22.812 4.55009 22.7275 4.52609 22.6385 4.51359C22.626 4.51159 22.6145 4.50809 22.602 4.50709C22.593 4.50609 22.585 4.50309 22.576 4.50259L3.07601 3.00259C2.67651 2.97059 2.28551 3.19009 2.10401 3.55559C1.92301 3.92059 1.98201 4.35959 2.25251 4.66409L5.35251 8.15159L1.29051 9.02209C0.881009 9.11009 0.569009 9.44409 0.509509 9.85909C0.450509 10.2741 0.656509 10.6816 1.02551 10.8801L7.10151 14.1521L8.01551 19.1786C8.08201 19.5446 8.34601 19.8431 8.70101 19.9541C8.80001 19.9851 8.90051 20.0001 9.00001 20.0001C9.26101 20.0001 9.51651 19.8976 9.70701 19.7071L23.207 6.20709C23.2175 6.19659 23.2225 6.18209 23.233 6.17109C23.294 6.10509 23.349 6.03309 23.391 5.95159C23.396 5.94109 23.399 5.93009 23.404 5.91909ZM5.39301 5.18709L15.544 5.96809L7.60051 7.67009L5.39301 5.18709ZM9.64251 16.9436L8.98401 13.3211C8.93001 13.0221 8.74201 12.7636 8.47401 12.6196L4.36751 10.4081L19.3985 7.18709L9.64251 16.9436ZM3.00101 18.0001C2.63401 18.0001 2.28101 17.7976 2.10551 17.4471C1.85851 16.9531 2.05851 16.3526 2.55301 16.1051L4.55301 15.1051C5.04801 14.8571 5.64801 15.0586 5.89501 15.5526C6.14201 16.0466 5.94201 16.6471 5.44751 16.8946L3.44751 17.8946C3.30351 17.9666 3.15101 18.0001 3.00101 18.0001ZM6.70701 18.2931C7.09751 18.6836 7.09751 19.3166 6.70701 19.7071L4.70701 21.7071C4.51151 21.9026 4.25601 22.0001 4.00001 22.0001C3.74401 22.0001 3.48851 21.9026 3.29301 21.7071C2.90251 21.3166 2.90251 20.6836 3.29301 20.2931L5.29301 18.2931C5.68351 17.9026 6.31651 17.9026 6.70701 18.2931Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/Header2025/assets/icon--mail--2023.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9707 3.5H2.9707C2.4182 3.5 1.9707 3.9475 1.9707 4.5V19.5C1.9707 20.052 2.4187 20.5 2.9707 20.5H22.9707C23.5227 20.5 23.9707 20.052 23.9707 19.5V4.5C23.9707 3.9475 23.5227 3.5 22.9707 3.5ZM20.9202 5.5L12.9707 12.6545L5.0212 5.5H20.9202ZM3.9707 18.5V7.2455L12.3017 14.7435C12.4917 14.9145 12.7312 15 12.9707 15C13.2102 15 13.4497 14.9145 13.6397 14.7435L21.9707 7.2455V18.5H3.9707Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/Header2025/assets/icon--search--2023.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.7073 21.2927L16.0635 14.6493C17.274 13.132 18 11.2122 18 9.125C18 4.23125 14.0188 0.25 9.125 0.25C4.23125 0.25 0.25 4.23125 0.25 9.125C0.25 14.0188 4.23125 18 9.125 18C11.2122 18 13.132 17.274 14.6493 16.0635L21.293 22.7073C21.4882 22.9023 21.744 23 22 23C22.256 23 22.5118 22.9023 22.7073 22.7073C23.0977 22.3165 23.0977 21.6835 22.7073 21.2927ZM9.125 16C5.334 16 2.25 12.916 2.25 9.125C2.25 5.334 5.334 2.25 9.125 2.25C12.916 2.25 16 5.334 16 9.125C16 12.916 12.916 16 9.125 16ZM13.6105 8.994C13.573 8.998 13.5357 9 13.4987 9C12.996 9 12.563 8.62175 12.506 8.11025C12.3812 6.98775 11.0117 5.61825 9.8895 5.49375C9.34075 5.43275 8.94525 4.93825 9.006 4.3895C9.067 3.8405 9.5595 3.445 10.1103 3.506C12.175 3.73525 14.2642 5.82475 14.4937 7.8895C14.5547 8.4385 14.1593 8.93275 13.6105 8.994Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/Header2025/assets/icon--shop--2023.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4856 19.8241L19.9856 5.33457C19.8971 4.82257 19.4306 4.46457 18.9136 4.50807L17.1071 4.66507C16.8286 3.61007 16.3466 2.49757 15.5106 1.77757C14.7791 1.14657 13.8611 0.889575 12.8596 1.03157C12.2566 1.11757 11.7461 1.32857 11.3066 1.62207C11.3056 1.62207 11.3051 1.62157 11.3041 1.62107C8.45206 0.708575 6.52456 3.29957 5.74006 5.13257L5.19506 5.02357C4.93206 4.97157 4.65806 5.02657 4.43556 5.17807C4.21406 5.32957 4.06206 5.56357 4.01456 5.82807L1.51456 19.8176C1.46256 20.1091 1.54256 20.4086 1.73256 20.6356C1.92256 20.8626 2.20306 20.9936 2.49906 20.9936H4.38156L5.10456 22.4396C5.11156 22.4536 5.12256 22.4631 5.13006 22.4766C5.15956 22.5291 5.19406 22.5781 5.23306 22.6251C5.25106 22.6466 5.26656 22.6696 5.28556 22.6891C5.29206 22.6956 5.29606 22.7036 5.30306 22.7101C5.35456 22.7601 5.41106 22.8021 5.47056 22.8391C5.48406 22.8476 5.49856 22.8531 5.51256 22.8611C5.57106 22.8941 5.63256 22.9201 5.69606 22.9406C5.71706 22.9471 5.73706 22.9536 5.75856 22.9591C5.83606 22.9781 5.91506 22.9916 5.99606 22.9916C5.99706 22.9916 5.99856 22.9921 5.99956 22.9921C6.00156 22.9921 6.00356 22.9916 6.00556 22.9916C6.04556 22.9916 6.08606 22.9891 6.12656 22.9836L21.6266 20.9851C21.8971 20.9506 22.1411 20.8066 22.3036 20.5871C22.4666 20.3686 22.5316 20.0931 22.4856 19.8241ZM13.1421 3.01157C13.5791 2.94857 13.9061 3.03507 14.2036 3.29107C14.5981 3.63057 14.8771 4.21057 15.0726 4.84207L11.2841 5.17107C11.5666 4.10907 12.1091 3.15907 13.1421 3.01157ZM9.76656 3.50357C9.49856 4.08007 9.31306 4.71257 9.18806 5.35357L7.79706 5.47457C8.17606 4.74507 8.85106 3.74557 9.76656 3.50357ZM3.69456 18.9941L5.80506 7.18507L6.41806 7.30757L5.28206 19.0356C5.19156 19.0091 5.09706 18.9941 5.00006 18.9941H3.69456ZM7.11606 20.8406L8.41506 7.42807L8.98056 7.37907C8.97356 7.80307 8.98556 8.20757 9.01556 8.57107C9.05906 9.09307 9.49656 9.48757 10.0111 9.48757C10.0391 9.48757 10.0666 9.48657 10.0951 9.48407C10.6456 9.43808 11.0546 8.95457 11.0086 8.40407C11.0071 8.38857 10.9726 7.89057 11.0011 7.20257L15.4476 6.81607C15.4736 7.09507 15.4861 7.33357 15.4876 7.49907C15.4916 8.05107 15.9211 8.50957 16.4936 8.49207C17.0456 8.48907 17.4911 8.03857 17.4876 7.48607C17.4871 7.38257 17.4816 7.07307 17.4441 6.64257L18.1711 6.57957L20.3371 19.1346L7.11606 20.8406Z" fill="#222222"/>
+</svg>