feat(component): add TimePicker

Closes #28

src/components/Select/Select.svelte

@@ -57,8 +57,8 @@
             aria-describedby={invalid ? errorId : undefined}
             disabled={disabled || undefined}
             aria-invalid={invalid || undefined}
-            on:change={event => {
-              selected.set(event.target.value);
+            on:change={({ target }) => {
+              selected.set(target.value);
             }}
             {id}>
             <slot />
@@ -86,8 +86,8 @@
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
           on:change
-          on:change={event => {
-            selected.set(event.target.value);
+          on:change={({ target }) => {
+            selected.set(target.value);
           }}
           {id}>
           <slot />

src/components/Select/SelectItem.svelte

@@ -10,11 +10,11 @@
   import { getContext } from 'svelte';
   import { cx } from '../../lib';
 
-  const { selected } = getContext('Select');
+  const ctx = getContext('Select') || getContext('TimePickerSelect');
 </script>
 
 <option
-  selected={$selected === value}
+  selected={ctx.$selected === value}
   class={cx('--select-option', className)}
   {value}
   {disabled}

src/components/TimePicker/TimePicker.Story.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import TimePicker from './TimePicker.svelte';
+  import TimePickerSelect from './TimePickerSelect.svelte';
+  import { SelectItem } from '../Select';
+
+  let value = '';
+  let select1 = 'PM';
+  let select2 = 'Time zone 1';
+</script>
+
+<Layout>
+  <TimePicker id="time-picker" {...$$props.timepicker} bind:value>
+    <TimePickerSelect {...$$props.select} id="time-picker-select-1" bind:value={select1}>
+      <SelectItem value="AM" text="AM" />
+      <SelectItem value="PM" text="PM" />
+    </TimePickerSelect>
+    <TimePickerSelect {...$$props.select} id="time-picker-select-2" bind:value={select2}>
+      <SelectItem value="Time zone 1" text="Time zone 1" />
+      <SelectItem value="Time zone 2" text="Time zone 2" />
+    </TimePickerSelect>
+  </TimePicker>
+</Layout>

src/components/TimePicker/TimePicker.stories.js

@@ -0,0 +1,36 @@
+import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
+import Component from './TimePicker.Story.svelte';
+
+export default { title: 'TimePicker', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    timepicker: {
+      pattern: text(
+        'Regular expression for the value (pattern in <TimePicker>)',
+        '(1[012]|[1-9]):[0-5][0-9](\\s)?'
+      ),
+      placeholder: text('Placeholder text (placeholder in <TimePicker>)', 'hh:mm'),
+      disabled: boolean('Disabled (disabled in <TimePicker>)', false),
+      light: boolean('Light variant (light in <TimePicker>)', false),
+      hideLabel: boolean('No label (hideLabel in <TimePicker>)', false),
+      labelText: text('Label text (labelText in <TimePicker>)', 'Select a time'),
+      invalid: boolean('Show form validation UI (invalid in <TimePicker>)', false),
+      invalidText: text(
+        'Form validation UI content (invalidText in <TimePicker>)',
+        'A valid value is required'
+      ),
+      maxlength: number('Maximum length (maxlength in <TimePicker>)', 5)
+    },
+    select: {
+      disabled: boolean('Disabled (disabled in <TimePickerSelect>)', false),
+      hideLabel: boolean('No label (hideLabel in <TimePickerSelect>)', true),
+      labelText: text('Label text (labelText in <TimePickerSelect>)', 'Please select'),
+      iconDescription: text(
+        'Trigger icon description (iconDescription in <TimePickerSelect>)',
+        'open list of options'
+      )
+    }
+  }
+});

src/components/TimePicker/TimePicker.svelte

@@ -0,0 +1,55 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let value = '';
+  export let labelText = '';
+  export let hideLabel = false;
+  export let type = 'text';
+  export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
+  export let placeholder = 'hh=mm';
+  export let maxlength = 5;
+  export let invalidText = 'Invalid time format.';
+  export let invalid = false;
+  export let disabled = false;
+  export let light = false;
+  export let style = undefined;
+
+  import { createEventDispatcher } from 'svelte';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+  <div class={cx('--time-picker', light && '--time-picker--light', light && '--select--light')}>
+    <div class={cx('--time-picker__input')}>
+      {#if labelText}
+        <label
+          for={id}
+          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+          {labelText}
+        </label>
+      {/if}
+      <input
+        data-invalid={invalid || undefined}
+        class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        on:input
+        on:input={({ target }) => {
+          value = target.value;
+        }}
+        {pattern}
+        {placeholder}
+        {maxlength}
+        {id}
+        {type}
+        {value}
+        {disabled} />
+
+    </div>
+    <slot />
+  </div>
+  {#if invalid}
+    <div class={cx('--form-requirement')}>{invalidText}</div>
+  {/if}
+</div>

src/components/TimePicker/TimePickerSelect.svelte

@@ -0,0 +1,54 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let value = '';
+  export let labelText = '';
+  export let hideLabel = true;
+  export let iconDescription = 'Open list of options';
+  export let disabled = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+
+  let selected = writable(value);
+
+  setContext('TimePickerSelect', { selected });
+
+  $: {
+    selected.set(value);
+    dispatch('change', $selected);
+  }
+  $: value = $selected;
+</script>
+
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--select', '--time-picker__select', className)}
+  {style}>
+  {#if labelText}
+    <label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>{labelText}</label>
+  {/if}
+  <select
+    class={cx('--select-input')}
+    {id}
+    {disabled}
+    {value}
+    on:change={({ target }) => {
+      selected.set(target.value);
+    }}>
+    <slot />
+  </select>
+  <ChevronDownGlyph
+    aria-label={iconDescription}
+    title={iconDescription}
+    class={cx('--select__arrow')} />
+</div>

src/components/TimePicker/index.js

@@ -0,0 +1,4 @@
+import TimePicker from './TimePicker.svelte';
+
+export default TimePicker;
+export { default as TimePickerSelect } from './TimePickerSelect.svelte';

src/index.js

@@ -65,6 +65,7 @@ import Tile, {
   TileAboveTheFoldContent,
   TileBelowTheFoldContent
 } from './components/Tile';
+import TimePicker, { TimePickerSelect } from './components/TimePicker';
 import Toggle, { ToggleSkeleton } from './components/Toggle';
 import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
 import TooltipDefinition from './components/TooltipDefinition';
@@ -157,6 +158,8 @@ export {
   TileBelowTheFoldContent,
   TileGroup,
   ToastNotification,
+  TimePicker,
+  TimePickerSelect,
   Toggle,
   ToggleSkeleton,
   ToggleSmall,