Va-minimal-footer: add component (#937)

* add va-minimal-footer

* use svg

* add alt attr to img

* update tests

* update alt/title attrs and tests

* update story

* add empty destructuring

* restore index.html

* restore index.html

* remove .pngs not needed

* update styles

* keep padding consistent across screen sizes

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+
+const minimalFooterDocs = getWebComponentDocs('va-minimal-footer');
+
+export default {
+  title: 'Components/Minimal Footer',
+  id: 'components/va-minimal-footer',
+  parameters: {
+    componentSubtitle: `va-minimal-footer web component`,
+    docs: {
+      page: () => <StoryDocs data={minimalFooterDocs} />,
+    },
+  },
+};
+
+
+const Template = ({}) => {
+  return (
+    <va-minimal-footer />
+  );
+};
+
+export const Default = Template.bind(null);
+Default.argTypes = propStructure(minimalFooterDocs);

packages/web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "4.47.1",
+  "version": "4.48.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -568,6 +568,8 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface VaMinimalFooter {
+    }
     interface VaMinimalHeader {
         "header"?: string;
         "subheader"?: string;
@@ -1549,6 +1551,12 @@ declare global {
         prototype: HTMLVaMemorableDateElement;
         new (): HTMLVaMemorableDateElement;
     };
+    interface HTMLVaMinimalFooterElement extends Components.VaMinimalFooter, HTMLStencilElement {
+    }
+    var HTMLVaMinimalFooterElement: {
+        prototype: HTMLVaMinimalFooterElement;
+        new (): HTMLVaMinimalFooterElement;
+    };
     interface HTMLVaMinimalHeaderElement extends Components.VaMinimalHeader, HTMLStencilElement {
     }
     var HTMLVaMinimalHeaderElement: {
@@ -1722,6 +1730,7 @@ declare global {
         "va-loading-indicator": HTMLVaLoadingIndicatorElement;
         "va-maintenance-banner": HTMLVaMaintenanceBannerElement;
         "va-memorable-date": HTMLVaMemorableDateElement;
+        "va-minimal-footer": HTMLVaMinimalFooterElement;
         "va-minimal-header": HTMLVaMinimalHeaderElement;
         "va-modal": HTMLVaModalElement;
         "va-need-help": HTMLVaNeedHelpElement;
@@ -2424,6 +2433,8 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface VaMinimalFooter {
+    }
     interface VaMinimalHeader {
         "header"?: string;
         "subheader"?: string;
@@ -3274,6 +3285,7 @@ declare namespace LocalJSX {
         "va-loading-indicator": VaLoadingIndicator;
         "va-maintenance-banner": VaMaintenanceBanner;
         "va-memorable-date": VaMemorableDate;
+        "va-minimal-footer": VaMinimalFooter;
         "va-minimal-header": VaMinimalHeader;
         "va-modal": VaModal;
         "va-need-help": VaNeedHelp;
@@ -3327,6 +3339,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-footer": LocalJSX.VaMinimalFooter & JSXBase.HTMLAttributes<HTMLVaMinimalFooterElement>;
             "va-minimal-header": LocalJSX.VaMinimalHeader & JSXBase.HTMLAttributes<HTMLVaMinimalHeaderElement>;
             "va-modal": LocalJSX.VaModal & JSXBase.HTMLAttributes<HTMLVaModalElement>;
             "va-need-help": LocalJSX.VaNeedHelp & JSXBase.HTMLAttributes<HTMLVaNeedHelpElement>;

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

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

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

@@ -0,0 +1,23 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { VAMinimalFooter } from '../va-minimal-footer';
+
+describe('va-minimal-footer', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [VAMinimalFooter],
+      html: `<va-minimal-footer />`,
+    });
+    expect(page.root).toEqualHtml(`
+      <va-minimal-footer>
+        <mock:shadow-root>
+          <div class="va-footer">
+            <a href="/" title="Go to VA.gov">
+              <img alt="VA logo and Seal, U.S. Department of Veterans Affairs" class="va-logo" src="[object Object]">
+            </a>
+          </div>
+        </mock:shadow-root>
+      </va-minimal-footer>
+    `);
+  });
+
+});

packages/web-components/src/components/va-minimal-footer/va-minimal-footer.scss

@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-primary-darkest);
+}
+
+.va-footer {
+  box-sizing: border-box;
+  width: 1000px;
+  padding: 32px 8px;
+
+  img.va-logo {
+    width: 200px;
+  }
+}

packages/web-components/src/components/va-minimal-footer/va-minimal-footer.tsx

@@ -0,0 +1,29 @@
+import { Component, Host, h } from '@stencil/core';
+import vaSeal from '../../assets/va-logo-white.svg';
+
+/**
+ * @componentName Minimal Footer
+ * @maturityCategory caution
+ * @maturityLevel candidate
+ */
+
+@Component({
+  tag: 'va-minimal-footer',
+  styleUrl: 'va-minimal-footer.scss',
+  shadow: true,
+})
+export class VAMinimalFooter {
+
+  render() {
+
+    return (
+      <Host>
+        <div class="va-footer">
+          <a href="/" title="Go to VA.gov" >
+            <img class="va-logo" src={vaSeal} alt="VA logo and Seal, U.S. Department of Veterans Affairs"/>
+          </a>
+        </div>
+      </Host>
+    );
+  }
+}