feat(components): add RadioButton

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

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>

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>

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' } });

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>

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';

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,