@integration-app/ui

Usage

1. Install the package

    npm i @integration-app/ui --save

1. Use components

Components

Button

import { Button } from '@integration-app/ui';
import Button from '@integration-app/ui/Button';

<Button 
    variant={'primary|secondary|outline|text'}
    size={'small|medium|large'}
>
    <SvgIcon /> Button
</Button>

Select

import { Select } from '@integration-app/ui';
import Select from '@integration-app/ui/Select';

<Select>
  <option>Option</option>
</Select>

Input

import { Input } from '@integration-app/ui';
import Input from '@integration-app/ui/Input';

<Input value='some value' />

Checkbox

import { Checkbox } from '@integration-app/ui';
import Checkbox from '@integration-app/ui/Checkbox';

<Checkbox checked={checked} />

Form styling

import { Input, Button } from '@integration-app/ui';
import { Form, FormGroup, FormGroupLabel, FormGroupHintMessage } from '@integration-app/ui/Form';

<Form method='post' action=''>
    <FormGroup>
        <FormGroupLabel htmlFor='subdomain'>Subdomain</FormGroupLabel>
        <Input
          id='subdomain'
          name='subdomain'
          placeholder='Your Zendesk Subdomain'
        />
        <FormGroupHintMessage>
          If not sure, go to your Zendesk app and look at its domain.
          <br/> It looks like <kbd>[subdomain].zendesk.com</kbd> - enter subdomain here.
        </FormGroupHintMessage>
    </FormGroup>
    <FormGroup action>
      <Button type='primary' onClick='this.form.submit()'>
        Next
      </Button>
    </FormGroup>
</Form>

Plain HTML form styling

Inline form

    import '@integration-app/ui/ui-kit.css';
    
    <form className='ia-form'>
      <input type='email' placeholder='Email' />
      <input type='password' placeholder='Password' />
      <label htmlFor='default-remember'>
        <input type='checkbox' checked={true} id='default-remember' />{' '}
        Remember me
      </label>
      <button type='submit'>Sign in</button>
    </form>

Stacked form

    import '@integration-app/ui/ui-kit.css';

    <form className='ia-form ia-form--stacked'>
      <label htmlFor='stacked-email'>Email</label>
      <input type='email' id='stacked-email' placeholder='Email' />
      <span className='ia-form__message'>This is a required field.</span>
      <label htmlFor='stacked-password'>Password</label>
      <input type='password' id='stacked-password' placeholder='Password' />
      <label htmlFor='stacked-state'>State</label>
      <select id='stacked-state'>
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
      </select>
      <label htmlFor='stacked-remember' className='pure-checkbox'>
        <input type='checkbox' id='stacked-remember' /> Remember me
      </label>
      <button type='submit'>Sign in</button>
    </form>

Grouped form

    import '@integration-app/ui/ui-kit.css';

    <form className='ia-form'>
      <div className='ia-form__group'>
        <label htmlFor='aligned-name'>Username</label>
        <input type='text' id='aligned-name' placeholder='Username' />
        <span className='ia-form__message'>This is a required field.</span>
      </div>
      <div className='ia-form__group'>
        <label htmlFor='aligned-password'>Password</label>
        <input
          type='password'
          id='aligned-password'
          placeholder='Password'
        />
        <span className='ia-form__message ia-form__message--inline'>
          This is a required field.
        </span>
      </div>
      <div className='ia-form__group'>
        <label htmlFor='aligned-email'>Email Address</label>
        <input
          type='email'
          id='aligned-email'
          placeholder='Email Address'
        />
      </div>
      <div className='ia-form__group'>
        <label htmlFor='aligned-foo'>
          Supercalifragilistic Label Supercalifragilistic Label
        </label>
        <input
          type='text'
          id='aligned-foo'
          placeholder='Enter something here...'
        />
      </div>
      <div className='ia-form__group ia-form__group--actions'>
        <label htmlFor='aligned-cb' className='ia-form__checkbox'>
          <input type='checkbox' id='aligned-cb' /> I&#x27;ve read the terms
          and conditions
        </label>
        <button type='submit' className='pure-button pure-button-primary'>
          Submit
        </button>
      </div>
    </form>