@comicrelief/component-library 6.6.3 → 6.7.0

package/dist/components/Molecules/Promo/Promo.style.js

@@ -26,15 +26,15 @@ var Container = _styledComponents.default.div.withConfig({
   var theme = _ref.theme,
       backgroundColor = _ref.backgroundColor;
   return theme.color(backgroundColor);
-}, (0, _size.media)('small'), function (_ref2) {
+}, (0, _size.media)('medium'), function (_ref2) {
   var position = _ref2.position;
-  return position === 'upper' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 100%);", "{clip-path:polygon(0 0,100% 0,100% 85%,0 100%);}"], (0, _size.media)('small'));
+  return position === 'upper' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 100%);", "{clip-path:polygon(0 0,100% 0,100% 85%,0 100%);}"], (0, _size.media)('medium'));
 }, function (_ref3) {
   var position = _ref3.position;
-  return position === 'lower' && (0, _styledComponents.css)(["clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);", "{clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);}"], (0, _size.media)('small'));
+  return position === 'lower' && (0, _styledComponents.css)(["clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);", "{clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);}"], (0, _size.media)('medium'));
 }, function (_ref4) {
   var position = _ref4.position;
-  return position === 'end' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 101%);border-radius:0 0 0 2rem;", "{clip-path:polygon(0 0,100% 0,100% 85%,0% 101%);border-radius:0 0 0 4rem;}"], (0, _size.media)('small'));
+  return position === 'end' && (0, _styledComponents.css)(["clip-path:polygon(0 0,100% 0,100% 90%,0 101%);border-radius:0 0 0 2rem;", "{clip-path:polygon(0 0,100% 0,100% 85%,0% 101%);border-radius:0 0 0 4rem;}"], (0, _size.media)('medium'));
 });
 
 exports.Container = Container;
@@ -45,16 +45,16 @@ var Wrapper = _styledComponents.default.div.withConfig({
 })(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
   var copyFirst = _ref5.copyFirst;
   return !copyFirst && 'justify-content: flex-end';
-}, (0, _size.media)('small'));
+}, (0, _size.media)('medium'));
 
 exports.Wrapper = Wrapper;
 
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
+})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
   var position = _ref6.position;
-  return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('small'), (0, _spacing.default)('m'));
+  return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
 });
 
 exports.Copy = Copy;
@@ -62,6 +62,6 @@ exports.Copy = Copy;
 var Media = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Media",
   componentId: "sc-kk4nna-3"
-})(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('small'));
+})(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('medium'));
 
 exports.Media = Media;

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -145,7 +145,7 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -153,13 +153,13 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c4 {
     min-height: calc(100vh - 90px);
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c5 {
     width: 70%;
     padding: 4rem 1.5rem;
@@ -173,7 +173,7 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     height: 100%;
     position: absolute;
@@ -389,7 +389,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -397,7 +397,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
     clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
@@ -405,13 +405,13 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c4 {
     min-height: calc(100vh - 90px);
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c5 {
     width: 70%;
     padding: 4rem 1.5rem;
@@ -425,7 +425,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     height: 100%;
     position: absolute;

package/dist/components/Organisms/Donate/Donate.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactResponsive = require("react-responsive");
 
@@ -21,6 +23,10 @@ var _Form = _interopRequireDefault(require("./Form/Form"));
 
 var _Donate = require("./Donate.style");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Donate = function Donate(_ref) {
   var alt = _ref.alt,
       cartID = _ref.cartID,
@@ -44,15 +50,26 @@ var Donate = function Donate(_ref) {
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
       isDesktopOverride = _ref.isDesktopOverride;
-  // Can't assign this conditionally due to Hook rules..
   var isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
-  }); // ... but we can just do this, allowing the parent to control that if IT re-renders
+  }); // To let us store any updated override, and force a re-render
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      overrideValue = _useState2[0],
+      setOverrideValue = _useState2[1]; // Store the updated override value
+
+
+  _react.default.useEffect(function () {
+    setOverrideValue(isDesktopOverride);
+  }, [isDesktopOverride]); // If a boolean value has been passed, let it replace our 'internal' value
+
 
-  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
+  isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
-    id: mbshipID
+    id: mbshipID,
+    key: overrideValue
   }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
     backgroundColor: backgroundColor,
     image: mobileImage,

package/dist/components/Organisms/Donate/Donate.md

@@ -224,3 +224,30 @@ import data from './dev-data/data-single';
   chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```
+
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="red"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+  isDesktopOverride={false}
+/>;
+```

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -25,6 +25,8 @@ var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 
 var _whiteListed = _interopRequireDefault(require("../../../../utils/whiteListed"));
 
+var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
+
 var _Nav = require("./Nav.style");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -127,7 +129,10 @@ var MainNav = function MainNav(_ref) {
       rel: relNoopener,
       "aria-haspopup": hasPopUp,
       onKeyUp: keyPressed(group.title)
-    }, thisFirstChild.title)), hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
+    }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: _chevronDown.default,
+      alt: "chevron down icon"
+    })))), hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
       role: "list",
       isKeyPressed: !!isKeyPressed[group.title],
       isSubMenuOpen: !!isSubMenuOpen[group.id]

