chore: lift components folder

src/RadioButtonGroup/RadioButtonGroup.Story.svelte

@@ -0,0 +1,15 @@
+<script>
+  import RadioButtonGroup from "./RadioButtonGroup.svelte";
+  import { RadioButton } from "../RadioButton";
+  import { FormGroup } from "../FormGroup";
+
+  $: selected = "default-selected";
+</script>
+
+<FormGroup legendText="Radio Button heading">
+  <RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
+    <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>

src/RadioButtonGroup/RadioButtonGroup.stories.js

@@ -0,0 +1,54 @@
+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"
+      ),
+    },
+  },
+});

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -0,0 +1,43 @@
+<script>
+  export let selected = undefined;
+  export let disabled = false;
+  export let labelPosition = "right"; // "right" | "left"
+  export let orientation = "horizontal"; // "horizontal" | "vertical"
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
+
+  setContext("RadioButtonGroup", {
+    selectedValue,
+    add: ({ checked, value }) => {
+      if (checked) {
+        selectedValue.set(value);
+      }
+    },
+    update: value => {
+      selectedValue.set(value);
+    }
+  });
+
+  $: selected = $selectedValue;
+  $: dispatch("change", $selectedValue);
+</script>
+
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div
+    class:bx--radio-button-group={true}
+    class:bx--radio-button-group--vertical={orientation === 'vertical'}
+    class={labelPosition && `bx--radio-button-group--label-${labelPosition}`}
+    {disabled}>
+    <slot />
+  </div>
+</div>

src/RadioButtonGroup/index.js

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