Skip to content

Commit f5e7215

Browse files
johnykeijohnykei
authored
Merge pull request #85 from digital-go-jp/v2
merge v2 into main
2 parents 0e5210c + f361ce2 commit f5e7215

31 files changed

+3779
-7792
lines changed

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
2+
"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
33
"vcs": {
44
"enabled": true,
55
"clientKind": "git",

‎package-lock.json‎

Lines changed: 3008 additions & 7429 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42,30 +42,31 @@
4242
"@digital-go-jp/tailwind-theme-plugin": "^0.1.16",
4343
"react": "^18.3.1",
4444
"react-dom": "^18.3.1",
45-
"tailwindcss": "^3.4.7"
45+
"tailwindcss": "^3.4.13"
4646
},
4747
"devDependencies": {
48-
"@biomejs/biome": "^1.8.3",
49-
"@markuplint/jsx-parser": "^4.7.5",
48+
"@biomejs/biome": "^1.9.2",
49+
"@markuplint/jsx-parser": "^4.7.7",
5050
"@markuplint/react-spec": "^4.5.5",
51-
"@storybook/addon-a11y": "^8.1.11",
52-
"@storybook/addon-essentials": "^8.1.11",
53-
"@storybook/addon-interactions": "^8.1.11",
54-
"@storybook/addon-links": "^8.1.11",
55-
"@storybook/blocks": "^8.1.11",
56-
"@storybook/react": "^8.1.11",
57-
"@storybook/react-vite": "^8.1.11",
51+
"@storybook/addon-a11y": "^8.3.3",
52+
"@storybook/addon-essentials": "^8.3.3",
53+
"@storybook/addon-interactions": "^8.3.3",
54+
"@storybook/addon-links": "^8.3.3",
55+
"@storybook/blocks": "^8.3.3",
56+
"@storybook/react": "^8.3.3",
57+
"@storybook/react-vite": "^8.3.3",
58+
"@storybook/test": "^8.3.3",
5859
"@tsconfig/node20": "^20.1.4",
5960
"@types/node": "^20.14.10",
6061
"@types/react": "^18.3.3",
6162
"@types/react-dom": "^18.3.0",
6263
"@vitejs/plugin-react-swc": "^3.7.0",
6364
"autoprefixer": "^10.4.19",
64-
"markuplint": "^4.9.2",
65-
"postcss": "^8.4.38",
66-
"storybook": "^8.1.11",
67-
"typescript": "^5.5.3",
68-
"vite": "^5.3.3"
65+
"markuplint": "^4.9.4",
66+
"postcss": "^8.4.47",
67+
"storybook": "^8.3.3",
68+
"typescript": "^5.6.2",
69+
"vite": "^5.4.7"
6970
},
7071
"engines": {
7172
"node": ">=18"

‎src/components/Breadcrumbs/Breadcrumbs.stories.tsx‎

Lines changed: 116 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import React from 'react';
33
import { Link } from '../Link/Link';
4-
import { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from './Breadcrumbs';
4+
import {
5+
BreadcrumbItem,
6+
BreadcrumbLink,
7+
BreadcrumbList,
8+
Breadcrumbs,
9+
BreadcrumbsLabel,
10+
} from './Breadcrumbs';
511

612
const meta = {
713
title: 'Component/DADS v2/Breadcrumbs',
@@ -14,9 +20,13 @@ type Story = StoryObj<typeof meta>;
1420

1521
export const Example: Story = {
1622
render: () => {
23+
const breadcrumbsId = React.useId();
1724
return (
18-
<div className='flex flex-col gap-8'>
19-
<Breadcrumbs>
25+
<Breadcrumbs aria-labelledby={`${breadcrumbsId}-label`}>
26+
<BreadcrumbsLabel className='sr-only' id={`${breadcrumbsId}-label`}>
27+
現在位置
28+
</BreadcrumbsLabel>
29+
<BreadcrumbList>
2030
<BreadcrumbItem>
2131
<BreadcrumbLink href='#' key='home'>
2232
ホーム
@@ -40,9 +50,109 @@ export const Example: Story = {
4050
<BreadcrumbItem isCurrent>
4151
長いページタイトルが入ります長いページタイトルが入ります
4252
</BreadcrumbItem>
43-
</Breadcrumbs>
53+
</BreadcrumbList>
54+
</Breadcrumbs>
55+
);
56+
},
57+
};
58+
59+
export const WithHomeIcon: Story = {
60+
render: () => {
61+
const breadcrumbsId = React.useId();
62+
return (
63+
<Breadcrumbs aria-labelledby={`${breadcrumbsId}-label`}>
64+
<BreadcrumbsLabel className='sr-only' id={`${breadcrumbsId}-label`}>
65+
現在位置
66+
</BreadcrumbsLabel>
67+
<BreadcrumbList>
68+
<BreadcrumbItem>
69+
<BreadcrumbLink className='inline-flex items-center gap-1' href='#' key='home'>
70+
<svg aria-hidden={true} fill='none' height='16' viewBox='0 0 16 16' width='16'>
71+
<g>
72+
<path
73+
d='M3 13.6666V6.16667L7.99998 2.40387L13 6.16667V13.6666H9.26922V9.2051H6.73075V13.6666H3Z'
74+
fill='currentColor'
75+
/>
76+
</g>
77+
</svg>
78+
ホーム
79+
</BreadcrumbLink>
80+
</BreadcrumbItem>
81+
<BreadcrumbItem>
82+
<BreadcrumbLink href='#' key='organization'>
83+
組織情報
84+
</BreadcrumbLink>
85+
</BreadcrumbItem>
86+
<BreadcrumbItem>
87+
<BreadcrumbLink href='#' key='a'>
88+
長いページタイトルが入ります長いページタイトルが入ります
89+
</BreadcrumbLink>
90+
</BreadcrumbItem>
91+
<BreadcrumbItem>
92+
<BreadcrumbLink href='#' key='b'>
93+
長いページタイトルが入ります長いページタイトルが入ります
94+
</BreadcrumbLink>
95+
</BreadcrumbItem>
96+
<BreadcrumbItem isCurrent>
97+
長いページタイトルが入ります長いページタイトルが入ります
98+
</BreadcrumbItem>
99+
</BreadcrumbList>
100+
</Breadcrumbs>
101+
);
102+
},
103+
};
104+
105+
export const WithVisibleLabel: Story = {
106+
render: () => {
107+
const breadcrumbsId = React.useId();
108+
return (
109+
<Breadcrumbs className='flex gap-1 items-baseline' aria-labelledby={`${breadcrumbsId}-label`}>
110+
<div className='flex-none'>
111+
<BreadcrumbsLabel className='text-dns-16N-2' id={`${breadcrumbsId}-label`}>
112+
現在位置
113+
</BreadcrumbsLabel>
114+
<span className='text-dns-16N-2'>：</span>
115+
</div>
116+
117+
<BreadcrumbList>
118+
<BreadcrumbItem>
119+
<BreadcrumbLink href='#' key='home'>
120+
ホーム
121+
</BreadcrumbLink>
122+
</BreadcrumbItem>
123+
<BreadcrumbItem>
124+
<BreadcrumbLink href='#' key='organization'>
125+
組織情報
126+
</BreadcrumbLink>
127+
</BreadcrumbItem>
128+
<BreadcrumbItem>
129+
<BreadcrumbLink href='#' key='a'>
130+
長いページタイトルが入ります長いページタイトルが入ります
131+
</BreadcrumbLink>
132+
</BreadcrumbItem>
133+
<BreadcrumbItem>
134+
<BreadcrumbLink href='#' key='b'>
135+
長いページタイトルが入ります長いページタイトルが入ります
136+
</BreadcrumbLink>
137+
</BreadcrumbItem>
138+
<BreadcrumbItem isCurrent>
139+
長いページタイトルが入ります長いページタイトルが入ります
140+
</BreadcrumbItem>
141+
</BreadcrumbList>
142+
</Breadcrumbs>
143+
);
144+
},
145+
};
44146

45-
<Breadcrumbs>
147+
export const WithSlot: Story = {
148+
render: () => {
149+
const breadcrumbsId = React.useId();
150+
return (
151+
<Breadcrumbs aria-labelledby={`${breadcrumbsId}-label`}>
152+
<BreadcrumbsLabel className='sr-only' id={`${breadcrumbsId}-label`}>
153+
現在位置
154+
</BreadcrumbsLabel>
155+
<BreadcrumbList>
46156
<BreadcrumbItem>
47157
<BreadcrumbLink asChild key='home'>
48158
<Link href='#'>Slotを使ったホーム</Link>
@@ -70,47 +180,7 @@ export const Example: Story = {
70180
<BreadcrumbItem isCurrent>
71181
長いページタイトルが入ります長いページタイトルが入ります
72182
</BreadcrumbItem>
73-
</Breadcrumbs>
74-
</div>
75-
);
76-
},
77-
};
78-
79-
export const WithHomeIcon: Story = {
80-
render: () => {
81-
return (
82-
<Breadcrumbs>
83-
<BreadcrumbItem>
84-
<BreadcrumbLink className='inline-flex items-center gap-1' href='#' key='home'>
85-
<svg aria-hidden={true} fill='none' height='16' viewBox='0 0 16 16' width='16'>
86-
<g>
87-
<path
88-
d='M3 13.6666V6.16667L7.99998 2.40387L13 6.16667V13.6666H9.26922V9.2051H6.73075V13.6666H3Z'
89-
fill='currentColor'
90-
/>
91-
</g>
92-
</svg>
93-
ホーム
94-
</BreadcrumbLink>
95-
</BreadcrumbItem>
96-
<BreadcrumbItem>
97-
<BreadcrumbLink href='#' key='organization'>
98-
組織情報
99-
</BreadcrumbLink>
100-
</BreadcrumbItem>
101-
<BreadcrumbItem>
102-
<BreadcrumbLink href='#' key='a'>
103-
長いページタイトルが入ります長いページタイトルが入ります
104-
</BreadcrumbLink>
105-
</BreadcrumbItem>
106-
<BreadcrumbItem>
107-
<BreadcrumbLink href='#' key='b'>
108-
長いページタイトルが入ります長いページタイトルが入ります
109-
</BreadcrumbLink>
110-
</BreadcrumbItem>
111-
<BreadcrumbItem isCurrent>
112-
長いページタイトルが入ります長いページタイトルが入ります
113-
</BreadcrumbItem>
183+
</BreadcrumbList>
114184
</Breadcrumbs>
115185
);
116186
},

‎src/components/Breadcrumbs/Breadcrumbs.tsx‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { ComponentProps } from 'react';
22
import { Slot } from '../Slot';
33

4-
export type BreadcrumbsProps = ComponentProps<'nav'>;
5-
64
export type BreadcrumbItemProps = ComponentProps<'li'> & {
75
isCurrent?: boolean;
86
};
@@ -17,15 +15,15 @@ export const BreadcrumbItem = ({
1715
return (
1816
<li
1917
aria-current='page'
20-
className={`inline break-words text-oln-16N-1 ${className}`}
18+
className={`inline break-words text-oln-16N-1 ${className ?? ''}`}
2119
{...rest}
2220
>
2321
{children}
2422
</li>
2523
);
2624
}
2725
return (
28-
<li className='inline break-words'>
26+
<li className={`inline break-words ${className ?? ''}`}>
2927
{children}
3028
<svg
3129
aria-hidden={true}
@@ -37,7 +35,7 @@ export const BreadcrumbItem = ({
3735
>
3836
<path
3937
d='M4.50078 1.2998L3.80078 1.9998L7.80078 5.9998L3.80078 9.9998L4.50078 10.6998L9.20078 5.9998L4.50078 1.2998Z'
40-
fill='#1A1A1C'
38+
fill='currentColor'
4139
/>
4240
</svg>
4341
</li>
@@ -73,16 +71,38 @@ export const BreadcrumbLink = (props: BreadcrumbLinkProps) => {
7371
);
7472
};
7573

74+
export type BreadcrumbListProps = ComponentProps<'ol'>;
75+
76+
export const BreadcrumbList = (props: BreadcrumbListProps) => {
77+
const { children, className, ...rest } = props;
78+
79+
return (
80+
<ol className={`inline ${className ?? ''}`} {...rest}>
81+
{children}
82+
</ol>
83+
);
84+
};
85+
86+
export type BreadcrumbsLabelProps = ComponentProps<'span'>;
87+
88+
export const BreadcrumbsLabel = (props: BreadcrumbsLabelProps) => {
89+
const { children, className, ...rest } = props;
90+
91+
return (
92+
<span className={`${className ?? ''}`} {...rest}>
93+
{children}
94+
</span>
95+
);
96+
};
97+
98+
export type BreadcrumbsProps = ComponentProps<'nav'>;
99+
76100
export const Breadcrumbs = (props: BreadcrumbsProps) => {
77101
const { children, className, ...rest } = props;
78102

79103
return (
80-
<nav
81-
aria-label={`${rest['aria-label'] ?? 'パンくずリスト'}`}
82-
className={`${className ?? ''}`}
83-
{...rest}
84-
>
85-
<ol className='inline'>{children}</ol>
104+
<nav className={`${className ?? ''}`} {...rest}>
105+
{children}
86106
</nav>
87107
);
88108
};

‎src/components/Breadcrumbs/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
export { Breadcrumbs, BreadcrumbItem, BreadcrumbLink } from './Breadcrumbs';
1+
export {
2+
Breadcrumbs,
3+
BreadcrumbsLabel,
4+
BreadcrumbItem,
5+
BreadcrumbLink,
6+
BreadcrumbList,
7+
} from './Breadcrumbs';

‎src/components/Button/Button.stories.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,10 @@ export const DisabledButtons = {
118118
<div>
119119
<h2 className='mb-4 text-std-32B-5'>Disabledの作例（aria-disabled 属性を使用）</h2>
120120
<p className='mb-8'>
121-
※ ボタンの無効化にはアクセシビリティ上の問題から<code>disabled</code>属性ではなく
121+
※ ボタンの無効化に<code>disabled</code>
122+
コンテンツ属性ではなく、キーボード操作のタブフォーカスでもアクセスできる
122123
<code>aria-disabled</code>
123-
属性の使用を推奨しています。
124+
を使用しています。
124125
<br />
125126
詳しくはデジタル庁デザインシステム専用サイトの
126127
<Link

0 commit comments

Comments
 (0)