@charcoal-ui/react 3.6.0 → 3.8.0

package/src/components/Button/index.story.tsx

@@ -1,8 +1,7 @@
-import { action } from '@storybook/addon-actions'
 import { useRef } from 'react'
-import { Story } from '../../_lib/compat'
 import { ClickableElement } from '../Clickable'
 import Button, { ButtonProps } from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Button',
@@ -21,167 +20,171 @@ export default {
       },
     },
   },
-}
-
-const DefaultStory = (args: ButtonProps) => (
-  <Button {...args} onClick={action('click')}>
-    Button
-  </Button>
-)
+  render: (args) => <Button {...args}>Button</Button>,
+} as Meta<typeof Button>
 
-export const Default: Story<ButtonProps> = DefaultStory.bind({})
+export const Default: StoryObj<typeof Button> = {}
 
-export const Primary: Story<ButtonProps> = DefaultStory.bind({})
-Primary.args = {
-  variant: 'Primary',
+export const Primary: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Primary',
+  },
 }
 
-export const Navigation: Story<ButtonProps> = DefaultStory.bind({})
-Navigation.args = {
-  variant: 'Navigation',
+export const Navigation: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Navigation',
+  },
 }
 
-export const Overlay: Story<ButtonProps> = DefaultStory.bind({})
-Overlay.args = {
-  variant: 'Overlay',
+export const Overlay: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Overlay',
+  },
 }
 
-export const Danger: Story<ButtonProps> = DefaultStory.bind({})
-Danger.args = {
-  variant: 'Danger',
+export const Danger: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Danger',
+  },
 }
 
