From 1f2aad5f78388b206ca63b3c6866b2320e7240b6 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Tue, 9 Dec 2025 13:26:53 +0900 Subject: [PATCH 1/6] feat: add Dl component --- src/components/Dl/Dl.stories.tsx | 202 +++++++++++++++++++++++++++++++ src/components/Dl/Dl.tsx | 39 ++++++ src/components/Dl/index.ts | 5 + 3 files changed, 246 insertions(+) create mode 100644 src/components/Dl/Dl.stories.tsx create mode 100644 src/components/Dl/Dl.tsx create mode 100644 src/components/Dl/index.ts diff --git a/src/components/Dl/Dl.stories.tsx b/src/components/Dl/Dl.stories.tsx new file mode 100644 index 0000000..6193a70 --- /dev/null +++ b/src/components/Dl/Dl.stories.tsx @@ -0,0 +1,202 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { Dd, Dl, Dt } from './Dl'; + +const meta = { + id: 'Component/DADS v2/説明リスト', + title: 'Component/説明リスト', + component: Dl, + tags: ['autodocs'], + argTypes: { + marker: { + options: ['none', 'bullet'], + control: { type: 'radio' }, + description: '説明リストのマーカーの種類を指定します。', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + render: (args) => { + return ( +
+
+
項目名1
+
+ これは項目1の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名2
+
+ これは項目2の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名3
+
+ これは項目3の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+ ); + }, + args: { + marker: 'none', + }, +}; + +export const Default: Story = { + render: (args) => { + return ( +
+
+
項目名1
+
+ これは項目1の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名2
+
+ これは項目2の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名3
+
+ これは項目3の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+ ); + }, + args: { + marker: 'none', + }, +}; + +/** + * マーカーとしてブレットを表示する場合は、`marker="bullet"`を指定します。 + */ +export const Bullet: Story = { + render: (args) => { + return ( +
+
+
項目名1
+
+ これは項目1の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名2
+
+ これは項目2の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
項目名3
+
+ これは項目3の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+ ); + }, + args: { + marker: 'bullet', + }, +}; + +/** + * 独自のマーカーを使用する場合は、カスタムマーカーを`Dt`コンポーネントの最初の``要素で指定します。 + */ +export const Custom: Story = { + render: (args) => { + return ( +
+
+
+ + + + + + 項目名1 +
+
+ これは項目1の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
+ + + + + + 項目名2 +
+
+ これは項目2の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+
+ + + + + + 項目名3 +
+
+ これは項目3の説明文です。説明リストは用語とその説明をセットで表示するのに適しています。 +
+
+
+ ); + }, + argTypes: { + marker: { table: { disable: true } }, + }, + args: { + marker: 'none', + }, +}; diff --git a/src/components/Dl/Dl.tsx b/src/components/Dl/Dl.tsx new file mode 100644 index 0000000..1cd8205 --- /dev/null +++ b/src/components/Dl/Dl.tsx @@ -0,0 +1,39 @@ +import type { ComponentProps } from 'react'; + +type DlProps = ComponentProps<'dl'> & { + marker?: 'none' | 'bullet'; +}; + +export const Dl = (props: DlProps) => { + const { children, className, marker, ...rest } = props; + return ( +
+ {children} +
+ ); +}; + +type DtProps = ComponentProps<'dt'>; + +export const Dt = (props: DtProps) => { + const { children, className, ...rest } = props; + return ( +
+ {children} +
+ ); +}; + +type DdProps = ComponentProps<'dd'>; + +export const Dd = (props: DdProps) => { + const { children, className, ...rest } = props; + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/Dl/index.ts b/src/components/Dl/index.ts new file mode 100644 index 0000000..ee1c37c --- /dev/null +++ b/src/components/Dl/index.ts @@ -0,0 +1,5 @@ +export { + Dd, + Dl, + Dt, +} from './Dl'; From 580e8b84dea3fca729e91f591a0a280d8ea57c74 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Tue, 9 Dec 2025 13:27:14 +0900 Subject: [PATCH 2/6] feat: add Blockquote component --- .../Blockquote/Blockquote.stories.tsx | 52 +++++++++++++++++++ src/components/Blockquote/Blockquote.tsx | 15 ++++++ src/components/Blockquote/index.ts | 1 + 3 files changed, 68 insertions(+) create mode 100644 src/components/Blockquote/Blockquote.stories.tsx create mode 100644 src/components/Blockquote/Blockquote.tsx create mode 100644 src/components/Blockquote/index.ts diff --git a/src/components/Blockquote/Blockquote.stories.tsx b/src/components/Blockquote/Blockquote.stories.tsx new file mode 100644 index 0000000..6bef377 --- /dev/null +++ b/src/components/Blockquote/Blockquote.stories.tsx @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { Ul } from '../'; +import { Blockquote } from './Blockquote'; + +const meta = { + id: 'Component/DADS v2/Blockquote', + title: 'Component/引用ブロック', + component: Blockquote, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: + 'これは引用文の例です。デジタル庁デザインシステムでは、アクセシビリティファーストの原則に基づいて、すべてのユーザーが利用しやすいサービスの提供を目指しています。', + }, +}; + +export const MultipleParagraphs: Story = { + render: () => { + return ( +
+

+ これは引用文の例です。デジタル庁デザインシステムでは、アクセシビリティファーストの原則に基づいて、すべてのユーザーが利用しやすいサービスの提供を目指しています。 +

+

これは複数の段落を含めている例です。

+

最初と最後の段落のマージンは自動的に調整されます。

+
+ ); + }, +}; + +export const WithList: Story = { + render: () => { + return ( +
+

デジタル庁デザインシステムは、以下の理念を追求して作成されています。

+
    +
  • アクセシビリティファースト
    • +
  • 行政機関にとって高い汎用性と利便性
    • +
  • 継続的かつ持続可能な改善活動および研究と実践
    • +
+

+ これにより、デジタル化の恩恵をすべての人に届けられる日本のデジタル化社会の構築に寄与します。 +

+
+ ); + }, +}; diff --git a/src/components/Blockquote/Blockquote.tsx b/src/components/Blockquote/Blockquote.tsx new file mode 100644 index 0000000..dcb4db4 --- /dev/null +++ b/src/components/Blockquote/Blockquote.tsx @@ -0,0 +1,15 @@ +import type { ComponentProps } from 'react'; + +type Props = ComponentProps<'blockquote'>; + +export const Blockquote = (props: Props) => { + const { children, className, ...rest } = props; + return ( +
*:first-child]:!mt-0 [&>*:last-child]:!mb-0 ${className ?? ''}`} + {...rest} + > + {children} +
+ ); +}; diff --git a/src/components/Blockquote/index.ts b/src/components/Blockquote/index.ts new file mode 100644 index 0000000..d3e4a04 --- /dev/null +++ b/src/components/Blockquote/index.ts @@ -0,0 +1 @@ +export { Blockquote } from './Blockquote'; From 7aed3e9bc7feb922c7b8a932b1334eef38961231 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Tue, 9 Dec 2025 13:27:38 +0900 Subject: [PATCH 3/6] feat: add new components to storybook preview --- .storybook/preview.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 18eb798..430490a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -27,8 +27,10 @@ const preview: Preview = { 'アコーディオン', 'パンくずリスト', 'インプットテキスト', + '引用ブロック', 'カレンダー', '緊急時バナー', + '説明リスト', 'セレクトボックス', 'チェックボックス', 'テーブル', From 269d8e620c090fb17c047f9db67319ac89a9004f Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Tue, 9 Dec 2025 13:28:23 +0900 Subject: [PATCH 4/6] feat: include icon into heading and tweak NotificationBanner styles --- .../NotificationBanner.stories.tsx | 470 +++++++++--------- .../NotificationBanner/NotificationBanner.tsx | 34 +- src/components/NotificationBanner/index.ts | 4 +- .../NotificationBanner/parts/Body.tsx | 2 +- .../NotificationBanner/parts/Close.tsx | 2 +- .../parts/Header.stories.tsx | 46 -- .../NotificationBanner/parts/Header.tsx | 19 - .../parts/Heading.stories.tsx | 38 -- .../NotificationBanner/parts/Heading.tsx | 20 - .../NotificationBanner/parts/Icon.tsx | 76 +-- .../NotificationBanner/parts/MobileClose.tsx | 2 +- src/components/NotificationBanner/styles.ts | 26 +- 12 files changed, 305 insertions(+), 434 deletions(-) delete mode 100644 src/components/NotificationBanner/parts/Header.stories.tsx delete mode 100644 src/components/NotificationBanner/parts/Header.tsx delete mode 100644 src/components/NotificationBanner/parts/Heading.stories.tsx delete mode 100644 src/components/NotificationBanner/parts/Heading.tsx diff --git a/src/components/NotificationBanner/NotificationBanner.stories.tsx b/src/components/NotificationBanner/NotificationBanner.stories.tsx index c9400e0..cc5d068 100644 --- a/src/components/NotificationBanner/NotificationBanner.stories.tsx +++ b/src/components/NotificationBanner/NotificationBanner.stories.tsx @@ -3,8 +3,6 @@ import { Button } from '../'; import { NotificationBanner } from './NotificationBanner'; import { NotificationBannerBody } from './parts/Body'; import { NotificationBannerClose } from './parts/Close'; -import { NotificationBannerHeader } from './parts/Header'; -import { NotificationBannerHeading } from './parts/Heading'; import { NotificationBannerMobileClose } from './parts/MobileClose'; const meta = { @@ -39,20 +37,17 @@ export const Playground: Story = { args: { bannerStyle: 'standard', type: 'info2', + headingLevel: 'h2', + title: 'バナータイトル', children: ( - <> - - バナータイトル - - -

- -

-

- ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -

- - + +

+ +

+

+ ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 +

+ ), }, }; @@ -61,57 +56,57 @@ export const StandardWithClose = { render: () => { return (
- - - - 登録期間が延長されました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 登録期間が延長されました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 偽SNSアカウントにご注意ください - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 操作を完了できませんでした - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 登録手続きは全て完了しました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 @@ -125,57 +120,57 @@ export const ColorChipWithClose = { render: () => { return (
- - - - 登録期間が延長されました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 登録期間が延長されました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 偽SNSアカウントにご注意ください - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 操作を完了できませんでした - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 - - - - 登録手続きは全て完了しました - - console.log('Clicked close')} /> - + + console.log('Clicked close')} /> ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 @@ -189,15 +184,15 @@ export const StandardWithButton = { render: () => { return (
- - - - 登録期間が延長されました - - + ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -
+
@@ -207,15 +202,15 @@ export const StandardWithButton = {
- - - - 登録期間が延長されました - - + ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -
+
@@ -346,15 +341,15 @@ export const ColorChipWithButton = {
- - - - 登録期間が延長されました - - + ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -
+
@@ -485,15 +480,15 @@ export const StandardWithButtonMobileHoriz = {
- - - - 登録期間が延長されました - - + ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -
+
@@ -624,15 +619,15 @@ export const ColorChipWithButtonMobileHoriz = {
- - - - 登録期間が延長されました - - + ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。 -
+
+ +
), diff --git a/src/components/NotificationBanner/NotificationBanner.tsx b/src/components/NotificationBanner/NotificationBanner.tsx index 7c826db..d5baf22 100644 --- a/src/components/NotificationBanner/NotificationBanner.tsx +++ b/src/components/NotificationBanner/NotificationBanner.tsx @@ -1,32 +1,46 @@ import type { ReactNode } from 'react'; import { NotificationBannerIcon } from './parts/Icon'; import { bannerStyleClasses, bannerTypeClasses } from './styles'; -import type { NotificationBannerStyle, NotificationBannerType } from './types'; +import type { + NotificationBannerHeadingLevel, + NotificationBannerStyle, + NotificationBannerType, +} from './types'; type Props = { className?: string; children: ReactNode; bannerStyle: NotificationBannerStyle; type: NotificationBannerType; + title: string; + headingLevel?: NotificationBannerHeadingLevel; }; export const NotificationBanner = (props: Props) => { - const { className, children, bannerStyle, type } = props; + const { className, children, bannerStyle, type, title, headingLevel } = props; + const Tag = headingLevel ?? 'div'; return (
-
- -
- + + + + {title} + + {children}
); diff --git a/src/components/NotificationBanner/index.ts b/src/components/NotificationBanner/index.ts index d900584..473c9b7 100644 --- a/src/components/NotificationBanner/index.ts +++ b/src/components/NotificationBanner/index.ts @@ -1,6 +1,4 @@ export { NotificationBanner } from './NotificationBanner'; export { NotificationBannerBody } from './parts/Body'; export { NotificationBannerClose } from './parts/Close'; -export { NotificationBannerHeader } from './parts/Header'; -export { NotificationBannerHeading } from './parts/Heading'; -export { NotificationBannerIcon } from './parts/Icon'; +export { NotificationBannerMobileClose } from './parts/MobileClose'; diff --git a/src/components/NotificationBanner/parts/Body.tsx b/src/components/NotificationBanner/parts/Body.tsx index 93fd5d7..cfb7571 100644 --- a/src/components/NotificationBanner/parts/Body.tsx +++ b/src/components/NotificationBanner/parts/Body.tsx @@ -8,7 +8,7 @@ export const NotificationBannerBody = (props: Props) => { return (
{ return (