feat: add new arrow for new menu (#527)

* feat: add new arrow for new menu

* fix: rename arrow to chevron

* fix: replace thickArrowDown with chevronDownThick

src/components/icon/icons/chevronDownMedium.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from '../icon';
+
+export default function ChevronDownMedium({
+  fill,
+  style: styleProp,
+  ...rest // eslint-disable-line comma-dangle
+}) {
+  const style = {
+    ...styleProp,
+    ...Icon.defaultProps.style,
+  };
+  return (
+    <svg style={style} {...rest}>
+      <path
+        d="M14 .0814404l1.414214 1.3889597L7.707107 9.03988 0 1.4704001 1.414214.0814404l6.292893 6.1805201z"
+        fill={fill}
+        fillRule="nonzero"
+      />
+    </svg>
+  );
+}
+
+ChevronDownMedium.propTypes = {
+  ...Icon.propTypes,
+  fill: PropTypes.string,
+};
+
+ChevronDownMedium.defaultProps = {
+  ...Icon.defaultProps,
+  viewBox: '0 0 16 9',
+};

src/components/icon/icons/thickArrowDown.jsx → src/components/icon/icons/chevronDownThick.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../icon';
 
-export default function ThickArrowDown({
+export default function ChevronDownThick({
   fill,
   style: styleProp,
   ...rest // eslint-disable-line comma-dangle
@@ -22,12 +22,12 @@ export default function ThickArrowDown({
   );
 }
 
-ThickArrowDown.propTypes = {
+ChevronDownThick.propTypes = {
   ...Icon.propTypes,
   fill: PropTypes.string,
 };
 
-ThickArrowDown.defaultProps = {
+ChevronDownThick.defaultProps = {
   ...Icon.defaultProps,
   viewBox: '0 0 9 6',
 };

src/components/icon/icons/index.js

@@ -19,6 +19,8 @@ import Cart from './cart';
 import Checkmark from './checkmark';
 import CheckmarkLarge from './checkmarkLarge';
 import ChevronDown from './chevronDown';
+import ChevronDownMedium from './chevronDownMedium';
+import ChevronDownThick from './chevronDownThick';
 import ChevronUp from './chevronUp';
 import CircleArrow from './circleArrow';
 import CircleSlash from './circleSlash';
@@ -87,7 +89,6 @@ import SolidArrowUp from './solidArrowUp';
 import Star from './star';
 import Tag from './tag';
 import TickingClock from './tickingClock';
-import ThickArrowDown from './thickArrowDown';
 import Trash from './trash';
 import VerticalEllipsis from './verticalEllipsis';
 
@@ -113,6 +114,8 @@ const Icon = {
   Checkmark,
   CheckmarkLarge,
   ChevronDown,
+  ChevronDownMedium,
+  ChevronDownThick,
   ChevronUp,
   CircleArrow,
   CircleSlash,
@@ -180,7 +183,7 @@ const Icon = {
   SolidArrowUp,
   Star,
   Tag,
-  ThickArrowDown,
+  ThickArrowDown: ChevronDownThick,
   TickingClock,
   Trash,
   VerticalEllipsis,