[DST-64]: Ref: unify the used chev icon over all components (#3228)

packages/components/src/Accordion/AccordionItem.tsx

@@ -4,11 +4,14 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 
-import { SVG, useClassNames, useStateProps } from '@marigold/system';
+import { useClassNames, useStateProps } from '@marigold/system';
 
 import { useAccordionItem } from './useAccordionItem';
 import { Button } from '../Button';
+import { ChevronDown, ChevronUp } from '../Chevron';
 
+// props
+// ----------------
 export interface AccordionItemProps {
   item: Node<object>;
   state: TreeState<object>;
@@ -17,6 +20,8 @@ export interface AccordionItemProps {
   size?: string;
 }
 
+// component
+// ---------------
 export const AccordionItem = ({
   item,
   state,
@@ -69,13 +74,9 @@ export const AccordionItem = ({
         >
           {title}
           {!expanded ? (
-            <SVG viewBox="0 0 24 24" aria-hidden={true}>
-              <path d="M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" />
-            </SVG>
+            <ChevronUp className="h3 w-6" />
           ) : (
-            <SVG viewBox="0 0 24 24" aria-hidden={true}>
-              <path d="M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" />
-            </SVG>
+            <ChevronDown className="h3 w-6" />
           )}
         </Button>
       </FocusRing>

packages/components/src/Chevron/ChevronDown.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { SVG, SVGProps as SVGPropsType } from '@marigold/system';
+
+interface SVGProps extends SVGPropsType {
+  className?: string;
+}
+
+export const ChevronDown = forwardRef<SVGSVGElement, SVGProps>(
+  ({ className, ...props }, ref) => (
+    <SVG className={className} {...props} viewBox="0 0 24 24" ref={ref}>
+      <path d="M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" />
+    </SVG>
+  )
+);

packages/components/src/Chevron/ChevronLeft.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { SVG, SVGProps as SVGPropsType } from '@marigold/system';
+
+interface SVGProps extends SVGPropsType {
+  className?: string;
+}
+
+export const ChevronLeft = forwardRef<SVGSVGElement, SVGProps>(
+  ({ className, ...props }, ref) => (
+    <SVG className={className} {...props} viewBox="0 0 24 24" ref={ref}>
+      <path d="M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" />
+    </SVG>
+  )
+);

packages/components/src/Chevron/ChevronRight.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { SVG, SVGProps as SVGPropsType } from '@marigold/system';
+
+interface SVGProps extends SVGPropsType {
+  className?: string;
+}
+
+export const ChevronRight = forwardRef<SVGSVGElement, SVGProps>(
+  ({ className, ...props }, ref) => (
+    <SVG className={className} {...props} viewBox="0 0 24 24" ref={ref}>
+      <path d="M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" />
+    </SVG>
+  )
+);

packages/components/src/Chevron/ChevronUp.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { SVG, SVGProps as SVGPropsType } from '@marigold/system';
+
+interface SVGProps extends SVGPropsType {
+  className?: string;
+}
+
+export const ChevronUp = forwardRef<SVGSVGElement, SVGProps>(
+  ({ className, ...props }, ref) => (
+    <SVG className={className} {...props} viewBox="0 0 24 24" ref={ref}>
+      <path d="M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" />
+    </SVG>
+  )
+);

packages/components/src/Chevron/index.ts

@@ -0,0 +1,4 @@
+export * from './ChevronUp';
+export * from './ChevronDown';
+export * from './ChevronRight';
+export * from './ChevronLeft';

packages/components/src/ComboBox/ComboBox.tsx

@@ -12,6 +12,7 @@ import { Input } from '../Input';
 import { Button } from '../Button';
 
 import { Item } from '@react-stately/collections';
+import { ChevronDown } from '../Chevron';
 import { WidthProp } from '@marigold/system';
 
 export interface ComboBoxProps
@@ -101,9 +102,7 @@ export const ComboBox = ({
               ref={buttonRef}
               {...buttonProps}
             >
-              <svg viewBox="0 0 20 20" fill="currentColor">
-                <path d="M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" />
-              </svg>
+              <ChevronDown className="h-4 w-4" />
             </Button>
           }
         />

packages/components/src/Select/Select.tsx

@@ -12,7 +12,6 @@ import { useSelectState } from '@react-stately/select';
 import { Item, Section } from '@react-stately/collections';
 import type { AriaSelectProps } from '@react-types/select';
 import { mergeProps, useObjectRef } from '@react-aria/utils';
-
 import {
   cn,
   useClassNames,
@@ -26,26 +25,7 @@ import { FieldBase } from '../FieldBase';
 import { ListBox } from '../ListBox';
 import { messages } from './intl';
 import { Popover, Tray } from '../Overlay';
-
-// Select Icon
-// ---------------
-interface ChevronProps {
-  className: string;
-}
-
-const Chevron = ({ className }: ChevronProps) => (
-  <svg
-    className={className}
-    width={16}
-    height={16}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-  </svg>
-);
+import { ChevronDown } from '../Chevron';
 
 // Props
 // ---------------
@@ -176,7 +156,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
               ? state.selectedItem.rendered
               : props.placeholder}
           </div>
-          <Chevron className={classNames.icon} />
+          <ChevronDown className="h-4 w-4" />
         </button>
         {isSmallScreen ? (
           <Tray state={state}>