ui.html

<style>
  * {
    box-sizing: border-box;
  }

  p {
    font-size: 10px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .section {
    /* background: rgba(0, 0, 0, 0.06); */
    padding: 8px 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .section:last-of-type {
    border-bottom: 0;
  }

  .property {
    margin: 8px 0;
  }

  button#create {
    width: 100%;
  }

  .btn {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 5px 12px 7px;
    display: inline-block;
    cursor: pointer;
    transition: box-shadow linear 40ms;
  }

  .btn.o__primary {
    background-color: #286efa;
    color: #fff;
  }

  .btn.o__secondary {
    background-color: #fff;
    color: #222;
  }

  .btn[disabled='true'] {
    opacity: 0.5;
  }

  .btn.o__subtle {
    border-color: transparent;
  }
</style>

<div class="section">
  <p>
    Component:
    <select disabled id="component" value="Button">
      <option value="button">Button</option>
    </select>
  </p>
</div>

<div class="section" style="text-align: center;">
  <button id="button" class="btn o__primary" role="button" type="button">
    Save
  </button>
</div>

<div class="section">
  <p>Properties</p>
  <p class="property">
    Label:
    <input id="label" value="Save" />
  </p>

  <p class="property">
    Type:
    <select id="type" value="Primary">
      <option value="Primary">Primary</option>
      <option value="Secondary">Secondary</option>
    </select>
  </p>
  <p class="property">
    State:
    <select id="state">
      <option selected value> No state </option>
      <option value="Destructive">Destructive</option>
      <option value="Live">Live</option>
      <option value="On-Blue">On-Blue</option>
    </select>
  </p>
  <p class="property">
    Icon:
    <select id="icon" value="" disabled>
      <option selected value> No icon </option>
      <option value="app">app</option>
      <option value="apple">apple</option>
      <option value="archive">archive</option>
    </select>
  </p>

  <p class="property">
    Subtle: <input id="subtle" type="checkbox" value="" disabled />
  </p>

  <p class="property">
    Disabled: <input id="disabled" type="checkbox" value="" />
  </p>
</div>
<div class="section">
  <button id="create">Create</button>
</div>

<script>
  document.getElementById('type').onchange = e => {
    if (e.target.value === 'Secondary') {
      document.getElementById('button').classList.remove('o__primary');
      document.getElementById('button').classList.add('o__secondary');
      document.getElementById('subtle').removeAttribute('disabled');
    } else {
      document.getElementById('button').classList.add('o__primary');
      document.getElementById('button').classList.remove('o__secondary');
      document.getElementById('subtle').setAttribute('disabled', true);
    }
  };

  document.getElementById('label').onkeyup = e => {
    document.getElementById('button').innerText = e.target.value;
  };

  document.getElementById('disabled').onchange = e => {
    document
      .getElementById('button')
      .setAttribute('disabled', e.target.checked);
  };

  document.getElementById('subtle').onchange = e => {
    document.getElementById('button').classList.toggle('o__subtle');
  };

  const ids = ['component', 'label', 'type', 'state', 'icon'];

  const booleanIds = ['subtle', 'disabled'];

  document.getElementById('create').onclick = () => {
    const values = ids.reduce(
      (v, id) => ({
        ...v,
        [id]: document.getElementById(id).value,
      }),
      {},
    );

    const checkboxes = booleanIds.reduce(
      (c, id) => ({
        ...c,
        [id]: document.getElementById(id).checked,
      }),
      {},
    );

    const allValues = {
      ...values,
      ...checkboxes,
    };

    console.log({ allValues });

    parent.postMessage(
      { pluginMessage: { type: 'create-component', values: allValues } },
      '*',
    );
  };
</script>