From 4f73b8b71a2de68fce9a0deabb84beb359c4a3fa Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 21 Dec 2019 17:16:15 -0800
Subject: [PATCH 1/3] feat(components): add RadioButtonGroup

Closes #25
---
 README.md                                     |  1 +
 .../RadioButton/RadioButton.Skeleton.svelte   |  4 +-
 .../RadioButton/RadioButton.Story.svelte      |  5 +-
 src/components/RadioButton/RadioButton.svelte | 22 +++++++--
 .../RadioButtonGroup.Story.svelte             | 16 +++++++
 .../RadioButtonGroup.stories.js               | 40 ++++++++++++++++
 .../RadioButtonGroup/RadioButtonGroup.svelte  | 46 +++++++++++++++++++
 src/components/RadioButtonGroup/index.js      |  3 ++
 src/index.js                                  |  2 +
 9 files changed, 128 insertions(+), 11 deletions(-)
 create mode 100644 src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
 create mode 100644 src/components/RadioButtonGroup/RadioButtonGroup.stories.js
 create mode 100644 src/components/RadioButtonGroup/RadioButtonGroup.svelte
 create mode 100644 src/components/RadioButtonGroup/index.js

diff --git a/README.md b/README.md
index 2b380ed1..0afb9dfa 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ Currently, the following components are supported:
   - ProgressStep
 - RadioButton
   - RadioButtonSkeleton
+- RadioButtonGroup
 - Search
   - SearchSkeleton
 - SkeletonPlaceholder
diff --git a/src/components/RadioButton/RadioButton.Skeleton.svelte b/src/components/RadioButton/RadioButton.Skeleton.svelte
index 9bdd89d8..08456576 100644
--- a/src/components/RadioButton/RadioButton.Skeleton.svelte
+++ b/src/components/RadioButton/RadioButton.Skeleton.svelte
@@ -1,14 +1,14 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--radio-button-wrapper', className);
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <div class={cx('--radio-button', '--skeleton')} />
   <span class={cx('--radio-button__label', '--skeleton')} />
 </div>
diff --git a/src/components/RadioButton/RadioButton.Story.svelte b/src/components/RadioButton/RadioButton.Story.svelte
index 688ac99e..6ffc2e4e 100644
--- a/src/components/RadioButton/RadioButton.Story.svelte
+++ b/src/components/RadioButton/RadioButton.Story.svelte
@@ -8,11 +8,8 @@
 </script>
 
 <Layout>
