feat: LanguageSwitcherにnarrowとinvertを追加

kufu · May 7, 2024 · 566daa0 · 566daa0
1 parent 3c61fae
commit 566daa0
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.stories.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.stories.tsx
@@ -3,6 +3,7 @@ import { StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { LocaleMap } from '../../../types'
+import { Stack } from '../../Layout'
 
 import { LanguageSwicher } from '.'
 
@@ -22,7 +23,43 @@ const localeMap: LocaleMap = {
 }
 
 export const All: StoryFn = () => (
-  <div className="shr-bg-main-darken">
-    <LanguageSwicher localeMap={localeMap} onLanguageSelect={action('onLanguageSelect')} />
-  </div>
+  <Stack gap={1} as="dl">
+    <div>
+      <dt>normal</dt>
+      <dd className="shr-flex shr-bg-main-darken">
+        <LanguageSwicher localeMap={localeMap} onLanguageSelect={action('onLanguageSelect')} />
+      </dd>
+    </div>
+    <div>
+      <dt>narrow</dt>
+      <dd className="shr-flex shr-bg-main-darken">
+        <LanguageSwicher
+          narrow
+          localeMap={localeMap}
+          onLanguageSelect={action('onLanguageSelect')}
+        />
+      </dd>
+    </div>
+    <div>
+      <dt>invert</dt>
+      <dd className="shr-flex">
+        <LanguageSwicher
+          invert
+          localeMap={localeMap}
+          onLanguageSelect={action('onLanguageSelect')}
+        />
+      </dd>
+    </div>
+    <div>
+      <dt>narrow invert</dt>
+      <dd className="shr-flex">
+        <LanguageSwicher
+          narrow
+          invert
+          localeMap={localeMap}
+          onLanguageSelect={action('onLanguageSelect')}
+        />
+      </dd>
+    </div>
+  </Stack>
 )
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -8,6 +8,8 @@ import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon } from '../../Icon'
 import type { DecoratorsType, LocaleMap } from '../../../types'
 
 export type Props = {
+  narrow?: boolean
+  invert?: boolean
   localeMap: LocaleMap
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<'triggerLabel'>
@@ -35,9 +37,18 @@ const appLauncher = tv({
       'hover:shr-border-transparent',
     ],
   },
+  variants: {
+    invert: {
+      true: {
+        switchButton: '[&&&]:shr-text-black',
+      },
+    },
+  },
 })
 
 export const LanguageSwicher: React.FC<Props & ElementProps> = ({
+  narrow,
+  invert,
   decorators,
   localeMap,
   onLanguageSelect,
@@ -60,13 +71,25 @@ export const LanguageSwicher: React.FC<Props & ElementProps> = ({
     onLanguageSelect(code)
   }
 
+  const NarrowTrigger = (
+    <Button square suffix={<FaCaretDownIcon />} className={switchButton({ invert })}>
+      <FaGlobeIcon alt={triggerLabel} />
+    </Button>
+  )
+
+  const Trigger = (
+    <Button
+      prefix={<FaGlobeIcon />}
+      suffix={<FaCaretDownIcon />}
+      className={switchButton({ invert })}
+    >
+      {triggerLabel}
+    </Button>
+  )
+
   return (
     <Dropdown {...props}>
-      <DropdownTrigger>
-        <Button prefix={<FaGlobeIcon />} suffix={<FaCaretDownIcon />} className={switchButton()}>
-          {triggerLabel}
-        </Button>
-      </DropdownTrigger>
+      <DropdownTrigger>{narrow ? NarrowTrigger : Trigger}</DropdownTrigger>
       <DropdownContent>
         <DropdownScrollArea>
           <ul className={languageItemsList()}>