@comicrelief/component-library 8.12.0 → 8.13.0

package/src/components/Organisms/Header/Header.md

@@ -102,6 +102,7 @@ const [success, setSuccess] = React.useState(false);
           href="/search"
           brand="comicrelief"
           tabIndex="0"
+          id="search"
         />
       </div>
     </>
@@ -159,6 +160,7 @@ const [success, setSuccess] = React.useState(false);
           href="/search"
           brand="comicrelief"
           tabIndex="0"
+          id="search"
         />
       </div>
       <div>
@@ -170,6 +172,7 @@ const [success, setSuccess] = React.useState(false);
           href="https://shop.comicrelief.com"
           brand="comicrelief"
           tabIndex="0"
+          id="shop"
         />
       </div>
       <div>
@@ -181,6 +184,7 @@ const [success, setSuccess] = React.useState(false);
           href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
           brand="comicrelief"
           tabIndex="0"
+          id="payin"
         />
       </div>
     </>

package/src/components/Organisms/Header/HeaderNav/HeaderNav.js

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import Text from '../../../Atoms/Text/Text';
+import BurgerMenu from '../Burger/BurgerMenu';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
+import { NavHelper } from '../../../../utils/navHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
+import allowListed from '../../../../utils/allowListed';
+import menuGroupIcon from './Menu-Group-Icon.svg';
+
+import {
+  Nav,
+  NavMenu,
+  NavItem,
+  NavLink,
+  SubNavMenu,
+  SubNavItem,
+  SubNavLink,
+  ChevronWrapper,
+  NavMetaIcons,
+  DonateButtonWrapperBottom
+} from './HeaderNav.style';
+
+const HeaderNav = ({
+  navItems = {}, metaIcons, donateButton = null
+}) => {
+  const { menuGroups } = navItems;
+  const [isExpandable, setIsExpandable] = useState(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
+  const [isTabFocussed, setIsTabFocussed] = useState({});
+  const [isNotDesktop, setIsNotDesktop] = useState(null);
+  const theseGroups = null;
+
+  const toggleBurgerMenu = event => {
+    event.preventDefault();
+    setIsExpandable(!isExpandable);
+  };
+
+  const toggleSubMenu = (e, item) => {
+    e.preventDefault();
+    setIsSubMenuOpen({ [item]: !isSubMenuOpen[item] });
+  };
+
+  // Handle tab key on menu nav
+  const keyPressed = item => () => {
+    window.onkeyup = e => {
+      // Specifies the tab key:
+      if (e.which === 9) {
+        // If the currently tabbed-to element is our item, do something
+        if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
+          setIsTabFocussed({ [item]: !isTabFocussed[item] });
+        } else if (!e.target.querySelector('span')) {
+          setIsTabFocussed({});
+        }
+      }
+    };
+  };
+
+  useEffect(() => {
+    // Set desktopFlag on
+    setIsNotDesktop(window.innerWidth < breakpointValues.Nav);
+    window.addEventListener('onkeyup', setIsTabFocussed);
+
+    return () => {
+      window.removeEventListener('onkeyup', setIsTabFocussed);
+    };
+  }, [menuGroups]);
+
+  // Custom function to let us update the nav dynamically:
+  const screenResizeNav = useCallback(() => {
+    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+    const isCurrentlyNotDesktop = window.innerWidth < breakpointValues.Nav;
+
+    if (screenSize !== null && (isNotDesktop !== isCurrentlyNotDesktop)) {
+      setIsNotDesktop(isCurrentlyNotDesktop);
+    }
+  }, [isNotDesktop]);
+
+  useEffect(() => {
+    // Hook into browser's own onresize event to call our custom wrapper function:
+    if (typeof window !== 'undefined') window.onresize = screenResizeNav;
+  }, [screenResizeNav]);
+
+  return (
+    <>
+      <Nav aria-label="main-menu" isExpandable={isExpandable} role="navigation">
+        <Text id="main-menu" tag="h2">
+          Main navigation
+        </Text>
+
+        <NavMenu role="menubar">
+          {theseGroups.map((group, index) => {
+            /* Grab the first links properties to use for our parent/button */
+            const thisFirstChild = group.links[0];
+            const thisID = group.id;
+
+            /* Determine which field represents our url path */
+            let thisUrl = NavHelper(thisFirstChild);
+            const relNoopener = (!allowListed(thisUrl) && 'noopener') || null;
+            const hasSubMenu = group.links && group.links.length > 1;
+            const hasPopUp = hasSubMenu ? 'true' : null;
+            thisUrl = InternalLinkHelper(thisUrl);
+
+            // Renders the first menugroup item to act as the parent; a button for the dropdown
+            // on mobile, a clickable LINK on desktop but hover to reveal the submenu
+            return (
+              <NavItem
+                role="none"
+                key={`${thisID}-item`}
+                index={index}
+                isSubMenuOpen={!!isSubMenuOpen[thisID]}
+              >
+                {isNotDesktop ? (
+                  <NavLink
+                    href={hasPopUp ? '#' : thisUrl}
+                    inline
+                    rel={relNoopener}
+                    aria-expanded={!!isSubMenuOpen[thisID]}
+                    aria-haspopup={hasPopUp}
+                    onClick={hasPopUp ? e => toggleSubMenu(e, thisID) : null}
+                    onKeyUp={keyPressed(group.title)}
+                    role="button"
+                    key={`${thisID}-link`}
+                  >
+                    {thisFirstChild.title}
+                    {hasSubMenu && (
+                      <ChevronWrapper>
+                        <img src={menuGroupIcon} alt="chevron down icon" />
+                      </ChevronWrapper>
+                    )}
+                  </NavLink>
+                ) : (
+                  <Text>
+                    <NavLink
+                      href={thisUrl}
+                      inline
+                      rel={relNoopener}
+                      aria-haspopup={hasPopUp}
+                      onKeyUp={keyPressed(group.title)}
+                      key={thisID}
+                    >
+                      {thisFirstChild.title}
+                      {hasSubMenu
+                        && (
+                          <ChevronWrapper>
+                            <img src={menuGroupIcon} alt="chevron down icon" />
+                          </ChevronWrapper>
+                        )
+                      }
+                    </NavLink>
+                  </Text>
+                )}
+
+                {/* Second level of the navigation (ul tag): Child(ren) */}
+                {/* Used for BOTH nav types */}
+                {hasSubMenu && (
+                  <SubNavMenu
+                    role="list"
+                    isFocussed={!!isTabFocussed[group.title]}
+                    isSubMenuOpen={!!isSubMenuOpen[thisID]}
+                    key={thisID}
+                  >
+                    {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={thisSubUrl}>
+                          <SubNavLink href={thisSubUrl} inline role="menuitem">
+                            <Text>{child.title}</Text>
+                          </SubNavLink>
+                        </SubNavItem>
+                      );
+                    })}
+                  </SubNavMenu>
+                )}
+              </NavItem>
+            );
+          })}
+
+        </NavMenu>
+
+        {/* These are only shown on the non-desktop view; the desktop nav renders
+           these in the parent Header component to suit the design layout */}
+        <NavMetaIcons isHeader data-testid="meta-icons--mobile">
+          {metaIcons}
+        </NavMetaIcons>
+        <DonateButtonWrapperBottom data-testid="donate-button--mobile">
+          {donateButton}
+        </DonateButtonWrapperBottom>
+      </Nav>
+      <BurgerMenu toggle={toggleBurgerMenu} isExpandable={isExpandable}>
+        Open
+      </BurgerMenu>
+    </>
+  );
+};
+
+HeaderNav.propTypes = {
+  navItems: PropTypes.objectOf(PropTypes.shape),
+  metaIcons: PropTypes.node.isRequired,
+  // As this is rendered in both the Header AND the Nav, just passing
+  // the same prop through to here:
+  donateButton: PropTypes.node
+};
+
+export default HeaderNav;

