Icon updates - Update icons to match icons on figma

packages/lsd-react/src/components/Calendar/Month.tsx

@@ -4,10 +4,10 @@ import { useRef, useState } from 'react'
 import { useClickAway } from 'react-use'
 import { IconButton } from '../IconButton'
 import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  NavigateBeforeIcon,
-  NavigateNextIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
 } from '../Icons'
 import { Typography } from '../Typography'
 import { calendarClasses } from './Calendar.classes'
@@ -68,7 +68,7 @@ export const Month = ({
           type="button"
           onClick={goToPreviousMonths}
         >
-          <NavigateBeforeIcon color="primary" />
+          <ChevronLeftIcon color="primary" />
         </button>
         <div className={calendarClasses.row}>
           <Typography
@@ -92,13 +92,13 @@ export const Month = ({
                   onClick={() => setYear(year + 1)}
                   className={calendarClasses.changeYearButton}
                 >
-                  <ArrowUpIcon color="primary" />
+                  <ChevronUpIcon color="primary" />
                 </IconButton>
                 <IconButton
                   onClick={() => setYear(year - 1)}
                   className={calendarClasses.changeYearButton}
                 >
-                  <ArrowDownIcon color="primary" />
+                  <ChevronDownIcon color="primary" />
                 </IconButton>
               </div>
             </div>
@@ -117,7 +117,7 @@ export const Month = ({
           type="button"
           onClick={goToNextMonths}
         >
-          <NavigateNextIcon color="primary" />
+          <ChevronRightIcon color="primary" />
         </button>
       </div>
       <div className={clsx(calendarClasses.grid)}>

packages/lsd-react/src/components/Checkbox/Checkbox.tsx

@@ -7,8 +7,8 @@ import {
 } from '../../utils/useCommonProps'
 import { useInput } from '../../utils/useInput'
 import { useCheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup.context'
-import { CheckboxFilledIcon, CheckboxIcon } from '../Icons'
-import { CheckboxIndeterminateIcon } from '../Icons/CheckboxIndeterminate'
+import { CheckboxIcon, CheckboxOutlineBlankIcon } from '../Icons'
+import { IndeterminateCheckboxFilledIcon } from '../Icons/IndeterminateCheckboxFilledIcon'
 import { Typography } from '../Typography'
 import { checkboxClasses } from './Checkbox.classes'
 
@@ -98,11 +98,11 @@ export const Checkbox: React.FC<CheckboxProps> & {
         {...inputProps}
       />
       {indeterminate ? (
-        <CheckboxIndeterminateIcon color="primary" focusable={false} />
+        <IndeterminateCheckboxFilledIcon color="primary" focusable={false} />
       ) : input.value ? (
-        <CheckboxFilledIcon color="primary" focusable={false} />
-      ) : (
         <CheckboxIcon color="primary" focusable={false} />
+      ) : (
+        <CheckboxOutlineBlankIcon color="primary" focusable={false} />
       )}
       <span className={checkboxClasses.label}>{children}</span>
     </Typography>

packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx

@@ -5,7 +5,7 @@ import {
   omitCommonProps,
   useCommonProps,
 } from '../../utils/useCommonProps'
-import { ArrowDownIcon, ArrowUpIcon } from '../Icons'
+import { ChevronDownIcon, ChevronUpIcon } from '../Icons'
 import { Typography } from '../Typography'
 import { collapseHeaderClasses } from './CollapseHeader.classes'
 
@@ -58,12 +58,12 @@ export const CollapseHeader: React.FC<CollapseHeaderProps> & {
         </Typography>
         <div className={collapseHeaderClasses.icons}>
           {open ? (
-            <ArrowUpIcon
+            <ChevronUpIcon
               color="primary"
               className={collapseHeaderClasses.menuIcon}
             />
           ) : (
-            <ArrowDownIcon
+            <ChevronDownIcon
               color="primary"
               className={collapseHeaderClasses.menuIcon}
             />

packages/lsd-react/src/components/Dropdown/Dropdown.tsx

@@ -8,7 +8,7 @@ import {
 import { SelectOption, useSelect } from '../../utils/useSelect'
 import { DropdownItem } from '../DropdownItem'
 import { DropdownMenu } from '../DropdownMenu'
-import { ArrowDownIcon, ArrowUpIcon, ErrorIcon } from '../Icons'
+import { ChevronDownIcon, ChevronUpIcon, ErrorIcon } from '../Icons'
 import { Portal } from '../PortalProvider/Portal'
 import { Typography } from '../Typography'
 import { dropdownClasses } from './Dropdown.classes'
@@ -138,12 +138,12 @@ export const Dropdown: React.FC<DropdownProps> & {
             )}
 
             {openState ? (
-              <ArrowUpIcon
+              <ChevronUpIcon
                 color="primary"
                 className={dropdownClasses.menuIcon}
               />
             ) : (
-              <ArrowDownIcon
+              <ChevronDownIcon
                 color="primary"
                 className={dropdownClasses.menuIcon}
               />

packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx

@@ -5,7 +5,7 @@ import {
   omitCommonProps,
   useCommonProps,
 } from '../../utils/useCommonProps'
-import { CheckboxFilledIcon, CheckboxIcon, LsdIconProps } from '../Icons'
+import { CheckboxIcon, CheckboxOutlineBlankIcon, LsdIconProps } from '../Icons'
 import { Typography } from '../Typography'
 import { dropdownItemClasses } from './DropdownItem.classes'
 
@@ -52,9 +52,9 @@ export const DropdownItem: React.FC<DropdownItemProps> & {
     >
       {withIcon &&
         (selected ? (
-          <CheckboxFilledIcon {...iconProps} />
-        ) : (
           <CheckboxIcon {...iconProps} />
+        ) : (
+          <CheckboxOutlineBlankIcon {...iconProps} />
         ))}
       <Typography
         variant={size === 'large' ? 'label1' : 'label2'}

packages/lsd-react/src/components/Icons/CheckboxIcon/CheckboxIcon.tsx

@@ -11,7 +11,9 @@ export const CheckboxIcon = LsdIcon(
       {...props}
     >
       <path
-        d="M11.0833 2.91667V11.0833H2.91667V2.91667H11.0833ZM11.0833 1.75H2.91667C2.275 1.75 1.75 2.275 1.75 2.91667V11.0833C1.75 11.725 2.275 12.25 2.91667 12.25H11.0833C11.725 12.25 12.25 11.725 12.25 11.0833V2.91667C12.25 2.275 11.725 1.75 11.0833 1.75Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.91667 1.75H11.0833C11.725 1.75 12.25 2.275 12.25 2.91667V11.0833C12.25 11.725 11.725 12.25 11.0833 12.25H2.91667C2.275 12.25 1.75 11.725 1.75 11.0833V2.91667C1.75 2.275 2.275 1.75 2.91667 1.75ZM9.68333 4.43333L10.5 5.25L5.83333 9.91667L3.5 7.58333L4.31667 6.76667L5.83333 8.28333L9.68333 4.43333Z"
         fill="black"
       />
     </svg>

packages/lsd-react/src/components/Icons/CheckboxOutlineBlankIcon/CheckboxOutlineBlankIcon.tsx

@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CheckboxOutlineBlankIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.0833 2.91667V11.0833H2.91667V2.91667H11.0833ZM11.0833 1.75H2.91667C2.275 1.75 1.75 2.275 1.75 2.91667V11.0833C1.75 11.725 2.275 12.25 2.91667 12.25H11.0833C11.725 12.25 12.25 11.725 12.25 11.0833V2.91667C12.25 2.275 11.725 1.75 11.0833 1.75Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

packages/lsd-react/src/components/Icons/CheckboxOutlineBlankIcon/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxOutlineBlankIcon'

packages/lsd-react/src/components/Icons/ArrowDownIcon/ArrowDownIcon.tsx → packages/lsd-react/src/components/Icons/ChevronDownIcon/ChevronDownIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const ArrowDownIcon = LsdIcon(
+export const ChevronDownIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/ChevronDownIcon/index.ts

@@ -0,0 +1 @@
+export * from './ChevronDownIcon'

packages/lsd-react/src/components/Icons/NavigateBeforeIcon/NavigateBeforeIcon.tsx → packages/lsd-react/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const NavigateBeforeIcon = LsdIcon(
+export const ChevronLeftIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/ChevronLeftIcon/index.ts

@@ -0,0 +1 @@
+export * from './ChevronLeftIcon'

packages/lsd-react/src/components/Icons/NavigateNextIcon/NavigateNextIcon.tsx → packages/lsd-react/src/components/Icons/ChevronRightIcon/ChevronRightIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const NavigateNextIcon = LsdIcon(
+export const ChevronRightIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/ChevronRightIcon/index.ts

@@ -0,0 +1 @@
+export * from './ChevronRightIcon'

packages/lsd-react/src/components/Icons/ArrowUpIcon/ArrowUpIcon.tsx → packages/lsd-react/src/components/Icons/ChevronUpIcon/ChevronUpIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const ArrowUpIcon = LsdIcon(
+export const ChevronUpIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/ChevronUpIcon/index.ts

@@ -0,0 +1 @@
+export * from './ChevronUpIcon'

packages/lsd-react/src/components/Icons/CheckboxIndeterminate/CheckboxIndeterminateIcon.tsx → packages/lsd-react/src/components/Icons/IndeterminateCheckboxFilledIcon/IndeterminateCheckboxFilledIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const CheckboxIndeterminateIcon = LsdIcon(
+export const IndeterminateCheckboxFilledIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/IndeterminateCheckboxFilledIcon/index.ts

@@ -0,0 +1 @@
+export * from './IndeterminateCheckboxFilledIcon'

packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx → packages/lsd-react/src/components/Icons/RadioButtonCheckedIcon/RadioButtonCheckedIcon.tsx

@@ -1,6 +1,6 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const RadioButtonFilledIcon = LsdIcon(
+export const RadioButtonCheckedIcon = LsdIcon(
   (props) => (
     <svg
       width="14"

packages/lsd-react/src/components/Icons/RadioButtonCheckedIcon/index.ts

@@ -0,0 +1 @@
+export * from './RadioButtonCheckedIcon'

packages/lsd-react/src/components/Icons/index.ts

@@ -1,9 +1,9 @@
 export * from './AddIcon'
-export * from './ArrowDownIcon'
+export * from './ChevronDownIcon'
 export * from './ArrowForwardIcon'
-export * from './ArrowUpIcon'
-export * from './CheckboxFilledIcon'
+export * from './ChevronUpIcon'
 export * from './CheckboxIcon'
+export * from './CheckboxOutlineBlankIcon'
 export * from './CheckIcon'
 export * from './CloseIcon'
 export * from './ErrorIcon'
@@ -12,12 +12,11 @@ export * from './KeyboardReturnIcon'
 export * from './LsdIcon'
 export * from './MenuIcon'
 export * from './MoreIcon'
-export * from './NavigateBeforeIcon'
-export * from './NavigateNextIcon'
-export * from './NewPageIcon'
+export * from './ChevronLeftIcon'
+export * from './ChevronRightIcon'
 export * from './SearchIcon'
 export * from './PickIcon'
 export * from './RadioButtonIcon'
-export * from './RadioButtonFilledIcon'
+export * from './RadioButtonCheckedIcon'
 export * from './CalendarIcon'
 export * from './RemoveIcon'

packages/lsd-react/src/components/RadioButton/RadioButton.tsx

@@ -6,7 +6,7 @@ import {
   useCommonProps,
 } from '../../utils/useCommonProps'
 import { useInput } from '../../utils/useInput'
-import { RadioButtonFilledIcon, RadioButtonIcon } from '../Icons'
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '../Icons'
 import { useRadioButtonGroupContext } from '../RadioButtonGroup/RadioButtonGroup.context'
 import { Typography } from '../Typography'
 import { radioButtonClasses } from './RadioButton.classes'
@@ -91,7 +91,7 @@ export const RadioButton: React.FC<RadioButtonProps> & {
         {...inputProps}
       />
       {input.value ? (
-        <RadioButtonFilledIcon color="primary" focusable={false} />
+        <RadioButtonCheckedIcon color="primary" focusable={false} />
       ) : (
         <RadioButtonIcon color="primary" focusable={false} />
       )}

packages/lsd-react/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import {
   useCommonProps,
 } from '../../utils/useCommonProps'
 import { useHorizontalScroll } from '../../utils/useHorizontalScroll'
-import { NavigateBeforeIcon, NavigateNextIcon } from '../Icons'
+import { ChevronLeftIcon, ChevronRightIcon } from '../Icons'
 import { TabItem } from '../TabItem'
 import { TabsContext } from './Tab.context'
 import { tabsClasses } from './Tabs.classes'
@@ -69,7 +69,7 @@ export const Tabs: React.FC<TabsProps> & {
             onClick={() => scroll.toLeft()}
             className={tabsClasses.leftScrollControl}
           >
-            <NavigateBeforeIcon color="primary" />
+            <ChevronLeftIcon color="primary" />
           </TabItem>
         )}
         {children}
@@ -81,7 +81,7 @@ export const Tabs: React.FC<TabsProps> & {
             onClick={() => scroll.toRight()}
             className={tabsClasses.rightScrollControl}
           >
-            <NavigateNextIcon color="primary" />
+            <ChevronRightIcon color="primary" />
           </TabItem>
         )}
       </div>