chore: lift components folder

src/TimePicker/TimePicker.Story.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { SelectItem } from "../Select";
+  import TimePicker from "./TimePicker.svelte";
+  import TimePickerSelect from "./TimePickerSelect.svelte";
+
+  $: value = "";
+  $: select1 = "PM";
+  $: select2 = "Time zone 1";
+  $: console.log(value, select1, select2);
+</script>
+
+<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>

src/TimePicker/TimePicker.stories.js

@@ -0,0 +1,52 @@
+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),
+      id: text("TimePicker id", "time-picker-id"),
+      name: text("TimePicker name", "time-picker-name"),
+    },
+    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"
+      ),
+      id: text("TimePickerSelect id", "time-picker-select-id"),
+      name: text("TimePickerSelect name", "time-picker-select-name"),
+    },
+  },
+});

src/TimePicker/TimePicker.svelte

@@ -0,0 +1,65 @@
+<script>
+  export let value = "";
+  export let type = "text";
+  export let placeholder = "hh=mm";
+  export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
+  export let maxlength = 5;
+  export let light = false;
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalid = false;
+  export let invalidText = "Invalid time format.";
+  export let labelText = "";
+  export let hideLabel = false;
+</script>
+
+<div
+  class:bx--form-item={true}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  {...$$restProps}>
+  <div
+    class:bx--time-picker={true}
+    class:bx--time-picker--light={light}
+    class:bx--select--light={light}>
+    <div class:bx--time-picker__input={true}>
+      {#if labelText}
+        <label
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}>
+          {labelText}
+        </label>
+      {/if}
+      <input
+        data-invalid={invalid || undefined}
+        class:bx--time-picker__input-field={true}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
+        on:change
+        on:input
+        on:input={({ target }) => {
+          value = target.value;
+        }}
+        on:focus
+        on:blur
+        {pattern}
+        {placeholder}
+        {maxlength}
+        {id}
+        {name}
+        {type}
+        {value}
+        {disabled} />
+    </div>
+    <slot />
+  </div>
+  {#if invalid}
+    <div class:bx--form-requirement={true}>{invalidText}</div>
+  {/if}
+</div>

src/TimePicker/TimePickerSelect.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let value = "";
+  export let name = undefined;
+  export let disabled = false;
+  export let iconDescription = "Open list of options";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelText = "";
+  export let hideLabel = true;
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
+
+  const selectedValue = writable(value);
+
+  setContext("TimePickerSelect", { selectedValue });
+
+  $: selectedValue.set(value);
+  $: value = $selectedValue;
+</script>
+
+<div
+  class:bx--select={true}
+  class:bx--time-picker__select={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#if labelText}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}>
+      {labelText}
+    </label>
+  {/if}
+  <!-- svelte-ignore a11y-no-onchange -->
+  <select
+    class:bx--select-input={true}
+    on:change={({ target }) => {
+      selectedValue.set(target.value);
+    }}
+    {id}
+    {name}
+    {disabled}
+    {value}>
+    <slot />
+  </select>
+  <ChevronDownGlyph
+    aria-label={iconDescription}
+    title={iconDescription}
+    class="bx--select__arrow" />
+</div>

src/TimePicker/index.js

@@ -0,0 +1,2 @@
+export { default as TimePicker } from "./TimePicker.svelte";
+export { default as TimePickerSelect } from "./TimePickerSelect.svelte";