Inputs:

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
const inputs = [
  // Normal input with label and a note
  <InputForm label="My label" placeholder="Write your name..." note="For example..." />,

  // Icon with error
  <InputForm
    label="Some label"
    placeholder="Write your name..."
    note="For example..."
    errorMessage="Please provide name"
    valid={false}
  />,

  // Input with icon
  <Input>
    <InputFieldWithIcon placeholder="Write your name..." icon={MailIcon} semantic="Mail" />
  </Input>,
  <Input>
    <TextareaWithIcon placeholder="Write your name..." icon={MailIcon} semantic="Mail" />
  </Input>,
];

// Generate test cases
const InputsRow = ({ backgroundColor, variant }) => {
  return (
    <tr
      style={{
        backgroundColor: `${backgroundColor}`,
        verticalAlign: 'center',
      }}
    >
      {inputs.map((input, index) => (
        <td key={index}>{React.cloneElement(input, { variant })}</td>
      ))}
    </tr>
  );
};
<table>
  <tbody>
    {[
      { backgroundColor: '#1b4686', variant: 'light' },
      { backgroundColor: '#fff', variant: 'dark' },
    ].map((row, index) => (
      <InputsRow backgroundColor={row.backgroundColor} key={index} variant={row.variant} />
    ))}
  </tbody>
</table>;

Input with button:

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
<Input>
  <InputFieldWithButton
    placeholder="Write your name..."
    icon={MailIcon}
    semantic="Mail"
    onButtonClick={() => alert('Hello from the InputFieldWithButton component')}
  />
</Input>;

Input for password:

<Input>
  <InputFieldForPassword placeholder="Write your password..." semantic="Toggle password visibility" />
</Input>

Select:

<SelectForm
  label="Country"
  placeholder="Select country"
  options={[
    { value: 'Poland', label: 'Poland' },
    { value: 'Spain', label: 'Spain' },
    { value: 'Switzerland', label: 'Switzerland' },
  ]}
/>

Invalid select:

<SelectForm
  label="Country"
  placeholder="Select country"
  options={[
    { value: 'Poland', label: 'Poland' },
    { value: 'Spain', label: 'Spain' },
    { value: 'Switzerland', label: 'Switzerland' },
  ]}
  errorMessage="Please select your country"
  valid={false}
/>

Multi Email Select with no contacts connected (Shows activate Suggestions) #buggy needs fix

function showDialog(){
  alert('"Later" button was clicked!')
}

<MultiEmailSelect
  placeholderText="Enter emails"
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.com"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={50}
  options={[
    { value: 'gg@doodle.com', label: 'gg@doodle.com' },
    { value: 'kk@doodle.com', label: 'Kaymen k' },
    { value: 'pp@stan.com', label: 'Penelope Pel' },
  ]}
  activateSuggestions={{
    headline: 'See contacts suggestions',
    text: 'From Gmail, Outlook, Office 365',
    buttonText: 'Activate suggestions',
    buttonLink: '/#input',
    silentButtonText: 'Later',
    onSilentButtonClick: showDialog,
  }}
/>

Multi Email Select with initial options from a poll (Shows grouped invitees from a poll)

const CheckIcon = require('../../visuals/Icon/svg/d_check.svg');
const QuestionmarkIcon = require('../../visuals/Icon/svg/d_questionmark.svg');
const PeopleIcon = require('../../visuals/Icon/svg/ic_people.svg');

<MultiEmailSelect
  placeholderText="Enter emails"
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.comm"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={50}
  initialOptions={{
    participated: {
      label: 'Participated',
      icon: CheckIcon,
      options: [
        { value: 'aa@doodle.com', label: 'aa@doodle.com' },
        { value: 'bb@doodle.com', label: 'Bella Be' },
        { value: 'cc@stan.com', label: 'Ceman Cee' },
        { value: 'xx@doodle.com', label: 'xx@doodle.com' },
      ],
    },
    notParticipated: {
      label: 'Not Participated yet',
      icon: QuestionmarkIcon,
      options: [
        { value: 'gg@doodle.com', label: 'gg@doodle.com' },
        { value: 'kk@doodle.com', label: 'Kaymen k' },
        { value: 'pp@stan.com', label: 'Penelope Pel' },
      ],
    },
    everyone: {
      label: 'Everyone',
      icon: PeopleIcon,
      options: [
        { value: 'aa@doodle.com', label: 'aa@doodle.com' },
        { value: 'bb@doodle.com', label: 'Bella Be' },
        { value: 'cc@stan.com', label: 'Ceman Cee' },
        { value: 'xx@doodle.com', label: 'xx@doodle.com' },
        { value: 'gg@doodle.com', label: 'gg@doodle.com' },
        { value: 'kk@doodle.com', label: 'Kaymen k' },
        { value: 'pp@stan.com', label: 'Penelope Pel' },
      ],
    },
  }}
/>;

Multi Email Select with address connected (Shows contacts as suggestions)