-
   {#if story === 'skeleton'}
-    <div>
-      <RadioButtonSkeleton />
-    </div>
+    <RadioButtonSkeleton />
   {:else}
     <RadioButton {...$$props} id="radio-1" />
   {/if}
diff --git a/src/components/RadioButton/RadioButton.svelte b/src/components/RadioButton/RadioButton.svelte
index 7c1ae093..56d0f276 100644
--- a/src/components/RadioButton/RadioButton.svelte
+++ b/src/components/RadioButton/RadioButton.svelte
@@ -9,26 +9,38 @@
   export let hideLabel = false;
   export let labelPosition = 'right';
   export let name = '';
-  export let props = {};
+  export let style = undefined;
 
+  import { getContext } from 'svelte';
+  import { writable } from 'svelte/store';
   import { cx } from '../../lib';
 
+  const ctx = getContext('RadioButtonGroup');
   const _class = cx(
     '--radio-button-wrapper',
     labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
     className
   );
   const _innerLabelClass = cx(hideLabel && '--visually-hidden');
+
+  let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
+
+  if (ctx) {
+    ctx.add({ id, checked, disabled, value });
+  }
+
+  $: checked = $selected === value;
 </script>
 
-<div class={_class}>
+<div class={_class} {style}>
   <input
-    {...props}
     type="radio"
     class={cx('--radio-button')}
     on:change
-    on:change={event => {
-      value = event.target.value;
+    on:change={() => {
+      if (ctx) {
+        ctx.update(value);
+      }
     }}
     {id}
     {name}
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
new file mode 100644
index 00000000..391b2f9e
--- /dev/null
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
@@ -0,0 +1,16 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import RadioButtonGroup from './RadioButtonGroup.svelte';
+  import RadioButton from '../RadioButton';
+  import { FormGroup } from '../Form';
+</script>
+
+<Layout>
+  <FormGroup legendText="Radio Button heading">
+    <RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend">
+      <RadioButton {...$$props.radio} value="standard" id="radio-1" />
+      <RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
+      <RadioButton {...$$props.radio} value="disabled" id="radio-3" />
+    </RadioButtonGroup>
+  </FormGroup>
+</Layout>
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.stories.js b/src/components/RadioButtonGroup/RadioButtonGroup.stories.js
new file mode 100644
index 00000000..10471188
--- /dev/null
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.stories.js
@@ -0,0 +1,40 @@
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
+import Component from './RadioButtonGroup.Story.svelte';
+
+export default { title: 'RadioButtonGroup', decorators: [withKnobs] };
+
+const values = {
+  standard: 'standard',
+  'default-selected': 'default-selected',
+  disabled: 'disabled'
+};
+
+const orientations = {
+  'Horizontal (horizontal)': 'horizontal',
+  'Vertical (vertical)': 'vertical'
+};
+
+const labelPositions = {
+  'Left (left)': 'left',
+  'Right (right)': 'right'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    group: {
+      name: text('The form control name (name in <RadioButtonGroup>)', 'radio-button-group'),
+      valueSelected: select(
+        'Value of the selected button (valueSelected in <RadioButtonGroup>)',
+        values,
+        'default-selected'
+      ),
+      orientation: select('Radio button orientation (orientation)', orientations, 'horizontal'),
+      labelPosition: select('Label position (labelPosition)', labelPositions, 'right')
+    },
+    radio: {
+      disabled: boolean('Disabled (disabled in <RadioButton>)', false),
+      labelText: text('Label text (labelText in <RadioButton>)', 'Radio button label')
+    }
+  }
+});
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
new file mode 100644
index 00000000..34ae296a
--- /dev/null
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
@@ -0,0 +1,46 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let orientation = 'horizontal';
+  export let labelPosition = 'right';
+  export let defaultSelected = undefined;
+  export let disabled = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx(
+    '--radio-button-group',
+    orientation === 'vertical' && `--radio-button-group--${orientation}`,
+    labelPosition && `--radio-button-group--label-${labelPosition}`,
+    className
+  );
+
+  let selected = writable(defaultSelected);
+
+  setContext('RadioButtonGroup', {
+    selected,
+    add: ({ checked, value }) => {
+      if (checked) {
+        selected.set(value);
+      }
+    },
+    update: value => {
+      selected.set(value);
+    }
+  });
+
+  $: {
+    defaultSelected = $selected;
+    dispatch('change', $selected);
+  }
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+  <div class={_class} {disabled}>
+    <slot />
+  </div>
+</div>
diff --git a/src/components/RadioButtonGroup/index.js b/src/components/RadioButtonGroup/index.js
new file mode 100644
index 00000000..6e800ebd
--- /dev/null
+++ b/src/components/RadioButtonGroup/index.js
@@ -0,0 +1,3 @@
+import RadioButtonGroup from './RadioButtonGroup.svelte';
+
+export default RadioButtonGroup;
diff --git a/src/index.js b/src/index.js
index ec51b590..035e6f83 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,6 +25,7 @@ import ProgressIndicator, {
   ProgressStep
 } from './components/ProgressIndicator';
 import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
+import RadioButtonGroup from './components/RadioButtonGroup';
 import Search, { SearchSkeleton } from './components/Search';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
@@ -80,6 +81,7 @@ export {
   ProgressStep,
   RadioButton,
   RadioButtonSkeleton,
+  RadioButtonGroup,
   Search,
   SearchSkeleton,
   SelectableTile,

From 6c75c8a973652b47a5dfa3d6500fddbcd1f8e030 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 21 Dec 2019 17:18:35 -0800
Subject: [PATCH 2/3] feat(components): add Select, SelectItem, SelectItemGroup

Closes #31
---
 README.md                                    |   4 +
 src/components/Select/Select.Skeleton.svelte |  19 ++++
 src/components/Select/Select.Story.svelte    |  29 +++++
 src/components/Select/Select.stories.js      |  36 ++++++
 src/components/Select/Select.svelte          | 110 +++++++++++++++++++
 src/components/Select/SelectItem.svelte      |  19 ++++
 src/components/Select/SelectItemGroup.svelte |  15 +++
 src/components/Select/index.js               |   6 +
 src/index.js                                 |   5 +
 9 files changed, 243 insertions(+)
 create mode 100644 src/components/Select/Select.Skeleton.svelte
 create mode 100644 src/components/Select/Select.Story.svelte
 create mode 100644 src/components/Select/Select.stories.js
 create mode 100644 src/components/Select/Select.svelte
 create mode 100644 src/components/Select/SelectItem.svelte
 create mode 100644 src/components/Select/SelectItemGroup.svelte
 create mode 100644 src/components/Select/index.js

diff --git a/README.md b/README.md
index 0afb9dfa..ac413ff6 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,10 @@ Currently, the following components are supported:
 - RadioButtonGroup
 - Search
   - SearchSkeleton
+- Select
+  - SelectSkeleton
+  - SelectItem
+  - SelectItemGroup
 - SkeletonPlaceholder
 - SkeletonText
 - Tag
diff --git a/src/components/Select/Select.Skeleton.svelte b/src/components/Select/Select.Skeleton.svelte
new file mode 100644
index 00000000..a8b3c90d
--- /dev/null
+++ b/src/components/Select/Select.Skeleton.svelte
@@ -0,0 +1,19 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let hideLabel = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', className);
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  {#if !hideLabel}
+    <span class={cx('--label', '--skeleton')} />
+  {/if}
+  <div class={cx('--select', '--skeleton')}>
+    <div class={cx('--select-input')} />
+  </div>
+</div>
diff --git a/src/components/Select/Select.Story.svelte b/src/components/Select/Select.Story.svelte
new file mode 100644
index 00000000..169f9e36
--- /dev/null
+++ b/src/components/Select/Select.Story.svelte
@@ -0,0 +1,29 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Select from './Select.svelte';
+  import SelectItem from './SelectItem.svelte';
+  import SelectSkeleton from './Select.Skeleton.svelte';
+  import SelectItemGroup from './SelectItemGroup.svelte';
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'skeleton'}
+      <SelectSkeleton {...$$props} />
+    {:else}
+      <Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
+        <SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
+        <SelectItemGroup {...$$props.group} label="Category 1">
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+        </SelectItemGroup>
+        <SelectItemGroup {...$$props.group} label="Category 2">
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </SelectItemGroup>
+      </Select>
+    {/if}
+  </div>
+</Layout>
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
new file mode 100644
index 00000000..aa9ce3fd
--- /dev/null
+++ b/src/components/Select/Select.stories.js
@@ -0,0 +1,36 @@
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import Component from './Select.Story.svelte';
+
+export default { title: 'Select', decorators: [withKnobs] };
+
+const labelPositions = {
+  'Left (left)': 'left',
+  'Right (right)': 'right'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    select: {
+      light: boolean('Light variant (light in <Select>)', false),
+      inline: boolean('Put control in-line with label (inline in <Select>)', false),
+      disabled: boolean('Disabled (disabled in <Select>)', false),
+      hideLabel: boolean('No label (hideLabel in <Select>)', false),
+      invalid: boolean('Show form validation UI (invalid in <Select>)', false),
+      invalidText: text(
+        'Form validation UI content (invalidText in <Select>)',
+        'A valid value is required'
+      ),
+      labelText: text('Label text (helperText)', 'Select'),
+      helperText: text('Helper text (helperText)', 'Optional helper text.')
+    },
+    group: {
+      disabled: boolean('Disabled (disabled in <SelectItemGroup>)', false)
+    }
+  }
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: { story: 'skeleton', hideLabel: boolean('No label (hideLabel in <Select>)', false) }
+});
diff --git a/src/components/Select/Select.svelte b/src/components/Select/Select.svelte
new file mode 100644
index 00000000..1b5d8587
--- /dev/null
+++ b/src/components/Select/Select.svelte
@@ -0,0 +1,110 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let inline = false;
+  export let labelText = '';
+  export let disabled = false;
+  export let defaultValue = undefined;
+  export let hideLabel = false;
+  export let invalid = false;
+  export let invalidText = '';
+  export let helperText = '';
+  export let light = false;
+  export let noLabel = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const errorId = `error-${id}`;
+  const _class = cx(
+    '--select',
+    inline && '--select--inline',
+    light && '--select--light',
+    invalid && '--select--invalid',
+    disabled && '--select--disabled',
+    className
+  );
+  const _labelClass = cx(
+    '--label',
+    hideLabel && '--visually-hidden',
+    disabled && '--label--disabled'
+  );
+  const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
+
+  let selected = writable(defaultValue);
+
+  setContext('Select', { selected });
+
+  $: {
+    defaultValue = $selected;
+    dispatch('change', $selected);
+  }
+</script>
+
+<div class={cx('--form-item')} {style}>
+  <div class={_class}>
+    {#if !noLabel}
+      <label for={id} class={_labelClass}>{labelText}</label>
+    {/if}
+    {#if !inline && helperText}
+      <div class={_helperTextClass}>{helperText}</div>
+    {/if}
+    {#if inline}
+      <div class={cx('--select-input--inline__wrapper')}>
+        <div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
+          <select
+            class={cx('--select-input')}
+            aria-describedby={invalid ? errorId : undefined}
+            disabled={disabled || undefined}
+            aria-invalid={invalid || undefined}
+            on:change={event => {
+              selected.set(event.target.value);
+            }}
+            {id}>
+            <slot />
+          </select>
+          <ChevronDown16 class={cx('--select__arrow')} />
+          {#if invalid}
+            <WarningFilled16 class={cx('--select__invalid-icon')} />
+          {/if}
+        </div>
+        {#if invalid}
+          <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+        {/if}
+      </div>
+      {#if helperText}
+        <div class={_helperTextClass}>{helperText}</div>
+      {/if}
+    {/if}
+
+    {#if !inline}
+      <div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
+        <select
+          class={cx('--select-input')}
+          aria-describedby={invalid ? errorId : undefined}
+          disabled={disabled || undefined}
+          aria-invalid={invalid || undefined}
+          on:change
+          on:change={event => {
+            selected.set(event.target.value);
+          }}
+          {id}>
+          <slot />
+        </select>
+        <ChevronDown16 class={cx('--select__arrow')} />
+        {#if invalid}
+          <WarningFilled16 class={cx('--select__invalid-icon')} />
+        {/if}
+      </div>
+      {#if invalid}
+        <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+      {/if}
+    {/if}
+  </div>
+</div>
diff --git a/src/components/Select/SelectItem.svelte b/src/components/Select/SelectItem.svelte
new file mode 100644
index 00000000..13d17f20
--- /dev/null
+++ b/src/components/Select/SelectItem.svelte
@@ -0,0 +1,19 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let value = '';
+  export let text = '';
+  export let disabled = false;
+  export let hidden = false;
+  export let style = undefined;
+
+  import { getContext } from 'svelte';
+  import { cx } from '../../lib';
+
+  const { selected } = getContext('Select');
+  const _class = cx('--select-option', className);
+</script>
+
+<option class={_class} {value} {disabled} {hidden} {style} selected={$selected === value}>
+  {text}
+</option>
diff --git a/src/components/Select/SelectItemGroup.svelte b/src/components/Select/SelectItemGroup.svelte
new file mode 100644
index 00000000..af0ff642
--- /dev/null
+++ b/src/components/Select/SelectItemGroup.svelte
@@ -0,0 +1,15 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let label = 'Provide label';
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--select-optgroup', className);
+</script>
+
+<optgroup class={_class} {label} {disabled} {style}>
+  <slot />
+</optgroup>
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
new file mode 100644
index 00000000..b5ab0843
--- /dev/null
+++ b/src/components/Select/index.js
@@ -0,0 +1,6 @@
+import Select from './Select.svelte';
+
+export default Select;
+export { default as SelectSkeleton } from './Select.Skeleton.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as SelectItemGroup } from './SelectItemGroup.svelte';
diff --git a/src/index.js b/src/index.js
index 035e6f83..948910bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,6 +27,7 @@ import ProgressIndicator, {
 import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
 import RadioButtonGroup from './components/RadioButtonGroup';
 import Search, { SearchSkeleton } from './components/Search';
+import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './components/Select';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
 import Tag, { TagSkeleton } from './components/Tag';
@@ -85,6 +86,10 @@ export {
   Search,
   SearchSkeleton,
   SelectableTile,
+  Select,
+  SelectSkeleton,
+  SelectItem,
+  SelectItemGroup,
   SkeletonPlaceholder,
   SkeletonText,
   Switch,

From b8a5d7bdcc16a23f1d6d0d4a3c2d0409d736d8ae Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 21 Dec 2019 17:56:32 -0800
Subject: [PATCH 3/3] refactor(tooltip): forward events, remove external props

Supports #7
---
 .../TooltipDefinition/TooltipDefinition.Story.svelte        | 4 +---
 src/components/TooltipDefinition/TooltipDefinition.svelte   | 4 ++--
 src/components/TooltipIcon/TooltipIcon.svelte               | 6 +++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/TooltipDefinition/TooltipDefinition.Story.svelte b/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
index 41a65d14..dba89f2f 100644
--- a/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
+++ b/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
@@ -4,7 +4,5 @@
 </script>
 
 <Layout>
-  <div>
-    <TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
-  </div>
+  <TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
 </Layout>
diff --git a/src/components/TooltipDefinition/TooltipDefinition.svelte b/src/components/TooltipDefinition/TooltipDefinition.svelte
index 5fb18c33..848ed274 100644
--- a/src/components/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/components/TooltipDefinition/TooltipDefinition.svelte
@@ -7,7 +7,7 @@
   export let triggerClassName = undefined;
   export { triggerClassName as triggerClass };
   export let tooltipText = '';
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -22,7 +22,7 @@
   );
 </script>
 
-<div {...props} class={_class}>
+<div class={_class} {style}>
   <button
     on:click
     on:mouseover
diff --git a/src/components/TooltipIcon/TooltipIcon.svelte b/src/components/TooltipIcon/TooltipIcon.svelte
index f50169a1..3a36c39f 100644
--- a/src/components/TooltipIcon/TooltipIcon.svelte
+++ b/src/components/TooltipIcon/TooltipIcon.svelte
@@ -5,7 +5,7 @@
   export let align = 'center';
   export let id = Math.random();
   export let tooltipText = '';
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -19,13 +19,13 @@
 </script>
 
 <button
-  {...props}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
+  aria-describedby={id}
   class={_class}
-  aria-describedby={id}>
+  {style}>
   <span class={cx('--assistive-text')} {id}>{tooltipText}</span>
   <slot />
 </button>