diff --git a/packages/storybook/stories/va-minimal-footer.stories.jsx b/packages/storybook/stories/va-minimal-footer.stories.jsx
new file mode 100644
index 000000000..995fb409f
--- /dev/null
+++ b/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: () => ,
+ },
+ },
+};
+
+
+const Template = ({}) => {
+ return (
+
+ );
+};
+
+export const Default = Template.bind(null);
+Default.argTypes = propStructure(minimalFooterDocs);
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 874d3b7bf..9003b1618 100644
--- a/packages/web-components/package.json
+++ b/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",
diff --git a/packages/web-components/src/assets/va-logo-white.svg b/packages/web-components/src/assets/va-logo-white.svg
new file mode 100644
index 000000000..cf1b5e875
--- /dev/null
+++ b/packages/web-components/src/assets/va-logo-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
index c0321160c..c4a506c7b 100644
--- a/packages/web-components/src/components.d.ts
+++ b/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;
"va-maintenance-banner": LocalJSX.VaMaintenanceBanner & JSXBase.HTMLAttributes;
"va-memorable-date": LocalJSX.VaMemorableDate & JSXBase.HTMLAttributes;
+ "va-minimal-footer": LocalJSX.VaMinimalFooter & JSXBase.HTMLAttributes;
"va-minimal-header": LocalJSX.VaMinimalHeader & JSXBase.HTMLAttributes;
"va-modal": LocalJSX.VaModal & JSXBase.HTMLAttributes;
"va-need-help": LocalJSX.VaNeedHelp & JSXBase.HTMLAttributes;
diff --git a/packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.e2e.ts b/packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.e2e.ts
new file mode 100644
index 000000000..8e82027bd
--- /dev/null
+++ b/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('');
+
+ const element = await page.find('va-minimal-footer');
+ expect(element).toHaveClass('hydrated');
+ });
+});
\ No newline at end of file
diff --git a/packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.spec.tsx b/packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.spec.tsx
new file mode 100644
index 000000000..1101e0cbd
--- /dev/null
+++ b/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: ``,
+ });
+ expect(page.root).toEqualHtml(`
+
+
+
+
+
+ `);
+ });
+
+});
diff --git a/packages/web-components/src/components/va-minimal-footer/va-minimal-footer.scss b/packages/web-components/src/components/va-minimal-footer/va-minimal-footer.scss
new file mode 100644
index 000000000..89aef3107
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/packages/web-components/src/components/va-minimal-footer/va-minimal-footer.tsx b/packages/web-components/src/components/va-minimal-footer/va-minimal-footer.tsx
new file mode 100644
index 000000000..b19995fb2
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ }
+}
+
+ 
+
+