Add MdRadioButton component (#127)

* Add MdRadioButton component * Clean up stories that were using an older way of creating markdown documentation
miljodir · Jun 3, 2024 · 1fa7e3d · 1fa7e3d
1 parent dd50a8a
commit 1fa7e3d
Show file tree

Hide file tree

Showing 11 changed files with 300 additions and 29 deletions.
diff --git a/packages/css/src/formElements/radiobutton/README.md b/packages/css/src/formElements/radiobutton/README.md
@@ -0,0 +1,24 @@
+# Structure
+
+To use the `RadioGroup` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+    <div className="md-radiobutton [md-checkbox--disabled]">
+      <span className="md-radiobutton__check-area">
+        <span className="md-radiobutton__selected-dot" />
+      </span>
+      <input
+        id={String(radioGroupId) || undefined}
+        type="radio"
+        value={value}
+        checked="{true|false}"
+        disabled="{disabled}"
+        {...otherProps}
+      />
+      <label>{label}</label>
+    </div>
+```
diff --git a/packages/css/src/formElements/radiobutton/radiobutton.css b/packages/css/src/formElements/radiobutton/radiobutton.css
@@ -0,0 +1,76 @@
+.md-radiobutton {
+  font-family: 'Open sans';
+  font-size: 16px;
+  border: none;
+  padding: 0;
+}
+
+.md-radiobutton {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.md-radiobutton:focus-within {
+  outline: 2px solid var(--mdPrimaryColor);
+  outline-offset: 2px;
+}
+
+.md-radiobutton:hover {
+  text-decoration: underline;
+}
+
+.md-radiobutton input[type='radio'] {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.md-radiobutton__check-area {
+  width: 1.45rem;
+  height: 1.45rem;
+  display: block;
+  background-color: #fff;
+  border: 1px solid var(--mdPrimaryColor);
+  border-radius: 50%;
+  margin: 0 0.5rem 0 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.md-radiobutton:not(.md-radiobutton--disabled):focus-within .md-radiobutton__check-area,
+.md-radiobutton:not(.md-radiobutton--disabled):hover .md-radiobutton__check-area {
+  background-color: var(--mdPrimaryColor20);
+  text-decoration: underline;
+}
+
+.md-radiobutton__selected-dot {
+  width: 0.6em;
+  height: 0.6em;
+  display: block;
+  background-color: var(--mdPrimaryColor);
+  border-radius: 50%;
+  margin: 0 auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  animation: fadeIn 0.3s ease-out 1 forwards;
+}
+
+/* Disabled */
+.md-radiobutton--disabled:hover {
+  text-decoration: none;
+  cursor: default;
+}
+.md-radiobutton--disabled .md-radiobutton__check-area {
+  background-color: var(--mdGreyColor20);
+  border-color: var(--mdGreyColor60);
+}
+.md-radiobutton--disabled .md-radiobutton__selected-dot {
+  background-color: var(--mdGreyColor60);
+}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
@@ -21,6 +21,7 @@
 @import './formElements/textarea/textarea.css';
 @import './formElements/select/select.css';
 @import './formElements/autocomplete/autocomplete.css';
+@import './formElements/radiobutton/radiobutton.css';
 @import './formElements/radiogroup/radiogroup.css';
 @import './formElements/multiselect/multiselect.css';
 @import './formElements/fileupload/fileupload.css';

diff --git a/packages/react/src/formElements/MdRadioButton.tsx b/packages/react/src/formElements/MdRadioButton.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import classnames from 'classnames';
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface MdRadioButtonProps {
+  checked?: boolean | undefined;
+  label?: string;
+  value?: any;
+  id?: string | number;
+  disabled?: boolean;
+  className?: string;
+  onChange(_e: React.ChangeEvent<HTMLInputElement>): void;
+  onBlur?(_e: React.FocusEvent<HTMLInputElement>): void;
+  onFocus?(_e: React.FocusEvent<HTMLInputElement>): void;
+  [otherProps: string]: unknown;
+}
+
+const MdRadioButton: React.FunctionComponent<MdRadioButtonProps> = ({
+  id,
+  disabled,
+  className,
+  value,
+  label,
+  checked,
+  ...otherProps
+}: MdRadioButtonProps) => {
+  const radioGroupId = id || uuidv4();
+  const [,] = useState(false);
+
+  const classNames = classnames(
+    'md-radiobutton',
+    {
+      'md-radiobutton--disabled': !!disabled,
+    },
+    className,
+  );
+
+  return (
+    <div className={classNames}>
+      <span className="md-radiobutton__check-area">{checked && <span className="md-radiobutton__selected-dot" />}</span>
+      <input
+        id={String(radioGroupId) || undefined}
+        type="radio"
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        {...otherProps}
+      />
+      <label htmlFor={String(radioGroupId) || undefined}>{label && label !== '' && label}</label>
+    </div>
+  );
+};
+
+export default MdRadioButton;
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -16,6 +16,7 @@ import MdCheckboxGroup, { MdCheckboxGroupProps } from './formElements/MdCheckbox
 import MdFileUpload, { MdFileUploadProps } from './formElements/MdFileUpload';
 import MdInput, { MdInputProps } from './formElements/MdInput';
 import MdMultiSelect, { MdMultiSelectOptionProps, MdMultiSelectProps } from './formElements/MdMultiSelect';
+import MdRadioButton, { MdRadioButtonProps } from './formElements/MdRadioButton';
 import MdRadioGroup, { MdRadioGroupProps } from './formElements/MdRadioGroup';
 import MdSelect, { MdSelectOptionProps, MdSelectProps } from './formElements/MdSelect';
 import MdTextArea, { MdTextAreaProps } from './formElements/MdTextArea';
@@ -135,6 +136,7 @@ export {
   MdMultiSelect,
   MdAutocomplete,
   MdRadioGroup,
+  MdRadioButton,
   MdTextArea,
   MdFileUpload,
   MdLink,
@@ -168,6 +170,7 @@ export {
   MdAutocompleteProps,
   MdAutocompleteOptionProps,
   MdRadioGroupProps,
+  MdRadioButtonProps,
   MdTextAreaProps,
   MdFileUploadProps,
   MdLinkProps,

diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -1,15 +1,11 @@
 import { action } from '@storybook/addon-actions';
-import { Title, Subtitle, Markdown, Controls, Primary as PrimaryStory } from '@storybook/addon-docs';
+import { Title, Subtitle, Markdown, Description, Controls, Primary as PrimaryStory } from '@storybook/addon-docs';
 import React from 'react';
 import Readme from '../packages/css/src/button/README.md';
 import MdButton from '../packages/react/src/button/MdButton';
 import MdChevronIcon from '../packages/react/src/icons/MdChevronIcon';
 import MdXIcon from '../packages/react/src/icons/MdXIcon';
 
-const markdownString =
-  // eslint-disable-next-line quotes
-  "A button component.<br/><br/>`import { MdButton } from '@miljodirektoratet/md-react'`";
-
 export default {
   title: 'Components/Button',
   component: MdButton,
@@ -20,17 +16,17 @@ export default {
           <>
             <Title />
             <Subtitle />
-            <Markdown>{markdownString}</Markdown>
+            <Description />
             <PrimaryStory />
             <Controls />
             <Markdown>{Readme.toString()}</Markdown>
           </>
         );
       },
-    },
-    description: {
-      // eslint-disable-next-line quotes
-      component: "A button component.<br/><br/>`import { MdButton } from '@miljodirektoratet/md-react'`",
+      description: {
+        // eslint-disable-next-line quotes
+        component: "A button component.<br/><br/>`import { MdButton } from '@miljodirektoratet/md-react'`",
+      },
     },
   },
   argTypes: {

diff --git a/stories/Checkbox.stories.tsx b/stories/Checkbox.stories.tsx
@@ -1,14 +1,10 @@
-import { Title, Subtitle, Markdown, Primary, Controls } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, Markdown, Primary, Controls } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import React from 'react';
 import Readme from '../packages/css/src/formElements/checkbox/README.md';
 import MdCheckbox from '../packages/react/src/formElements/MdCheckbox';
 import type { MdCheckboxProps } from '../packages/react/src/formElements/MdCheckbox';
 
-const markdownString =
-  // eslint-disable-next-line quotes
-  "A checkbox component.<br/><br/>`import { MdCheckbox } from '@miljodirektoratet/md-react'`";
-
 export default {
   title: 'Form/Checkbox',
   component: MdCheckbox,
@@ -19,13 +15,18 @@ export default {
           <>
             <Title />
             <Subtitle />
-            <Markdown>{markdownString}</Markdown>
+            <Description />
             <Primary />
             <Controls />
             <Markdown>{Readme.toString()}</Markdown>
           </>
         );
       },
+      description: {
+        component:
+          // eslint-disable-next-line quotes
+          "A checkbox component.<br/><br/>`import { MdCheckbox } from '@miljodirektoratet/md-react'`",
+      },
     },
   },
   argTypes: {

diff --git a/stories/CheckboxGroup.stories.tsx b/stories/CheckboxGroup.stories.tsx
@@ -1,14 +1,10 @@
-import { Title, Subtitle, Markdown, Controls, Primary } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, Markdown, Controls, Primary } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import React from 'react';
 import Readme from '../packages/css/src/formElements/checkboxgroup/README.md';
 import MdCheckboxGroup from '../packages/react/src/formElements/MdCheckboxGroup';
 import type { Args } from '@storybook/react';
 
-const markdownString =
-  // eslint-disable-next-line quotes
-  "A component for grouped checkboxes.<br/><br/>`import { MdCheckboxGroup } from '@miljodirektoratet/md-react'`";
-
 export default {
   title: 'Form/Checkbox/CheckboxGroup',
   component: MdCheckboxGroup,
@@ -19,13 +15,18 @@ export default {
           <>
             <Title />
             <Subtitle />
-            <Markdown>{markdownString}</Markdown>
+            <Description />
             <Primary />
             <Controls />
             <Markdown>{Readme.toString()}</Markdown>
           </>
         );
       },
+      description: {
+        component:
+          // eslint-disable-next-line quotes
+          "A component for grouped checkboxes.<br/><br/>`import { MdCheckboxGroup } from '@miljodirektoratet/md-react'`",
+      },
     },
   },
   argTypes: {

diff --git a/stories/FileList.stories.tsx b/stories/FileList.stories.tsx
@@ -1,14 +1,10 @@
-import { Title, Subtitle, Primary, Markdown, Controls } from '@storybook/addon-docs';
+import { Title, Subtitle, Primary, Description, Markdown, Controls } from '@storybook/addon-docs';
 import React from 'react';
 import Readme from '../packages/css/src/filelist/README.md';
 import MdFileList from '../packages/react/src/fileList/MdFileList';
 import type { MdFileListProps } from '../packages/react/src/fileList/MdFileList';
 import type { StoryFn } from '@storybook/react';
 
-const markdownString =
-  // eslint-disable-next-line quotes
-  "A component for listing files, with buttons for delete and download.<br/><br/>`import { MdFileList } from '@miljodirektoratet/md-react'`";
-
 export default {
   title: 'Components/FileList',
   component: MdFileList,
@@ -19,13 +15,18 @@ export default {
           <>
             <Title />
             <Subtitle />
-            <Markdown>{markdownString}</Markdown>
+            <Description />
             <Primary />
             <Controls />
             <Markdown>{Readme.toString()}</Markdown>
           </>
         );
       },
+      description: {
+        component:
+          // eslint-disable-next-line quotes
+          "A component for listing files, with buttons for delete and download.<br/><br/>`import { MdFileList } from '@miljodirektoratet/md-react'`",
+      },
     },
   },
   argTypes: {