va-alert-sign-in: add new component

packages/storybook/stories/va-alert-sign-in.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+import { VariantNames } from '../../web-components/src/components/va-alert-sign-in/VariantNames';
+
+const alertSignInDocs = getWebComponentDocs('va-alert-sign-in');
+
+export default {
+  title: 'Components/Alert - Sign-in',
+  id: 'uswds/va-alert-sign-in',
+  parameters: {
+    componentSubtitle: 'va-alert-sign-in web component',
+    docs: {
+      page: () => <StoryDocs storyDefault={Default} data={alertSignInDocs} />,
+    },
+  },
+};
+
+const defaultArgs = {
+  'variant': VariantNames.signInRequired,
+  'disable-analytics': false,
+  'visible': true,
+  'time-limit': null,
+  'no-sign-in-link': null,
+};
+
+const SignInButton = () => <button>Sign In Button goes here</button>;
+const IdMeSignInButton = () => (
+  <button>Sign In with ID.me Button goes here</button>
+);
+const IdMeVerifyButton = () => (
+  <button>Verify with ID.me Button goes here</button>
+);
+const LoginGovSignInButton = () => (
+  <button>Sign In with Login.gov Button goes here</button>
+);
+const LoginGovVerifyButton = () => (
+  <button>Verify with Login.gov Button goes here</button>
+);
+
+const SlotVariants = {
+  [VariantNames.signInRequired]: {
+    slotNames: ['SignInButton'],
+    buttons: [SignInButton],
+  },
+  [VariantNames.signInOptional]: {
+    slotNames: ['SignInButton'],
+    buttons: [SignInButton],
+  },
+  [VariantNames.signInEither]: {
+    slotNames: ['LoginGovSignInButton', 'IdMeSignInButton'],
+    buttons: [LoginGovSignInButton, IdMeSignInButton],
+  },
+  [VariantNames.verifyIdMe]: {
+    slotNames: ['IdMeVerifyButton'],
+    buttons: [IdMeVerifyButton],
+  },
+  [VariantNames.verifyLoginGov]: {
+    slotNames: ['LoginGovVerifyButton'],
+    buttons: [LoginGovVerifyButton],
+  },
+};
+
+const Template = ({
+  variant,
+  'disable-analytics': disableAnalytics,
+  visible,
+  'time-limit': timeLimit,
+  'no-sign-in-link': noSignInLink,
+}) => {
+  return (
+    <va-alert-sign-in
+      variant={variant}
+      disable-analytics={disableAnalytics}
+      visible={visible}
+      time-limit={timeLimit}
+      no-sign-in-link={noSignInLink}
+    >
+      {SlotVariants[variant].slotNames.map((name, i) => {
+        const ButtonToRender = SlotVariants[variant].buttons[i];
+        return (
+          <span key={i} slot={name}>
+            <ButtonToRender></ButtonToRender>
+          </span>
+        );
+      })}
+    </va-alert-sign-in>
+  );
+};
+
+export const Default = Template.bind(null);
+Default.args = {
+  ...defaultArgs,
+};
+Default.argTypes = propStructure(alertSignInDocs);
+
+export const OptionalSignIn = Template.bind(null);
+OptionalSignIn.args = {
+  ...defaultArgs,
+  variant: VariantNames.signInOptional,
+};
+
+export const VerifyWithIdMe = Template.bind(null);
+VerifyWithIdMe.args = {
+  ...defaultArgs,
+  variant: VariantNames.verifyIdMe,
+};
+
+export const VerifyWithLoginGov = Template.bind(null);
+VerifyWithLoginGov.args = {
+  ...defaultArgs,
+  variant: VariantNames.verifyLoginGov,
+};
+
+export const SignInWithAnotherAccount = Template.bind(null);
+SignInWithAnotherAccount.args = {
+  ...defaultArgs,
+  variant: VariantNames.signInEither,
+};

packages/web-components/src/components.d.ts

@@ -5,7 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { VariantNames } from "./components/va-alert-sign-in/VariantNames";
 import { Breadcrumb } from "./components/va-breadcrumbs/va-breadcrumbs";
+export { VariantNames } from "./components/va-alert-sign-in/VariantNames";
 export { Breadcrumb } from "./components/va-breadcrumbs/va-breadcrumbs";
 export namespace Components {
     /**
@@ -134,6 +136,33 @@ export namespace Components {
          */
         "trigger": string;
     }
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaAlertSignIn {
+        /**
+          * If `true`, doesn't fire the CustomEvent which can be used for analytics tracking.
+         */
+        "disableAnalytics"?: boolean;
+        /**
+          * For the 'optional' variant, the link to the form to complete without signing in
+         */
+        "noSignInLink"?: string;
+        /**
+          * For the 'optional' variant, how long the respondent has to submit their form
+         */
+        "timeLimit"?: string;
+        /**
+          * Determines the text content and border/background color.
+         */
+        "variant": VariantNames;
+        /**
+          * If `true`, the alert will be visible.
+         */
+        "visible"?: boolean;
+    }
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -1816,6 +1845,10 @@ export interface VaAlertExpandableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVaAlertExpandableElement;
 }
