Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

Commit 48b2815

Browse files
ediioterojamigibbs
ediiotero
and
jamigibbs
authored
va-card-status: add new component (#1862)
* setting up card status comp * remove card-status comp and move changes into va-card comp * reset va-card and added new va-card-status * adding tests * update heading style and added va-link-action, updated tests * Removed slots, updated stories and tests * Update for 54.4.0 release * removing a story example * update component header and added subheader story * update card status stories * change error-message to error and update tests * update story names and links within cards * merge with main * Change heading to header, and updated tests * merge with main updates to index file * fix header moving when level is changed * update string for messageAriaDescribedby * add sr-only text to card header and update error message * update maturityCategory and maturityLevel --------- Signed-off-by: ediiotero <e.otero81@gmail.com> Co-authored-by: Jami Gibbs <jami.gibbs@adhocteam.us>
1 parent d1c7636 commit 48b2815

9 files changed

Lines changed: 543 additions & 3 deletions

File tree

‎packages/storybook/stories/va-card-status.stories.tsx‎

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

‎packages/storybook/stories/va-card.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,4 @@ export const withCallToAction = Template.bind(null);
7070
withCallToAction.args = {
7171
...defaultArgs,
7272
'has-cta': true,
73-
};
73+
};

‎packages/storybook/types.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ declare global {
2020
'va-button-icon': WCTypes.VaButtonIcon & IsElement;
2121
'va-button-pair': WCTypes.VaButtonPair & IsElement;
2222
'va-card': WCTypes.VaCard & IsElement;
23+
'va-card-status': WCTypes.VaCardStatus & IsElement;
2324
'va-checkbox': WCTypes.VaCheckbox & IsElement & { value?: string };
2425
'va-checkbox-group': WCTypes.VaCheckboxGroup & IsElement;
2526
'va-combo-box': WCTypes.VaComboBox & IsElement & IsElement;

‎packages/web-components/src/components.d.ts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,49 @@ export namespace Components {
414414
*/
415415
"showShadow"?: boolean;
416416
}
417+
/**
418+
* @componentName Card Status
419+
* @maturityCategory use
420+
* @maturityLevel deployed
421+
*/
422+
interface VaCardStatus {
423+
/**
424+
* The error message to render.
425+
*/
426+
"error"?: string;
427+
/**
428+
* Header level. Must be between 1 and 6
429+
*/
430+
"headerLevel"?: number;
431+
/**
432+
* Text to be displayed in the card header.
433+
*/
434+
"headerText": string;
435+
/**
436+
* Set the href for the card link.
437+
*/
438+
"linkHref": string;
439+
/**
440+
* Set the text for the card link.
441+
*/
442+
"linkText": string;
443+
/**
444+
* Sets the card to required and renders the (*Required) text.
445+
*/
446+
"required"?: boolean;
447+
/**
448+
* Text to be displayed in the card subheader. Heading level will be +1 of headerLevel Prop.
449+
*/
450+
"subheaderText": string;
451+
/**
452+
* The status variant of the tag. Determines the background color and icon.
453+
*/
454+
"tagStatus": 'info' | 'error';
455+
/**
456+
* The text to be displayed in the tag element.
457+
*/
458+
"tagText"?: string;
459+
}
417460
/**
418461
* @nativeHandler onBlur
419462
* @componentName Checkbox
@@ -2859,6 +2902,17 @@ declare global {
28592902
prototype: HTMLVaCardElement;
28602903
new (): HTMLVaCardElement;
28612904
};
2905+
/**
2906+
* @componentName Card Status
2907+
* @maturityCategory use
2908+
* @maturityLevel deployed
2909+
*/
2910+
interface HTMLVaCardStatusElement extends Components.VaCardStatus, HTMLStencilElement {
2911+
}
2912+
var HTMLVaCardStatusElement: {
2913+
prototype: HTMLVaCardStatusElement;
2914+
new (): HTMLVaCardStatusElement;
2915+
};
28622916
interface HTMLVaCheckboxElementEventMap {
28632917
"vaChange": any;
28642918
"component-library-analytics": any;
@@ -3878,6 +3932,7 @@ declare global {
38783932
"va-button-pair": HTMLVaButtonPairElement;
38793933
"va-button-segmented": HTMLVaButtonSegmentedElement;
38803934
"va-card": HTMLVaCardElement;
3935+
"va-card-status": HTMLVaCardStatusElement;
38813936
"va-checkbox": HTMLVaCheckboxElement;
38823937
"va-checkbox-group": HTMLVaCheckboxGroupElement;
38833938
"va-combo-box": HTMLVaComboBoxElement;
@@ -4401,6 +4456,49 @@ declare namespace LocalJSX {
44014456
*/
44024457
"showShadow"?: boolean;
44034458
}
4459+
/**
4460+
* @componentName Card Status
4461+
* @maturityCategory use
4462+
* @maturityLevel deployed
4463+
*/
4464+
interface VaCardStatus {
4465+
/**
4466+
* The error message to render.
4467+
*/
4468+
"error"?: string;
4469+
/**
4470+
* Header level. Must be between 1 and 6
4471+
*/
4472+
"headerLevel"?: number;
4473+
/**
4474+
* Text to be displayed in the card header.
4475+
*/
4476+
"headerText"?: string;
4477+
/**
4478+
* Set the href for the card link.
4479+
*/
4480+
"linkHref"?: string;
4481+
/**
4482+
* Set the text for the card link.
4483+
*/
4484+
"linkText"?: string;
4485+
/**
4486+
* Sets the card to required and renders the (*Required) text.
4487+
*/
4488+
"required"?: boolean;
4489+
/**
4490+
* Text to be displayed in the card subheader. Heading level will be +1 of headerLevel Prop.
4491+
*/
4492+
"subheaderText"?: string;
4493+
/**
4494+
* The status variant of the tag. Determines the background color and icon.
4495+
*/
4496+
"tagStatus"?: 'info' | 'error';
4497+
/**
4498+
* The text to be displayed in the tag element.
4499+
*/
4500+
"tagText"?: string;
4501+
}
44044502
/**
44054503
* @nativeHandler onBlur
44064504
* @componentName Checkbox
@@ -6636,6 +6734,7 @@ declare namespace LocalJSX {
66366734
"va-button-pair": VaButtonPair;
66376735
"va-button-segmented": VaButtonSegmented;
66386736
"va-card": VaCard;
6737+
"va-card-status": VaCardStatus;
66396738
"va-checkbox": VaCheckbox;
66406739
"va-checkbox-group": VaCheckboxGroup;
66416740
"va-combo-box": VaComboBox;
@@ -6783,6 +6882,12 @@ declare module "@stencil/core" {
67836882
* @maturityLevel deployed
67846883
*/
67856884
"va-card": LocalJSX.VaCard & JSXBase.HTMLAttributes<HTMLVaCardElement>;
6885+
/**
6886+
* @componentName Card Status
6887+
* @maturityCategory use
6888+
* @maturityLevel deployed
6889+
*/
6890+
"va-card-status": LocalJSX.VaCardStatus & JSXBase.HTMLAttributes<HTMLVaCardStatusElement>;
67866891
/**
67876892
* @nativeHandler onBlur
67886893
* @componentName Checkbox

0 commit comments

Comments
 (0)