Added Molecules RadioList and UnorderedList; Added Atom RadioButtonInput

Author: wintondeshong

src/assets/scss/6-components/molecules/__molecules.scss

@@ -6,3 +6,4 @@
 @import "error-banner";
 @import "form-fields";
 @import "forms";
+@import "radio-list";

src/assets/scss/6-components/molecules/_radio-list.scss

@@ -0,0 +1,90 @@
+.c-radio-list {
+    > ul {
+        > li {
+            margin-bottom: 0;
+            border-bottom: 1px solid get-color-neutral("30");
+            > .c-radio {
+                position: relative;
+                &:hover {
+                    background-color: get-color-neutral("white");
+                }
+                &.-selected {
+                    background-color: get-color-accents("blue-light");
+                    &:hover {
+                        background-color: darken(
+                            get-color-accents("blue-light"),
+                            5%
+                        );
+                    }
+                }
+
+                > label {
+                    position: static;
+                    width: 100%;
+                    &:before {
+                        top: calc(50% - 10px);
+                        right: 10px;
+                    }
+                    &:after {
+                        top: calc(50% - 5px);
+                        right: 15px; // 10px right + 1/2 of my width
+                    }
+                }
+            }
+        }
+    }
+
+    &.-button-style {
+        > ul {
+            > li {
+                border: none;
+
+                > .c-radio {
+                    @include padding(0, 0, 0, 8px);
+                    border-radius: $border-radius-large;
+                    border: 1px solid get-color-neutral("30");
+
+                    // Styles for native implmentation of :focus-within.
+                    &:focus-within {
+                        @include c-radio-focus-hover;
+                    }
+
+                    // Styles for polyfill implementation to support IE. When grouping selectors
+                    // together, IE doesn't display desired styles.
+                    &.focus-within {
+                        @include c-radio-focus-hover;
+                    }
+
+                    &:hover {
+                        @include c-radio-focus-hover;
+                    }
+
+                    &.-selected {
+                        background-color: get-color-accents("blue-dark");
+
+                        > label {
+                            color: get-color-neutral("white");
+                        }
+                    }
+
+                    > label {
+                        @include padding(8px);
+                        @include padding-left(32px);
+                        color: get-color-accents("blue-dark");
+                        padding-right: 0;
+
+                        &:before {
+                            right: unset;
+                            left: rem(10px);
+                        }
+
+                        &:after {
+                            right: unset;
+                            left: rem(15px);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/atoms/forms/radio-button-input.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import { RadioButton } from "./radio-button-input";
+import Faker from "faker";
+
+export default {
+    component: RadioButton,
+    title: "Atoms | Forms / Radio Button",
+};
+
+export const radioButtonKnobs = () => (
+    <RadioButton
+        checked={boolean("checked", false)}
+        id={Faker.random.uuid()}
+        label={text("Label", Faker.random.word())}
+        name={text("Name", Faker.random.word())}
+        value={text("Value", Faker.random.word())}
+    />
+);

src/atoms/forms/radio-button-input.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { RadioButton } from "./radio-button-input";
+import faker from "faker";
+import uuid from "uuid";
+
+describe("RadioButton", () => {
+    test("when default props, renders button with label", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { getByLabelText } = render(
+            <RadioButton
+                checked={false}
+                id={uuid()}
+                label={expected}
+                name={faker.random.word()}
+            />
+        );
+
+        // Assert
+        expect(getByLabelText(expected)).not.toBeNull();
+    });
+});

src/atoms/forms/radio-button-input.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { forwardRef } from "react";
+
+const COMPONENT_CLASS = "c-radio";
+
+interface RadioButtonProps {
+    autofocus?: boolean;
+    checked: boolean;
+    children?: React.ReactNode;
+    cssClassName?: string;
+    id: string;
+    label: string;
+    name: string;
+    onCheck?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: () => void;
+    ref?: React.RefObject<HTMLInputElement> | null;
+    value?: string | string[] | number;
+}
+
+const RadioButton: React.RefForwardingComponent<
+    HTMLInputElement,
+    RadioButtonProps
+> = forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {
+    const {
+        autofocus,
+        checked,
+        children,
+        cssClassName,
+        id,
+        label,
+        name,
+        onCheck,
+        onClick,
+        value,
+    } = props;
+
+    const handleChecked = (e: React.ChangeEvent<HTMLInputElement>): void =>
+        onCheck?.(e);
+    const handleClick = (): void => onClick?.();
+
+    const cssChecked = checked ? "-selected" : "";
+
+    return (
+        <div className={`${COMPONENT_CLASS} ${cssChecked} ${cssClassName}`}>
+            <input
+                autoFocus={autofocus}
+                checked={checked}
+                id={id}
+                name={name}
+                onChange={handleChecked}
+                onClick={handleClick}
+                ref={ref}
+                type="radio"
+                value={value}
+            />
+            <label htmlFor={id}>
+                {label}
+                {children}
+            </label>
+        </div>
+    );
+});
+
+export { RadioButton };

src/index.ts

@@ -13,6 +13,7 @@ export { ProgressBar } from "./atoms/progress-bar/progress-bar";
 export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
 export { InputCharacterCount } from "./atoms/forms/input-character-count";
+export { RadioButton } from "./atoms/forms/radio-button-input";
 export { PasswordInput } from "./atoms/forms/password-input";
 export { Select } from "./atoms/forms/select";
 export { SubmitButton } from "./atoms/forms/submit-button";
@@ -63,6 +64,8 @@ export { Card } from "./molecules/cards/card";
 export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
 export { ErrorBanner } from "./molecules/errors/error-banner";
 export { Form } from "./molecules/forms/form";
+export { RadioList } from "./molecules/lists/radio-list";
+export { UnorderedList } from "./molecules/lists/unordered-list";
 
 // Form Fields
 

src/molecules/lists/radio-list.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { RadioList } from "./radio-list";
+import Faker from "faker";
+import { RadioButton } from "../../atoms/forms/radio-button-input";
+import uuid from "uuid";
+import { boolean } from "@storybook/addon-knobs";
+
+export default {
+    component: RadioList,
+    title: "Molecules | Lists / RadioList",
+};
+
+export const radioListDefault = () => (
+    <RadioList
+        items={[
+            <RadioButton
+                checked={boolean("checked", false)}
+                id={uuid()}
+                label={Faker.random.word()}
+                name={Faker.random.word()}>
+                {Faker.lorem.text()}
+            </RadioButton>,
+            <RadioButton
+                checked={boolean("checked", true)}
+                id={uuid()}
+                label={Faker.random.word()}
+                name={Faker.random.word()}>
+                {Faker.lorem.text()}
+            </RadioButton>,
+        ]}
+    />
+);

src/molecules/lists/radio-list.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { RadioList } from "./radio-list";
+import faker from "faker";
+
+describe("RadioList", () => {
+    test("when default props, renders items", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <RadioList items={[<span>{expected}</span>]} />
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+});

src/molecules/lists/radio-list.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { UnorderedList } from "./unordered-list";
+
+const COMPONENT_CLASS = "c-radio-list";
+
+export interface RadioListProps {
+    items: JSX.Element[];
+    style?: RadioListStyles;
+}
+
+export enum RadioListStyles {
+    Default = "default",
+    Button = "button",
+}
+
+const RadioList: React.FunctionComponent<RadioListProps> = (props) => {
+    const { items, style } = props;
+
+    if (items.length === 0) {
+        return null;
+    }
+
+    const classNames = [COMPONENT_CLASS];
+    if (style === RadioListStyles.Button) {
+        classNames.push("-button-style");
+    }
+
+    return (
+        <fieldset className={classNames.join(" ")}>
+            <UnorderedList listItems={items} />
+        </fieldset>
+    );
+};
+
+export { RadioList };

src/molecules/lists/unordered-list.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { UnorderedList } from "./unordered-list";
+import Faker from "faker";
+import { select } from "@storybook/addon-knobs";
+import { Icons } from "../../atoms/constants/icons";
+
+export default {
+    component: UnorderedList,
+    title: "Molecules | Lists / UnorderedList",
+};
+
+export const unorderedListDefault = () => (
+    <UnorderedList listItems={[Faker.lorem.text(), Faker.lorem.text()]} />
+);
+
+export const unorderedListKnobs = () => (
+    <UnorderedList
+        listIcon={select("List Icon", Icons, Icons.ChevronRight)}
+        listItems={[Faker.lorem.text(), Faker.lorem.text()]}
+    />
+);