Skip to content

Commit c40a5b7

Browse files
SupeemAFKSupeemAFK
authored
docs: add story to PromiseList component (#152)
1 parent 8251617 commit c40a5b7

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎src/components/PromiseList/PromiseList.story.svelte

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script lang="ts">
2+
import PromiseList from './PromiseList.svelte';
3+
import { PromiseStatus, type PromiseSummary } from '$models/promise';
4+
export let Hst;
5+
6+
let statusOptions = [
7+
{ label: 'notStarted', value: PromiseStatus.notStarted },
8+
{ label: 'inProgress', value: PromiseStatus.inProgress },
9+
{ label: 'clarifying', value: PromiseStatus.clarifying },
10+
{ label: 'fulfilled', value: PromiseStatus.fulfilled },
11+
{ label: 'unhonored', value: PromiseStatus.unhonored }
12+
];
13+
let date1 = '2024-10-24T00:00:00.000Z';
14+
let date2 = '2024-10-15T00:00:00.000Z';
15+
let date3 = '2024-10-10T00:00:00.000Z';
16+
let date4 = '2024-04-24T00:00:00.000Z';
17+
let date5 = '2024-06-24T00:00:00.000Z';
18+
let summary1 = {
19+
id: '1',
20+
statements: [
21+
'1 กีฬา 1 รัฐวิสาหกิจพลัส (OSOS) จับคู่รัฐวิสาหกิจที่มีกำไรและหน่วยงานรัฐ-เอกชนมาสนับสนุนสมาคมกีฬา'
22+
],
23+
party: {
24+
name: 'เพื่อไทย',
25+
color: '#F41724',
26+
logo: '/images/parties/เพื่อไทย.webp'
27+
},
28+
keywords: ['Soft Power', 'THACCA', 'กีฬา'],
29+
categories: ['วัฒนธรรม'],
30+
status: PromiseStatus.fulfilled
31+
};
32+
let summary2 = {
33+
id: '2',
34+
statements: [
35+
'เพิ่มโอกาสให้หนังไทย รัฐจะสนับสนุนหนังอิสระ เพื่อให้หนังอิสระเป็นพื้นที่ทดลองเทคนิคการเล่าเรื่องแนวใหม่ บ่มเพาะฝีมือ สร้างความหลากหลาย และเป็น R&D ให้หนังกระแสหลัก รัฐจะช่วยขยายตลาดหนังไทย และสนับสนุนหนังไทยไปเทศกาลภาพยนตร์ระดับโลก'
36+
],
37+
party: {
38+
name: 'เพื่อไทย',
39+
color: '#F41724',
40+
logo: '/images/parties/เพื่อไทย.webp'
41+
},
42+
keywords: ['Soft Power', 'THACCA', 'ภาพยนตร์', 'หนัง'],
43+
categories: ['วัฒนธรรม'],
44+
status: PromiseStatus.inProgress
45+
};
46+
let summary3 = {
47+
id: '3',
48+
statements: [
49+
'โรงเรียน 2 ภาษาในทุกท้องถิ่น สอนภาษาต่างประเทศ เช่น ภาษาอังกฤษและภาษาจีน ตั้งแต่ ป.1 ใช้ครูต่างประเทศสอนเสริมร่วมกับครูไทย ทั้งในห้องเรียนและออนไลน์'
50+
],
51+
party: {
52+
name: 'เพื่อไทย',
53+
color: '#F41724',
54+
logo: '/images/parties/เพื่อไทย.webp'
55+
},
56+
keywords: ['นโยบายการศึกษา'],
57+
categories: ['การศึกษา'],
58+
status: PromiseStatus.notStarted
59+
};
60+
let summary4 = {
61+
id: '4',
62+
statements: [
63+
'งานออกแบบไทยสู่เวทีโลก THACCA จะตั้งร้านเพื่อขายสินค้าไทย โดยเฉพาะสินค้าออกแบบ/แฟชันไทย และสินค้า OTOP ณ ใจกลางมหานครใหญ่ทั่วโลก'
64+
],
65+
party: {
66+
name: 'เพื่อไทย',
67+
color: '#F41724',
68+
logo: '/images/parties/เพื่อไทย.webp'
69+
},
70+
keywords: ['OTOP', 'THACCA', 'Soft Power'],
71+
categories: ['วัฒนธรรม', 'เศรษฐกิจ'],
72+
status: PromiseStatus.clarifying
73+
};
74+
let summary5 = {
75+
id: '5',
76+
statements: ['Free tablet for all” โครงการ 1 นักเรียน 1 แท็บเล็ต และ โครงการ 1 ครู 1 แท็บเล็ต'],
77+
party: {
78+
name: 'เพื่อไทย',
79+
color: '#F41724',
80+
logo: '/images/parties/เพื่อไทย.webp'
81+
},
82+
keywords: ['ฟรีแท็บเล็ต'],
83+
categories: ['การศึกษา', 'เทคโนโลยี'],
84+
status: PromiseStatus.unhonored
85+
};
86+
$: summaries = [
87+
{
88+
...summary1,
89+
latestProgressDate: new Date(date1)
90+
},
91+
{
92+
...summary2,
93+
latestProgressDate: new Date(date2)
94+
},
95+
{
96+
...summary3,
97+
latestProgressDate: new Date(date3)
98+
},
99+
{
100+
...summary4,
101+
latestProgressDate: new Date(date4)
102+
},
103+
{
104+
...summary5,
105+
latestProgressDate: new Date(date5)
106+
}
107+
];
108+
</script>
109+
110+
<Hst.Story title="PromiseList">
111+
<PromiseList {summaries} />
112+
113+
<svelte:fragment slot="controls">
114+
<Hst.Select title="status1" bind:value={summary1.status} options={statusOptions} />
115+
<Hst.Json title="statements1" bind:value={summary1.statements} />
116+
<Hst.Json title="keywords1" bind:value={summary1.keywords} />
117+
<Hst.Json title="categories1" bind:value={summary1.categories} />
118+
<Hst.Json title="party1" bind:value={summary1.party} />
119+
<Hst.Text title="latestProgressDate1" bind:value={date1} />
120+
121+
<Hst.Select title="status2" bind:value={summary2.status} options={statusOptions} />
122+
<Hst.Json title="statements2" bind:value={summary2.statements} />
123+
<Hst.Json title="keywords2" bind:value={summary2.keywords} />
124+
<Hst.Json title="categories2" bind:value={summary2.categories} />
125+
<Hst.Json title="party2" bind:value={summary2.party} />
126+
<Hst.Text title="latestProgressDate2" bind:value={date2} />
127+
128+
<Hst.Select title="status3" bind:value={summary3.status} options={statusOptions} />
129+
<Hst.Json title="statements3" bind:value={summary3.statements} />
130+
<Hst.Json title="keywords3" bind:value={summary3.keywords} />
131+
<Hst.Json title="categories3" bind:value={summary3.categories} />
132+
<Hst.Json title="party3" bind:value={summary3.party} />
133+
<Hst.Text title="latestProgressDate3" bind:value={date3} />
134+
135+
<Hst.Select title="status4" bind:value={summary4.status} options={statusOptions} />
136+
<Hst.Json title="statements4" bind:value={summary4.statements} />
137+
<Hst.Json title="keywords4" bind:value={summary4.keywords} />
138+
<Hst.Json title="categories4" bind:value={summary4.categories} />
139+
<Hst.Json title="party4" bind:value={summary4.party} />
140+
<Hst.Text title="latestProgressDate4" bind:value={date4} />
141+
142+
<Hst.Select title="status5" bind:value={summary5.status} options={statusOptions} />
143+
<Hst.Json title="statements5" bind:value={summary5.statements} />
144+
<Hst.Json title="keywords5" bind:value={summary5.keywords} />
145+
<Hst.Json title="categories5" bind:value={summary5.categories} />
146+
<Hst.Json title="party5" bind:value={summary5.party} />
147+
<Hst.Text title="latestProgressDate5" bind:value={date5} />
148+
</svelte:fragment>
149+
</Hst.Story>

0 commit comments

Comments
 (0)