[Task](ui): Restore Modal stories once migrated all components

[gjaskiewicz]

Stories:

export const Login = {
  render: Template,
  args: {
    title: "Log In",
    initialFocus: "#username",
    children: (
      <>
        <FormRow>
          <TextInput label="Username" name="username" id="username" autoComplete="on" />
        </FormRow>
        <FormRow>
          <TextInput type="password" label="Password" name="password" id="password" />
        </FormRow>
        <FormRow>
          <Checkbox label="Remember Me" id="remember-me" />
        </FormRow>
      </>
    ),
    modalFooter: (
      <ModalFooter confirmButtonLabel="Log In" confirmButtonIcon="accountCircle" cancelButtonLabel="Never Mind" />
    ),
  }
}

export const TestSelectInModal = {
  render: Template,
  args: {
    title: "Modal with Select inside",
    size: "small",
    children: (
      <>
        <Select>
          <SelectOption value="1" label="Option 1" key="o-1" />
          <SelectOption value="2" label="Option 2" key="o-2" />
          <SelectOption value="3" label="Option 3" key="o-3" />
        </Select>
      </>
    ),
  }
}

export const TestComboBoxInModal = {
  render: Template,
  args: {
    title: "Modal with CombBox inside",
    size: "small",
    children: (
      <>
        <ComboBox>
          <ComboBoxOption value="Rhubarb" key="1">
            Rhubarb
          </ComboBoxOption>
          <ComboBoxOption value="Carrots" key="2">
            Carrots
          </ComboBoxOption>
          <ComboBoxOption value="Spinach" key="3">
            Spinach
          </ComboBoxOption>
          <ComboBoxOption value="Tomatoes" key="4">
            Tomatoes
          </ComboBoxOption>
        </ComboBox>
      </>
    ),
  }
}

export const ModalWithALargerForm = {
  render: Template,
  args: {
    title: "Register",
    initialFocus: "#firstname",
    cancelButtonLabel: "Cancel",
    confirmButtonLabel: "Register now",
    children: (
      <Form>
        <FormRow>
          <TextInput label="First Name" id="firstname" />
        </FormRow>
        <FormRow>
          <TextInput label="Last Name" id="lastname" />
        </FormRow>
        <FormRow>
          <TextInput label="Email" id="email" type="email" />
        </FormRow>
        <FormRow>
          <TextInput label="Password" id="password" type="password" />
        </FormRow>
        <FormRow>
          <TextInput label="Retype Password" id="retype-password" type="password" />
        </FormRow>
        <FormRow>
          <Select label="Role">
            <SelectOption>Private Person</SelectOption>
            <SelectOption>Small Business</SelectOption>
          </Select>
        </FormRow>
        <FormRow>
          <ComboBox label="Country">
            <ComboBoxOption value="germany" key="DE">
              Germany
            </ComboBoxOption>
            <ComboBoxOption value="uk" key="UK">
              United Kingdom
            </ComboBoxOption>
            <ComboBoxOption value="us" key="US">
              USA
            </ComboBoxOption>
          </ComboBox>
        </FormRow>
      </Form>
    ),
  }
}