-export const Small: Story<ButtonProps> = DefaultStory.bind({})
-Small.args = {
-  size: 'S',
+export const Small: StoryObj<typeof Button> = {
+  args: {
+    size: 'S',
+  },
 }
 
-export const Fixed: Story<ButtonProps> = DefaultStory.bind({})
-Fixed.args = {
-  fullWidth: true,
+export const Fixed: StoryObj<typeof Button> = {
+  args: {
+    fullWidth: true,
+  },
 }
 
-export const Disabled: Story<ButtonProps> = DefaultStory.bind({})
-Disabled.args = {
-  disabled: true,
+export const Disabled: StoryObj<typeof Button> = {
+  args: {
+    disabled: true,
+  },
 }
 
-export const Link: Story<ButtonProps> = DefaultStory.bind({})
-Link.args = {
-  to: '#',
+export const Active: StoryObj<typeof Button> = {
+  args: {
+    isActive: true,
+  },
 }
 
-const NihongoStory = (args: ButtonProps) => (
-  <Button {...args} onClick={action('click')}>
-    日本語だよ
-  </Button>
-)
-
-export const Nihongo: Story<ButtonProps> = NihongoStory.bind({})
-
-const FocusStory = (args: ButtonProps) => <FocusStoryInternal {...args} />
-const FocusStoryInternal = (args: ButtonProps) => {
-  const ref = useRef<ClickableElement>(null)
-  const focus = () => ref.current?.focus()
-  return (
-    <Button {...args} onMouseOver={focus} ref={ref}>
-      Mouse over to focus
-    </Button>
-  )
+export const Link: StoryObj<typeof Button> = {
+  args: {
+    to: '#',
+  },
 }
 
-export const Focus: Story<ButtonProps> = FocusStory.bind({})
-
-const LayoutExampleStory = (args: ButtonProps) => (
-  <div
-    css={`
-      display: grid;
-      gap: 24px;
-    `}
-  >
-    <div
-      css={`
-        display: grid;
-        grid: auto / auto-flow min-content;
-        gap: 8px;
-      `}
-    >
-      <Button {...args}>Grid</Button>
-      <Button {...args} variant="Navigation">
-        Layout
-      </Button>
-      <Button {...args} variant="Danger">
-        Sample
-      </Button>
-    </div>
-    <div
-      css={`
-        display: grid;
-        grid: auto-flow auto / 392px;
-        gap: 8px;
-      `}
-    >
-      <Button {...args} variant="Primary" fullWidth>
-        Submit
-      </Button>
-      <Button {...args} variant="Default" fullWidth>
-        Cancel
-      </Button>
-    </div>
-    <div
-      css={`
-        display: flex;
+export const Nihongo: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>日本語だよ</Button>,
+}
 
-        & > * + * {
-          margin-left: 8px;
-        }
-      `}
-    >
-      <Button {...args}>Flex</Button>
-      <Button {...args} variant="Navigation">
-        Layout
-      </Button>
-      <Button {...args} variant="Danger">
-        Sample
+export const Focus: StoryObj<typeof Button> = {
+  render: function Render(args) {
+    const ref = useRef<ClickableElement>(null)
+    const focus = () => ref.current?.focus()
+    return (
+      <Button {...args} onMouseOver={focus} ref={ref}>
+        Mouse over to focus
       </Button>
-    </div>
-    <div
-      css={`
-        display: flex;
-        flex-direction: column;
-        width: 392px;
+    )
+  },
+}
 
-        & > * + * {
-          margin-top: 8px;
-        }
-      `}
-    >
-      <Button {...args} variant="Primary" fullWidth>
-        Submit
-      </Button>
-      <Button {...args} variant="Default" fullWidth>
-        Cancel
-      </Button>
-    </div>
+export const LayoutExample: StoryObj<typeof Button> = {
+  render: (args: ButtonProps) => (
     <div
       css={`
-        display: flex;
-        flex-direction: column;
-        width: 392px;
-
-        & > * + * {
-          margin-top: 8px;
-        }
+        display: grid;
+        gap: 24px;
       `}
     >
-      <Button {...args} variant="Primary" fullWidth>
-        すべて見る
-      </Button>
-      <Button {...args} variant="Default">
-        作品を投稿
-      </Button>
+      <div
+        css={`
+          display: grid;
+          grid: auto / auto-flow min-content;
+          gap: 8px;
+        `}
+      >
+        <Button {...args}>Grid</Button>
+        <Button {...args} variant="Navigation">
+          Layout
+        </Button>
+        <Button {...args} variant="Danger">
+          Sample
+        </Button>
+      </div>
+      <div
+        css={`
+          display: grid;
+          grid: auto-flow auto / 392px;
+          gap: 8px;
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          Submit
+        </Button>
+        <Button {...args} variant="Default" fullWidth>
+          Cancel
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+
+          & > * + * {
+            margin-left: 8px;
+          }
+        `}
+      >
+        <Button {...args}>Flex</Button>
+        <Button {...args} variant="Navigation">
+          Layout
+        </Button>
+        <Button {...args} variant="Danger">
+          Sample
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          Submit
+        </Button>
+        <Button {...args} variant="Default" fullWidth>
+          Cancel
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          すべて見る
+        </Button>
+        <Button {...args} variant="Default">
+          作品を投稿
+        </Button>
+      </div>
     </div>
-  </div>
-)
-
-export const LayoutExample = LayoutExampleStory.bind({})
+  ),
+}

package/src/components/Button/index.tsx

@@ -1,21 +1,23 @@
 import { forwardRef } from 'react'
-import styled, { css } from 'styled-components'
-import { unreachable } from '../../_lib'
-import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import { ClickableElement, ClickableProps } from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import { StyledButton } from './StyledButton'
 
-type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'
-type Size = 'S' | 'M'
+export type Variant =
+  | 'Primary'
+  | 'Default'
+  | 'Overlay'
+  | 'Danger'
+  | 'Navigation'
 
-interface StyledProps {
-  $variant: Variant
-  $fullWidth: boolean
-  $size: Size
-}
+export type Size = 'S' | 'M'
 
 export type ButtonProps = Partial<{
   variant: Variant
   size: Size
   fullWidth: boolean
+  isActive: boolean
 }> &
   ClickableProps
 
@@ -26,6 +28,7 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     size = 'M',
     fullWidth: fixed = false,
     disabled = false,
+    isActive = false,
     ...rest
   },
   ref
@@ -38,104 +41,12 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
       $color={variantToFont(variant)}
       $size={size}
       $fullWidth={fixed}
+      $isActive={isActive}
       ref={ref}
     >
       {children}
     </StyledButton>
   )
 })
-export default Button
-
-const horizontalPaddingSmall = css`
-  padding-right: 16px;
-  padding-left: 16px;
-`
-const horizontalPaddingMedium = css`
-  padding-right: 24px;
-  padding-left: 24px;
-`
-
-type StyledButtonProps = Omit<StyledProps, '$variant'> & {
-  $background: ReturnType<typeof variantToBackground>
-  $color: ReturnType<typeof variantToFont>
-}
-const StyledButton = styled(Clickable)<StyledButtonProps>`
-  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-
-  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
-
-  color: var(--charcoal-${(p) => p.$color});
-  background-color: var(--charcoal-${(p) => p.$background});
-  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
 
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
-  }
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-  }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
-`
-
-function variantToBackground(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'surface4'
-    case 'Default':
-      return 'surface3'
-    case 'Primary':
-      return 'brand'
-    case 'Navigation':
-      return 'surface6'
-    case 'Danger':
-      return 'assertive'
-    default:
-      return unreachable(variant)
-  }
-}
-
-function variantToFont(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'text5'
-    case 'Default':
-      return 'text2'
-    case 'Primary':
-      return 'text5'
-    case 'Navigation':
-      return 'text5'
-    case 'Danger':
-      return 'text5'
-    default:
-      return unreachable(variant)
-  }
-}
+export default Button

package/src/components/Button/lib/variantToBackground.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToBackground(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'surface4'
+    case 'Default':
+      return 'surface3'
+    case 'Primary':
+      return 'brand'
+    case 'Navigation':
+      return 'surface6'
+    case 'Danger':
+      return 'assertive'
+    default:
+      return unreachable(variant)
+  }
+}

package/src/components/Button/lib/variantToFont.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToFont(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'text5'
+    case 'Default':
+      return 'text2'
+    case 'Primary':
+      return 'text5'
+    case 'Navigation':
+      return 'text5'
+    case 'Danger':
+      return 'text5'
+    default:
+      return unreachable(variant)
+  }
+}

package/src/components/Checkbox/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Checkbox Invalid 1`] = `
+exports[`Storybook Tests Checkbox Invalid 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -54,23 +54,18 @@ exports[`Storyshots Checkbox Invalid 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -167,7 +162,7 @@ exports[`Storyshots Checkbox Invalid 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Labelled 1`] = `
+exports[`Storybook Tests Checkbox Labelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -221,23 +216,18 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -400,7 +390,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Unlabelled 1`] = `
+exports[`Storybook Tests Checkbox Unlabelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -454,23 +444,18 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }