component-library/packages/storybook/stories/va-card-status.stories.tsx at 0e9693378fefa7dea9524481cfe7106289df9241 · department-of-veterans-affairs/component-library · GitHub

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',
};