Merge branch 'topic-icons'

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

@@ -1,11 +1,12 @@
 import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { ButtonStyles } from '../Button/Button.styles'
+import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
-  [ButtonStyles, TypographyStyles]
+  [ButtonStyles, TypographyStyles, LsdIconStyles]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
   theme = defaultThemes.light,

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const AddIcon = 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.6666 7.58334H7.58325V11.6667H6.41659V7.58334H2.33325V6.41668H6.41659V2.33334H7.58325V6.41668H11.6666V7.58334Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const ArrowDownIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10.5 5.66125L9.6775 4.83875L7 7.51041L4.3225 4.83874L3.5 5.66125L7 9.16125L10.5 5.66125Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const ArrowForwardIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M6.99992 2.33334L6.17742 3.15584L9.43242 6.41668H2.33325V7.58334H9.43242L6.17742 10.8442L6.99992 11.6667L11.6666 7.00001L6.99992 2.33334Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const ArrowUpIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.5 8.33875L4.3225 9.16125L7 6.48959L9.6775 9.16125L10.5 8.33875L7 4.83875L3.5 8.33875Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CheckIcon = 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>
+))

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

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

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

@@ -0,0 +1,24 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CheckboxFilledIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        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>
+  ),
+  {
+    filled: true,
+  },
+)

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

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

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

@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CheckboxIcon = 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/CheckboxIcon/index.ts

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CloseIcon = 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.0834 3.73916L10.2609 2.91666L7.00008 6.17749L3.73925 2.91666L2.91675 3.73916L6.17758 6.99999L2.91675 10.2608L3.73925 11.0833L7.00008 7.82249L10.2609 11.0833L11.0834 10.2608L7.82258 6.99999L11.0834 3.73916Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,24 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const ErrorIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.00008 1.16666C3.78008 1.16666 1.16675 3.77999 1.16675 6.99999C1.16675 10.22 3.78008 12.8333 7.00008 12.8333C10.2201 12.8333 12.8334 10.22 12.8334 6.99999C12.8334 3.77999 10.2201 1.16666 7.00008 1.16666ZM6.41675 9.91666V8.74999H7.58342V9.91666H6.41675ZM6.41675 4.08332V7.58332H7.58342V4.08332H6.41675Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const FolderIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.34925 3.50001L6.51591 4.66668H11.6667V10.5H2.33341V3.50001H5.34925ZM5.83341 2.33334H2.33341C1.69175 2.33334 1.17258 2.85834 1.17258 3.50001L1.16675 10.5C1.16675 11.1417 1.69175 11.6667 2.33341 11.6667H11.6667C12.3084 11.6667 12.8334 11.1417 12.8334 10.5V4.66668C12.8334 4.02501 12.3084 3.50001 11.6667 3.50001H7.00008L5.83341 2.33334Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const KeyboardReturnIcon = 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 4.08333V6.41667H3.98417L6.0725 4.3225L5.25 3.5L1.75 7L5.25 10.5L6.0725 9.6775L3.98417 7.58333H12.25V4.08333H11.0833Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.classes.ts

@@ -0,0 +1,8 @@
+export const lsdIconClasses = {
+  root: 'lsd-icon',
+  small: 'lsd-icon--small',
+  filled: 'lsd-icon--filled',
+  stroked: 'lsd-icon--stroked',
+  primary: 'lsd-icon--primary',
+  secondary: 'lsd-icon--secondary',
+}

packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.styles.ts

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react'
+import { lsdIconClasses } from './LsdIcon.classes'
+
+export const LsdIconStyles = css`
+  .${lsdIconClasses.root} {
+  }
+
+  .${lsdIconClasses.primary} {
+    &.${lsdIconClasses.filled} {
+      &,
+      * {
+        fill: rgb(var(--lsd-icon-primary));
+      }
+    }
+
+    $.${lsdIconClasses.stroked} {
+      &,
+      * {
+        fill: rgb(var(--lsd-icon-primary));
+      }
+    }
+  }
+
+  .${lsdIconClasses.secondary} {
+    &.${lsdIconClasses.filled} {
+      &,
+      * {
+        fill: rgb(var(--lsd-icon-secondary));
+      }
+    }
+
+    $.${lsdIconClasses.stroked} {
+      &,
+      * {
+        fill: rgb(var(--lsd-icon-secondary));
+      }
+    }
+  }
+`

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