package/dist/components/Organisms/Header/Nav/Nav.style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SubNavLinkUnderline = exports.SubNavLink = exports.SubNavItem = exports.SubNavMenu = exports.NavLink = exports.NavItem = exports.NavMenu = exports.Nav = void 0;
+exports.ChevronWrapper = exports.SubNavLinkUnderline = exports.SubNavLink = exports.SubNavItem = exports.SubNavMenu = exports.NavLink = exports.NavItem = exports.NavMenu = exports.Nav = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -143,7 +143,7 @@ exports.NavMenu = NavMenu;
 var NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
   componentId: "sc-1ss3uk2-7"
-})(["font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], function (_ref19) {
+})(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], function (_ref19) {
   var theme = _ref19.theme;
   return theme.fontFamilies(theme.font.regular);
 }, function (_ref20) {
@@ -170,4 +170,11 @@ var NavItem = _styledComponents.default.li.withConfig({
   return theme.color('black');
 }, SubNavMenu);
 
-exports.NavItem = NavItem;
+exports.NavItem = NavItem;
+
+var ChevronWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Navstyle__ChevronWrapper",
+  componentId: "sc-1ss3uk2-9"
+})(["width:12px;padding-top:2px;"]);
+
+exports.ChevronWrapper = ChevronWrapper;

package/dist/components/Organisms/Header/Nav/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "6.6.3",
+  "version": "6.7.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/Promo/Promo.style.js

@@ -10,25 +10,25 @@ const Container = styled.div`
   flex-direction: column;
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  ${media('small')} {
+  ${media('medium')} {
     flex-direction: row;
   }
   ${({ position }) => position === 'upper' && css`
     clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
