diff --git a/packages/core/package.json b/packages/core/package.json index 59c9f9d6b..226cbea53 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@department-of-veterans-affairs/component-library", "description": "VA.gov component library. Includes React and web components.", - "version": "25.0.0", + "version": "30.0.0", "license": "MIT", "scripts": { "build": "webpack" @@ -11,6 +11,7 @@ "*.js" ], "main": "dist/app.bundle.js", + "types": "dist/components/types/index.d.ts", "module": "src/main.js", "dependencies": { "@department-of-veterans-affairs/react-components": "workspace:*", diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js index db79c1758..eb08df1c0 100644 --- a/packages/core/webpack.config.js +++ b/packages/core/webpack.config.js @@ -62,6 +62,11 @@ module.exports = { to: './', context: path.resolve(__dirname, '../', 'web-components/dist'), }, + { + from: '*', + to: './components/types', + context: path.resolve(__dirname, '../', 'web-components/dist/types'), + }, ], }), ], diff --git a/packages/design-system-dashboard-cli/README.md b/packages/design-system-dashboard-cli/README.md index 54da8efb8..9e1399be7 100644 --- a/packages/design-system-dashboard-cli/README.md +++ b/packages/design-system-dashboard-cli/README.md @@ -75,6 +75,8 @@ If you supply search terms, it'll filter the result. ![filtered result](./img/filtered-result.png) +If you supply the string `uswds` as a search term, it'll return all web component and react binding usages where the uswds prop is being used. + **Note:** Search terms are case sensitive! Search terms may be regex. diff --git a/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html b/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html index 11c93513b..94cd19b69 100644 --- a/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html +++ b/packages/design-system-dashboard-cli/coverage/lcov-report/write-react-owners-to-csv.js.html @@ -330,12 +330,13 @@

All files write-react-owners-to-csv.js

