va-alert-sign-in: add new component

[Andrew565]

Chromatic

https://3364-sign-in-alerts--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

Closes #3364

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

Analytics will need to be coordinated with that platform team so we might just want to remove that logic for now and create a follow-up ticket to work with them.

[Andrew565]

I can comment out the analytics logic I think.

[jamigibbs]

I think I would prefer just removing code instead of commenting it out. There are plenty of other analytics examples we can reference in other components if we want to re-add it.

[nichia]

Thanks @Andrew565 for the PR, we (the Cartographers team) are following it closely and very eager to start using it. I'm reviewing the PR and want to check if we can add additional Props to enable customization of the component:

• the alert Heading defaults to h2 - some of our static pages needs the heading level to be h3. Can we add a heading level props?
• In additional to the standard Heading text (eg. 'Verify your identity' or 'Sign in'), depending on the apps, we need to append additional service description to the heading eg. 'Sign in to send secure messages' or 'Verify your identity to access more VA.gov tools and features'. Can we add a service description prop. If provided, append it to the heading?

[Andrew565]

@nichia The decision was made to support custom heading levels but not custom heading text at this time. A storybook example has been added showing how to set custom heading levels, with "H2" still the default.

[jamigibbs]

Can we clean up all of the commented out code?

[Andrew565]

Since we'd need all of this code once analytics is worked out in a week or two, it's my preference to just leave it here.

[jamigibbs]

@Andrew565 Can we link to that analytics ticket here then? Is it in a sprint yet?

[Andrew565]

Decided you were right that we have plenty of other examples of how to implement the analytics code elsewhere, and that it might be longer than I thought to coordinate, so just going ahead and removing the commented out code. As far as I can see there's not an analytics ticket for this component yet, I'll make sure one gets made.

[rsmithadhoc]

I'll review for a11y in department-of-veterans-affairs/vets-design-system-documentation#3385

[babsdenney]

@Andrew565 This looks good! One thing I'm not sure if we change is the titles of the alerts? This alert doesn't haven't a default alert as it all depends on the use case. Could we change the title to match the documentation?

• Required sign-in (verified)
• Optional sign-in (verified)

[LWWright7]

From a design perspective everything looks good to me for the component itself.

The main thing that jumped out to me is exactly what Barb had said about the alert...

and after inspecting, it appears the background color should be orange, but appears dark gray for whatever reason:

Not sure if this is a bug?

[Andrew565]

@babsdenney Storybook requires there to be a "default implementation" of every component or else it doesn't render the page, but I was able to add a duplicate entry for Required Sign In Verified. It won't let me add parentheses.

@LWWright7 The gray background color instead of the orange is due to a glitch in the Formation transition. Apparently, Storybook is still setup to use Formation styles instead of CSS-Library styles, so I'll make a ticket for that.

[jamigibbs]

The gray background color instead of the orange is due to a glitch in the Formation transition. Apparently, Storybook is still setup to use Formation styles instead of CSS-Library styles, so I'll make a ticket for that.

@Andrew565 Just FYI, Ian already wrote a ticket to address Storybook style issues when we upgraded to 7. So it might be a combination of Formation and other custom Storybook styles that changed from that upgrade:

• Address styling issues in Storybook 7 vets-design-system-documentation#2923