A11y-enabled modal, in several underlay color variations. Usage: always render this component, but control whether to show the modal through the show prop.

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
const AnonymousIcon = require('../../visuals/Icon/svg/d_anonymous.svg');

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="linkDark">
          transparent underlay
        </Button>
        <LoginModal show={active} variant="transparent" title="Modal title" onExit={toggle}>
          <Card
            content={
              <div style={{ minWidth: '50vw', minHeight: '30vh' }}>
                <Button onClick={toggle}>Hide</Button>
              </div>
            }
          />
        </LoginModal>
      </div>
    )}
  </Switch>

  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="blue">
          blue underlay
        </Button>
        <LoginModal show={active} variant="blue" title="Modal title" onExit={toggle}>
          <Card
            content={
              <div
                style={{
                  width: '320px',
                  margin: '16px auto',
                }}
              >
                <Tabs
                  items={[
                    {
                      label: 'Log in',
                      id: 'login-tab',
                      content: (
                        <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
                          <Input>
                            <InputFieldWithIcon placeholder="Email" icon={MailIcon} semantic="Email" />
                          </Input>
                          <Input>
                            <InputFieldWithIcon
                              placeholder="Password"
                              icon={AnonymousIcon}
                              semantic="Password"
                              type="password"
                            />
                          </Input>
                          <Button variant="green" onClick={toggle}>
                            Log in
                          </Button>
                        </div>
                      ),
                    },
                    {
                      label: 'Sign up',
                      id: 'signup-tab',
                      content: (
                        <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
                          <InputForm placeholder="Full name" />
                          <Input>
                            <InputFieldWithIcon placeholder="Enter email" icon={MailIcon} semantic="Email" />
                          </Input>
                          <Input>
                            <InputFieldWithIcon
                              placeholder="Create password"
                              icon={AnonymousIcon}
                              semantic="Password"
                              type="password"
                            />
                          </Input>
                          <Button variant="green" onClick={toggle}>
                            Sign up
                          </Button>
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            }
          />
        </LoginModal>
      </div>
    )}
  </Switch>
  
  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          ink underlay
        </Button>
        <LegacyModal
          show={active}
          variant="ink"
          title="Modal title"
          onExit={toggle}
          header={<div>Are you sure?</div>}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later.
              </div>
          }
          footer={[
            <Button key="1" onClick={toggle} variant="white">Cancel</Button>,
            <Button key="2" onClick={toggle} variant="blue">Ok</Button>
          ]}
        />
      </div>
    )}
  </Switch>

    <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          StandardModal
        </Button>
        <StandardModal
          show={active}
          title="The new standard modal"
          onExit={toggle}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later.
              </div>
          }
          primaryAction={{onClick: ()=>{console.log('primAction')}, label:'Ok'}}
          secondaryAction={{onClick: ()=>{console.log('secondaryAction')}, label:'Cancel'}}
          // tertiaryAction={{onClick: ()=>{console.log('tertiaryAction')}, label:'Switch Account'}}
          hint="Some hint that you woould like to read, once that modal is open"
        />
      </div>
    )}
  </Switch>

      <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          StandardModal tertiary
        </Button>
        <StandardModal
          show={active}
          title="The new standard modal"
          onExit={toggle}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account?
              </div>
          }
          primaryAction={{onClick: ()=>{console.log('primAction')}, label:'Ok'}}
          secondaryAction={{onClick: ()=>{console.log('secondaryAction')}, label:'Cancel'}}
          tertiaryAction={{onClick: ()=>{console.log('tertiaryAction')}, label:'Switch Account'}}
          hint="Some hint that you woould like to read, once that modal is open"
        />
      </div>
    )}
  </Switch>
</div>;