package/src/components/Organisms/Header/HeaderNav/HeaderNav.style.js

@@ -0,0 +1,391 @@
+import styled from 'styled-components';
+
+import Link from '../../../Atoms/Link/Link';
+import hideVisually from '../../../../theme/shared/hideVisually';
+import zIndex from '../../../../theme/shared/zIndex';
+import Arrow from './arrow-right.png';
+
+const transitionDuration = 0.2;
+
+const NavLinkClass = styled(Link)`
+  display: inline-block;
+  border: 0;
+  padding: 25px;
+  line-height: 1rem;
+  height: auto;
+  font-weight: 700;
+  width: 100%;
+  color: ${({ theme }) => theme.color('black')};
+  transition: color ${transitionDuration}s ease;
+
+  :hover,
+  :focus,
+  :focus-within {
+    border: 0;
+    color: ${({ theme }) => theme.color('red')};
+    font-weight: inherit;
+  }
+`;
+
+/**
+ * Navigation menu
+ */
+const Nav = styled.nav`
+  display: ${({ isExpandable }) => (isExpandable ? 'block' : 'none')};
+  width: 100%;
+  position: absolute;
+  top: 75px;
+  left: 0;
+  ${zIndex('higher')};
+  background-color: ${({ theme }) => theme.color('white')};
+  box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: 50%;
+    right: 0;
+    left: inherit;
+    box-shadow: -20px 15px 20px 0px rgba(0, 0, 0, 0.25);
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    ${zIndex('medium')};
+    position: relative;
+    top: 0;
+    display: block;
+    margin: 0 10px;
+    width: auto;
+    height: 100%;
+    box-shadow: none;
+  }
+  > h2 {
+    ${hideVisually};
+  }
+`;
+
+/**
+ * Sub Navigation Menu (second level)
+ */
+const SubNavMenu = styled.ul`
+  visibility: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'visible' : 'hidden')};
+  display: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'flex' : 'none')};
+  padding: 0;
+  position: relative;
+  list-style: none outside;
+  left: 0;
+  top: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color('white')};
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+  // DESKTOP:   
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    display: flex;
+    visibility: ${({ isFocussed }) => (isFocussed ? 'visible' : 'hidden')};
+    width: 330px;
+    height: auto;
+    padding: 0;
+    position: absolute;
+    top: 88px;
+    left: -5px;
+    border-radius: 0 0 25px 25px;
+    transition: opacity ${transitionDuration}s ease;
+    opacity: 0;
+    box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+  }
+`;
+
+/**
+ * Sub Menu list items
+ */
+const SubNavItem = styled.li`
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};;
+  position: relative;
+  transition: background-color ${transitionDuration}s ease;
+
+  &:first-of-type {
+    border-top: none;
+  }
+
+  span {
+    font-weight: 100;
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    background-color: ${({ theme }) => theme.color('grey_extra_light')};
+    + span {
+      border-bottom: 0;
+      padding-bottom: 2px;
+      color: ${({ theme }) => theme.color('red')};
+    }
+  }
+`;
+
+/**
+ * Sub menu link item
+ */
+const SubNavLink = styled(NavLinkClass)`
+  padding: 20px 25px 18px 40px;
+  color: ${({ theme }) => theme.color('black')};
+  height: auto;
+  position: relative;
+`;
+
+/**
+ * Navigation Menu (first level)
+ */
+const NavMenu = styled.ul`
+  background-color: ${({ theme }) => theme.color('white')};
+  list-style: none outside;
+  padding: 0;
+  margin: 0;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: ${({ theme }) => theme.color('white')};
+  }
+`;
+
+/**
+ * Menu item link
+ */
+const NavLink = styled(NavLinkClass)`
+  display: flex;
+  gap: 4px;
+  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    padding: 10px 0;
+    padding: 10px 15px 15px 0;
+    height: auto;
+    :hover,
+    :focus-within,
+    :focus {
+      + ${SubNavMenu} {
+      display: flex;
+      opacity: 1;
+    }}
+  }
+`;
+
+/**
+ * Menu list items
+ */
+const NavItem = styled.li`
+  ${zIndex('medium')};
+  position: relative;
+  font-weight: 700;
+  border-bottom: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+  li {
+    span {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    :hover,
+    :focus,
+    :focus-within {
+      span {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  // Chevron icon:
+  span > a > div {
+    transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    li {
+      span {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+
+    // Chevron icon:
+    span > a {
+      color: ${({ theme }) => theme.color('red')};
+      > div {
+        transform: rotate(-180deg);
+        img {
+          // Use fancy filter to colour 'img' version of SVG
+          filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+        }
+      }
+    }
+  }
+  
+  
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    margin: 0 4px;
+    padding: 25px 5px;
+    border-bottom: none;
+
+    :hover,
+    :focus,
+    :focus-within {
+      > ${SubNavMenu}, :focus-within > ${SubNavMenu} {
+        visibility: visible;
+        opacity: 1;
+        display: flex;
+      }
+    }
+
+    :hover,
+    :focus,
+    :focus-within {
+      background-color: transparent;
+      ${zIndex('high')};
+
+      span {
+        border-bottom: 2px solid ${({ theme }) => theme.color('black')};
+        padding-bottom: 2px;
+      }
+
+      ${SubNavMenu} {
+        display: flex;
+        opacity: 1;
+        visibility: visible;
+        flex-direction: column;
+      }
+    }
+  }
+`;
+
+const ChevronWrapper = styled.div`
+  width: 16px;
+  position: absolute;
+  top: 20px;
+  right: 22px;
+  height: 16px;
+
+  img {
+    width: 100%;
+    display: block;
+    height: auto;
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 10px;
+  }
+`;
+
+// This represents the 'non-desktop'/mobile nav icons:
+const NavMetaIcons = styled.div`
+  width: auto;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: inherit;
+
+  > div {
+    height: 60px;
+    width: 100%;
+    display: flex;
+    border-bottom: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+    > a {
+      height: inherit;
+      width: 100%;
+      padding: 15px 20px;
+      position: relative;
+
+      &: after {
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        content: "";
+        width: 20px;
+        height: 20px;
+        background-image: url(${Arrow});
+        background-size: 100%;
+        background-repeat: no-repeat;
+      }
+
+      img {
+        padding: 5px;
+        height: 35px;
+        width: 35px;
+      }
+
+      span {
+        transition: color 0.15s ease-out;
+      }
+
+      &:focus,
+      &:hover {
+        span {
+          color: ${({ theme }) => theme.color('red')};
+        }
+      }
+    }
+
+    &:first-child {
+      margin-top: 20px;
+    }
+  }
+
+  // Hide these when using non-mobile nav,
+  // just leaving the Header version in place
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    display: none;
+  }
+`;
+
+const DonateButtonWrapperBottom = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 35px 20px;
+  background-color: inherit;
+
+  // Donate button
+  a {
+    width: calc(100% - 10px);
+    transition: width 0.35s cubic-bezier(0.5, 1.5, 0.5, 0.9);
+
+    &:hover,
+    &:focus { 
+      width: 100%;
+      box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
+    }
+  }
+  
+  // Hide the 'Nav'-embedded version of the button when the nav
+  // goes FULL DESKTOP, leaving just the 'Header'-embedded example
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    display: none;
+  }
+`;
+
+export {
+  Nav,
+  NavMenu,
+  NavItem,
+  NavLink,
+  SubNavMenu,
+  SubNavItem,
+  SubNavLink,
+  ChevronWrapper,
+  NavMetaIcons,
+  DonateButtonWrapperBottom
+};

package/src/components/Organisms/Header/HeaderNav/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/Header/HeaderNav/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/Header/HeaderNav/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/Header/Nav/Nav.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
 import BurgerMenu from '../Burger/BurgerMenu';
 import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
-import NavHelper from '../../../../utils/navHelper';
+import { NavHelper } from '../../../../utils/navHelper';
 import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 import allowListed from '../../../../utils/allowListed';
 import chevronDown from './chevron-down.svg';

package/src/components/Organisms/Header/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/Header/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>