🐛 fix: Labelコンポーネントの修正に伴い、Storybook上での表示も修正

uyupun · Dec 12, 2023 · e84a632 · e84a632
1 parent e77fb3c
commit e84a632
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/components/base/Label/index.stories.tsx b/src/components/base/Label/index.stories.tsx
@@ -12,13 +12,23 @@ type Story = StoryObj<typeof BaseLabel>;
 export const Label: Story = {
   render: () => (
     <dl>
-      <dt style={{ marginBottom: '8px' }}>Default</dt>
-      <dd style={{ marginBottom: '24px' }}>
-        <BaseLabel>Required label</BaseLabel>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Default</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel text="Required label" />
       </dd>
-      <dt style={{ marginBottom: '8px' }}>Not required</dt>
-      <dd style={{ marginBottom: '24px' }}>
-        <BaseLabel isRequired={false}>Not required label</BaseLabel>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Not required</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel isRequired={false} text="Not required label" />
+      </dd>
+      <dt style={{ color: 'white', marginBottom: '8px' }}>Form</dt>
+      <dd style={{ color: 'white', marginBottom: '24px' }}>
+        <BaseLabel text="textbox 1">
+          <input aria-required style={{ marginLeft: '16px' }} type="text" />
+        </BaseLabel>
+        <div style={{ display: 'flex', flexDirection: 'column', marginTop: '16px' }}>
+          <BaseLabel htmlFor="textbox2" text="textbox 2" />
+          <input aria-required id="textbox2" type="text" />
+        </div>
       </dd>
     </dl>
   ),