Add Minimal header component

packages/storybook/stories/va-minimal-header.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs, componentStructure } from './wc-helpers';
+
+const minimalHeaderDocs = getWebComponentDocs('va-minimal-header');
+const vaCrisisLineModal = getWebComponentDocs('va-crisis-line-modal');
+
+export default {
+  title: 'Components/MinimalHeader',
+  id: 'components/va-minimal-header',
+  subcomponents: componentStructure(vaCrisisLineModal),
+  parameters: {
+    componentSubtitle: `va-minimal-header web component`,
+    docs: {
+      page: () => <StoryDocs data={minimalHeaderDocs} />,
+    },
+  },
+};
+
+const defaultArgs = {
+  header: "Authorization To Disclose Personal Information To A Third Party",
+  subheader: ""
+};
+const Template = ({ header, subheader }) => {
+  return (
+    <va-minimal-header
+      header={header}
+      subheader={subheader}
+    />
+  );
+};
+
+export const Default = Template.bind(null);
+Default.args = {
+  ...defaultArgs,
+};
+Default.argTypes = propStructure(minimalHeaderDocs);
+
+export const withSubheader = Template.bind(null);
+withSubheader.args = {
+  ...defaultArgs,
+  subheader: "(VA Form 21-0845)",
+};

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

@@ -336,6 +336,8 @@ export namespace Components {
          */
         "uswds"?: boolean;
     }
+    interface VaCrisisLineModal {
+    }
     interface VaDate {
         /**
           * Whether or not an analytics event will be fired.
@@ -562,6 +564,10 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface VaMinimalHeader {
+        "header"?: string;
+        "subheader"?: string;
+    }
     interface VaModal {
         /**
           * Additional DOM-nodes that should not be hidden from screen readers.  Useful when an open modal shouldn't hide all content behind the overlay.
@@ -1439,6 +1445,12 @@ declare global {
         prototype: HTMLVaCheckboxGroupElement;
         new (): HTMLVaCheckboxGroupElement;
     };
+    interface HTMLVaCrisisLineModalElement extends Components.VaCrisisLineModal, HTMLStencilElement {
+    }
+    var HTMLVaCrisisLineModalElement: {
+        prototype: HTMLVaCrisisLineModalElement;
+        new (): HTMLVaCrisisLineModalElement;
+    };
     interface HTMLVaDateElement extends Components.VaDate, HTMLStencilElement {
     }
     var HTMLVaDateElement: {
@@ -1487,6 +1499,12 @@ declare global {
         prototype: HTMLVaMemorableDateElement;
         new (): HTMLVaMemorableDateElement;
     };
+    interface HTMLVaMinimalHeaderElement extends Components.VaMinimalHeader, HTMLStencilElement {
+    }
+    var HTMLVaMinimalHeaderElement: {
+        prototype: HTMLVaMinimalHeaderElement;
+        new (): HTMLVaMinimalHeaderElement;
+    };
     interface HTMLVaModalElement extends Components.VaModal, HTMLStencilElement {
     }
     var HTMLVaModalElement: {
@@ -1639,6 +1657,7 @@ declare global {
         "va-card": HTMLVaCardElement;
         "va-checkbox": HTMLVaCheckboxElement;
         "va-checkbox-group": HTMLVaCheckboxGroupElement;
+        "va-crisis-line-modal": HTMLVaCrisisLineModalElement;
         "va-date": HTMLVaDateElement;
         "va-featured-content": HTMLVaFeaturedContentElement;
         "va-file-input": HTMLVaFileInputElement;
@@ -1647,6 +1666,7 @@ declare global {
         "va-loading-indicator": HTMLVaLoadingIndicatorElement;
         "va-maintenance-banner": HTMLVaMaintenanceBannerElement;
         "va-memorable-date": HTMLVaMemorableDateElement;
+        "va-minimal-header": HTMLVaMinimalHeaderElement;
         "va-modal": HTMLVaModalElement;
         "va-need-help": HTMLVaNeedHelpElement;
         "va-notification": HTMLVaNotificationElement;
@@ -2067,6 +2087,8 @@ declare namespace LocalJSX {
          */
         "uswds"?: boolean;
     }
