Steo

index.js

import React from 'react'
import { render } from 'react-dom'
import * as UI from '@klarna/ui'

const Workshop = React.createClass({
  getInitialState () {
    return { open: false }
  },

  render () {
    return (
      <div>
        <UI.Button.Primary onClick={() => this.setState({ open: true })}>
          Open
        </UI.Button.Primary>

        <form>
          <UI.Dialog.Overlay show={this.state.open}>
            <UI.Dialog.Main>
              <UI.Dialog.Icon>
                <UI.IconButton.Close
                  onClick={() => this.setState({ open: false })}
                />
              </UI.Dialog.Icon>

              <UI.Dialog.Content>
                <UI.Title.Primary margins>
                  The title is primary
                </UI.Title.Primary>
                <UI.Subtitle margins>
                  Just trying to fill up space
                </UI.Subtitle>

                <UI.Fieldset margins>
                  <UI.UncontrolledField
                    name='given-name'
                    left
                    top
                    size="1/2"
                    label="Given name" />
                  <UI.UncontrolledField
                    name='middle-name'
                    right
                    top
                    size="1/2"
                    label="Middle name" />
                  <UI.UncontrolledDropdown
                    bottom
                    name='ipsum'
                    label="Lorem ipsum"
                    options={[
                      {"key":"","label":"Pick one!","disabled":true,"hidden":true},
                      {"key":"lorem","label":"Lorem"},
                      {"key":"ipsum","label":"Ipsum"}
                    ]}
                  />
                </UI.Fieldset>

                <UI.Fieldset margins>
                  <UI.UncontrolledSwitch.Checkbox name="checkbox-uncontrolled">
                    This is an uncontrolled checkbox switch
                  </UI.UncontrolledSwitch.Checkbox>
                </UI.Fieldset>
              </UI.Dialog.Content>

              <UI.Dialog.Footer>
                <UI.Button.Primary
                  style={{width: '100%'}}>
                  Submit
                </UI.Button.Primary>
              </UI.Dialog.Footer>
            </UI.Dialog.Main>
          </UI.Dialog.Overlay>
        </form>
      </div>
    )
  }
})

render(
  <Workshop />,
  document.getElementById('ui-workshop')
)