From bf502f904ff445f19969856472cc0955349f4207 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 15 Dec 2019 15:03:07 -0800
Subject: [PATCH] feat(components): add RadioButton

---
 README.md                                     |  5 +++
 .../RadioButton/RadioButton.Skeleton.svelte   | 14 +++++++
 .../RadioButton/RadioButton.Story.svelte      | 19 +++++++++
 .../RadioButton/RadioButton.stories.js        | 22 ++++++++++
 src/components/RadioButton/RadioButton.svelte | 42 +++++++++++++++++++
 src/components/RadioButton/index.js           |  4 ++
 src/index.js                                  |  3 ++
 7 files changed, 109 insertions(+)
 create mode 100644 src/components/RadioButton/RadioButton.Skeleton.svelte
 create mode 100644 src/components/RadioButton/RadioButton.Story.svelte
 create mode 100644 src/components/RadioButton/RadioButton.stories.js
 create mode 100644 src/components/RadioButton/RadioButton.svelte
 create mode 100644 src/components/RadioButton/index.js

diff --git a/README.md b/README.md
index c6da16db..45923d6b 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,11 @@
 # carbon-components-svelte
 
 > 🚧🚧🚧 UNDER CONSTRUCTION
+
 > Svelte implementation of the Carbon Design System
 
+> 🚧🚧🚧
+
 ## [Storybook](https://ibm.github.io/carbon-components-svelte)
 
 ## Getting Started
@@ -32,6 +35,8 @@ Currently, the following components are supported:
 - Link
 - ListItem
 - OrderedList
+- RadioButton
+- RadioButtonSkeleton
 - Search
 - SearchSkeleton
 - SkeletonPlaceholder
diff --git a/src/components/RadioButton/RadioButton.Skeleton.svelte b/src/components/RadioButton/RadioButton.Skeleton.svelte
new file mode 100644
index 00000000..9bdd89d8
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.Skeleton.svelte
@@ -0,0 +1,14 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--radio-button-wrapper', className);
+</script>
+
+<div {...props} class={_class}>
+  <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
new file mode 100644
index 00000000..688ac99e
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.Story.svelte
@@ -0,0 +1,19 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import ListItem from '../ListItem';
+  import RadioButton from './RadioButton.svelte';
+  import RadioButtonSkeleton from './RadioButton.Skeleton.svelte';
+</script>
+
+<Layout>
+
+  {#if story === 'skeleton'}
+    <div>
+      <RadioButtonSkeleton />
+    </div>
+  {:else}
+    <RadioButton {...$$props} id="radio-1" />
+  {/if}
+</Layout>
diff --git a/src/components/RadioButton/RadioButton.stories.js b/src/components/RadioButton/RadioButton.stories.js
new file mode 100644
index 00000000..849f91a3
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.stories.js
@@ -0,0 +1,22 @@
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
+import Component from './RadioButton.Story.svelte';
+
+export default { title: 'Radio Button', 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' } });
diff --git a/src/components/RadioButton/RadioButton.svelte b/src/components/RadioButton/RadioButton.svelte
new file mode 100644
index 00000000..7c1ae093
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.svelte
@@ -0,0 +1,42 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let value = '';
+  export let checked = false;
+  export let disabled = false;
+  export let id = Math.random();
+  export let labelText = '';
+  export let hideLabel = false;
+  export let labelPosition = 'right';
+  export let name = '';
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    '--radio-button-wrapper',
+    labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
+    className
+  );
+  const _innerLabelClass = cx(hideLabel && '--visually-hidden');
+</script>
+
+<div class={_class}>
+  <input
+    {...props}
+    type="radio"
+    class={cx('--radio-button')}
+    on:change
+    on:change={event => {
+      value = event.target.value;
+    }}
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    {value} />
+  <label for={id} class={cx('--radio-button__label')}>
+    <span class={cx('--radio-button__appearance')} />
+    <span class={_innerLabelClass}>{labelText}</span>
+  </label>
+</div>
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
new file mode 100644
index 00000000..998d60c7
--- /dev/null
+++ b/src/components/RadioButton/index.js
@@ -0,0 +1,4 @@
+import RadioButton from './RadioButton.svelte';
+
+export default RadioButton;
+export { default as RadioButtonSkeleton } from './RadioButton.Skeleton.svelte';
diff --git a/src/index.js b/src/index.js
index 5413fe4c..9e613179 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ import Loading from './components/Loading';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
 import OrderedList from './components/OrderedList';
+import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
 import Search, { SearchSkeleton } from './components/Search';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
@@ -41,6 +42,8 @@ export {
   Link,
   ListItem,
   OrderedList,
+  RadioButton,
+  RadioButtonSkeleton,
   Search,
   SearchSkeleton,
   SkeletonPlaceholder,