@charcoal-ui/react 3.10.1 → 3.12.0

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

@@ -1,183 +1,66 @@
-import { action } from '@storybook/addon-actions'
-import styled from 'styled-components'
 import TagItem from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TagItem',
   component: TagItem,
-  argTypes: {
-    bgColor: {
-      control: {
-        type: 'color',
-      },
-    },
-  },
-  render: function Render(args) {
-    return <TagItem {...args} />
+  parameters: {
+    layout: 'centered',
   },
 } as Meta<typeof TagItem>
 
 export const Default: StoryObj<typeof TagItem> = {
   args: {
     label: '#女の子',
-    bgColor: '#7ACCB1',
+  },
+  render: function Render(args) {
+    return <TagItem {...args} />
+  },
+}
+
+export const TranslatedLabel: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="#女の子" translatedLabel="girl" />
+  },
+}
+
+export const BGColor: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="女の子" bgColor="var(--charcoal-brand)" />
   },
 }
 
-export const Playground: StoryObj<typeof TagItem> = {
-  render: function Render({ bgColor, label, translatedLabel }) {
+export const BGImage: StoryObj<typeof TagItem> = {
+  render: function Render() {
     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>
+      <TagItem
+        label="#女の子"
+        bgImage="https://charcoal-web.pixiv.design/charcoal-ogp.jpg"
+      />
     )
   },
-  args: {
-    label: '#女の子',
-    translatedLabel: 'girl',
-    bgColor: '#7ACCB1',
+}
+
+export const Active: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="#女の子" status="active" />
   },
 }
 
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+export const InActive: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="#女の子" status="inactive" />
+  },
+}
 
-  & > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1em;
-  }
-`
+export const Small: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="#女の子" size="S" />
+  },
+}
+
+export const Disabled: StoryObj<typeof TagItem> = {
+  render: function Render() {
+    return <TagItem label="#女の子" disabled />
+  },
+}

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

@@ -1,14 +1,17 @@
 import { action } from '@storybook/addon-actions'
-import styled from 'styled-components'
 import Clickable from '../Clickable'
 import TextArea from '.'
-import { px } from '@charcoal-ui/utils'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TextArea',
   component: TextArea,
-  argTypes: {},
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof TextArea>
+
+export const Default: StoryObj<typeof TextArea> = {
   args: {
     showLabel: false,
     label: 'Label',
@@ -17,42 +20,77 @@ export default {
     disabled: false,
     required: false,
     invalid: false,
+    readOnly: false,
     subLabel: <Clickable onClick={action('label-click')}>Text Link</Clickable>,
     placeholder: 'Text Area',
   },
-  render: function Render(args) {
+  render(args) {
+    return <TextArea {...args} />
+  },
+}
+
+export const Label: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea showLabel label="Label" />
+  },
+}
+
+export const Placeholder: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea placeholder="Placeholder" label="Label" />
+  },
+}
+
+export const Required: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea required label="Label" requiredText="*必須" />
+  },
+}
+
+export const AssistiveText: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea label="Label" assistiveText="説明が入ります" />
+  },
+}
+
+export const SubLabel: StoryObj<typeof TextArea> = {
+  render: function Render() {
     return (
-      <Container>
-        <TextArea {...args} />
-      </Container>
+      <TextArea
+        showLabel
+        label="Label"
+        subLabel={<Clickable>Text Link</Clickable>}
+      />
     )
   },
-} as Meta<typeof TextArea>
+}
 
-const Container = styled.div`
-  display: grid;
-  gap: ${({ theme }) => px(theme.spacing[24])};
-`
+export const ShowCount: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea showCount maxLength={100} label="Label" />
+  },
+}
 
-export const Default: StoryObj<typeof TextArea> = {}
+export const Disabled: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea disabled label="Label" />
+  },
+}
 
-export const HasLabel: StoryObj<typeof TextArea> = {
-  args: {
-    showLabel: true,
-    assistiveText: 'Assistive text',
-    required: true,
+export const Invalid: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea label="Label" invalid assistiveText="エラーメッセージ" />
   },
 }
 
-export const HasCount: StoryObj<typeof TextArea> = {
-  args: {
-    showCount: true,
-    maxLength: 100,
+export const ReadOnly: StoryObj<typeof TextArea> = {
+  render() {
+    return <TextArea label="Label" readOnly value="読み取り専用" />
   },
 }
 
 export const AutoHeight: StoryObj<typeof TextArea> = {
-  args: {
-    autoHeight: true,
+  render: function Render() {
+    return <TextArea autoHeight label="Label" />
   },
 }