feat: radio button template

components/radio-button/bem.js

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const RadioButton = ({ checked = false, disabled = false }) =>
+  `<input type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
+    'utrecht-radio-button',
+    checked && 'utrecht-radio-button--checked',
+    disabled && 'utrecht-radio-button--disabled',
+  )}">`;

components/radio-button/bem.scss

@@ -11,6 +11,10 @@
   margin-inline-start: 0;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-radio-button--checked {
+}
+
 .utrecht-radio-button--disabled {
   cursor: var(--utrecht-action-disabled-cursor);
 }

components/radio-button/bem.stories.mdx

@@ -0,0 +1,59 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import { defaultArgs, RadioButton } from "./bem";
+
+<Meta
+  title="CSS Component/Radio Button"
+  argTypes={{}}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => RadioButton(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Radio Button Component
+
+<Canvas>
+  <Story
+    name="Radio Button"
+    args={{
+      ...defaultArgs,
+    }}
+  >
+    {RadioButton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Radio Button" />
+
+<Canvas>
+  <Story
+    name="Disabled radio button"
+    args={{
+      ...defaultArgs,
+      disabled: true,
+    }}
+  >
+    {RadioButton.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Checked radio button"
+    args={{
+      ...defaultArgs,
+      checked: true,
+    }}
+  >
+    {RadioButton.bind({})}
+  </Story>
+</Canvas>