-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
va-language-toggle: add component (#1386)
* add component * update component * revert accidental changes * update api to only allow for en, es, tl * update styling * tweak story * update story * fix story name * add lang support to va-link * fix tests * add test * update test text
- Loading branch information
1 parent
3a7ff73
commit 7756f11
Showing
7 changed files
with
438 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import { getWebComponentDocs, StoryDocs, propStructure } from './wc-helpers'; | ||
| import { VaLanguageToggle } from '@department-of-veterans-affairs/web-components/react-bindings'; | ||
|
|
||
| VaLanguageToggle.displayName = 'VaLanguageToggle'; | ||
|
|
||
| const languageToggleDocs = getWebComponentDocs('va-language-toggle'); | ||
|
|
||
| export default { | ||
| title: 'Components/Language Toggle', | ||
| id: 'components/va-language-toggle', | ||
| parameters: { | ||
| componentSubtitle: 'va-language-toggle web component', | ||
| docs: { | ||
| page: () => <StoryDocs storyDefault={Default} data={languageToggleDocs} />, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const url = new URL(window.parent.location.href); | ||
| url.searchParams.set('path', '/docs/components-va-language-toggle--docs'); | ||
|
|
||
| const Template = ({}) => { | ||
| let lang = sessionStorage.getItem('va-language-toggle-lang') ?? 'en'; | ||
| function handleLanguageToggle(e) { | ||
| const { language } = e.detail; | ||
| sessionStorage.setItem('va-language-toggle-lang', language) | ||
| } | ||
|
|
||
| return ( | ||
| <VaLanguageToggle | ||
| language={lang} | ||
| enHref={url.href} | ||
| esHref={url.href} | ||
| tlHref={url.href} | ||
| onVaLanguageToggle={handleLanguageToggle} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const WithRouterLinksTemplate = ({}) => { | ||
|
|
||
| function handleLanguageToggle(e) { | ||
| console.log(`the language has been toggled to ${e.detail.language}`); | ||
| } | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <div>This example illustrates how to use the component with a router. When <code>router-links</code> is | ||
| set to <code>true</code>, clicking on a link will not navigate to a new page (i.e. <code>event.preventDefault()</code> is called). | ||
| By capturing the <code>language-toggle</code> event page content can be updated as needed to reflect the selected language. | ||
| </div> | ||
| <br/> | ||
| <VaLanguageToggle | ||
| enHref={url.href} | ||
| esHref={url.href} | ||
| tlHref={url.href} | ||
| routerLinks={true} | ||
| onVaLanguageToggle={handleLanguageToggle} | ||
| /> | ||
| </Fragment> | ||
| ) | ||
| } | ||
|
|
||
| export const Default = Template.bind(null); | ||
| Default.argTypes = propStructure(languageToggleDocs); | ||
|
|
||
| export const WithRouterLinks = WithRouterLinksTemplate.bind(null); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
packages/web-components/src/components/va-language-toggle/test/va-language-toggle.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { newE2EPage } from "@stencil/core/testing"; | ||
| import { axeCheck } from "../../../testing/test-helpers"; | ||
|
|
||
| describe('va-language-toggle', () => { | ||
| const enHref = "/resources/the-pact-act-and-your-va-benefits/"; | ||
| const esHref = "/resources/the-pact-act-and-your-va-benefits-esp/" | ||
| const tlHref = "/resources/the-pact-act-and-your-va-benefits-tl/" | ||
|
|
||
| it('renders', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const element = await page.find('va-language-toggle'); | ||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
|
|
||
| it('English is the default language', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const anchor = await page.find('va-language-toggle >>> va-link'); | ||
| expect(anchor).toHaveClass('is-current-lang'); | ||
| }); | ||
|
|
||
| it('only renders links for those languages with supplied hrefs', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" />`); | ||
| const anchors = await page.findAll('va-language-toggle >>> a'); | ||
| expect(anchors).toHaveLength(2); | ||
| }) | ||
|
|
||
| it('if language prop is set the matching language is bolded', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle language="es" en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const [_, anchor] = await page.findAll('va-language-toggle >>> va-link'); | ||
| expect(anchor).toHaveClass('is-current-lang'); | ||
| }); | ||
|
|
||
| it('if router-links is set, clicking an anchor tag does not result in page navigation', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle router-links="true" en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const [startUrl] = page.url().split('?'); | ||
| const [_, anchor] = await page.findAll('va-language-toggle >>> a'); | ||
| await anchor.click(); | ||
| const [endUrl] = page.url().split('?'); | ||
| expect(startUrl).toEqual(endUrl); | ||
| }); | ||
|
|
||
| it('fires a language-toggle event when a link is clicked', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const toggleSpy = await page.spyOnEvent('vaLanguageToggle'); | ||
| const [_, anchor] = await page.findAll('va-language-toggle >>> a'); | ||
| await anchor.click(); | ||
| expect(toggleSpy).toHaveReceivedEvent(); | ||
| }); | ||
|
|
||
| it('fires a component-analytics event when a link is clicked', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| const toggleSpy = await page.spyOnEvent('component-library-analytics'); | ||
| const anchor = await page.find('va-language-toggle >>> a'); | ||
| await anchor.click(); | ||
| expect(toggleSpy).toHaveReceivedEvent(); | ||
| }); | ||
|
|
||
| it('passes an aXe check', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<va-language-toggle en-href="${enHref}" es-href="${esHref}" tl-href="${tlHref}" />`); | ||
| await axeCheck(page); | ||
| }); | ||
| }); |
21 changes: 21 additions & 0 deletions
21
packages/web-components/src/components/va-language-toggle/va-language-toggle.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| :host div { | ||
| display: inline-block; | ||
|
|
||
| div.inner-div { | ||
| border-right: 1px solid var(--vads-color-base-light); | ||
| padding-right: 8px; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| va-link { | ||
| &::part(anchor) { | ||
| text-decoration: none; | ||
| } | ||
| &.is-current-lang { | ||
| font-weight: var(--font-weight-bold); | ||
| } | ||
| color: var(--vads-color-link); | ||
| padding-bottom: 2px; | ||
| border-bottom: 1px solid var(--vads-color-link); | ||
| } | ||
| } |
Oops, something went wrong.