va-language-toggle: add component #1386
Conversation
…s-affairs/component-library into va-language-toggle
jamigibbs
added
minor
| /** | ||
| * A JSON array of objects with link data. Each object should have an href, lang (ISO language code), and label properties. If using the pure web component provide as a string. Example: `[{"href": "/one", "lang": "en", "label": "English"}, ...]`. | ||
| */ | ||
| @Prop() urls: LangUrl[] | string; |
There was a problem hiding this comment.
I don't know if we want to add this type of flexibility. Our guidelines say that we only support 3 languages; English, Espanol, Tagalog
Other language options. VA.gov supports the 3 languages identified in the toggle. Do not add or remove from those 3 languages.
There was a problem hiding this comment.
@jamigibbs - good point - I updated the component to only allow en, es, or tl.
| componentName: 'va-language-toggle', | ||
| action: 'linkClick', | ||
| details: { | ||
| 'pipe-delimited-list-header': langCode |
There was a problem hiding this comment.
Were you able to connect with the analytics team about this addition? Is there a ticket or Slack convo we can link to here for context?
There was a problem hiding this comment.
@jamigibbs I met with them yesterday - they asked to be looped into this PR so they could take a look at the datalayer, which I have done
| &.is-current-lang { | ||
| font-weight: var(--font-weight-bold); | ||
| text-decoration: none; | ||
| color: var(--vads-color-base); |
There was a problem hiding this comment.
Do we have a Figma link that can be added to description of the PR? I think it would be worthwhile to get a review from one of the designers as well.
There was a problem hiding this comment.
@jamigibbs I'm reaching out to Barb on this
| const defaultArgs = { | ||
| enHref: url.href, | ||
| esHref: url.href, | ||
| tlHref: url.href, |
There was a problem hiding this comment.
Any idea why these props are showing up on the Storybook page like this? I don't think other pages do that.
There was a problem hiding this comment.
@jamigibbs - fixed!
There was a problem hiding this comment.
@it-harrison Awesome! Thanks for figuring that out! I think the only other thing that needs to be done is passing in an empty arguments object to the Template function so that the code examples populate:
Maybe something like this here on this line and this line too? I can't exactly remember what has fixed this in the past.
const Template = ({}) => {
...
}There was a problem hiding this comment.
@jamigibbs - good catch, fixed!
|
@babsdenney @danbrady @LWWright7 can you take a look to see if this matches design? in particular, I'm wondering about focus and hover states. Thanks! |
|
@it-harrison We were able to take a look at the language toggle and were wondering if it would be possible to use the link component for the links and override the underline in this case? We were thinking this might be a better route so that if there are any changes to link styles in the future they would be pushed to this component vs. having to manually change the styles in the future. |
Chromatic
https://va-language-toggle--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
This PR adds the
va-language-toggleweb component to the VA Design System component library. Note: the component has no analytics yet; it will be added pending discussion with the Analytics team.Closes 2583
QA Checklist
Screenshots
Acceptance criteria
Definition of done