+export interface VaAlertSignInCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVaAlertSignInElement;
+}
 export interface VaBannerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVaBannerElement;
@@ -2064,6 +2097,29 @@ declare global {
         prototype: HTMLVaAlertExpandableElement;
         new (): HTMLVaAlertExpandableElement;
     };
+    interface HTMLVaAlertSignInElementEventMap {
+        "va-component-did-load": any;
+        "component-library-analytics": any;
+    }
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface HTMLVaAlertSignInElement extends Components.VaAlertSignIn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVaAlertSignInElementEventMap>(type: K, listener: (this: HTMLVaAlertSignInElement, ev: VaAlertSignInCustomEvent<HTMLVaAlertSignInElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVaAlertSignInElementEventMap>(type: K, listener: (this: HTMLVaAlertSignInElement, ev: VaAlertSignInCustomEvent<HTMLVaAlertSignInElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVaAlertSignInElement: {
+        prototype: HTMLVaAlertSignInElement;
+        new (): HTMLVaAlertSignInElement;
+    };
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -3015,6 +3071,7 @@ declare global {
         "va-additional-info": HTMLVaAdditionalInfoElement;
         "va-alert": HTMLVaAlertElement;
         "va-alert-expandable": HTMLVaAlertExpandableElement;
+        "va-alert-sign-in": HTMLVaAlertSignInElement;
         "va-back-to-top": HTMLVaBackToTopElement;
         "va-banner": HTMLVaBannerElement;
         "va-breadcrumbs": HTMLVaBreadcrumbsElement;
@@ -3219,6 +3276,41 @@ declare namespace LocalJSX {
          */
         "trigger": string;
     }
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaAlertSignIn {
+        /**
+          * If `true`, doesn't fire the CustomEvent which can be used for analytics tracking.
+         */
+        "disableAnalytics"?: boolean;
+        /**
+          * For the 'optional' variant, the link to the form to complete without signing in
+         */
+        "noSignInLink"?: string;
+        /**
+          * The event used to track usage of the component. This is emitted when an anchor link is clicked and disableAnalytics is not true.
+         */
+        "onComponent-library-analytics"?: (event: VaAlertSignInCustomEvent<any>) => void;
+        /**
+          * Fires when the component has successfully finished rendering for the first time.
+         */
+        "onVa-component-did-load"?: (event: VaAlertSignInCustomEvent<any>) => void;
+        /**
+          * For the 'optional' variant, how long the respondent has to submit their form
+         */
+        "timeLimit"?: string;
+        /**
+          * Determines the text content and border/background color.
+         */
+        "variant"?: VariantNames;
+        /**
+          * If `true`, the alert will be visible.
+         */
+        "visible"?: boolean;
+    }
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -5111,6 +5203,7 @@ declare namespace LocalJSX {
         "va-additional-info": VaAdditionalInfo;
         "va-alert": VaAlert;
         "va-alert-expandable": VaAlertExpandable;
+        "va-alert-sign-in": VaAlertSignIn;
         "va-back-to-top": VaBackToTop;
         "va-banner": VaBanner;
         "va-breadcrumbs": VaBreadcrumbs;
@@ -5193,6 +5286,12 @@ declare module "@stencil/core" {
              * @maturityLevel candidate
              */
             "va-alert-expandable": LocalJSX.VaAlertExpandable & JSXBase.HTMLAttributes<HTMLVaAlertExpandableElement>;
+            /**
+             * @componentName Alert - Sign In
+             * @maturityCategory caution
+             * @maturityLevel candidate
+             */
+            "va-alert-sign-in": LocalJSX.VaAlertSignIn & JSXBase.HTMLAttributes<HTMLVaAlertSignInElement>;
             /**
              * @componentName Back to top
              * @maturityCategory use

packages/web-components/src/components/va-alert-sign-in/VariantNames.ts

@@ -0,0 +1,9 @@
+export enum VariantNames {
+  /* eslint-disable i18next/no-literal-string */
+  signInRequired = 'signInRequired',
+  signInOptional = 'signInOptional',
+  verifyIdMe = 'verifyIdMe',
+  verifyLoginGov = 'verifyLoginGov',
+  signInEither = 'signInEither',
+  /* eslint-enable i18next/no-literal-string */
+}