diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 6419e99..04c5ecb 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -29,6 +29,7 @@ const preview: Preview = { 'インプットテキスト', '引用ブロック', 'カレンダー', + '箇条書きリスト', 'カルーセル', '緊急時バナー', '説明リスト', @@ -50,7 +51,6 @@ const preview: Preview = { 'ユーティリティリンク', 'ラジオボタン', 'ランゲージセレクター', - 'リスト', 'リンク', '*', 'Parts', diff --git a/src/components/Blockquote/Blockquote.stories.tsx b/src/components/Blockquote/Blockquote.stories.tsx index 6bef377..88a4bc5 100644 --- a/src/components/Blockquote/Blockquote.stories.tsx +++ b/src/components/Blockquote/Blockquote.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Ul } from '../'; +import { List } from '../'; import { Blockquote } from './Blockquote'; const meta = { @@ -38,11 +38,11 @@ export const WithList: Story = { return (

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

- +

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

diff --git a/src/components/Disclosure/Disclosure.stories.tsx b/src/components/Disclosure/Disclosure.stories.tsx index 095e88b..3d77862 100644 --- a/src/components/Disclosure/Disclosure.stories.tsx +++ b/src/components/Disclosure/Disclosure.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Ul } from '../'; +import { List } from '../'; import { Disclosure, DisclosureBackLink, DisclosureSummary } from './Disclosure'; const meta = { @@ -43,7 +43,7 @@ export const WithLongContent: Story = {

これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。

- +

これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。

- +
-
    +
  • リストアイテム
  • リストアイテム
  • リストアイテム
  • リストアイテム
  • リストアイテム
    • -
+ ; + +export default meta; +type Story = StoryObj; + +export const AllLists: Story = { + render: (args) => ( + <> + +
  • 短いテキスト
    • +
  • + これは少し長めのテキストサンプルです。リストアイテムの中に含まれる文章の例として使用しています。 +
    • +
  • + ネストされたリスト + +
  • + 1. + 番号付きリストの最初の項目 +
    • +
  • + + 2. + + 二番目の項目で、これは比較的長い説明文を含んでいます。ネストされた構造の例として作成されました。 + + +
    • +
  • + + 3. + 三番目 + +
    • +     + +
  • + 複雑な入れ子構造の例 + +
  • サブリストA
    • +
  • + サブリストBで更にネスト + +
  • + ①　 + 番号付きサブアイテム1 +
    • +
  • + ②　 + + 番号付きサブアイテム2 + （長めの説明付き：この項目は複数レベルの入れ子構造を示すために作成されています） + +
    • + + +
  • サブリストC
    • + + + + + +
  • + １　 + 最初 +
    • +
  • + ２　 + + 二番目の項目として、長めの文章を含む例です。番号付きリストの中での文章の長さの違いを示しています。 + +
    • +
  • + ３　 + 三番目（ネスト含む） + +
  • 無順序サブリスト項目A
    • +
  • 無順序サブリスト項目B
    • +
  • + 無順序サブリスト項目C + +
  • + （１） + 再び番号付きリスト +
    • +
  • + （２） + + 非常に長いテキストの例：この項目は + 複数レベルの入れ子構造 + における文章の長さの違いを示すために作成されたサンプルテキストです。実際の使用場面では、このような長い説明文が含まれることもあります。 + +
    • +     + + + +
  • + ４　四番目 +
    • + + + ), + argTypes: { + spacing: { + control: 'radio', + options: ['4', '8', '12'], + }, + }, + args: { + spacing: '4', + }, +}; diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx new file mode 100644 index 0000000..6a0d014 --- /dev/null +++ b/src/components/List/List.tsx @@ -0,0 +1,44 @@ +import type { ComponentProps } from 'react'; + +type Spacing = '4' | '8' | '12'; +type Marker = 'number'; + +export type ListProps = ComponentProps<'ul'> & { + spacing: Spacing; + marker?: Marker; +}; + +export const listBaseStyle = ` + [&>li]:py-[var(--spacing,0px)] + data-[spacing='4']:[--spacing:0.25rem] data-[spacing='8']:[--spacing:0.5rem] data-[spacing='12']:[--spacing:0.75rem] + [&_ul]:mt-[var(--spacing,0px)] [&_ul]:mb-[calc(-1*var(--spacing,0px))] +`; + +export const listDefaultStyle = 'pl-8 list-[revert]'; + +export const listNumberedStyle = ` + grid grid-cols-[minmax(2rem,auto)_1fr] + [&>li]:grid [&>li]:col-span-full [&>li]:grid-cols-[inherit] [&>li]:items-baseline + [&>li>a]:grid [&>li>a]:col-span-full [&>li>a]:grid-cols-[inherit] [&>li>a]:items-baseline + [&>li>a>span]:[text-decoration-thickness:inherit] + [&>li>:not(a):not(span)]:col-start-2 + supports-[grid-template-columns:subgrid]:[&>li]:grid-cols-subgrid + supports-[grid-template-columns:subgrid]:[&>li>a]:grid-cols-subgrid +`; + +export const List = (props: ListProps) => { + const { spacing, marker, children, className, ...rest } = props; + + const markerStyle = marker === 'number' ? listNumberedStyle : listDefaultStyle; + + return ( +
      + {children} +
    + ); +}; diff --git a/src/components/List/index.ts b/src/components/List/index.ts new file mode 100644 index 0000000..0a2e42e --- /dev/null +++ b/src/components/List/index.ts @@ -0,0 +1 @@ +export { List, listBaseStyle, listDefaultStyle, listNumberedStyle } from './List'; diff --git a/src/components/Ol/Ol.stories.tsx b/src/components/Ol/Ol.stories.tsx deleted file mode 100644 index a3ecc00..0000000 --- a/src/components/Ol/Ol.stories.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Ul } from '../'; -import { Ol } from './Ol'; - -const meta = { - id: 'Component/DADS v2/Ol', - title: 'Component/リスト/Ol', - component: Ol, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Spacing4: Story = { - render: () => { - return ( -
      -
    1. サンプルサンプル
      2. -
    2. サンプルサンプル
      3. -
    3. サンプルサンプル
      4. -
    4. - サンプルサンプル -
        -
      1. サンプルサンプル
        2. -
      2. サンプルサンプル
        3. -
      3. サンプルサンプル
        4. -
      4. - サンプルサンプル -
          -
        1. サンプルサンプル
          2. -
        2. サンプルサンプル
          3. -
        3. サンプルサンプル
          4. -
        4. サンプルサンプル
          5. -
        -
        5. -
      5. サンプルサンプル
        6. -
      -
      5. -
    5. サンプルサンプル
      6. -
    - ); - }, -}; - -export const Spacing8: Story = { - render: () => { - return ( -
      -
    1. サンプルサンプル
      2. -
    2. サンプルサンプル
      3. -
    3. サンプルサンプル
      4. -
    4. - サンプルサンプル -
        -
      1. サンプルサンプル
        2. -
      2. サンプルサンプル
        3. -
      3. サンプルサンプル
        4. -
      4. - サンプルサンプル -
          -
        1. サンプルサンプル
          2. -
        2. サンプルサンプル
          3. -
        3. サンプルサンプル
          4. -
        4. サンプルサンプル
          5. -
        -
        5. -
      5. サンプルサンプル
        6. -
      -
      5. -
    5. サンプルサンプル
      6. -
    - ); - }, -}; - -export const Spacing12: Story = { - render: () => { - return ( -
      -
    1. サンプルサンプル
      2. -
    2. サンプルサンプル
      3. -
    3. サンプルサンプル
      4. -
    4. - サンプルサンプル -
        -
      1. サンプルサンプル
        2. -
      2. サンプルサンプル
        3. -
      3. サンプルサンプル
        4. -
      4. - サンプルサンプル -
          -
        1. サンプルサンプル
          2. -
        2. サンプルサンプル
          3. -
        3. サンプルサンプル
          4. -
        4. サンプルサンプル
          5. -
        -
        5. -
      5. サンプルサンプル
        6. -
      -
      5. -
    5. サンプルサンプル
      6. -
    - ); - }, -}; - -export const WithLowerLatin: Story = { - render: () => { - return ( -
      -
    1. サンプルサンプル
      2. -
    2. サンプルサンプル
      3. -
    3. サンプルサンプル
      4. -
    4. - サンプルサンプル -
        -
      1. サンプルサンプル
        2. -
      2. サンプルサンプル
        3. -
      3. サンプルサンプル
        4. -
      4. サンプルサンプル
        5. -
      -
      5. -
    5. サンプルサンプル
      6. -
    - ); - }, -}; - -export const WithUnorderedList: Story = { - render: () => { - return ( -
      -
    1. サンプルサンプル
      2. -
    2. サンプルサンプル
      3. -
    3. サンプルサンプル
      4. -
    4. - サンプルサンプル -
        -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      -
      5. -
    5. サンプルサンプル
      6. -
    - ); - }, -}; diff --git a/src/components/Ol/Ol.tsx b/src/components/Ol/Ol.tsx deleted file mode 100644 index 11787c9..0000000 --- a/src/components/Ol/Ol.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { ComponentProps } from 'react'; - -export const olStyle = 'pl-8 list-[revert]'; - -export type OlProps = ComponentProps<'ol'>; - -export const Ol = (props: OlProps) => { - const { children, className, ...rest } = props; - - return ( -
      - {children} -
    - ); -}; diff --git a/src/components/Ol/index.ts b/src/components/Ol/index.ts deleted file mode 100644 index 1e7e71c..0000000 --- a/src/components/Ol/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Ol, olStyle } from './Ol'; diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index b2fcc28..bfed421 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -3,12 +3,11 @@ import { type ChangeEvent, useEffect, useRef, useState } from 'react'; import { Checkbox, Link, + List, linkActiveStyle, linkDefaultStyle, linkHoverStyle, linkVisitedStyle, - Ol, - Ul, } from '../'; const meta = { @@ -1214,14 +1213,14 @@ export const LinkedTextInCell = { -
      +
    • デジタル庁
    • デジタル庁デザインシステム
      • -
    + データ データ @@ -1338,13 +1337,28 @@ export const OverflowOnMobile = { サービスを提供する地域 -
      -
    1. りんご区
      2. -
    2. みかん区
      3. -
    3. ぶどう区
      4. -
    4. いちご区
      5. -
    5. なし区
      6. -
    + +
  • + 1. + りんご区 +
    • +
  • + 2. + みかん区 +
    • +
  • + 3. + ぶどう区 +
    • +
  • + 4. + いちご区 +
    • +
  • + 5. + なし区 +
    • +     特有のニーズに応えながら、高品質かつ効率的なサポートを目指しています。地元のコミュニティと密接に連携し、信頼性とアクセシビリティを大切にしています。 diff --git a/src/components/Ul/Ul.stories.tsx b/src/components/Ul/Ul.stories.tsx deleted file mode 100644 index 5f6e2fa..0000000 --- a/src/components/Ul/Ul.stories.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { Ol } from '../'; -import { Ul } from './Ul'; - -const meta = { - id: 'Component/DADS v2/Ul', - title: 'Component/リスト/Ul', - component: Ul, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Spacing4: Story = { - render: () => { - return ( -
      -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • - サンプルサンプル -
        -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • - サンプルサンプル -
          -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        -
        • -
      • サンプルサンプル
        • -
      -
      • -
    • サンプルサンプル
      • -
    - ); - }, -}; - -export const Spacing8: Story = { - render: () => { - return ( -
      -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • - サンプルサンプル -
        -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • - サンプルサンプル -
          -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        -
        • -
      • サンプルサンプル
        • -
      -
      • -
    • サンプルサンプル
      • -
    - ); - }, -}; - -export const Spacing12: Story = { - render: () => { - return ( -
      -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • - サンプルサンプル -
        -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • サンプルサンプル
        • -
      • - サンプルサンプル -
          -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        • サンプルサンプル
          • -
        -
        • -
      • サンプルサンプル
        • -
      -
      • -
    • サンプルサンプル
      • -
    - ); - }, -}; - -export const WithOrderedList: Story = { - render: () => { - return ( -
      -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • サンプルサンプル
      • -
    • - サンプルサンプル -
        -
      1. サンプルサンプル
        2. -
      2. サンプルサンプル
        3. -
      3. サンプルサンプル
        4. -
      4. サンプルサンプル
        5. -
      -
      • -
    • サンプルサンプル
      • -
    - ); - }, -}; diff --git a/src/components/Ul/Ul.tsx b/src/components/Ul/Ul.tsx deleted file mode 100644 index 856890d..0000000 --- a/src/components/Ul/Ul.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { ComponentProps } from 'react'; - -export const ulStyle = 'pl-8 list-[revert]'; - -export type UlProps = ComponentProps<'ul'>; - -export const Ul = (props: UlProps) => { - const { children, className, ...rest } = props; - - return ( -
      - {children} -
    - ); -}; diff --git a/src/components/Ul/index.ts b/src/components/Ul/index.ts deleted file mode 100644 index 69cb97f..0000000 --- a/src/components/Ul/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Ul, ulStyle } from './Ul'; diff --git a/src/components/v1/ScrollToTopButton/ScrollToTopButton.stories.tsx b/src/components/deprecated/ScrollToTopButton/ScrollToTopButton.stories.tsx similarity index 77% rename from src/components/v1/ScrollToTopButton/ScrollToTopButton.stories.tsx rename to src/components/deprecated/ScrollToTopButton/ScrollToTopButton.stories.tsx index 033b624..20309a8 100644 --- a/src/components/v1/ScrollToTopButton/ScrollToTopButton.stories.tsx +++ b/src/components/deprecated/ScrollToTopButton/ScrollToTopButton.stories.tsx @@ -3,8 +3,8 @@ import { fn } from 'storybook/test'; import { ScrollToTopButton } from './ScrollToTopButton'; const meta = { - id: 'Component/DADS v1/ScrollToTopButton', - title: 'Component/DADS v1/スクロールトップボタン', + id: 'Component/Deprecated/ScrollToTopButton', + title: 'Component/Deprecated/スクロールトップボタン', component: ScrollToTopButton, tags: ['autodocs'], } satisfies Meta; diff --git a/src/components/v1/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/deprecated/ScrollToTopButton/ScrollToTopButton.tsx similarity index 79% rename from src/components/v1/ScrollToTopButton/ScrollToTopButton.tsx rename to src/components/deprecated/ScrollToTopButton/ScrollToTopButton.tsx index 9f78ae2..6c2504b 100644 --- a/src/components/v1/ScrollToTopButton/ScrollToTopButton.tsx +++ b/src/components/deprecated/ScrollToTopButton/ScrollToTopButton.tsx @@ -10,7 +10,8 @@ export const scrollToTopButtonStyle = ` export type ScrollToTopButtonProps = ComponentProps<'button'>; /** - * ※ ScrollToTopButton は v1 のみのコンポーネントのため、v2 では非推奨となっています。 + * @deprecated + * ※ このコンポーネントはアクセシビリティまたはユーザビリティの観点等から、現在は使用が推奨されません。やむを得ず使用する場合は、不利益があるユーザーの存在を踏まえたうえで注意深く使用してください。 */ export const ScrollToTopButton = (props: ScrollToTopButtonProps) => { const { className, 'aria-label': ariaLabel, ...rest } = props; diff --git a/src/components/v1/ScrollToTopButton/index.ts b/src/components/deprecated/ScrollToTopButton/index.ts similarity index 100% rename from src/components/v1/ScrollToTopButton/index.ts rename to src/components/deprecated/ScrollToTopButton/index.ts diff --git a/src/components/index.ts b/src/components/index.ts index 9b2da15..71c7acb 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -65,13 +65,13 @@ export { linkStyle, linkVisitedStyle, } from './Link'; +export { List, listBaseStyle, listDefaultStyle, listNumberedStyle } from './List'; export { NotificationBanner, NotificationBannerBody, NotificationBannerClose, NotificationBannerMobileClose, } from './NotificationBanner'; -export { Ol, olStyle } from './Ol'; export { Radio } from './Radio'; export { RequirementBadge } from './RequirementBadge'; export { Select } from './Select'; @@ -80,5 +80,4 @@ export { Slot } from './Slot'; export { StatusBadge } from './StatusBadge'; export { SupportText } from './SupportText'; export { Textarea } from './Textarea'; -export { Ul, ulStyle } from './Ul'; export { UtilityLink, UtilityLinkExternalLinkIcon, utilityLinkStyle } from './UtilityLink'; diff --git a/src/docs/introduction.mdx b/src/docs/introduction.mdx index 0b15aad..1e00f47 100644 --- a/src/docs/introduction.mdx +++ b/src/docs/introduction.mdx @@ -1,5 +1,5 @@ import { Meta, Unstyled } from "@storybook/addon-docs/blocks"; -import { Link, Ul } from './../'; +import { Link } from './../'; diff --git a/src/index.ts b/src/index.ts index e7a7b42..0c48ebf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -45,25 +45,25 @@ export { Label, Legend, Link, + List, linkActiveStyle, linkDefaultStyle, linkFocusStyle, linkHoverStyle, linkStyle, linkVisitedStyle, + listBaseStyle, + listDefaultStyle, + listNumberedStyle, NotificationBanner, NotificationBannerBody, NotificationBannerClose, - Ol, - olStyle, Radio, RequirementBadge, Select, SeparatedDatePicker, SupportText, Textarea, - Ul, UtilityLink, - ulStyle, utilityLinkStyle, } from './components';