+    interface VaCrisisLineModal {
+    }
     interface VaDate {
         /**
           * Whether or not an analytics event will be fired.
@@ -2341,6 +2363,10 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface VaMinimalHeader {
+        "header"?: string;
+        "subheader"?: string;
+    }
     interface VaModal {
         /**
           * Additional DOM-nodes that should not be hidden from screen readers.  Useful when an open modal shouldn't hide all content behind the overlay.
@@ -3124,6 +3150,7 @@ declare namespace LocalJSX {
         "va-card": VaCard;
         "va-checkbox": VaCheckbox;
         "va-checkbox-group": VaCheckboxGroup;
+        "va-crisis-line-modal": VaCrisisLineModal;
         "va-date": VaDate;
         "va-featured-content": VaFeaturedContent;
         "va-file-input": VaFileInput;
@@ -3132,6 +3159,7 @@ declare namespace LocalJSX {
         "va-loading-indicator": VaLoadingIndicator;
         "va-maintenance-banner": VaMaintenanceBanner;
         "va-memorable-date": VaMemorableDate;
+        "va-minimal-header": VaMinimalHeader;
         "va-modal": VaModal;
         "va-need-help": VaNeedHelp;
         "va-notification": VaNotification;
@@ -3174,6 +3202,7 @@ declare module "@stencil/core" {
             "va-card": LocalJSX.VaCard & JSXBase.HTMLAttributes<HTMLVaCardElement>;
             "va-checkbox": LocalJSX.VaCheckbox & JSXBase.HTMLAttributes<HTMLVaCheckboxElement>;
             "va-checkbox-group": LocalJSX.VaCheckboxGroup & JSXBase.HTMLAttributes<HTMLVaCheckboxGroupElement>;
+            "va-crisis-line-modal": LocalJSX.VaCrisisLineModal & JSXBase.HTMLAttributes<HTMLVaCrisisLineModalElement>;
             "va-date": LocalJSX.VaDate & JSXBase.HTMLAttributes<HTMLVaDateElement>;
             "va-featured-content": LocalJSX.VaFeaturedContent & JSXBase.HTMLAttributes<HTMLVaFeaturedContentElement>;
             "va-file-input": LocalJSX.VaFileInput & JSXBase.HTMLAttributes<HTMLVaFileInputElement>;
@@ -3182,6 +3211,7 @@ declare module "@stencil/core" {
             "va-loading-indicator": LocalJSX.VaLoadingIndicator & JSXBase.HTMLAttributes<HTMLVaLoadingIndicatorElement>;
             "va-maintenance-banner": LocalJSX.VaMaintenanceBanner & JSXBase.HTMLAttributes<HTMLVaMaintenanceBannerElement>;
             "va-memorable-date": LocalJSX.VaMemorableDate & JSXBase.HTMLAttributes<HTMLVaMemorableDateElement>;
+            "va-minimal-header": LocalJSX.VaMinimalHeader & JSXBase.HTMLAttributes<HTMLVaMinimalHeaderElement>;
             "va-modal": LocalJSX.VaModal & JSXBase.HTMLAttributes<HTMLVaModalElement>;
             "va-need-help": LocalJSX.VaNeedHelp & JSXBase.HTMLAttributes<HTMLVaNeedHelpElement>;
             "va-notification": LocalJSX.VaNotification & JSXBase.HTMLAttributes<HTMLVaNotificationElement>;

packages/web-components/src/components/va-minimal-header/test/va-minimal-header.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('va-minimal-header', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-minimal-header></va-minimal-header>');
+
+    const element = await page.find('va-minimal-header');
+    expect(element).toHaveClass('hydrated');
+  });
+});

packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx

@@ -0,0 +1,51 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { VaMinimalHeader } from '../va-minimal-header';
+
+describe('va-minimal-header', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [VaMinimalHeader],
+      html: `<va-minimal-header header='Header'></va-minimal-header>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <va-minimal-header header='Header'>
+        <mock:shadow-root>
+          <va-official-gov-banner></va-official-gov-banner>
+          <va-crisis-line-modal></va-crisis-line-modal>
+          <div class="va-flex">
+            <a href="/">
+              <div class="va-logo"></div>
+            </a>
+            <div class="header-container">
+              <h1>Header</h1>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </va-minimal-header>
+    `);
+  });
+
+  it('renders with a subheader', async () => {
+    const page = await newSpecPage({
+      components: [VaMinimalHeader],
+      html: `<va-minimal-header header='Header' subheader='Subheader'></va-minimal-header>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <va-minimal-header header='Header' subheader='Subheader'>
+        <mock:shadow-root>
+          <va-official-gov-banner></va-official-gov-banner>
+          <va-crisis-line-modal></va-crisis-line-modal>
+          <div class="va-flex">
+            <a href="/">
+              <div class="va-logo"></div>
+            </a>
+            <div class="header-container">
+              <h1>Header</h1>
+              <h2>Subheader</h2>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </va-minimal-header>
+    `);
+  });
+});