Merge pull request #6 from acid-info/topic-implement-icon-tag

feat: implement IconTag component

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

@@ -4,6 +4,7 @@ import { ButtonStyles } from '../Button/Button.styles'
 import { DropdownStyles } from '../Dropdown/Dropdown.styles'
 import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles'
 import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
+import { IconTagStyles } from '../IconTag/IconTag.styles'
 import { ListBoxStyles } from '../ListBox/ListBox.styles'
 import { TabItemStyles } from '../TabItem/TabItem.styles'
 import { TabsStyles } from '../Tabs/Tabs.styles'
@@ -20,6 +21,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     ListBoxStyles,
     DropdownStyles,
     DropdownItemStyles,
+    IconTagStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/components/IconTag/IconTag.classes.ts

@@ -0,0 +1,6 @@
+export const iconTagClasses = {
+  root: `lsd-icon-tag`,
+
+  outlined: `lsd-icon-tag--outlined`,
+  filled: `lsd-icon-tag--filled`,
+}

packages/lsd-react/src/components/IconTag/IconTag.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/react'
+import { AddIcon, FolderIcon, KeyboardReturnIcon, MenuIcon } from '../Icons'
+import { IconTag, IconTagProps } from './IconTag'
+
+export default {
+  title: 'IconTag',
+  component: IconTag,
+} as Meta
+
+export const Root: Story<IconTagProps> = (args) => (
+  <IconTag {...args}>
+    <FolderIcon color="primary" />
+  </IconTag>
+)
+
+Root.args = {
+  variant: 'outlined',
+}

packages/lsd-react/src/components/IconTag/IconTag.styles.ts

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react'
+import { iconTagClasses } from './IconTag.classes'
+
+export const IconTagStyles = css`
+  .${iconTagClasses.root} {
+    display: flex;
+    width: 32px;
+    height: 28px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(var(--lsd-icon-primary));
+  }
+
+  .${iconTagClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${iconTagClasses.outlined} {
+  }
+`

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

@@ -0,0 +1,28 @@
+import clsx from 'clsx'
+import React from 'react'
+import { iconTagClasses } from './IconTag.classes'
+
+export type IconTagProps = React.HTMLAttributes<HTMLDivElement> & {
+  label?: string
+  variant?: 'outlined' | 'filled'
+}
+
+export const IconTag: React.FC<IconTagProps> & {
+  classes: typeof iconTagClasses
+} = ({ label, variant = 'outlined', children, ...props }) => {
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      className={clsx(
+        props.className,
+        iconTagClasses.root,
+        iconTagClasses[variant],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+IconTag.classes = iconTagClasses

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

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

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

@@ -1,17 +1,20 @@
 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>
-))
+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>
+  ),
+  { filled: true },
+)

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

@@ -1,17 +1,22 @@
 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>
-))
+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>
+  ),
+  {
+    filled: true,
+  },
+)

packages/lsd-react/src/index.ts

@@ -2,6 +2,7 @@ export * from './components/Button'
 export * from './components/Dropdown'
 export * from './components/DropdownItem'
 export * from './components/Icons'
+export * from './components/IconTag'
 export * from './components/ListBox'
 export * from './components/TabItem'
 export * from './components/Tabs'