merge v2 into main

.storybook/preview.ts

@@ -29,6 +29,7 @@ const preview: Preview = {
             'インプットテキスト',
             '引用ブロック',
             'カレンダー',
+            '箇条書きリスト',
             'カルーセル',
             '緊急時バナー',
             '説明リスト',
@@ -50,7 +51,6 @@ const preview: Preview = {
             'ユーティリティリンク',
             'ラジオボタン',
             'ランゲージセレクター',
-            'リスト',
             'リンク',
             '*',
             'Parts',

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 (
       <Blockquote>
         <p className='my-4'>デジタル庁デザインシステムは、以下の理念を追求して作成されています。</p>
-        <Ul>
+        <List spacing='4'>
           <li>アクセシビリティファースト</li>
           <li>行政機関にとって高い汎用性と利便性</li>
           <li>継続的かつ持続可能な改善活動および研究と実践</li>
-        </Ul>
+        </List>
         <p className='my-4'>
           これにより、デジタル化の恩恵をすべての人に届けられる日本のデジタル化社会の構築に寄与します。
         </p>

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 = {
           <p>
             これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
           </p>
-          <Ul>
+          <List spacing='4'>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
@@ -57,11 +57,11 @@ export const WithLongContent: Story = {
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
-          </Ul>
+          </List>
           <p>
             これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。
           </p>
-          <Ul>
+          <List spacing='4'>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
@@ -75,7 +75,7 @@ export const WithLongContent: Story = {
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
-          </Ul>
+          </List>
           <DisclosureBackLink
             className='mt-4 [text-spacing-trim:trim-start]'
             href='#disclosure-with-long-content'
@@ -96,13 +96,13 @@ export const MultipleLineTitle: Story = {
           複数行にまたがるディスクロージャータイトル
         </DisclosureSummary>
         <div className='pl-8 my-4'>
-          <Ul>
+          <List spacing='4'>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
             <li>リストアイテム</li>
-          </Ul>
+          </List>
           <DisclosureBackLink
             className='mt-4 [text-spacing-trim:trim-start]'
             href='#disclosure-multiple-line-title'

src/components/List/List.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Link } from '../';
+import { List } from './List';
+
+const meta = {
+  id: 'Component/DADS v2/List',
+  title: 'Component/箇条書きリスト/List',
+  component: List,
+  tags: ['autodocs'],
+  argTypes: {
+    marker: { table: { disable: true } },
+  },
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllLists: Story = {
+  render: (args) => (
+    <>
+      <List spacing={args.spacing}>
+        <li>短いテキスト</li>
+        <li>
+          これは少し長めのテキストサンプルです。リストアイテムの中に含まれる文章の例として使用しています。
+        </li>
+        <li>
+          ネストされたリスト
+          <List marker='number' spacing={args.spacing}>
+            <li>
+              <span>1. </span>
+              <span>番号付きリストの最初の項目</span>
+            </li>
+            <li>
+              <Link href='#'>
+                <span>2. </span>
+                <span>
+                  二番目の項目で、これは比較的長い説明文を含んでいます。ネストされた構造の例として作成されました。
+                </span>
+              </Link>
+            </li>
+            <li>
+              <Link href='#'>
+                <span>3. </span>
+                <span>三番目</span>
+              </Link>
+            </li>
+          </List>
+        </li>
+        <li>
+          複雑な入れ子構造の例
+          <List spacing={args.spacing}>
+            <li>サブリストA</li>
+            <li>
+              サブリストBで更にネスト
+              <List marker='number' spacing={args.spacing}>
+                <li>
+                  <span>①　</span>
+                  <span>番号付きサブアイテム1</span>
+                </li>
+                <li>
+                  <span>②　</span>
+                  <span>
+                    <Link href='#'>番号付きサブアイテム2</Link>
+                    （長めの説明付き：この項目は複数レベルの入れ子構造を示すために作成されています）
+                  </span>
+                </li>
+              </List>
+            </li>
+            <li>サブリストC</li>
+          </List>
+        </li>
+      </List>
+
+      <List marker='number' spacing={args.spacing}>
+        <li>
+          <span>１　</span>
+          <span>最初</span>
+        </li>
+        <li>
+          <span>２　</span>
+          <span>
+            二番目の項目として、長めの文章を含む例です。番号付きリストの中での文章の長さの違いを示しています。
+          </span>
+        </li>
+        <li>
+          <span>３　</span>
+          <span>三番目（ネスト含む）</span>
+          <List spacing={args.spacing}>
+            <li>無順序サブリスト項目A</li>
+            <li>無順序サブリスト項目B</li>
+            <li>
+              無順序サブリスト項目C
+              <List marker='number' spacing={args.spacing}>
+                <li>
+                  <span>（１）</span>
+                  <span>再び番号付きリスト</span>
+                </li>
+                <li>
+                  <span>（２）</span>
+                  <span>
+                    非常に長いテキストの例：この項目は
+                    <b>複数レベルの入れ子構造</b>
+                    における文章の長さの違いを示すために作成されたサンプルテキストです。実際の使用場面では、このような長い説明文が含まれることもあります。
+                  </span>
+                </li>
+              </List>
+            </li>
+          </List>
+        </li>
+        <li>
+          <span>４　</span>四番目
+        </li>
+      </List>
+    </>
+  ),
+  argTypes: {
+    spacing: {
+      control: 'radio',
+      options: ['4', '8', '12'],
+    },
+  },
+  args: {
+    spacing: '4',
+  },
+};

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 (
+    <ul
+      className={`${listBaseStyle} ${markerStyle} ${className ?? ''}`}
+      data-spacing={spacing}
+      data-marker={marker}
+      {...rest}
+    >
+      {children}
+    </ul>
+  );
+};

src/components/List/index.ts

@@ -0,0 +1 @@
+export { List, listBaseStyle, listDefaultStyle, listNumberedStyle } from './List';