refactor: StatusLabel を TailwindCSS化 (#4119)

* refactor: StatusLabel を tailwindCSS 化 * chore: 軽微な修正 * chore: update snapshot * chore: classを見直した * chore: update snapshot * chore: レビューの指摘内容を修正 * chore: update test * chore: minHeightをextendsに追加 * chore: useClassNames.tsを削除 * chore: レビューの指摘事項を修正 * chore: update test * chore: styleのあてかたを再考 * chore: style修正 * chore: update test * chore: compoundVariantsの順番を並び替え
kufu · Dec 19, 2023 · 637dd32 · 637dd32
1 parent 2b8b943
commit 637dd32
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 207 deletions.
diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx
@@ -1,34 +1,125 @@
-import React, { FC, HTMLAttributes, ReactNode, useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, useMemo } from 'react'
+import { type VariantProps, tv } from 'tailwind-variants'
 
-import { Theme, useTheme } from '../../hooks/useTheme'
 import { FaExclamationCircleIcon, FaExclamationTriangleIcon } from '../Icon'
 
-import { useClassNames } from './useClassNames'
-
-type Color = 'grey' | 'blue' | 'green' | 'red'
-type State = 'warning' | 'error'
-type Props = {
-  /** ラベルが表す状態の種類 */
-  type?: Color | State
-  /** 強調するかどうか */
-  bold?: boolean
-  /** ラベル */
-  children: ReactNode
-  /** コンポーネントに適用するクラス名 */
-  className?: string
-}
-type ElementProps = Omit<HTMLAttributes<HTMLSpanElement>, keyof Props>
-
-export const StatusLabel: FC<Props & ElementProps> = ({
+const statusLabel = tv({
+  base: [
+    'smarthr-ui-StatusLabel',
+    'shr-box-content',
+    'shr-font-bold',
+    'shr-inline-flex',
+    'shr-items-center',
+    'shr-justify-center',
+    'shr-gap-0.25',
+    'shr-px-0.5',
+    'shr-py-0.25',
+    'shr-whitespace-nowrap',
+    'shr-text-sm',
+    // ラベルが天地中央に揃わないため暫定対応
+    'shr-leading-[0]',
+    'shr-min-w-[3.5em]',
+    'shr-min-h-em',
+    'shr-border',
+    'shr-border-solid',
+  ],
+  variants: {
+    type: {
+      grey: [],
+      blue: [],
+      green: [],
+      red: [],
+      warning: ['shr-bg-warning-yellow', 'shr-text-black'],
+      error: ['shr-bg-danger', 'shr-border-danger', 'shr-text-white'],
+    },
+    bold: {
+      true: [],
+    },
+  },
+  compoundVariants: [
+    {
+      type: ['blue', 'green', 'red', 'warning'],
+      bold: false,
+      className: ['shr-border-current'],
+    },
+    {
+      type: 'grey',
+      bold: false,
+      class: [
+        'shr-bg-white',
+        'shr-border-grey-20',
+        'shr-text-grey',
+        'contrast-more:shr-border-high-contrast',
+      ],
+    },
+    {
+      type: 'blue',
+      bold: false,
+      class: ['shr-text-main'],
+    },
+    {
+      type: 'green',
+      bold: false,
+      /* SmartHR 基本色の Aqua04。StatusLabel 以外では使いません。
+       * https://smarthr.design/basics/colors/#h4-1 */
+      class: ['shr-text-[#0f7f85]'],
+    },
+    {
+      type: 'red',
+      bold: false,
+      class: ['shr-text-danger'],
+    },
+    {
+      type: 'warning',
+      bold: false,
+      class: ['shr-border-warning-yellow'],
+    },
+    {
+      type: ['grey', 'blue', 'green', 'red', 'error'],
+      bold: true,
+      class: ['shr-text-white'],
+    },
+    {
+      type: 'grey',
+      bold: true,
+      class: ['shr-bg-[theme(colors.grey.65)]', 'shr-border-grey-65'],
+    },
+
+    {
+      type: 'blue',
+      bold: true,
+      class: ['shr-bg-main', 'shr-border-main'],
+    },
+    {
+      type: 'green',
+      bold: true,
+      /* SmartHR 基本色の Aqua04。StatusLabel 以外では使いません。
+       * https://smarthr.design/basics/colors/#h4-1 */
+      class: ['shr-border-[#0f7f85]', 'shr-bg-[#0f7f85]'],
+    },
+    {
+      type: 'red',
+      bold: true,
+      class: ['shr-bg-danger', 'shr-border-danger'],
+    },
+    {
+      type: 'warning',
+      bold: true,
+      class: ['shr-border-current', 'shr-text-black'],
+    },
+  ],
+})
+
+type Props = VariantProps<typeof statusLabel>
+type ElementProps = Omit<ComponentPropsWithoutRef<'span'>, keyof Props>
+
+export const StatusLabel: FC<PropsWithChildren<Props & ElementProps>> = ({
   type = 'grey',
   bold = false,
-  className = '',
+  className,
   children,
   ...props
 }) => {
-  const theme = useTheme()
-  const classNames = useClassNames()
   const Icon = useMemo(() => {
     switch (true) {
       case type === 'warning' && bold: {
@@ -43,93 +134,20 @@ export const StatusLabel: FC<Props & ElementProps> = ({
     }
   }, [type, bold])
 
+  const wrapperStyle = useMemo(
+    () =>
+      statusLabel({
+        className,
+        type,
+        bold,
+      }),
+    [className, type, bold],
+  )
+
   return (
-    <Wrapper
-      {...props}
-      themes={theme}
-      className={`${type}${bold ? ' bold' : ''} ${className} ${classNames.wrapper}`}
-    >
+    <span {...props} className={wrapperStyle}>
       <Icon />
       {children}
-    </Wrapper>
+    </span>
   )
 }
-
-const Wrapper = styled.span<{ themes: Theme }>`
-  ${({ themes: { border, color, fontSize, spacingByChar } }) => css`
-    box-sizing: content-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${spacingByChar(0.25)};
-    border: ${border.lineWidth} solid transparent;
-    background-color: ${color.WHITE};
-    padding: ${spacingByChar(0.25)} ${spacingByChar(0.5)};
-    white-space: nowrap;
-    font-size: ${fontSize.S};
-    font-weight: bold;
-
-    /** ラベルが天地中央に揃わないため暫定対応 */
-    line-height: 0;
-    min-width: 3.5em;
-    min-height: 1em;
-
-    &.grey {
-      border-color: ${color.BORDER};
-      color: ${color.TEXT_GREY};
-
-      @media (prefers-contrast: more) {
-        & {
-          border: ${border.highContrast};
-        }
-      }
-
-      &.bold {
-        border-color: ${color.TEXT_GREY};
-        background-color: ${color.TEXT_GREY};
-        color: ${color.TEXT_WHITE};
-      }
-    }
-
-    &.blue {
-      border-color: ${color.MAIN};
-      color: ${color.MAIN};
-
-      &.bold {
-        background-color: ${color.MAIN};
-        color: ${color.TEXT_WHITE};
-      }
-    }
-
-    &.green {
-      /* SmartHR 基本色の Aqua04。StatusLabel 以外では使いません。
-         * https://smarthr.design/basics/colors/#h4-1 */
-      border-color: #0f7f85;
-      color: #0f7f85;
-
-      &.bold {
-        background-color: #0f7f85;
-        color: ${color.TEXT_WHITE};
-      }
-    }
-
-    &.red {
-      border-color: ${color.DANGER};
-      color: ${color.DANGER};
-    }
-    &.red.bold,
-    &.error {
-      background-color: ${color.DANGER};
-      color: ${color.TEXT_WHITE};
-    }
-
-    &.warning {
-      background-color: ${color.WARNING_YELLOW};
-      color: ${color.TEXT_BLACK};
-
-      &.bold {
-        border-color: ${color.TEXT_BLACK};
-      }
-    }
-  `}
-`
diff --git a/src/components/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap b/src/components/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap
@@ -1,91 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatusLabel should be match snapshot 1`] = `
-.c0 {
-  box-sizing: content-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  gap: 4px;
-  border: 1px solid transparent;
-  background-color: #fff;
-  padding: 4px 8px;
-  white-space: nowrap;
-  font-size: 0.8571428571428571rem;
-  font-weight: bold;
-  line-height: 0;
-  min-width: 3.5em;
-  min-height: 1em;
-}
-
-.c0.grey {
-  border-color: #d6d3d0;
-  color: #706d65;
-}
-
-.c0.grey.bold {
-  border-color: #706d65;
-  background-color: #706d65;
-  color: #fff;
-}
-
-.c0.blue {
-  border-color: #0077c7;
-  color: #0077c7;
-}
-
-.c0.blue.bold {
-  background-color: #0077c7;
-  color: #fff;
-}
-
-.c0.green {
-  border-color: #0f7f85;
-  color: #0f7f85;
-}
-
-.c0.green.bold {
-  background-color: #0f7f85;
-  color: #fff;
-}
-
-.c0.red {
-  border-color: #e01e5a;
-  color: #e01e5a;
-}
-
-.c0.red.bold,
-.c0.error {
-  background-color: #e01e5a;
-  color: #fff;
-}
-
-.c0.warning {
-  background-color: #ffcc17;
-  color: #23221e;
-}
-
-.c0.warning.bold {
-  border-color: #23221e;
-}
-
-@media (prefers-contrast:more) {
-  .c0.grey {
-    border: 1px solid #23221e;
-  }
-}
-
 <span
-  className="c0 grey  smarthr-ui-StatusLabel"
+  className="smarthr-ui-StatusLabel shr-box-content shr-font-bold shr-inline-flex shr-items-center shr-justify-center shr-gap-0.25 shr-px-0.5 shr-py-0.25 shr-whitespace-nowrap shr-text-sm shr-leading-[0] shr-min-w-[3.5em] shr-min-h-em shr-border shr-border-solid shr-bg-white shr-border-grey-20 shr-text-grey contrast-more:shr-border-high-contrast"
 >
   hello
 </span>

diff --git a/src/components/StatusLabel/useClassNames.ts b/src/components/StatusLabel/useClassNames.ts
diff --git a/src/smarthr-ui-preset.ts b/src/smarthr-ui-preset.ts
@@ -133,6 +133,7 @@ export default {
       black: defaultColor.GREY_100,
     },
     textColor: ({ theme }) => ({
+      main: theme('colors.main'),
       black: theme('colors.black'),
       white: theme('colors.white'),
       'white-darken': theme('colors.white-darken'),
@@ -152,6 +153,9 @@ export default {
       'flash-message': `${defaultZIndex.FLASH_MESSAGE}`,
     },
     extend: {
+      minHeight: ({ theme }) => ({
+        ...theme('spacing'),
+      }),
       borderColor: ({ theme }) => ({
         default: theme('colors.grey.20'),
         disabled: theme('colors.grey.20 / 50%'),