docs: migrate RadioButton docs to csf3

Author: Nikolai Lopin

src/components/RadioButton/RadioButtonProps.tsx

@@ -21,6 +21,7 @@ interface RadioButtonProps extends ComponentPropsWithoutRef<'input'>, ClassNameP
     error?: boolean;
     /**
      * Align the label text relatively to the radio button
+     * @default center
      */
     textVerticalAlign?: 'top' | 'center';
 }

src/components/RadioButton/docs/RadioButton.stories.mdx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioButton } from '../RadioButton';
+
+const meta: Meta = {
+    title: 'Form Elements/RadioButton',
+    component: RadioButton,
+    argTypes: {
+        textVerticalAlign: {
+            options: ['top', 'center'],
+            defaultValue: 'center',
+            control: 'radio'
+        }
+    },
+    args: {
+        label: 'First Name'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Default: Story = {
+    args: {
+        label: undefined
+    }
+};
+
+export const WithLabel: Story = {
+    args: {}
+};
+
+export const Checked: Story = {
+    args: {
+        checked: true
+    }
+};
+
+export const WithError: Story = {
+    args: {
+        error: true
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true
+    }
+};
+
+export const WithVerticalAlignment: Story = {
+    args: {
+        label: 'By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. The author accepts no liability whatsoever in respect of the current relevance, accuracy, completeness or quality of the information on this website. The author accepts no liability whatsoever with respect to either material or immaterial losses incurred as a result of the use or non-use of the information presented here or the use of inaccurate or incomplete information unless the author is demonstrably guilty of acts of wilful or gross negligence. All services offered are subject to change and are without obligation. The author specifically reserves the right to change, amplify or delete parts of the pages or the whole of the services offered without prior notification or to cease publication, either temporarily or definitively.',
+        textVerticalAlign: 'top'
+    }
+};

src/components/RadioButton/docs/RadioButton.stories.tsx

@@ -0,0 +1,24 @@
+import { Primary, Stories, ArgTypes, Meta } from '@storybook/blocks';
+
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as RadioButtonStories from './RadioButton.stories';
+
+<Meta of={RadioButtonStories} />
+
+# RadioButton
+
+Use radio buttons when you have a few options that a user can choose from. Never use radio buttons if the user can
+select more than one option from a list (consider using a [Checkbox](/components/Checkbox) instead).
+
+You can provide the label as either a `string` or as a react component. If a `string` is provided as the label, it
+will be wrapped with the [Text](/components/text) component.
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={RadioButtonStories} />
+
+<StyledSystemLinks component="RadioButton" supportedProps={['margin']} />
+
+<Stories includePrimary={false} />