va-card-status: add new component

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

@@ -0,0 +1,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':
+    'Your mobile phone number is missing. Select "Add" to enter 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',
+};

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

@@ -70,4 +70,4 @@ export const withCallToAction = Template.bind(null);
 withCallToAction.args = {
   ...defaultArgs,
   'has-cta': true,
-};
+};

packages/storybook/types.d.ts

@@ -20,6 +20,7 @@ declare global {
       'va-button-icon': WCTypes.VaButtonIcon & IsElement;
       'va-button-pair': WCTypes.VaButtonPair & IsElement;
       'va-card': WCTypes.VaCard & IsElement;
+      'va-card-status': WCTypes.VaCardStatus & IsElement;
       'va-checkbox': WCTypes.VaCheckbox & IsElement & { value?: string };
       'va-checkbox-group': WCTypes.VaCheckboxGroup & IsElement;
       'va-combo-box': WCTypes.VaComboBox & IsElement & IsElement;

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

@@ -414,6 +414,49 @@ export namespace Components {
          */
         "showShadow"?: boolean;
     }
+    /**
+     * @componentName Card Status
+     * @maturityCategory use
+     * @maturityLevel deployed
+     */
+    interface VaCardStatus {
+        /**
+          * The error message to render.
+         */
+        "error"?: string;
+        /**
+          * Header level. Must be between 1 and 6
+         */
+        "headerLevel"?: number;
+        /**
+          * Text to be displayed in the card header.
+         */
+        "headerText": string;
+        /**
+          * Set the href for the card link.
+         */
+        "linkHref": string;
+        /**
+          * Set the text for the card link.
+         */
+        "linkText": string;
+        /**
+          * Sets the card to required and renders the (*Required) text.
+         */
+        "required"?: boolean;
+        /**
+          * Text to be displayed in the card subheader.  Heading level will be +1 of headerLevel Prop.
+         */
+        "subheaderText": string;
+        /**
+          * The status variant of the tag. Determines the background color and icon.
+         */
+        "tagStatus": 'info' | 'error';
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "tagText"?: string;
+    }
     /**
      * @nativeHandler onBlur
      * @componentName Checkbox
@@ -2859,6 +2902,17 @@ declare global {
         prototype: HTMLVaCardElement;
         new (): HTMLVaCardElement;
     };
+    /**
+     * @componentName Card Status
+     * @maturityCategory use
+     * @maturityLevel deployed
+     */
+    interface HTMLVaCardStatusElement extends Components.VaCardStatus, HTMLStencilElement {
+    }
+    var HTMLVaCardStatusElement: {
+        prototype: HTMLVaCardStatusElement;
+        new (): HTMLVaCardStatusElement;
+    };
     interface HTMLVaCheckboxElementEventMap {
         "vaChange": any;
         "component-library-analytics": any;
@@ -3878,6 +3932,7 @@ declare global {
         "va-button-pair": HTMLVaButtonPairElement;
         "va-button-segmented": HTMLVaButtonSegmentedElement;
         "va-card": HTMLVaCardElement;
+        "va-card-status": HTMLVaCardStatusElement;
         "va-checkbox": HTMLVaCheckboxElement;
         "va-checkbox-group": HTMLVaCheckboxGroupElement;
         "va-combo-box": HTMLVaComboBoxElement;
@@ -4401,6 +4456,49 @@ declare namespace LocalJSX {
          */
         "showShadow"?: boolean;
     }
+    /**
+     * @componentName Card Status
+     * @maturityCategory use
+     * @maturityLevel deployed
+     */
+    interface VaCardStatus {
+        /**
+          * The error message to render.
+         */
+        "error"?: string;
+        /**
+          * Header level. Must be between 1 and 6
+         */
+        "headerLevel"?: number;
+        /**
+          * Text to be displayed in the card header.
+         */
+        "headerText"?: string;
+        /**
+          * Set the href for the card link.
+         */
+        "linkHref"?: string;
+        /**
+          * Set the text for the card link.
+         */
+        "linkText"?: string;
+        /**
+          * Sets the card to required and renders the (*Required) text.
+         */
+        "required"?: boolean;
+        /**
+          * Text to be displayed in the card subheader.  Heading level will be +1 of headerLevel Prop.
+         */
+        "subheaderText"?: string;
+        /**
+          * The status variant of the tag. Determines the background color and icon.
+         */
+        "tagStatus"?: 'info' | 'error';
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "tagText"?: string;
+    }
     /**
      * @nativeHandler onBlur
      * @componentName Checkbox
@@ -6636,6 +6734,7 @@ declare namespace LocalJSX {
         "va-button-pair": VaButtonPair;
         "va-button-segmented": VaButtonSegmented;
         "va-card": VaCard;
+        "va-card-status": VaCardStatus;
         "va-checkbox": VaCheckbox;
         "va-checkbox-group": VaCheckboxGroup;
         "va-combo-box": VaComboBox;
@@ -6783,6 +6882,12 @@ declare module "@stencil/core" {
              * @maturityLevel deployed
              */
             "va-card": LocalJSX.VaCard & JSXBase.HTMLAttributes<HTMLVaCardElement>;
+            /**
+             * @componentName Card Status
+             * @maturityCategory use
+             * @maturityLevel deployed
+             */
+            "va-card-status": LocalJSX.VaCardStatus & JSXBase.HTMLAttributes<HTMLVaCardStatusElement>;
             /**
              * @nativeHandler onBlur
              * @componentName Checkbox