feat: Header のコントラスト比改善 +α

packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
-import { tv } from 'tailwind-variants'
+import { VariantProps, tv } from 'tailwind-variants'
 
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
-import { FaToolboxIcon } from '../../Icon'
+import { FaCaretDownIcon, FaToolboxIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
 import { Section } from '../../SectioningContent'
 import { TextLink } from '../../TextLink'
@@ -26,33 +26,47 @@ type Props = {
   urlToShowAll?: string | null
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<'triggerLabel'>
-}
+} & VariantProps<typeof appLauncher>
 type ElementProps = Omit<HTMLAttributes<HTMLElement>, keyof Props>
 
 const TRIGGER_LABEL = 'アプリ'
 
 const appLauncher = tv({
   slots: {
     appsButton: [
-      'shr-border-transparent shr-font-normal shr-text-white [&]:shr-bg-transparent [&]:shr-px-0.25',
-      'hover:shr-border-transparent hover:[&]:shr-bg-transparent',
-      'focus-visible:shr-border-transparent focus-visible:[&]:shr-bg-transparent',
+      'shr-border-none shr-font-normal shr-text-white shr-bg-transparent shr-px-0.25',
+      'hover:shr-border-transparent hover:shr-bg-transparent',
+      'focus-visible:shr-border-transparent focus-visible:shr-bg-transparent',
+      'forced-colors:shr-border-shorthand',
     ],
     contentWrapper: ['smarthr-ui-AppLauncher', 'shr-p-1.5 shr-leading-normal'],
     category: 'smarthr-ui-AppLauncher-category',
     appList: 'shr-list-none',
     link: 'smarthr-ui-AppLauncher-link',
     footer: [
       'smarthr-ui-AppLauncher-footer',
-      'shr-border-t-shorthand -shr-mx-0.75 shr-px-0.75 shr-pt-1 [&&&]:-shr-mb-0.25',
+      'shr-border-t-shorthand -shr-mx-0.75 shr-px-0.75 shr-pt-1 -shr-mb-0.25',
     ],
   },
+  variants: {
+    enableNew: {
+      true: {
+        appsButton: [
+          'shr-px-0.5 shr-font-bold shr-text-black',
+          '[&_>_svg]:aria-expanded:shr-rotate-180',
+          'hover:shr-bg-white-darken',
+          'focus-visible:shr-bg-white-darken',
+        ],
+      },
+    },
+  },
 })
 
 export const AppLauncher: React.FC<Props & ElementProps> = ({
   apps,
   urlToShowAll,
   decorators,
+  enableNew,
   ...props
 }) => {
   const triggerLabel = useMemo(
@@ -63,12 +77,16 @@ export const AppLauncher: React.FC<Props & ElementProps> = ({
   const baseApps = apps.find(({ type }) => type === 'base')
   const others = apps.filter((category) => category !== baseApps)
 
-  const { appsButton, contentWrapper, category, appList, link, footer } = appLauncher()
+  const { appsButton, contentWrapper, category, appList, link, footer } = appLauncher({ enableNew })
 
   return (
     <Dropdown {...props}>
       <DropdownTrigger>
-        <Button prefix={<FaToolboxIcon />} className={appsButton()}>
+        <Button
+          prefix={enableNew ?? <FaToolboxIcon />}
+          suffix={enableNew ? <FaCaretDownIcon /> : undefined}
+          className={appsButton()}
+        >
           {triggerLabel}
         </Button>
       </DropdownTrigger>

packages/smarthr-ui/src/components/Header/Header.tsx

@@ -1,12 +1,12 @@
 import React, { ComponentProps, PropsWithChildren, ReactElement, ReactNode, useMemo } from 'react'
-import { tv } from 'tailwind-variants'
+import { VariantProps, tv } from 'tailwind-variants'
 
 import { Button } from '../Button'
 import { Cluster } from '../Layout'
 import { SmartHRLogo } from '../SmartHRLogo'
 import { Text } from '../Text'
 
-import { HeaderDropdownMenuButton } from '.'
+import { AppLauncher, HeaderDropdownMenuButton } from '.'
 
 const header = tv({
   slots: {
@@ -21,6 +21,20 @@ const header = tv({
     tenantNameText: 'shr-px-0.25',
     actions: ['smarthr-ui-Header-actions', 'shr-ms-auto'],
   },
+  variants: {
+    enableNew: {
+      true: {
+        wrapper: [
+          'smarthr-ui-Header-enable-new',
+          'shr-border-solid shr-border-0 shr-border-t-6 shr-border-t-brand shr-border-b shr-border-b-default shr-bg-white shr-px-1.5',
+        ],
+        logoLink: '',
+        tenantInfo: '',
+        tenantNameText: '',
+        actions: 'shr-py-0.5',
+      },
+    },
+  },
 })
 
 type Tenant = PropsWithChildren<{
@@ -33,36 +47,39 @@ type Props = {
   logo?: ReactElement
   /** ロゴリンク */
   logoHref?: string
+  /** 機能名（enableNew と合わせて使います） */
+  featureName?: ReactNode
+  /** 機能郡（enableNew と合わせて使います） */
+  apps?: ComponentProps<typeof AppLauncher>['apps']
   /** テナント一覧 */
   tenants?: Tenant[]
   /** 現在のテナント ID */
   currentTenantId?: string
   /** テナントが選択された時に発火するコールバック関数 */
   onTenantSelect?: (id: string) => void
-}
+} & VariantProps<typeof header>
 
 type ElementProps = Omit<ComponentProps<'header'>, keyof Props>
 
 export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
-  logo = <SmartHRLogo className="shr-p-0.75" />,
+  enableNew,
+  logo = <SmartHRLogo fill={enableNew ? 'brand' : undefined} className="shr-p-0.75" />,
   logoHref = '/',
+  featureName,
+  apps = [],
   tenants,
   currentTenantId,
   onTenantSelect,
   children,
   className,
 }) => {
-  const { wrapperStyle, logoLinkStyle, tenantInfoStyle, tenantNameTextStyle, actionsStyle } =
-    useMemo(() => {
-      const { wrapper, logoLink, tenantInfo, tenantNameText, actions } = header()
-      return {
-        wrapperStyle: wrapper({ className }),
-        logoLinkStyle: logoLink(),
-        tenantInfoStyle: tenantInfo(),
-        tenantNameTextStyle: tenantNameText(),
-        actionsStyle: actions(),
-      }
-    }, [className])
+  const {
+    wrapper,
+    logoLink,
+    tenantInfo: tenantInfoStyle,
+    tenantNameText,
+    actions,
+  } = header({ enableNew })
   const currentTenantName = useMemo(() => {
     if (tenants && tenants.length >= 1) {
       const current = tenants.find(({ id }) => id === currentTenantId)
@@ -82,31 +99,39 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
           ))}
         </HeaderDropdownMenuButton>
       ) : (
-        <Text color="TEXT_WHITE" className={tenantNameTextStyle}>
+        <Text color="TEXT_WHITE" className={tenantNameText()}>
           {currentTenantName}
         </Text>
       ),
-    [currentTenantName, onTenantSelect, tenants, tenantNameTextStyle],
+    [currentTenantName, onTenantSelect, tenants, tenantNameText],
   )
 
   return (
     <Cluster
       as="header"
       justify="space-between"
       gap={{ column: 0.25, row: 0 }}
-      className={wrapperStyle}
+      className={wrapper({ className })}
     >
       <Cluster align="center" gap={{ column: 0.25, row: 0 }}>
-        <a href={logoHref} className={logoLinkStyle}>
+        <a href={logoHref} className={logoLink()}>
           {logo}
         </a>
-        {currentTenantName && <div className={tenantInfoStyle}>{tenantInfo}</div>}
+        {enableNew
+          ? featureName && (
+              <AppLauncher
+                apps={apps}
+                enableNew={enableNew}
+                decorators={{ triggerLabel: () => featureName }}
+              />
+            )
+          : currentTenantName && <div className={tenantInfoStyle()}>{tenantInfo}</div>}
       </Cluster>
       <Cluster
         align="center"
         justify="flex-end"
         gap={{ column: 0.5, row: 0.25 }}
-        className={actionsStyle}
+        className={actions()}
       >
         {children}
       </Cluster>