va-alert-sign-in: add new component

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
+import { AlertSignInVariants as ASIVariants } from '@department-of-veterans-affairs/web-components/src/components/va-alert-sign-in/AlertSignInVariants';
+
+const alertSignInDocs = getWebComponentDocs('va-alert-sign-in');
+
+export default {
+  title: 'Components/Alert - Sign-in',
+  id: 'components/va-alert-sign-in',
+  parameters: {
+    componentSubtitle: 'va-alert-sign-in web component',
+    docs: {
+      page: () => <StoryDocs storyDefault={Default} data={alertSignInDocs} />,
+    },
+  },
+};
+
+const defaultArgs = {
+  'variant': ASIVariants.signInRequired,
+  'disable-analytics': true,
+  'visible': true,
+  'time-limit': null,
+  'no-sign-in-link': null,
+  'heading-level': 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 = {
+  [ASIVariants.signInRequired]: {
+    slotNames: ['SignInButton'],
+    buttons: [SignInButton],
+  },
+  [ASIVariants.signInOptional]: {
+    slotNames: ['SignInButton'],
+    buttons: [SignInButton],
+  },
+  [ASIVariants.signInEither]: {
+    slotNames: ['LoginGovSignInButton', 'IdMeSignInButton'],
+    buttons: [LoginGovSignInButton, IdMeSignInButton],
+  },
+  [ASIVariants.verifyIdMe]: {
+    slotNames: ['IdMeVerifyButton'],
+    buttons: [IdMeVerifyButton],
+  },
+  [ASIVariants.verifyLoginGov]: {
+    slotNames: ['LoginGovVerifyButton'],
+    buttons: [LoginGovVerifyButton],
+  },
+};
+
+const Template = ({
+  variant,
+  'disable-analytics': disableAnalytics,
+  visible,
+  'time-limit': timeLimit,
+  'no-sign-in-link': noSignInLink,
+  'heading-level': headingLevel,
+}) => {
+  return (
+    <va-alert-sign-in
+      variant={variant}
+      disable-analytics={disableAnalytics}
+      visible={visible}
+      time-limit={timeLimit}
+      no-sign-in-link={noSignInLink}
+      heading-level={headingLevel}
+    >
+      {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 WithCustomHeadingLevel = Template.bind(null);
+WithCustomHeadingLevel.args = {
+  ...defaultArgs,
+  'heading-level': 3,
+};
+
+export const RequiredSignInVerified = Template.bind(null);
+RequiredSignInVerified.args = {
+  ...defaultArgs,
+  variant: ASIVariants.signInRequired,
+};
+
+export const OptionalSignInVerified = Template.bind(null);
+OptionalSignInVerified.args = {
+  ...defaultArgs,
+  'variant': ASIVariants.signInOptional,
+  'no-sign-in-link': 'https://example.com/',
+  'time-limit': '20 minutes',
+};
+
+export const VerifyWithIdMe = Template.bind(null);
+VerifyWithIdMe.args = {
+  ...defaultArgs,
+  variant: ASIVariants.verifyIdMe,
+};
+
+export const VerifyWithLoginGov = Template.bind(null);
+VerifyWithLoginGov.args = {
+  ...defaultArgs,
+  variant: ASIVariants.verifyLoginGov,
+};
+
+export const SignInWithAnotherAccount = Template.bind(null);
+SignInWithAnotherAccount.args = {
+  ...defaultArgs,
+  variant: ASIVariants.signInEither,
+};

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

@@ -134,6 +134,33 @@ export namespace Components {
          */
         "trigger": string;
     }
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaAlertSignIn {
+        /**
+          * Header level for button wrapper. Must be between 1 and 6
+         */
+        "headingLevel"?: number;
+        /**
+          * 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;
+        /**
+          * **Required.** Determines the text content and border/background color. Must be one of "signInRequired", "signInOptional", "signInEither", "verifyIdMe", or "verifyLoginGov".
+         */
+        "variant": string;
+        /**
+          * If `true`, the alert will be visible.
+         */
+        "visible"?: boolean;
+    }
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -2122,6 +2149,17 @@ declare global {
         prototype: HTMLVaAlertExpandableElement;
         new (): HTMLVaAlertExpandableElement;
     };
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface HTMLVaAlertSignInElement extends Components.VaAlertSignIn, HTMLStencilElement {
+    }
+    var HTMLVaAlertSignInElement: {
+        prototype: HTMLVaAlertSignInElement;
+        new (): HTMLVaAlertSignInElement;
+    };
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -3098,6 +3136,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;
@@ -3303,6 +3342,33 @@ declare namespace LocalJSX {
          */
         "trigger": string;
     }
+    /**
+     * @componentName Alert - Sign In
+     * @maturityCategory caution
+     * @maturityLevel candidate
+     */
+    interface VaAlertSignIn {
+        /**
+          * Header level for button wrapper. Must be between 1 and 6
+         */
+        "headingLevel"?: number;
+        /**
+          * 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;
+        /**
+          * **Required.** Determines the text content and border/background color. Must be one of "signInRequired", "signInOptional", "signInEither", "verifyIdMe", or "verifyLoginGov".
+         */
+        "variant"?: string;
+        /**
+          * If `true`, the alert will be visible.
+         */
+        "visible"?: boolean;
+    }
     /**
      * @componentName Back to top
      * @maturityCategory use
@@ -5253,6 +5319,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;
@@ -5336,6 +5403,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/AlertSignInVariants.ts

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