<MultiEmailSelect
  placeholderText="Enter emails"
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.com"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={50}
  options={[
    { value: 'aa@doodle.com', label: 'aa@doodle.com' },
    { value: 'bb@doodle.com', label: 'Bella Be' },
    { value: 'cc@stan.com', label: 'Ceman Cee' },
    { value: 'xx@doodle.com', label: 'xx@doodle.com' },
    { value: 'gg@doodle.com', label: 'gg@doodle.com' },
    { value: 'kk@doodle.com', label: 'Kaymen k' },
    { value: 'pp@stan.com', label: 'Penelope Pel' },
  ]}
/>

Multi Email Select with error feedback text

<MultiEmailSelect
  placeholderText="Enter emails"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={3}
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.com"
  invalidFormatText="Invalid emails entered"
  limitExceededText="Limit has been exceeded"
/>

Multi Email Select with custom option formatting (type "aar" and select the suggested contact)

<MultiEmailSelect
  placeholderText="Enter emails"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={3}
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.com"
  invalidFormatText="Invalid emails entered"
  limitExceededText="Limit has been exceeded"
  formatOptionLabel={(option, { context }) => {
    if (context === 'value') {
      return <span>"{option.label}" {`<${option.value}>`}</span>
    }
  }}
  options={[
    { value: 'aa@doodle.com', label: 'Aardvark Alligator' }
  ]}
/>

Multi Email Select with decorated values (open the code panel to see the available options that can be colored)

<MultiEmailSelect
  placeholderText="Enter emails"
  buttonText="Send invites"
  addDomainText="Add entire domain or subdomain"
  alreadyInListText="(already in the list)"
  newOptionText="just use"
  emailsLimit={3}
  noteText="Allow entire domains: @example.com, or subdomains: @*.example.com"
  invalidFormatText="Invalid emails entered"
  limitExceededText="Limit has been exceeded"
  options={[
    { value: 'aa@doodle.com', label: 'aa@doodle.com' },
    { value: 'bb@doodle.com', label: 'Bella Be' },
    { value: 'cc@stan.com', label: 'Ceman Cee' },
  ]}
  decorateValue={valueEntry => {
    if(valueEntry.value === 'aa@doodle.com') {
      return {
        style: {
          backgroundColor: 'lightgreen'
        }
      };
    } else if (valueEntry.value === 'bb@doodle.com') {
      return {
        style: {
          backgroundColor: 'white',
          border: '2px solid black'
        }
      };
    } else if (valueEntry.value === 'cc@stan.com') {
      return {
        className: 'MultiEmailSelect__custom-background'
      };
    }
  }}
/>

Image Upload with cropper:

 <ImageUpload
    isLoading={false}
    buttonLabel="Upload"
    name="Change image"
    imageType="background"
    note="Max. file size: 1 MB"
    onChange={() => {}}
    buttonCancelText="Cancel"
    buttonApplyText="Apply"
  />

File Upload:

<FileUploadForm
  label="Profile photo"
  buttonLabel="Choose file..."
  preview={
    <UserAvatar avatar="https://6a5edc300520d4037dd6-0732807511066685711db213ddc1d2df.ssl.cf2.rackcdn.com/snw8ceng29ch3zbs4pvro3t2jxswf8yk" />
  }
  name="file"
  accept="image/*"
  note="Note: Profile photo from Gravatar"
  semantic="Delete avatar"
  onDelete={() => {}}
/>

Color picker:

<ColorPicker onColorChange={() => {}} label="Choose background color" defaultColor="#2b709b" />

Input type radio:

<div>
  <div style={{ background: '#fff', padding: '1rem' }}>
    <fieldset>
      <legend>An example group of radios</legend>
      <Radio id="radio-0" label="My radio input" name="radio-example" />
      <Radio id="radio-1" label="My other radio input" sublabel="Some text for the sublabel" name="radio-example" />
      <Radio id="radio-2" label="A third radio" name="radio-example" />
    </fieldset>
    <fieldset>
      <legend>A disabled radio</legend>
      <Radio id="radio-3" label="Can't touch this input!" disabled name="radio-example-1" />
      <Radio
        id="radio-4"
        label="This one has two lines"
        sublabel="I am the second line, but I'm also cool"
        disabled
        name="radio-example-1"
      />
    </fieldset>
    <fieldset>
      <legend>A disabled and checked radio</legend>
      <Radio id="radio-5" checked label="Can't touch this input!" disabled name="radio-example-2" />
    </fieldset>
    <fieldset>
      <legend>A checked radio</legend>
      <Radio id="radio-6" label="This one radio input is checked" checked name="radio-example-3" />
    </fieldset>
  </div>
  <div style={{ background: '#1b4686', padding: '1rem' }}>
    <fieldset>
      <legend style={{ color: '#fff' }}>A light themed radio</legend>
      <Radio id="radio-7" label="Light themed radio" name="radio-example-4" variant="light" />
      <Radio
        id="radio-8"
        label="Another light themed radio"
        sublabel="with some good label"
        name="radio-example-4"
        variant="light"
      />
    </fieldset>
    <fieldset>
      <legend style={{ color: '#fff' }}>Light themed disabled radios</legend>
      <Radio id="radio-9" disabled label="A disabled light themed radio" name="radio-example-5" variant="light" />
      <Radio
        id="radio-10"
        disabled
        checked
        label="A disabled light themed radio with both lines"
        sublabel="The second lines are the best!"
        name="radio-example-5"
        variant="light"
      />
    </fieldset>
  </div>
</div>