feat: WakuWakuButton を追加 (#5018)

Author: uknmr

packages/smarthr-ui/src/components/Table/Table.stories.tsx

@@ -5,11 +5,13 @@ import styled from 'styled-components'
 
 import { Base } from '../Base'
 import { Button } from '../Button'
+import { FaPencilIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { Text } from '../Text'
 
 import { TdCheckbox } from './TdCheckbox'
 import { ThCheckbox } from './ThCheckbox'
+import { WakuWakuButton } from './WakuWakuButton'
 
 import { BulkActionRow, EmptyTableBody, Table, TableReel, Td, Th } from '.'
 
@@ -277,7 +279,15 @@ export const All: StoryFn = () => (
               <Th>Protein (g)</Th>
               <Th>Button</Th>
             </tr>
-            <BulkActionRow>Bulk action area</BulkActionRow>
+            <BulkActionRow>
+              <Cluster align="center">
+                <p>50件のオブジェクトが選択されています。</p>
+                <WakuWakuButton>一覧のオブジェクト9,999件をすべて選択</WakuWakuButton>
+                <Button size="s" prefix={<FaPencilIcon />}>
+                  一括操作
+                </Button>
+              </Cluster>
+            </BulkActionRow>
           </thead>
           <tbody>
             {data.map(({ name, calories, fat, carbs, protein }, i) => (

packages/smarthr-ui/src/components/Table/WakuWakuButton.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { Button } from '../Button'
+
+type Props = Omit<React.ComponentProps<typeof Button>, 'variant' | 'size'>
+
+export const WakuWakuButton: React.FC<Props> = (props) => (
+  <Button {...props} variant="text" size="s" className="shr-text-link-darken" />
+)

packages/smarthr-ui/src/components/Table/index.ts

@@ -6,3 +6,4 @@ export { TdCheckbox } from './TdCheckbox'
 export { BulkActionRow } from './BulkActionRow'
 export { EmptyTableBody } from './EmptyTableBody'
 export { TableReel } from './TableReel'
+export { WakuWakuButton } from './WakuWakuButton'

packages/smarthr-ui/src/index.ts

@@ -46,16 +46,7 @@ export { StatusLabel } from './components/StatusLabel'
 export { Base, BaseColumn } from './components/Base'
 export * from './components/Icon'
 export { SmartHRLogo } from './components/SmartHRLogo'
-export {
-  Table,
-  TableReel,
-  Th,
-  Td,
-  ThCheckbox,
-  TdCheckbox,
-  BulkActionRow,
-  EmptyTableBody,
-} from './components/Table'
+export * from './components/Table'
 export * from './components/AppNavi'
 export { TabBar, TabItem } from './components/TabBar'
 export { Heading, PageHeading } from './components/Heading'

packages/smarthr-ui/src/smarthr-ui-preset.ts

@@ -61,7 +61,6 @@ export default {
       black: defaultColor.GREY_100,
       white: defaultColor.WHITE,
       'white-darken': theme('colors.white-darken'),
-      link: defaultColor.TEXT_LINK,
       background: defaultColor.BACKGROUND,
       border: theme('colors.grey.20'),
       brand: theme('colors.brand'),
@@ -112,6 +111,7 @@ export default {
       'white-darken': darkenColor(defaultColor.WHITE),
       main: defaultColor.MAIN,
       'main-darken': darkenColor(defaultColor.MAIN),
+      link: defaultColor.TEXT_LINK,
       brand: defaultColor.BRAND,
       outline: defaultColor.OUTLINE,
       danger: defaultColor.DANGER,
@@ -185,7 +185,9 @@ export default {
       white: theme('colors.white'),
       'white-darken': theme('colors.white-darken'),
       disabled: theme('colors.grey.30'),
-      link: defaultColor.TEXT_LINK,
+      link: theme('colors.link'),
+      // ACTION_BACKGROUND とコントラスト比 4.5 を達成するために調整
+      'link-darken': darkenColor(theme('colors.link'), 0.062),
       grey: theme('colors.grey.65'),
       danger: theme('colors.danger'),
       'color-inherit': 'inherit',
@@ -212,6 +214,7 @@ export default {
         disabled: theme('colors.grey.20 / 50%'),
         darken: darkenColor(theme('colors.grey.20')),
         'high-contrast': theme('colors.grey.100'),
+        link: theme('colors.link'),
       }),
       strokeWidth: {
         '0.5': '0.5',

sandbox/next/e2e/rsc.test.ts

@@ -123,6 +123,7 @@ const CLIENT_COMPONENTS = [
   'Textarea',
   'ThCheckbox',
   'Tooltip',
+  'WakuWakuButton',
 ]
 
 test.describe('RSC対応コンポーネントがRSCで利用できること', () => {

sandbox/next/src/app/rsc_test/WakuWakuButton/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { WakuWakuButton } from 'smarthr-ui'
+export default function WakuWakuButtonPage() {
+  return (
+    <>
+      <div>Success: Button</div>
+      <WakuWakuButton />
+    </>
+  )
+}