RadioButton docs + preview (#180)

@stellar/design-system-website/docs/components/inputs/radio-button.mdx

@@ -0,0 +1,19 @@
+---
+slug: /radio-button
+---
+
+# Radio button
+
+<ComponentDescription componentName="RadioButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="RadioButton">
+  <RadioButton fieldSize="md" id="radio" label="Label" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="RadioButton" />

@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx

@@ -0,0 +1,29 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const radioButtonPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "fieldSize",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -21,6 +21,7 @@ import { notificationPreview } from "@site/src/componentPreview/notificationPrev
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
+import { radioButtonPreview } from "@site/src/componentPreview/radioButtonPreview";
 import { selectPreview } from "@site/src/componentPreview/selectPreview";
 import { textareaPreview } from "@site/src/componentPreview/textareaPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
@@ -45,6 +46,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
+  RadioButton: radioButtonPreview,
   Select: selectPreview,
   Textarea: textareaPreview,
   Title: titlePreview,

@stellar/design-system/src/components/RadioButton/index.tsx

@@ -1,19 +1,32 @@
 import React from "react";
 import "./styles.scss";
 
-interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+/** Including all valid [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) */
+export interface RadioButtonProps {
+  /** ID of the radio button should be unique */
   id: string;
+  /** Label of the radio button */
   label: string | React.ReactNode;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the radio button */
   fieldSize: "md" | "sm" | "xs";
 }
 
-export const RadioButton: React.FC<RadioButtonProps> = ({
+interface Props
+  extends RadioButtonProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+}
+
+/**
+ * `RadioButton` component is a form input element, which allows you to select a single value from a group of options for submission. All native HTML `radio` input attributes apply.
+ */
+export const RadioButton: React.FC<Props> = ({
   id,
   label,
   fieldSize,
   ...props
-}: RadioButtonProps) => {
+}: Props) => {
   const additionalClasses = [
     `RadioButton--${fieldSize}`,
     ...(props.disabled ? ["RadioButton--disabled"] : []),