va-card-status: add new component

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

@@ -0,0 +1,124 @@
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+
+const cardDocs = 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={cardDocs} />,
+    },
+  },
+};
+
+const defaultArgs = {
+  'heading-level': 3,
+  'heading-text': 'Card Status Heading',
+  'tag-status': 'informational',
+  'tag-text': '',
+  'error-message': '',
+  'link-href': '',
+  'link-text': '',
+  'show-sub-header': false,
+  'show-footer-slot': false,
+  'required': false,
+};
+
+const Template = ({
+  'heading-level': headingLevel,
+  'heading-text': headingText,
+  'tag-status': tagStatus,
+  'tag-text': tagText,
+  'error-message': errorMessage,
+  'link-href': linkHref,
+  'link-text': linkText,
+  'show-sub-header': showSubHeader,
+  'show-footer-slot': showFooterSlot,
+  'required': required,
+}) => (
+  <va-card-status
+    heading-level={headingLevel}
+    heading-text={headingText}
+    tag-status={tagStatus}
+    tag-text={tagText}
+    error-message={errorMessage}
+    link-href={linkHref}
+    link-text={linkText}
+    required={required}
+  >
+    <h3 slot="header" className="vads-u-margin-y--1p5">
+      <span className="vads-c-eyebrow">Eyebrow Title</span>
+      Heading slot
+    </h3>
+    {showSubHeader && (
+      <h4 slot="subHeader" className="vads-u-margin-top--1p5">
+        Subheader Optional
+      </h4>
+    )}
+    <div>
+      <p>Example card content</p>
+    </div>
+    {showFooterSlot && (
+      <div slot="footer" className="vads-u-margin-top--3">
+        <va-button text="Update" />
+        <va-button secondary text="Delete" />
+      </div>
+    )}
+  </va-card-status>
+);
+
+export const Default = Template.bind(null);
+Default.args = {
+  ...defaultArgs,
+};
+Default.argTypes = propStructure(cardDocs);
+
+export const withRequired = Template.bind(null);
+withRequired.args = {
+  ...defaultArgs,
+  'required': true,
+};
+
+export const withTag = Template.bind(null);
+withTag.args = {
+  ...defaultArgs,
+  'tag-text': 'Status',
+  'tag-status': 'informational',
+};
+
+export const withErrorMessageAndRequired = Template.bind(null);
+withErrorMessageAndRequired.args = {
+  ...defaultArgs,
+  'error-message': 'This is an error message.',
+  'required': true,
+};
+
+export const withErrorTagAndLink = Template.bind(null);
+withErrorTagAndLink.args = {
+  ...defaultArgs,
+  'error-message': 'This is an error message.',
+  'tag-status': 'error',
+  'tag-text': 'Missing',
+  'link-href': 'https://www.va.gov',
+  'link-text': 'Link to more info',
+};
+
+export const headingSlot = Template.bind(null);
+headingSlot.args = {
+  ...defaultArgs,
+  'heading-text': '',
+};
+
+export const subHeadingSlot = Template.bind(null);
+subHeadingSlot.args = {
+  ...defaultArgs,
+  'show-sub-header': true,
+};
+
+export const footerSlot = Template.bind(null);
+footerSlot.args = {
+  ...defaultArgs,
+  'show-footer-slot': true,
+};

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,45 @@ export namespace Components {
          */
         "showShadow"?: boolean;
     }
+    /**
+     * @componentName Card Status
+     * @maturityCategory use
+     * @maturityLevel deployed
+     */
+    interface VaCardStatus {
+        /**
+          * The error message to render.
+         */
+        "errorMessage"?: string;
+        /**
+          * Header level. Must be between 1 and 6
+         */
+        "headingLevel"?: number;
+        /**
+          * Text to be displayed in the card header.
+         */
+        "headingText"?: 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;
+        /**
+          * The status variant of the tag. Determines the background color and icon.
+         */
+        "tagStatus": 'informational' | 'error';
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "tagText"?: string;
+    }
     /**
      * @nativeHandler onBlur
      * @componentName Checkbox
@@ -2839,6 +2878,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;
@@ -3858,6 +3908,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;
@@ -4381,6 +4432,45 @@ declare namespace LocalJSX {
          */
         "showShadow"?: boolean;
     }
+    /**
+     * @componentName Card Status
+     * @maturityCategory use
+     * @maturityLevel deployed
+     */
+    interface VaCardStatus {
+        /**
+          * The error message to render.
+         */
+        "errorMessage"?: string;
+        /**
+          * Header level. Must be between 1 and 6
+         */
+        "headingLevel"?: number;
+        /**
+          * Text to be displayed in the card header.
+         */
+        "headingText"?: 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;
+        /**
+          * The status variant of the tag. Determines the background color and icon.
+         */
+        "tagStatus"?: 'informational' | 'error';
+        /**
+          * The text to be displayed in the tag element.
+         */
+        "tagText"?: string;
+    }
     /**
      * @nativeHandler onBlur
      * @componentName Checkbox
@@ -6596,6 +6686,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;
@@ -6743,6 +6834,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