From 8929fc209ae1d27a7d888471769ee85e577626ea Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Wed, 25 Jun 2025 16:21:14 +0900 Subject: [PATCH 1/5] feat: update the table sample according to the latest Figma design --- src/components/Table/Table.stories.tsx | 523 ++++++++++++++++--------- 1 file changed, 338 insertions(+), 185 deletions(-) diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index 1c92f84..4ed2b82 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -1,5 +1,5 @@ import { Description, Stories, Subtitle, Title } from '@storybook/addon-docs/blocks'; -import React, { type ComponentProps, useEffect, useRef, useState } from 'react'; +import { type ChangeEvent, useEffect, useRef, useState } from 'react'; import { Checkbox, Link, @@ -87,7 +87,7 @@ export const FirstRowAsHeaderCell = { return ( - + @@ -144,7 +144,7 @@ export const FirstColumnAsHeaderCell = { render: () => { return (
ラベル
- + @@ -205,7 +205,7 @@ export const FirstRowAndColumnAsHeaderCell = { return (
- + @@ -213,8 +213,8 @@ export const FirstRowAndColumnAsHeaderCell = { - - + + @@ -234,7 +234,10 @@ export const FirstRowAndColumnAsHeaderCell = { - @@ -244,7 +247,10 @@ export const FirstRowAndColumnAsHeaderCell = { - @@ -254,7 +260,10 @@ export const FirstRowAndColumnAsHeaderCell = { - @@ -273,53 +282,53 @@ export const FirstRowAndColumnAsHeaderCell = { export const CondensedTable = { render: () => { return ( -
ラベル
+ ラベル データデータ
+ ラベル データデータ
+ ラベル データ
+
- - + - - - - - - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + +
+
ラベル + ラベル + ラベル + ラベル + ラベル + ラベル
データデータデータデータデータデータデータデータデータデータデータデータ
データデータデータデータデータデータデータデータデータデータデータデータ
データデータデータデータデータデータデータデータデータデータデータデータ
@@ -341,7 +350,7 @@ export const BorderOnRowAndColumn = { - + ラベル @@ -399,55 +408,55 @@ export const TableHeaderWithColspan = { return ( - + - +
親ラベル 親ラベル
子ラベル 子ラベル 子ラベル 子ラベル 子ラベル 子ラベル @@ -491,8 +500,8 @@ export const TableHeaderWithRowspan = { return ( - - + + @@ -500,10 +509,17 @@ export const TableHeaderWithRowspan = { - - @@ -512,7 +528,10 @@ export const TableHeaderWithRowspan = { - @@ -521,10 +540,17 @@ export const TableHeaderWithRowspan = { - - @@ -533,7 +559,10 @@ export const TableHeaderWithRowspan = { - @@ -553,7 +582,7 @@ export const IndentedRows = {
+ 親ラベル + 子ラベル データデータ
+ 子ラベル データデータ
+ 親ラベル + 子ラベル データデータ
+ 子ラベル データ
- + - - - {[...Array(6)].map((_, i) => - i === showColumnMenuIndex ? ( - + {[...Array(5)].map((_, i) => ( + - ) : ( - - ), - )} + )} + + + ))} - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + +
代表者名 @@ -608,7 +637,7 @@ export const StripeTable = { return ( - + @@ -630,7 +659,7 @@ export const StripeTable = { - + @@ -638,7 +667,7 @@ export const StripeTable = { - + @@ -646,7 +675,7 @@ export const StripeTable = { - + @@ -654,7 +683,7 @@ export const StripeTable = { - + @@ -662,7 +691,7 @@ export const StripeTable = { - + @@ -670,7 +699,7 @@ export const StripeTable = { - + @@ -690,7 +719,7 @@ export const HighlightHoveredRow = { return (
ラベル
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データ
- + @@ -712,7 +741,7 @@ export const HighlightHoveredRow = { - + @@ -720,7 +749,7 @@ export const HighlightHoveredRow = { - + @@ -728,7 +757,7 @@ export const HighlightHoveredRow = { - + @@ -736,7 +765,7 @@ export const HighlightHoveredRow = { - + @@ -744,7 +773,7 @@ export const HighlightHoveredRow = { - + @@ -752,7 +781,7 @@ export const HighlightHoveredRow = { - + @@ -768,79 +797,118 @@ export const HighlightHoveredRow = { /** * 選択可能なテーブル行 - * - * ※全て選択機能は未実装です。 */ export const SelectableTable = { render: () => { + const checkAll = useRef(null); + const [checks, setChecks] = useState([false, true, false]); + + useEffect(() => { + if (!checkAll.current) return; + const allChecked = checks.every(Boolean); + const noneChecked = checks.every((v) => !v); + checkAll.current.checked = allChecked; + checkAll.current.indeterminate = !allChecked && !noneChecked; + }, [checks]); + + const handleCheckAllChange = () => { + if (!checkAll.current) return; + const checked = checkAll.current.indeterminate || checkAll.current.checked; + checkAll.current.checked = checked; + setChecks(checks.map(() => checked)); + }; + + const handleIndividualChange = (index: number) => (e: ChangeEvent) => { + const newChecks = [...checks]; + newChecks[index] = e.target.checked; + setChecks(newChecks); + }; + return ( -
ラベル
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データデータ データ
データ データ データ
+
- + - - - - + - - + + - + - - + + - + - - + +
- + タイトル + 状態 + コメント数
- 記事タイトル1 公開中10公開中10
- 記事タイトル2 下書き0下書き0
- 記事タイトル3 非公開3非公開3
@@ -850,7 +918,7 @@ export const SelectableTable = { /** ソート可能なテーブルヘッダー（2列目は列メニューあり） */ export const SortableHeader = { - render: ({ size }) => { + render: () => { type Sort = 'ascending' | 'descending' | undefined; const [sortStates, setSortStates] = useState>({ 1: 'ascending' }); @@ -863,20 +931,22 @@ export const SortableHeader = { }); }; - const AscendingIcon = ({ sort }: { sort: Sort }) => - sort && ( + const SortIcon = ({ sort }: { sort: Sort }) => + sort ? ( + ) : ( + ); @@ -891,32 +961,31 @@ export const SortableHeader = {
-
+
+
+
+
+ {i === showColumnMenuIndex && ( -
- 		- -
データデータデータデータデータデータデータデータデータデータデータ
データデータデータデータデータデータデータデータデータデータデータ
データデータデータデータデータデータデータデータデータデータデータ
); }, - args: { - size: 'normal', - }, - argTypes: { - size: { - type: 'string', - description: 'サイズ（密度）', - control: { type: 'radio' }, - options: ['normal', 'dense'], - table: { - defaultValue: { summary: 'normal' }, - type: { summary: "'normal' | 'dense'" }, - }, - }, +}; + +/** ソート可能なテーブルヘッダー Dense（2列目は列メニューあり） */ +export const SortableHeaderDense = { + render: () => { + type Sort = 'ascending' | 'descending' | undefined; + + const [sortStates, setSortStates] = useState>({ 1: 'ascending' }); + + const handleSortClick = (columnIndex: number) => { + setSortStates((prevStates) => { + return { + [columnIndex]: prevStates[columnIndex] === 'ascending' ? 'descending' : 'ascending', + }; + }); + }; + + const SortIcon = ({ sort }: { sort: Sort }) => + sort ? ( + + + + + ) : ( + + ); + + // 2列目は列メニューあり + const showColumnMenuIndex = 1; + + return ( + + + + + + + + + + + {[...Array(5)].map((_, i) => ( + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+ {i === showColumnMenuIndex && ( + + )} +
+
データデータデータデータデータ
データデータデータデータデータ
データデータデータデータデータ
+ ); }, }; @@ -1014,7 +1167,7 @@ export const LinkedTextInCell = { render: () => ( - + @@ -1089,7 +1242,7 @@ export const WithCaption = {
表1: テーブルキャプション
ラベル
- + @@ -1151,7 +1304,7 @@ export const OverflowOnMobile = {
ラベル
- + From d7a9fb406baff0ee4b4253c40c7287a0abc43e16 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Wed, 25 Jun 2025 16:22:02 +0900 Subject: [PATCH 2/5] feat: enable to work indeterminate checkbox story --- src/components/Checkbox/Checkbox.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index 84c7fc4..438cff6 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -254,11 +254,11 @@ export const Indeterminate: Story = { const noneChecked = checks.every((v) => !v); checkAll.current.checked = allChecked; checkAll.current.indeterminate = !allChecked && !noneChecked; - }); + }, [checks]); - const handleCheckAllChange = (e) => { + const handleCheckAllChange = () => { if (!checkAll.current) return; - const checked = checkAll.current.indeterminate || e.target.checked; + const checked = checkAll.current.indeterminate || checkAll.current.checked; checkAll.current.checked = checked; setChecks(checks.map(() => checked)); }; From ab7b7f387830d36d2efdf852424ad350ae24a333 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Wed, 25 Jun 2025 16:22:38 +0900 Subject: [PATCH 3/5] feat: fix the icon color of NotificationBanner icons on forced color mode --- src/components/NotificationBanner/parts/Icon.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NotificationBanner/parts/Icon.tsx b/src/components/NotificationBanner/parts/Icon.tsx index 7986834..3dd58ae 100644 --- a/src/components/NotificationBanner/parts/Icon.tsx +++ b/src/components/NotificationBanner/parts/Icon.tsx @@ -15,7 +15,7 @@ const InfoIcon = (props: IconProps) => { width='36' {...rest} > - + { width='36' {...rest} > - + { width='2' height='18.5341' transform='matrix(0.7071, -0.707113, 0.7071, 0.707113, 11, 12.4142)' - fill='white' + fill='Canvas' /> @@ -94,7 +94,7 @@ const SuccessIcon = (props: IconProps) => { {...rest} > - + Date: Wed, 25 Jun 2025 16:23:53 +0900 Subject: [PATCH 4/5] doc: update accessibility description in Introduction story --- src/docs/introduction.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/introduction.stories.tsx b/src/docs/introduction.stories.tsx index 78ee658..7249562 100644 --- a/src/docs/introduction.stories.tsx +++ b/src/docs/introduction.stories.tsx @@ -36,7 +36,7 @@ export const Introduction: Story = { 等のアクセシビリティガイドラインを最大限に取り込んだデジタル庁デザインシステムのガイドラインを基に作られており、アクセシビリティの専門家によるチェックも受けています。

- これにより、個々のコンポーネントはアクセシビリティが担保されていますが、それらを使うことでアクセシビリティチェックが不要になるわけではありません。コンポーネントを組み合わせたUIや画面全体のアクセシビリティチェックは必ず実施してください。 + これにより、デジタル庁デザインシステムのコンポーネントを使うことで、WCAGの各達成基準に適合または適合が容易になります。

HTML ネイティブ機能の活用 From 574f528383437cd536ddd8c2856a1dd1aa862bf1 Mon Sep 17 00:00:00 2001 From: "keisuke.okafuji" Date: Wed, 25 Jun 2025 16:25:37 +0900 Subject: [PATCH 5/5] feat: update version to 2.5.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 46f826b..d985b52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@digital-go-jp/design-system-example-components", - "version": "2.4.0", + "version": "2.5.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@digital-go-jp/design-system-example-components", - "version": "2.4.0", + "version": "2.5.0", "license": "MIT", "dependencies": { "@digital-go-jp/tailwind-theme-plugin": "^0.3.0", diff --git a/package.json b/package.json index b24cd0f..0525aeb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@digital-go-jp/design-system-example-components", - "version": "2.4.0", + "version": "2.5.0", "type": "module", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts",

項目