@@ -0,0 +1,46 @@
+import clsx from 'clsx'
+import React from 'react'
+import { lsdIconClasses } from './LsdIcon.classes'
+
+export type LsdIconProps = React.SVGAttributes<SVGElement> & {
+  size?: 'small'
+  color?: 'primary' | 'secondary'
+}
+
+type LsdIconComponent = React.FC<LsdIconProps> & {
+  classes: typeof lsdIconClasses
+}
+
+export const LsdIcon = (
+  Component: React.ComponentType<React.SVGAttributes<SVGElement>>,
+  metadata?: {
+    filled?: boolean
+    stroked?: boolean
+  },
+): LsdIconComponent => {
+  const IconComponent: LsdIconComponent = ({
+    color,
+    size = 'small',
+    className,
+    ...props
+  }) => {
+    return (
+      <Component
+        className={clsx(
+          className,
+          lsdIconClasses.root,
+          lsdIconClasses[size],
+          color && lsdIconClasses[color],
+          metadata?.filled && lsdIconClasses.filled,
+          metadata?.stroked && lsdIconClasses.stroked,
+        )}
+        {...props}
+      />
+    )
+  }
+
+  IconComponent.displayName = Component.displayName
+  IconComponent.classes = lsdIconClasses
+
+  return IconComponent
+}

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

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

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

@@ -0,0 +1,24 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const MenuIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.75 4.66667V3.5H12.25V4.66667H1.75ZM1.75 7.58333H12.25V6.41667H1.75V7.58333ZM1.75 10.5H12.25V9.33333H1.75V10.5Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

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

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

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

@@ -0,0 +1,19 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const MoreIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.49992 5.83334C2.85825 5.83334 2.33325 6.35834 2.33325 7.00001C2.33325 7.64168 2.85825 8.16668 3.49992 8.16668C4.14159 8.16668 4.66659 7.64168 4.66659 7.00001C4.66659 6.35834 4.14159 5.83334 3.49992 5.83334ZM10.4999 5.83334C9.85825 5.83334 9.33325 6.35834 9.33325 7.00001C9.33325 7.64168 9.85825 8.16668 10.4999 8.16668C11.1416 8.16668 11.6666 7.64168 11.6666 7.00001C11.6666 6.35834 11.1416 5.83334 10.4999 5.83334ZM5.83325 7.00001C5.83325 6.35834 6.35825 5.83334 6.99992 5.83334C7.64159 5.83334 8.16659 6.35834 8.16659 7.00001C8.16659 7.64168 7.64159 8.16668 6.99992 8.16668C6.35825 8.16668 5.83325 7.64168 5.83325 7.00001Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const NavigateBeforeIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.16137 4.3225L8.33887 3.5L4.83887 7L8.33887 10.5L9.16137 9.6775L6.4897 7L9.16137 4.3225Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,17 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const NavigateNextIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.66137 3.5L4.83887 4.3225L7.51053 7L4.83887 9.6775L5.66137 10.5L9.16137 7L5.66137 3.5Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,19 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const NewPageIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.79293 3.5H3.00004V2.5H11.5V11H10.5V4.20711L3.35359 11.3536L2.64648 10.6464L9.79293 3.5Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,19 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const SearchIcon = LsdIcon((props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.61 7.74083L11.9525 11.0833L11.0833 11.9525L7.74083 8.61C7.11667 9.05917 6.36417 9.33333 5.54167 9.33333C3.4475 9.33333 1.75 7.63583 1.75 5.54167C1.75 3.4475 3.4475 1.75 5.54167 1.75C7.63583 1.75 9.33333 3.4475 9.33333 5.54167C9.33333 6.36417 9.05917 7.11667 8.61 7.74083ZM5.54167 2.91667C4.08917 2.91667 2.91667 4.08917 2.91667 5.54167C2.91667 6.99417 4.08917 8.16667 5.54167 8.16667C6.99417 8.16667 8.16667 6.99417 8.16667 5.54167C8.16667 4.08917 6.99417 2.91667 5.54167 2.91667Z"
+      fill="black"
+    />
+  </svg>
+))

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

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

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

@@ -0,0 +1,18 @@
+export * from './AddIcon'
+export * from './ArrowDownIcon'
+export * from './ArrowForwardIcon'
+export * from './ArrowUpIcon'
+export * from './CheckboxFilledIcon'
+export * from './CheckboxIcon'
+export * from './CheckIcon'
+export * from './CloseIcon'
+export * from './ErrorIcon'
+export * from './FolderIcon'
+export * from './KeyboardReturnIcon'
+export * from './LsdIcon'
+export * from './MenuIcon'
+export * from './MoreIcon'
+export * from './NavigateBeforeIcon'
+export * from './NavigateNextIcon'
+export * from './NewPageIcon'
+export * from './SearchIcon'

packages/lsd-react/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/Button'
+export * from './components/Icons'
 export * from './components/Theme'