From 03d3fdd59f2effc623b74a7c80e9a690d5a6bb5c Mon Sep 17 00:00:00 2001 From: Ian Date: Wed, 15 Nov 2023 07:29:18 -0600 Subject: [PATCH] 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 --- .../stories/va-minimal-footer.stories.jsx | 25 ++++++++++++++++ packages/web-components/package.json | 2 +- .../src/assets/va-logo-white.svg | 1 + packages/web-components/src/components.d.ts | 13 +++++++++ .../test/va-minimal-footer.e2e.ts | 11 +++++++ .../test/va-minimal-footer.spec.tsx | 23 +++++++++++++++ .../va-minimal-footer/va-minimal-footer.scss | 15 ++++++++++ .../va-minimal-footer/va-minimal-footer.tsx | 29 +++++++++++++++++++ 8 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/stories/va-minimal-footer.stories.jsx create mode 100644 packages/web-components/src/assets/va-logo-white.svg create mode 100644 packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.e2e.ts create mode 100644 packages/web-components/src/components/va-minimal-footer/test/va-minimal-footer.spec.tsx create mode 100644 packages/web-components/src/components/va-minimal-footer/va-minimal-footer.scss create mode 100644 packages/web-components/src/components/va-minimal-footer/va-minimal-footer.tsx 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 ( + +
+ + + +
+ + ); + } +}