{
return (
- <>
-
-
- ディスクロージャータイトル
-
-
-
- これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
-
-
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
-
-
- これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
-
-
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
- - リストアイテム
-
-
- 「ディスクロージャータイトル」の先頭に戻る
-
-
-
+
+
+ ディスクロージャータイトル
+
+
+
+ これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
+
+
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+
+
+ これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
+
+
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+ - リストアイテム
+
+
+ 「ディスクロージャータイトル」の先頭に戻る
+
+
);
},
};
diff --git a/src/components/Disclosure/index.ts b/src/components/Disclosure/index.ts
index 695cd4e..d8e7e07 100644
--- a/src/components/Disclosure/index.ts
+++ b/src/components/Disclosure/index.ts
@@ -1 +1 @@
-export { Disclosure, DisclosureSummary, DisclosureBackLink } from './Disclosure';
+export { Disclosure, DisclosureBackLink, DisclosureSummary } from './Disclosure';
diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
index f4788e0..2673672 100644
--- a/src/components/Divider/Divider.stories.tsx
+++ b/src/components/Divider/Divider.stories.tsx
@@ -1,5 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
import { Divider } from './Divider';
const meta = {
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index 89dda84..28caaa2 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useId, useRef } from 'react';
+import { useId, useRef } from 'react';
import { CloseIcon, Divider, HamburgerIcon, HamburgerMenuButton } from '../';
const meta = {
diff --git a/src/components/EmergencyBanner/EmergencyBanner.stories.tsx b/src/components/EmergencyBanner/EmergencyBanner.stories.tsx
index a8eb37a..523b322 100644
--- a/src/components/EmergencyBanner/EmergencyBanner.stories.tsx
+++ b/src/components/EmergencyBanner/EmergencyBanner.stories.tsx
@@ -1,5 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
import { EmergencyBanner } from './EmergencyBanner';
import { EmergencyBannerBody } from './parts/Body';
import { EmergencyBannerButton } from './parts/Button';
diff --git a/src/components/EmergencyBanner/index.ts b/src/components/EmergencyBanner/index.ts
index 7a22429..f82a16e 100644
--- a/src/components/EmergencyBanner/index.ts
+++ b/src/components/EmergencyBanner/index.ts
@@ -1,4 +1,4 @@
export { EmergencyBanner } from './EmergencyBanner';
-export { EmergencyBannerHeading } from './parts/Heading';
export { EmergencyBannerBody } from './parts/Body';
export { EmergencyBannerButton } from './parts/Button';
+export { EmergencyBannerHeading } from './parts/Heading';
diff --git a/src/components/EmergencyBanner/parts/Body.stories.tsx b/src/components/EmergencyBanner/parts/Body.stories.tsx
index aa582fe..ea0f06c 100644
--- a/src/components/EmergencyBanner/parts/Body.stories.tsx
+++ b/src/components/EmergencyBanner/parts/Body.stories.tsx
@@ -1,5 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
import { EmergencyBannerBody } from './Body';
const meta = {
diff --git a/src/components/HamburgerMenuButton/HamburgerMenuButton.stories.tsx b/src/components/HamburgerMenuButton/HamburgerMenuButton.stories.tsx
index c6e7604..d1f1da2 100644
--- a/src/components/HamburgerMenuButton/HamburgerMenuButton.stories.tsx
+++ b/src/components/HamburgerMenuButton/HamburgerMenuButton.stories.tsx
@@ -1,12 +1,12 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useId, useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
import {
CloseIcon,
CloseWithLabelIcon,
HamburgerIcon,
- HamburgerWithLabelIcon,
HamburgerMenuButton,
HamburgerMenuIconButton,
+ HamburgerWithLabelIcon,
} from './';
const meta = {
@@ -77,50 +77,48 @@ export const MobileOnly: Story = {
const [isMenuJaOpen, setIsMenuJaOpen] = useState(false);
const [isMenuEnOpen, setIsMenuEnOpen] = useState(false);
return (
- <>
-
-
-
setIsMenuJaOpen(!isMenuJaOpen)}
+
+
+ setIsMenuJaOpen(!isMenuJaOpen)}
+ >
+ {isMenuJaOpen ? : }
+
+ {isMenuJaOpen && (
+
+ )}
+
+
+ setIsMenuEnOpen(!isMenuEnOpen)}
+ >
+ {isMenuEnOpen ? (
+
+ ) : (
+
)}
-
-
- setIsMenuEnOpen(!isMenuEnOpen)}
+
+ {isMenuEnOpen && (
+
+ Sample menu
+
+ )}
);
},
};
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index ad0fb20..f79c7f1 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import React from 'react';
-import { ErrorText, Label, RequirementBadge, SupportText } from '../';
+import { ErrorText, Label, RequirementBadge, StatusBadge, SupportText } from '../';
import { Input } from './Input';
const meta = {
@@ -26,15 +26,6 @@ const meta = {
type: { summary: 'boolean' },
},
},
- 'aria-disabled': {
- description:
- '無効化する必要がある場合は `disabled` 属性ではなく `aria-disabled` 属性を使用します。',
- control: { type: 'boolean' },
- table: {
- defaultValue: { summary: 'false' },
- type: { summary: 'boolean' },
- },
- },
},
} satisfies Meta
;
@@ -42,90 +33,124 @@ export default meta;
type Story = StoryObj;
export const Playground: Story = {
- decorators: [
- (Story, context) => (
+ render: (args) => {
+ const { isError } = args;
+
+ const formId = React.useId();
+ const supportTextId = React.useId();
+ const errorTextId = React.useId();
+
+ const describedBy = isError ? `${errorTextId} ${supportTextId}` : supportTextId;
+
+ return (
-
- ),
- ],
+ );
+ },
args: {
blockSize: 'lg',
isError: false,
- id: 'test-playground',
- 'aria-describedby': 'test-playground-support-text',
- 'aria-disabled': false,
},
};
export const Errored: Story = {
- render: () => {
+ render: (args) => {
const formId = React.useId();
+ const supportTextId = React.useId();
+ const errorTextId = React.useId();
- return (
-
-
-
- サポートテキスト
-
- ＊エラーテキスト
-
+ const describedBy = `${errorTextId} ${supportTextId}`;
-
-
- サポートテキスト
-
- ＊エラーテキスト
-
+ return (
+
+
+ サポートテキスト
+
+ ＊エラーテキスト
);
},
+ argTypes: {
+ isError: { table: { disable: true } },
+ },
+ args: {
+ blockSize: 'lg',
+ isError: true,
+ },
};
export const Disabled: Story = {
- render: () => {
+ render: (args) => {
const formId = React.useId();
+ const supportTextId = React.useId();
+
+ return (
+
+
+ 〜の理由により、この項目は無効化されています。
+
+
+ );
+ },
+ argTypes: {
+ isError: { table: { disable: true } },
+ },
+ args: {
+ blockSize: 'lg',
+ },
+};
+
+export const Readonly: Story = {
+ render: (args) => {
+ const controlId = React.useId();
+ const supportTextId = React.useId();
return (
-
-
-
-
- 〜の理由により、この項目は無効化されています。
-
-
-
+
+
+ 〜の理由により、この項目は編集できません。
+
);
},
+ argTypes: {
+ isError: { table: { disable: true } },
+ },
+ args: {
+ blockSize: 'lg',
+ },
};
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index b378613..c843076 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -14,11 +14,12 @@ export const Input = forwardRef
((props, ref) => {
{
return (