-    ${media('small')} {
+    ${media('medium')} {
       clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
     }
   `}
   ${({ position }) => position === 'lower' && css`
     clip-path: polygon(0 10%,100% 0,100% 100%,0 100%);
-    ${media('small')} {
+    ${media('medium')} {
       clip-path: polygon(0 15%,100% 0,100% 100%,0 100%);
     }
   `}
   ${({ position }) => position === 'end' && css`
     clip-path: polygon(0 0, 100% 0, 100% 90%, 0 101%);
     border-radius: 0 0 0 2rem;
-    ${media('small')} {
+    ${media('medium')} {
       clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
       border-radius: 0 0 0 4rem;
     }
@@ -45,7 +45,7 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   ${({ copyFirst }) => !copyFirst && 'justify-content: flex-end'};
-  ${media('small')} {
+  ${media('medium')} {
     min-height: calc(100vh - 90px);
   }
 `;
@@ -54,7 +54,7 @@ const Copy = styled.div`
   width: 100%;
   padding: ${spacing('m')} ${spacing('m')} ${spacing('xl')};
   ${zIndex('low')};
-  ${media('small')} {
+  ${media('medium')} {
     width: 70%;
     padding: ${spacing('xl')} ${spacing('m')};
   }
@@ -64,7 +64,7 @@ const Copy = styled.div`
   }
   ${({ position }) => position === 'lower' && css`
     padding: ${spacing('xl')} ${spacing('m')};
-    ${media('small')} {
+    ${media('medium')} {
       padding: 6rem ${spacing('m')};
       margin-top: 6rem;
     }
@@ -77,7 +77,7 @@ const Media = styled.div`
   img {
     object-position: center;
   }
-  ${media('small')} {
+  ${media('medium')} {
     height: 100%;
     position: absolute;
   }

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -145,7 +145,7 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -153,13 +153,13 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c4 {
     min-height: calc(100vh - 90px);
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c5 {
     width: 70%;
     padding: 4rem 1.5rem;
@@ -173,7 +173,7 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     height: 100%;
     position: absolute;
@@ -389,7 +389,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -397,7 +397,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c0 {
     -webkit-clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
     clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
@@ -405,13 +405,13 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c4 {
     min-height: calc(100vh - 90px);
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c5 {
     width: 70%;
     padding: 4rem 1.5rem;
@@ -425,7 +425,7 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     height: 100%;
     position: absolute;

package/src/components/Organisms/Donate/Donate.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
@@ -38,14 +38,21 @@ const Donate = ({
   chooseAmountText,
   isDesktopOverride
 }) => {
-  // Can't assign this conditionally due to Hook rules..
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
-  // ... but we can just do this, allowing the parent to control that if IT re-renders
-  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
+  // To let us store any updated override, and force a re-render
+  const [overrideValue, setOverrideValue] = useState(null);
+
+  // Store the updated override value
+  React.useEffect(() => {
+    setOverrideValue(isDesktopOverride);
+  }, [isDesktopOverride]);
+
+  // If a boolean value has been passed, let it replace our 'internal' value
+  isDesktop = overrideValue !== null ? overrideValue : isDesktop;
 
   return (
-    <Container backgroundColor={backgroundColor} id={mbshipID}>
+    <Container backgroundColor={backgroundColor} id={mbshipID} key={overrideValue}>
       {!isDesktop && mobileImages ? (
         <Picture
           backgroundColor={backgroundColor}

package/src/components/Organisms/Donate/Donate.md

@@ -224,3 +224,30 @@ import data from './dev-data/data-single';
   chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```
+
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="red"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+  isDesktopOverride={false}
+/>;
+```

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

@@ -7,6 +7,7 @@ import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
 import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 import whiteListed from '../../../../utils/whiteListed';
+import ChevronDown from './chevron-down.svg';
 
 import {
   Nav,
@@ -16,7 +17,8 @@ import {
   SubNavMenu,
   SubNavItem,
   SubNavLink,
-  SubNavLinkUnderline
+  SubNavLinkUnderline,
+  ChevronWrapper
 } from './Nav.style';
 
 const MainNav = ({ navItems }) => {
@@ -109,6 +111,13 @@ const MainNav = ({ navItems }) => {
                       onKeyUp={keyPressed(group.title)}
                     >
                       {thisFirstChild.title}
+                      {hasSubMenu
+                        && (
+                        <ChevronWrapper>
+                          <img src={ChevronDown} alt="chevron down icon" />
+                        </ChevronWrapper>
+                        )
+                      }
                     </NavLink>
                   </Text>
                 )}

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

@@ -162,6 +162,8 @@ const NavMenu = styled.ul`
  * Menu item link
  */
 const NavLink = styled(NavLinkClass)`
+  display: flex;
+  gap: 4px;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
   @media ${({ theme }) => theme.breakpoint('nav')} {
     padding: 10px 0;
@@ -227,6 +229,11 @@ const NavItem = styled.li`
   }
 `;
 
+const ChevronWrapper = styled.div`
+  width: 12px;
+  padding-top: 2px;
+`;
+
 export {
   Nav,
   NavMenu,
@@ -235,5 +242,6 @@ export {
   SubNavMenu,
   SubNavItem,
   SubNavLink,
-  SubNavLinkUnderline
+  SubNavLinkUnderline,
+  ChevronWrapper
 };

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