Merge pull request #25 from acid-info/topic-implement-badge

Implement badge component

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

@@ -0,0 +1,12 @@
+export const badgeClasses = {
+  root: `lsd-badge`,
+
+  label: `lsd-badge__label`,
+
+  outlined: `lsd-badge--outlined`,
+  filled: `lsd-badge--filled`,
+  disabled: 'lsd-badge--disabled',
+
+  small: 'lsd-badge--small',
+  large: 'lsd-badge--large',
+}

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

@@ -0,0 +1,48 @@
+import { Meta, Story } from '@storybook/react'
+import { FolderIcon } from '../Icons'
+import { Badge, BadgeProps } from './Badge'
+
+export default {
+  title: 'Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'filled'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
+    iconDirection: {
+      type: {
+        name: 'enum',
+        value: ['left', 'right', 'none'],
+      },
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        value: [true, false],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<BadgeProps> = (args) => (
+  <Badge {...args} icon={<FolderIcon color="primary" />}>
+    Badge
+  </Badge>
+)
+
+Root.args = {
+  variant: 'outlined',
+  iconDirection: 'left',
+  disabled: false,
+  size: 'large',
+}

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

@@ -0,0 +1,55 @@
+import { css } from '@emotion/react'
+import { badgeClasses } from './Badge.classes'
+
+export const BadgeStyles = css`
+  .${badgeClasses.root} {
+    width: fit-content;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid rgb(var(--lsd-icon-primary));
+    border-radius: 20px;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .${badgeClasses.large} {
+    padding: 4px 12px;
+    gap: 12px;
+    height: 28px;
+  }
+
+  .${badgeClasses.small} {
+    padding: 4px 8px;
+    gap: 8px;
+    height: 24px;
+  }
+
+  .${badgeClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+    .${badgeClasses.label} {
+      color: rgb(var(--lsd-text-secondary));
+    }
+
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${badgeClasses.outlined} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${badgeClasses.disabled} {
+    opacity: 0.3;
+    cursor: initial;
+    pointer-events: none;
+  }
+`

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

@@ -0,0 +1,50 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { badgeClasses } from './Badge.classes'
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right'
+  size?: 'large' | 'small'
+  disabled?: boolean
+}
+
+export const Badge: React.FC<BadgeProps> & {
+  classes: typeof badgeClasses
+} = ({
+  variant = 'outlined',
+  disabled = 'false',
+  size = 'large',
+  icon,
+  iconDirection = 'left',
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      aria-label={children as string}
+      {...props}
+      className={clsx(
+        props.className,
+        badgeClasses.root,
+        badgeClasses[variant],
+        disabled && badgeClasses.disabled,
+        badgeClasses[size],
+      )}
+    >
+      {iconDirection === 'left' && icon}
+      <Typography
+        component="span"
+        variant={size === 'small' ? 'label2' : 'label1'}
+        className={badgeClasses.label}
+      >
+        {children}
+      </Typography>
+      {iconDirection === 'right' && icon}
+    </div>
+  )
+}
+
+Badge.classes = badgeClasses

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

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

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

@@ -1,6 +1,7 @@
 import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles'
+import { BadgeStyles } from '../Badge/Badge.styles'
 import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { ButtonStyles } from '../Button/Button.styles'
@@ -48,6 +49,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     CollapseStyles,
     CollapseHeaderStyles,
     CheckboxGroupStyles,
+    BadgeStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/index.ts

@@ -20,3 +20,4 @@ export * from './components/Tag'
 export * from './components/Theme'
 export * from './components/Checkbox'
 export * from './components/CheckboxGroup'
+export * from './components/Badge'