chore: lift components folder

src/RadioButton/RadioButton.Skeleton.svelte

@@ -0,0 +1,10 @@
+<div
+  class:bx--radio-button-wrapper={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div class:bx--radio-button={true} class:bx--skeleton={true} />
+  <span class:bx--radio-button__label={true} class:bx--skeleton={true} />
+</div>

src/RadioButton/RadioButton.Story.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let story = undefined;
+
+  import RadioButton from "./RadioButton.svelte";
+  import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
+
+  $: checked = false;
+</script>
+
+{#if story === 'skeleton'}
+  <RadioButtonSkeleton />
+{:else}
+  <RadioButton {...$$props} bind:checked id="radio-1" />
+{/if}

src/RadioButton/RadioButton.stories.js

@@ -0,0 +1,26 @@
+import { withKnobs, text, select, boolean } from "@storybook/addon-knobs";
+import Component from "./RadioButton.Story.svelte";
+
+export default { title: "RadioButton", decorators: [withKnobs] };
+
+const labelPositions = {
+  "Left (left)": "left",
+  "Right (right)": "right",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    name: text("Form item name (name)", "test"),
+    value: text("Value (value)", "standard"),
+    labelText: text("Label text (labelText)", "Standard Radio Button"),
+    labelPosition: select(
+      "Label position (labelPosition)",
+      labelPositions,
+      "right"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/RadioButton/RadioButton.svelte

@@ -0,0 +1,48 @@
+<script>
+  export let value = "";
+  export let checked = false;
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelPosition = "right"; // "left" | "right"
+  export let labelText = "";
+  export let hideLabel = false;
+  export let name = "";
+
+  import { getContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const ctx = getContext("RadioButtonGroup");
+  const selectedValue = ctx
+    ? ctx.selectedValue
+    : writable(checked ? value : undefined);
+
+  if (ctx) {
+    ctx.add({ id, checked, disabled, value });
+  }
+
+  $: checked = $selectedValue === value;
+</script>
+
+<div
+  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
+  {...$$restProps}>
+  <input
+    type="radio"
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    {value}
+    class:bx--radio-button={true}
+    on:change
+    on:change={() => {
+      if (ctx) {
+        ctx.update(value);
+      }
+    }} />
+  <label class:bx--radio-button__label={true} for={id}>
+    <span class:bx--radio-button__appearance={true} />
+    <span class:bx--visually-hidden={hideLabel}>{labelText}</span>
+  </label>
+</div>

src/RadioButton/index.js

@@ -0,0 +1,2 @@
+export { default as RadioButton } from "./RadioButton.svelte";
+export { default as RadioButtonSkeleton } from "./RadioButton.Skeleton.svelte";