const today = require('./today');   const componentsToKeep = [ + 'AlertBox', 'ExpandingGroup', 'IconSearch', 'TextInput', ];   -const hasMigrationScript = []; +const hasMigrationScript = ['AlertBox'];   function cleanPath(pathToClean) { const cwd = process.cwd(); diff --git a/packages/design-system-dashboard-cli/src/find-ds-components.js b/packages/design-system-dashboard-cli/src/find-ds-components.js index de2328d2e..45378d932 100644 --- a/packages/design-system-dashboard-cli/src/find-ds-components.js +++ b/packages/design-system-dashboard-cli/src/find-ds-components.js @@ -143,6 +143,9 @@ function findUsedReactComponents(vwModules, regexPattern) { * Search vets-website and the content build for design system components. * * @param searchStrings {string[]} - The components to display usage for + * + * Passing in the string 'uswds' will output a list of all web components and + * web component react bindings where the uswds prop is used */ function findComponents(searchStrings) { const vwModules = readAllModules(`${repos['vets-website']}/src`); @@ -163,18 +166,30 @@ function findComponents(searchStrings) { ); const wcTagRegex = /<(va-[^\s>]+)/gms; - const vwWebComponents = search(vwModules, wcTagRegex); - const contentBuildWC = search(contentTemplates, wcTagRegex); + const wcUswds3Regex = /<(Va[^\s]+|va-[^\s]+)(\s|\n)[^>]*?uswds/gms; - const vwComponents = [ - ...usedReactComponents, - ...vwWebComponents, - ...usedReactBindings, - ]; + let vwWebComponents; + let contentBuildWC; + let vwComponents; - const data = tallyResults(vwComponents, contentBuildWC); + if (searchStrings?.includes('uswds')) { + vwWebComponents = search(vwModules, wcUswds3Regex); + contentBuildWC = search(contentTemplates, wcUswds3Regex); + vwComponents = [...vwWebComponents]; + } else { + vwWebComponents = search(vwModules, wcTagRegex); + contentBuildWC = search(contentTemplates, wcTagRegex); + vwComponents = [ + ...usedReactComponents, + ...vwWebComponents, + ...usedReactBindings, + ]; + } - return filterSearchedComponents(data, searchStrings); + const data = tallyResults(vwComponents, contentBuildWC); + return searchStrings?.includes('uswds') + ? data + : filterSearchedComponents(data, searchStrings); } if (require.main === module) { diff --git a/packages/design-system-dashboard-cli/src/search-files.js b/packages/design-system-dashboard-cli/src/search-files.js index 8fb6c6f19..3c5bba33b 100644 --- a/packages/design-system-dashboard-cli/src/search-files.js +++ b/packages/design-system-dashboard-cli/src/search-files.js @@ -26,6 +26,8 @@ function readAllModules(rootDir) { `${rootDir}/**/_mock-form/**`, `${rootDir}/**/*.unit.@(js|jsx)`, `${rootDir}/**/*.spec.@(js|jsx)`, + `${rootDir}/**/ds-playground/**`, + `${rootDir}/**/ds-v3-playground/**`, ], }); diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 672391016..e69227109 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/react-components", - "version": "21.0.0", + "version": "25.0.0", "description": "VA.gov component library in React", "keywords": [ "react", diff --git a/packages/storybook/stories/additional-docs.js b/packages/storybook/stories/additional-docs.js index d76444325..d97bea15b 100644 --- a/packages/storybook/stories/additional-docs.js +++ b/packages/storybook/stories/additional-docs.js @@ -46,22 +46,10 @@ export const additionalDocs = { maturityCategory: USE, maturityLevel: DEPLOYED, }, - 'Banner - Maintenance': { - maturityCategory: USE, - maturityLevel: DEPLOYED, - guidanceHref: 'banner/maintenance', - guidanceName: 'Banner - maintenance', - }, 'Modal - React': { maturityCategory: DONT_USE, maturityLevel: DEPRECATED, }, - 'OMB info - React': { - guidanceHref: 'omb-info', - guidanceName: 'OMB info', - maturityCategory: DONT_USE, - maturityLevel: DEPRECATED, - }, 'Privacy agreement - React': { maturityCategory: CAUTION, maturityLevel: AVAILABLE, diff --git a/packages/storybook/stories/va-crisis-line-modal.stories.jsx b/packages/storybook/stories/va-crisis-line-modal.stories.jsx new file mode 100644 index 000000000..e12bcb4bb --- /dev/null +++ b/packages/storybook/stories/va-crisis-line-modal.stories.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers'; + +const crisisLineModalDocs = getWebComponentDocs('va-crisis-line-modal'); + +export default { + title: `Components/Crisis Line Modal`, + id: 'components/va-crisis-line-modal', + parameters: { + componentSubtitle: 'va-crisis-line-modal web component', + docs: { + page: () => , + }, + }, +}; + +const Template = ({}) => { + return ; +}; + +export const Default = Template.bind(null); +Default.argTypes = propStructure(crisisLineModalDocs); diff --git a/packages/storybook/stories/va-minimal-header.stories.jsx b/packages/storybook/stories/va-minimal-header.stories.jsx new file mode 100644 index 000000000..26c9b8cec --- /dev/null +++ b/packages/storybook/stories/va-minimal-header.stories.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { getWebComponentDocs, propStructure, StoryDocs, componentStructure } from './wc-helpers'; + +const minimalHeaderDocs = getWebComponentDocs('va-minimal-header'); + +export default { + title: 'Components/Minimal Header', + id: 'components/va-minimal-header', + parameters: { + componentSubtitle: `va-minimal-header web component`, + docs: { + page: () => , + }, + }, +}; + +const defaultArgs = { + header: "Authorization To Disclose Personal Information To A Third Party", + subheader: "" +}; +const Template = ({ header, subheader }) => { + return ( + + ); +}; + +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)", +}; \ No newline at end of file diff --git a/packages/storybook/stories/va-modal-uswds.stories.jsx b/packages/storybook/stories/va-modal-uswds.stories.jsx index 5edb8a818..46366e0e8 100644 --- a/packages/storybook/stories/va-modal-uswds.stories.jsx +++ b/packages/storybook/stories/va-modal-uswds.stories.jsx @@ -229,98 +229,3 @@ export const WithNestedWebComponents = ({ }; WithNestedWebComponents.args = defaultArgs; -const CrisisTemplate = ({ - 'click-to-close': clickToClose, - 'disable-analytics': disableAnalytics, - large, - 'modal-title': modalTitle, - 'initial-focus-selector': initialFocusSelector, - primaryButtonClick, - 'primary-button-text': primaryButtonText, - secondaryButtonClick, - 'secondary-button-text': secondaryButtonText, - status, - visible, - uswds, - forcedModal, -}) => { - const [isVisible, setIsVisible] = useState(visible); - const onCloseEvent = () => setIsVisible(!isVisible); - const openModal = () => setIsVisible(true); - return ( -
-
-
- -
-
- -
-
- -

- If you are in crisis or having thoughts of suicide, visit{' '} - - VeteransCrisisLine.net - {' '} - for more resources. -

-
-
- -
- ); -}; - -export const CrisisLineModal = CrisisTemplate.bind(null); -CrisisLineModal.args = { - ...defaultArgs, - 'primaryButtonClick': undefined, - 'primary-button-text': undefined, - 'secondaryButtonClick': undefined, - 'secondary-button-text': undefined, - 'modal-title': 'Get help from Veterans Crisis Line', -}; diff --git a/packages/storybook/stories/va-modal.stories.jsx b/packages/storybook/stories/va-modal.stories.jsx index 48f88bceb..26be5d355 100644 --- a/packages/storybook/stories/va-modal.stories.jsx +++ b/packages/storybook/stories/va-modal.stories.jsx @@ -177,98 +177,6 @@ export const WithNestedWebComponents = ({ }; WithNestedWebComponents.args = defaultArgs; -const CrisisTemplate = ({ - 'click-to-close': clickToClose, - 'disable-analytics': disableAnalytics, - large, - 'modal-title': modalTitle, - 'initial-focus-selector': initialFocusSelector, - primaryButtonClick, - 'primary-button-text': primaryButtonText, - secondaryButtonClick, - 'secondary-button-text': secondaryButtonText, - status, - visible, -}) => { - const [isVisible, setIsVisible] = useState(visible); - const onCloseEvent = () => setIsVisible(!isVisible); - const openModal = () => setIsVisible(true); - return ( -
-
-
- -
-
- -
-
- -

- If you are in crisis or having thoughts of suicide, visit{' '} - - VeteransCrisisLine.net - {' '} - for more resources. -

-
-
- -
- ); -}; - -export const CrisisLineModal = CrisisTemplate.bind(null); -CrisisLineModal.args = { - ...defaultArgs, - 'primaryButtonClick': undefined, - 'primary-button-text': undefined, - 'secondaryButtonClick': undefined, - 'secondary-button-text': undefined, - 'modal-title': 'Get help from Veterans Crisis Line', -}; - export const Large = Template.bind(null); Large.args = { ...defaultArgs, large: true }; diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx index 5d9efcc21..0cf517f10 100644 --- a/packages/storybook/stories/va-process-list-uswds.stories.jsx +++ b/packages/storybook/stories/va-process-list-uswds.stories.jsx @@ -70,14 +70,14 @@ const Template = ({uswds}) => { const StatusTemplate = ({uswds}) => { return ( - -

Add the prop checked to the list icon a checkmark.

+ +

Add the prop checkmark to make the list icon a checkmark.

Add the prop active to make the list icon and header blue.

 -

Add the prop pending list item and icon grayed out.

+

Add the prop pending to make the list item and icon grayed out.

 diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 020d25d88..9d23e7575 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.45.31", + "version": "4.46.3", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -53,6 +53,7 @@ "eslint-plugin-i18next": "^6.0.0-4", "jest": "^26.6.3", "jest-cli": "^26.6.3", + "jest-transformer-svg": "^2.0.1", "lit-html": "^1.3.0", "postcss-url": "^10.1.1", "puppeteer": "^10.0.0", diff --git a/packages/web-components/src/assets/VCL-icon-white.svg b/packages/web-components/src/assets/VCL-icon-white.svg new file mode 100644 index 000000000..9096737bd --- /dev/null +++ b/packages/web-components/src/assets/VCL-icon-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/src/assets/arrow-right-white.svg b/packages/web-components/src/assets/arrow-right-white.svg new file mode 100644 index 000000000..6c6e35e57 --- /dev/null +++ b/packages/web-components/src/assets/arrow-right-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/src/assets/va-seal.svg b/packages/web-components/src/assets/va-seal.svg new file mode 100644 index 000000000..ef50becfd --- /dev/null +++ b/packages/web-components/src/assets/va-seal.svg @@ -0,0 +1 @@ +VA \ 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 cba8d61fb..6ebc8568b 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -340,6 +340,8 @@ export namespace Components { */ "uswds"?: boolean; } + interface VaCrisisLineModal { + } interface VaDate { /** * Whether or not an analytics event will be fired. @@ -566,6 +568,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. @@ -1489,6 +1495,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: { @@ -1537,6 +1549,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: { @@ -1695,6 +1713,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; @@ -1703,6 +1722,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; @@ -2128,6 +2148,8 @@ declare namespace LocalJSX { */ "uswds"?: boolean; } + interface VaCrisisLineModal { + } interface VaDate { /** * Whether or not an analytics event will be fired. @@ -2402,6 +2424,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. @@ -3239,6 +3265,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; @@ -3247,6 +3274,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; @@ -3290,6 +3318,7 @@ declare module "@stencil/core" { "va-card": LocalJSX.VaCard & JSXBase.HTMLAttributes; "va-checkbox": LocalJSX.VaCheckbox & JSXBase.HTMLAttributes; "va-checkbox-group": LocalJSX.VaCheckboxGroup & JSXBase.HTMLAttributes; + "va-crisis-line-modal": LocalJSX.VaCrisisLineModal & JSXBase.HTMLAttributes; "va-date": LocalJSX.VaDate & JSXBase.HTMLAttributes; "va-featured-content": LocalJSX.VaFeaturedContent & JSXBase.HTMLAttributes; "va-file-input": LocalJSX.VaFileInput & JSXBase.HTMLAttributes; @@ -3298,6 +3327,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-header": LocalJSX.VaMinimalHeader & JSXBase.HTMLAttributes; "va-modal": LocalJSX.VaModal & JSXBase.HTMLAttributes; "va-need-help": LocalJSX.VaNeedHelp & JSXBase.HTMLAttributes; "va-notification": LocalJSX.VaNotification & JSXBase.HTMLAttributes; diff --git a/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts b/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts new file mode 100644 index 000000000..d182a7291 --- /dev/null +++ b/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts @@ -0,0 +1,98 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('va-crisis-line-modal', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(``); + const element = await page.find('va-crisis-line-modal'); + + expect(element).toEqualHtml(` + +
+ +
+ +
+
+
+

+ If you are a Veteran in crisis or concerned about one, connect with our caring, qualified responders for confidential help. Many of them are Veterans themselves. +

+ + Get more resources at + + VeteransCrisisLine.net + +
+
+
+ + + `); + }); + + it('shows modal when triggered', async () => { + const page = await newE2EPage(); + await page.setContent(``); + + // Check that the modal is not visible + const modal = await page.find('va-crisis-line-modal >>> va-modal'); + expect(modal.getAttribute('visible')).toBe(null); + + // Trigger the modal to become visible + const triggerButton = await page.find( + 'va-crisis-line-modal >>> button.va-overlay-trigger', + ); + await triggerButton.click(); + + // Check that the modal is visible + expect(modal.getAttribute('visible')).not.toBe(null); + }); +}); diff --git a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.scss b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.scss new file mode 100644 index 000000000..b2718296d --- /dev/null +++ b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.scss @@ -0,0 +1,175 @@ +@forward 'settings'; +@import '../../mixins/focusable.css'; + +$red-70v: #8b1303; + +$small-desktop-screen: 1008px; + +.va-crisis-line-container { + position: relative; + margin: auto; + background-color: var(--color-secondary-dark); + + @media(min-width: $small-desktop-screen) { + max-width: 97.5rem; + background-color: transparent; + } +} + +a { + color: var(--color-link-default); +} + +button.va-crisis-line { + cursor: pointer; + background-color: var(--color-secondary-darkest); + display: block; + border-radius: 0; + color: var(--color-white); + font-family: var(--font-source-sans); + font-size: 16px; + font-weight: normal; + text-decoration: none; + padding: 0; + margin: 0; + width: 100%; + border: 0; + + transition-duration: 0.3s; + transition-timing-function: ease-in-out; + transition-property: background-color; + + &:focus { + outline-offset: -2px; + } + + &:hover, &:active { + background-color: $red-70v; + .va-crisis-line-icon { + @media(min-width: $small-desktop-screen) { + background-color: #b51d09; + } + } + } + + @media(min-width: $small-desktop-screen) { + width: auto; + border-radius: 0 0 2.3px 2.3px; + box-shadow: 0 2px 5px var(--color-base); + } +} + +.va-crisis-line-inner { + display: flex; + align-items: center; + justify-content: center; + margin: auto; + + + @media(min-width: $small-desktop-screen) { + text-align: left; + justify-content: space-between; + } +} + +.va-crisis-line-icon { + content: ""; + background: url(../../assets/VCL-icon-white.svg) no-repeat right 29%; + background-size: 30px auto; + background-position: 8px 8px; + width: 40px; + height: 36px; + padding-right: 3px; + + transition-duration: 0.3s; + transition-timing-function: ease-in-out; + transition-property: background-color; + + @media (max-width: 480px) { + display: none; + } + + @media(min-width: $small-desktop-screen) { + border-bottom-left-radius: 3.2px; + } +} + +.va-crisis-line-text { + padding: 8px; +} + +.va-crisis-line-arrow { + height: 13px; + width: 16px; + padding-left: 8px; + padding-right: 8px; + +} + +.va-crisis-panel { + color: var(--color-base); + &-body { + max-height: 100%; + } + &-title { + color: var(--color-base); + padding-left: 41px; + background-image: url(../../assets/VCL-icon-white.svg) no-repeat left; + background-position: left 5px; + background-size: 32px auto; + } + &-list { + list-style: none; + padding: 0; + > li { + display: flex; + min-height: 56px; + margin-bottom: 0; + border-top: 1px solid var(--color-gray-light); + &:last-child { + border-bottom: 1px solid var(--color-gray-light); + } + > a, > span { + padding: 8px 0; + align-self: center; + } + } + } + &-icon { + color: var(--color-base) !important; + font-size: 26px; + width: 46px; + padding: 6.4px 4.8px; + align-self: center; + flex-shrink: 0; + font-family: "Font Awesome 5 Free"; + font-style: normal; + font-weight: 900; + &.fa-mobile { + font-size: 38px; + padding: 2.4px 4.8px; + } + } + &-close.va-modal-close { + font-size: 4rem; + color: var(--color-link-default); + padding-top: 0.1rem; + &:hover { + color: var(--color-black); + background-color: transparent; + } + } +} + +i.fa-phone::before { + content: '\F095'; /* fa-phone*/ +} +i.fa-mobile-alt::before { + content: '\F3cd'; /* fa-phone*/ +} +i.fa-comments::before { + content: '\F086'; /* fa-phone*/ +} +i.fa-deaf::before { + content: '\F2a4'; /* fa-phone*/ +} \ No newline at end of file diff --git a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx new file mode 100644 index 000000000..82f676589 --- /dev/null +++ b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx @@ -0,0 +1,133 @@ +import { Component, Host, State, h } from '@stencil/core'; +import arrowRightSvg from '../../assets/arrow-right-white.svg'; +import { CONTACTS } from '../../contacts'; + +/** + * @componentName Crisis Line Modal + * @maturityCategory caution + * @maturityLevel candidate + */ + +@Component({ + tag: 'va-crisis-line-modal', + styleUrl: 'va-crisis-line-modal.scss', + shadow: true, +}) +export class VACrisisLineModal { + @State() isOpen: boolean = false; + + setVisible() { + this.isOpen = true; + } + + setNotVisible() { + this.isOpen = false; + } + + render() { + return ( + +
+ +
+ this.setNotVisible()} + onCloseEvent={() => this.setNotVisible()} + visible={this.isOpen} + large={true} + > +