This repository is currently being migrated. It's locked while the migration is in progress.
-
Notifications
You must be signed in to change notification settings - Fork 20
Expand file tree
/
Copy pathva-card-status.stories.tsx
More file actions
112 lines (103 loc) · 2.59 KB
/
va-card-status.stories.tsx
File metadata and controls
112 lines (103 loc) · 2.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
const cardStatusDocs = getWebComponentDocs('va-card-status');
export default {
title: 'Components/Card Status',
id: 'components/va-card-status',
parameters: {
componentSubtitle: 'va-card-status web component',
docs: {
page: () => <StoryDocs storyDefault={Default} data={cardStatusDocs} />,
},
},
};
const defaultArgs = {
'header-level': 3,
'header-text': 'Mobile phone number',
'subheader-text': '',
'tag-status': 'info',
'tag-text': '',
'error': '',
'link-href': 'https://www.va.gov',
'link-text': 'Edit mobile phone number',
'required': false,
};
const Template = ({
'header-level': headerLevel,
'header-text': headerText,
'subheader-text': subheaderText,
'tag-status': tagStatus,
'tag-text': tagText,
'error': error,
'link-href': linkHref,
'link-text': linkText,
'required': required,
}) => (
<va-card-status
header-level={headerLevel}
header-text={headerText}
subheader-text={subheaderText}
tag-status={tagStatus}
tag-text={tagText}
error={error}
link-href={linkHref}
link-text={linkText}
required={required}
>
<p>123-867-5309</p>
</va-card-status>
);
export const Default = Template.bind(null);
Default.args = {
...defaultArgs,
};
Default.argTypes = propStructure(cardStatusDocs);
const TemplateErrorState = ({
'header-level': headerLevel,
'header-text': headerText,
'subheader-text': subheaderText,
'tag-status': tagStatus,
'tag-text': tagText,
'error': error,
'link-href': linkHref,
'link-text': linkText,
'required': required,
}) => (
<va-card-status
header-level={headerLevel}
header-text={headerText}
subheader-text={subheaderText}
tag-status={tagStatus}
tag-text={tagText}
error={error}
link-href={linkHref}
link-text={linkText}
required={required}
>
<p>Not provided</p>
</va-card-status>
);
export const missingContentState = TemplateErrorState.bind(null);
missingContentState.args = {
...defaultArgs,
'tag-text': 'Missing',
'tag-status': 'error',
'link-text': 'Add mobile phone number',
'required': true,
};
export const errorState = TemplateErrorState.bind(null);
errorState.args = {
...defaultArgs,
'error':
'You must add your mobile phone number',
'tag-text': 'Missing',
'tag-status': 'error',
'link-text': 'Add mobile phone number',
'required': true,
};
export const withInfoTagAndSubheader= Template.bind(null);
withInfoTagAndSubheader.args = {
...defaultArgs,
'tag-text': 'Status',
'required': true,
'subheader-text': 'Optional subheader',
};