Skip to content

Commit a204fad

Browse files
johnykeijohnykei
authored
Merge pull request #150 from digital-go-jp/v2
merge v2 into main
2 parents fce5496 + e4896e0 commit a204fad

File tree

12 files changed

+359
-217
lines changed

12 files changed

+359
-217
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digital-go-jp/design-system-example-components",
3-
"version": "2.0.4",
3+
"version": "2.1.0",
44
"type": "module",
55
"main": "dist/index.cjs.js",
66
"typings": "dist/index.d.ts",

‎src/components/Accordion/Accordion.stories.tsx‎

Lines changed: 35 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import React from 'react';
3-
import {
4-
Accordion,
5-
AccordionDefaultIcon,
6-
AccordionDefaultIconWrapper,
7-
AccordionSummary,
8-
} from './Accordion';
3+
import { Accordion, AccordionBackLink, AccordionContent, AccordionSummary } from './Accordion';
94

105
const meta = {
116
title: 'Component/DADS v2/Accordion',
@@ -16,174 +11,65 @@ const meta = {
1611
export default meta;
1712
type Story = StoryObj<typeof meta>;
1813

19-
const focusVisibleStyles =
20-
'focus-visible:rounded focus-visible:bg-yellow-300 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300';
21-
2214
export const Example: Story = {
2315
render: () => {
24-
const focusTargetRef1 = React.useRef<HTMLParagraphElement>(null);
25-
const focusTargetRef2 = React.useRef<HTMLHeadingElement>(null);
26-
const focusTargetRef3 = React.useRef<HTMLParagraphElement>(null);
2716
return (
2817
<>
2918
<div className='flex flex-col'>
30-
<Accordion
31-
onToggle={(e) => {
32-
if (e.currentTarget.open) {
33-
focusTargetRef1?.current?.focus();
34-
}
35-
}}
36-
>
37-
<AccordionSummary>
38-
<h3>ダミーテキストはどのような場合に使用されますか。</h3>
39-
<AccordionDefaultIconWrapper>
40-
<AccordionDefaultIcon />
41-
</AccordionDefaultIconWrapper>
19+
<Accordion className='text-std-16N-170'>
20+
<AccordionSummary className='desktop:text-std-18N-160' id='accordion-example-summary-1'>
21+
<h3>ダミーテキストとは何ですか？</h3>
4222
</AccordionSummary>
43-
<div className='px-1 py-2 desktop:px-2 desktop:py-4'>
44-
<p className={`mb-4 ${focusVisibleStyles}`} ref={focusTargetRef1} tabIndex={-1}>
45-
これはダミーテキストです。
46-
</p>
23+
<AccordionContent>
24+
<p className='mb-4'>これはダミーテキストです。</p>
4725
<p>
4826
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
4927
</p>
50-
</div>
28+
<AccordionBackLink
29+
className='mt-4 [text-spacing-trim:trim-start]'
30+
href='#accordion-example-summary-1'
31+
>
32+
「ダミーテキストとは何ですか？」の先頭に戻る
33+
</AccordionBackLink>
34+
</AccordionContent>
5135
</Accordion>
5236

53-
<Accordion
54-
onToggle={(e) => {
55-
if (e.currentTarget.open) {
56-
focusTargetRef2?.current?.focus();
57-
}
58-
}}
59-
>
60-
<AccordionSummary>
37+
<Accordion className='text-std-16N-170'>
38+
<AccordionSummary className='desktop:text-std-18N-160' id='accordion-example-summary-2'>
6139
<h3>
62-
ダミーテキストはどのような場合に使用されますか。ダミーテキストはどのような場合に使用されますか。ダミーテキストはどのような場合に使用されますか。
40+
ダミーテキストがデザインやレイアウトに使用されていることがよくありますが、どのような目的や意味で使用されているのでしょうか？
6341
</h3>
64-
<AccordionDefaultIconWrapper>
65-
<AccordionDefaultIcon />
66-
</AccordionDefaultIconWrapper>
6742
</AccordionSummary>
68-
<div
69-
className={`px-1 py-2 desktop:px-2 desktop:py-4 ${focusVisibleStyles}`}
70-
ref={focusTargetRef2}
71-
tabIndex={-1}
72-
>
43+
<AccordionContent>
7344
これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
74-
</div>
45+
<AccordionBackLink
46+
className='mt-4 [text-spacing-trim:trim-start]'
47+
href='#accordion-example-summary-2'
48+
>
49+
「ダミーテキストがデザインやレイアウトに使用されていることがよくありますが、どのような目的や意味で使用されているのでしょうか？」の先頭に戻る
50+
</AccordionBackLink>
51+
</AccordionContent>
7552
</Accordion>
7653

77-
<Accordion
78-
onToggle={(e) => {
79-
if (e.currentTarget.open) {
80-
focusTargetRef3?.current?.focus();
81-
}
82-
}}
83-
>
84-
<AccordionSummary>
85-
<h3>ダミーテキストはどのような場合に使用されますか。</h3>
86-
<AccordionDefaultIconWrapper>
87-
<AccordionDefaultIcon />
88-
</AccordionDefaultIconWrapper>
54+
<Accordion className='text-std-16N-170'>
55+
<AccordionSummary className='desktop:text-std-18N-160' id='accordion-example-summary-3'>
56+
<h3>ダミーテキストはどのような場合に使用されますか？</h3>
8957
</AccordionSummary>
90-
<div className='px-1 py-2 desktop:px-2 desktop:py-4'>
91-
<p className={`mb-4 ${focusVisibleStyles}`} ref={focusTargetRef3} tabIndex={-1}>
92-
これはダミーテキストです。
93-
</p>
58+
<AccordionContent>
59+
<p className='mb-4'>これはダミーテキストです。</p>
9460
<p className='mb-4'>
9561
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。
9662
</p>
9763
<p>
9864
ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
9965
</p>
100-
</div>
101-
</Accordion>
102-
</div>
103-
</>
104-
);
105-
},
106-
};
107-
108-
export const WithSquareIcon: Story = {
109-
render: () => {
110-
const focusTargetRef1 = React.useRef<HTMLHeadingElement>(null);
111-
const focusTargetRef2 = React.useRef<HTMLDivElement>(null);
112-
const focusTargetRef3 = React.useRef<HTMLParagraphElement>(null);
113-
114-
return (
115-
<>
116-
<div className='flex flex-col'>
117-
<Accordion
118-
onToggle={(e) => {
119-
if (e.currentTarget.open) {
120-
focusTargetRef1?.current?.focus();
121-
}
122-
}}
123-
>
124-
<AccordionSummary>
125-
<h3>ダミーテキストはどのような場合に使用されますか。</h3>
126-
<AccordionDefaultIconWrapper shapeStyle='square'>
127-
<AccordionDefaultIcon />
128-
</AccordionDefaultIconWrapper>
129-
</AccordionSummary>
130-
<div className='px-1 py-2 desktop:px-2 desktop:py-4'>
131-
<h4
132-
className={`md:text-std-20B-160 mb-4 ${focusVisibleStyles}`}
133-
ref={focusTargetRef1}
134-
tabIndex={-1}
66+
<AccordionBackLink
67+
className='mt-4 [text-spacing-trim:trim-start]'
68+
href='#accordion-example-summary-3'
13569
>
136-
これはダミーテキストです。
137-
</h4>
138-
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
139-
</div>
140-
</Accordion>
141-
142-
<Accordion
143-
onToggle={(e) => {
144-
if (e.currentTarget.open) {
145-
focusTargetRef2?.current?.focus();
146-
}
147-
}}
148-
>
149-
<AccordionSummary>
150-
<h3>
151-
ダミーテキストはどのような場合に使用されますか。ダミーテキストはどのような場合に使用されますか。ダミーテキストはどのような場合に使用されますか。
152-
</h3>
153-
<AccordionDefaultIconWrapper shapeStyle='square'>
154-
<AccordionDefaultIcon />
155-
</AccordionDefaultIconWrapper>
156-
</AccordionSummary>
157-
<div
158-
className={`px-1 py-2 desktop:px-2 desktop:py-4 ${focusVisibleStyles}`}
159-
ref={focusTargetRef2}
160-
tabIndex={-1}
161-
>
162-
これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
163-
</div>
164-
</Accordion>
165-
166-
<Accordion
167-
onToggle={(e) => {
168-
if (e.currentTarget.open) {
169-
focusTargetRef3?.current?.focus();
170-
}
171-
}}
172-
>
173-
<AccordionSummary>
174-
<h3>ダミーテキストはどのような場合に使用されますか。</h3>
175-
<AccordionDefaultIconWrapper shapeStyle='square'>
176-
<AccordionDefaultIcon />
177-
</AccordionDefaultIconWrapper>
178-
</AccordionSummary>
179-
<div className='px-1 py-2 desktop:px-2 desktop:py-4'>
180-
<p className={`mb-4 ${focusVisibleStyles}`} ref={focusTargetRef3} tabIndex={-1}>
181-
これはダミーテキストです。
182-
</p>
183-
<p>
184-
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
185-
</p>
186-
</div>
70+
「ダミーテキストはどのような場合に使用されますか？」の先頭に戻る
71+
</AccordionBackLink>
72+
</AccordionContent>
18773
</Accordion>
18874
</div>
18975
</>

0 commit comments

Comments
 (0)