Add the "Banner - Official Gov" web component #608
Conversation
| } | ||
|
|
||
| .banner { | ||
| background-color: #f0f0f0; |
There was a problem hiding this comment.
All of the hex colors hardcoded are from the USWDS v3 example. When this component is updated to use the v3 modules (ie. @use "usa-banner"), these colors should automatically map to the relevant classes in the markup and can eventually be removed. I did not think it was necessary to add these to the css-library package for that reason. We would just have to go back and clean them up out of that library as well.
| background: 0 0; | ||
| background-color: #005ea2; | ||
| -webkit-mask: url("../../../../../node_modules/@uswds/uswds/dist/img/usa-icons/expand_more.svg") no-repeat center/contain; | ||
| mask: url("../../../../../node_modules/@uswds/uswds/dist/img/usa-icons/expand_more.svg") no-repeat center/contain; |
There was a problem hiding this comment.
Similar to the hardcoded hex values, this direct link to the v3 icons will no longer be necessary once this component has been converted to use the v3 modules (ie. @use "usa-banner").
| } | ||
|
|
||
| // Mobile display close icon. | ||
| @media (max-width: 768px) { |
There was a problem hiding this comment.
The responsive width throughout is based on the Formation medium screen breakpoint. The USWDS v3 examples uses 40rem for a 16px base font so this would be the equivalent to 640px. I simply picked a breakpoint value from Formation that was closest to that value.
|
|
||
| render() { | ||
| const { tld } = this; | ||
| if (tld === 'gov' || tld === 'mil') { |
There was a problem hiding this comment.
I experimented with getting the top-level domain value programmatically within the component itself but found that it would be difficult to test or display the component on sites that weren't actually .gov or .mil sites (like Chromatic and Storybook). If we're not happy with relying on the developer to set the correct value here manually, then maybe we can discuss alternatives. The default prop value is .gov.
|
|
||
| html = html.replace('SVG', lockSvg); | ||
| html = html.replace('lock', `<strong>lock</strong>`); | ||
| html = html.replace('candado', `<strong>candado</strong>`); |
There was a problem hiding this comment.
The word "lock" is bold which means that it also needs to be bold in the translations. Currently we only have Spanish translations so it is added here as part of the function that adds the strong element around it.
When we have Tagalog translations available, we will need to add that word here as well.
| <div class="grid-row"> | ||
| <div class="col"> | ||
| <img | ||
| src="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/icon-dot-gov.svg" |
There was a problem hiding this comment.
This was taken directly from the existing VA.gov implementation. I sometimes see a slight delay with this is loaded because there's a call out to AWS for it so if we're not happy with that behavior, I can see if there is a way to load without hot linking.
There was a problem hiding this comment.
I attempted to get this png image to load locally using the Stencil asset base path but wasn't successful. This might be a limitation of Stencil. For now we will probably need to keep the AWS link. We are able to import SVGs though.
|
@GnatalieH When you have a moment, do you mind providing design review for this new component? |
|
Looks good to me, @jamigibbs! Thanks! I prefer the updated USWDS look/feel in the mobile viewport. One thing I'm wondering, is should we represent this component in the USWDS section on Storybook? I know we are creating it as a variation of Banner, so I understand why it's categorized as it is. But I feel like we should cross reference it in USWDS components. Thoughts? |
@GnatalieH Good question. I intentionally have kept it out of that section because technically it has not been updated to use the actual USWDS v3 modules like the other components in that section are. We are not able to use those component variations in the USWDS section yet everywhere (there are technical limitations right now) but this component can be used as it is because it's not using their modules yet. So I didn't want to cause any confusion about its availability which is why it's in the regular section. We will still need to come back to this component at some point to make it an official v3 variation that's using the USWDS library directly. |
|
@jamigibbs that makes sense. It's good where it is, then. Thanks! |
Chromatic
https://1276-official-gov-site-banner--60f9b557105290003b387cd5.chromatic.com/?path=/docs/components-va-official-gov-banner--default
Description
This component was built based on the USWDS Banner component. The style and markup were taken directly from the USWDS example page linked above.
Even thought the USWDS v3 library is currently available within the component library package, this variation intentionally does not import the modules directly so that the component can be used immediately. USWDS v3 variations of components that use the v3 modules are not currently available for integrating with Formation.
Closes department-of-veterans-affairs/vets-design-system-documentation#1276
Testing done
Storybook
Screenshots
Mobile
Acceptance criteria
Definition of done