@charcoal-ui/react 3.7.0 → 3.8.0

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

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions'
 import styled from 'styled-components'
-import TagItem, { TagItemProps } from '.'
-import { Story } from '../../_lib/compat'
+import TagItem from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TagItem',
@@ -13,160 +13,161 @@ export default {
       },
     },
   },
-}
+  render: function Render(args) {
+    return <TagItem {...args} />
+  },
+} as Meta<typeof TagItem>
 
-export const Default: Story<TagItemProps> = (props) => {
-  return <TagItem {...props} onClick={action('click')} />
-}
-Default.args = {
-  label: '#女の子',
-  bgColor: '#7ACCB1',
-  href: '',
-  rel: '',
-  target: '',
-  className: '',
+export const Default: StoryObj<typeof TagItem> = {
+  args: {
+    label: '#女の子',
+    bgColor: '#7ACCB1',
+  },
 }
 
-export const Playground: Story<TagItemProps> = ({
-  bgColor,
-  label,
-  translatedLabel,
-}) => {
-  return (
-    <div>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-    </div>
-  )
+export const Playground: StoryObj<typeof TagItem> = {
+  render: function Render({ bgColor, label, translatedLabel }) {
+    return (
+      <div>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+      </div>
+    )
+  },
+  args: {
+    label: '#女の子',
+    translatedLabel: 'girl',
+    bgColor: '#7ACCB1',
+  },
 }
 
 const Container = styled.div`
@@ -180,9 +181,3 @@ const Container = styled.div`
     padding: 1em;
   }
 `
-
-Playground.args = {
-  label: '#女の子',
-  translatedLabel: 'girl',
-  bgColor: '#7ACCB1',
-}

package/src/components/TagItem/index.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components'
 import { px } from '@charcoal-ui/utils'
 import { AriaButtonProps, useButton } from '@react-aria/button'
 import Icon from '../Icon'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 const sizeMap = {
   S: 32,
@@ -119,12 +120,7 @@ const TagItemRoot = styled.a<TagItemRootProps>`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${focusVisibleFocusRingCss}
   }
 
   &:disabled,

package/src/components/TextArea/TextArea.story.tsx

@@ -1,9 +1,9 @@
 import { action } from '@storybook/addon-actions'
 import styled from 'styled-components'
-import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
-import TextArea, { TextAreaProps } from '.'
+import TextArea from '.'
 import { px } from '@charcoal-ui/utils'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TextArea',
@@ -12,50 +12,47 @@ export default {
   args: {
     showLabel: false,
     label: 'Label',
+    requiredText: '*必須',
     assistiveText: '',
     disabled: false,
     required: false,
     invalid: false,
+    subLabel: <Clickable onClick={action('label-click')}>Text Link</Clickable>,
+    placeholder: 'Text Area',
   },
-}
+  render: function Render(args) {
+    return (
+      <Container>
+        <TextArea {...args} />
+      </Container>
+    )
+  },
+} as Meta<typeof TextArea>
 
 const Container = styled.div`
   display: grid;
   gap: ${({ theme }) => px(theme.spacing[24])};
 `
 
-const Template: Story<Partial<TextAreaProps>> = (args) => (
-  <Container>
-    <TextArea
-      label="Label"
-      requiredText="*必須"
-      subLabel={
-        <Clickable onClick={action('label-click')}>Text Link</Clickable>
-      }
-      placeholder="Text Area"
-      {...args}
-    />
-  </Container>
-)
-
-export const Default = Template.bind({})
+export const Default: StoryObj<typeof TextArea> = {}
 
-export const HasLabel = Template.bind({})
-HasLabel.args = {
-  showLabel: true,
-  assistiveText: 'Assistive text',
-  required: true,
+export const HasLabel: StoryObj<typeof TextArea> = {
+  args: {
+    showLabel: true,
+    assistiveText: 'Assistive text',
+    required: true,
+  },
 }
 
-export const HasCount = Template.bind({})
-HasCount.args = {
-  showCount: true,
-  maxLength: 100,
+export const HasCount: StoryObj<typeof TextArea> = {
+  args: {
+    showCount: true,
+    maxLength: 100,
+  },
 }
 
-export const AutoHeight: Story<Partial<TextAreaProps>> = (args) => (
-  <TextArea label="Label" placeholder="TextArea" {...args} />
-)
-AutoHeight.args = {
-  autoHeight: true,
+export const AutoHeight: StoryObj<typeof TextArea> = {
+  args: {
+    autoHeight: true,
+  },
 }