@qhealth-design-system/core 1.16.5 → 1.17.0

package/src/stories/Checkboxes/Checkboxes.stories.js

@@ -0,0 +1,209 @@
+import { Checkboxes } from "./Checkboxes";
+import { themes, figmaLinks } from "../../../.storybook/globals";
+
+const checkboxesArgs = {
+    id: "cb1",
+    legend: "Checkbox legend",
+    hintText: "",
+    isRequired: false,
+    inError: false,
+    errorMessage: "Error message",
+    inSuccess: false,
+    successMessage: "Success message",
+    inputs: [
+        { id: "cb11", label: "Option 1", checked: true, disabled: false, inError: false, inSuccess: false },
+        { id: "cb12", label: "Option 2", checked: false, disabled: false, inError: false, inSuccess: false },
+        { id: "cb13", label: "Option 3", checked: true, disabled: false, inError: false, inSuccess: false },
+        { id: "cb14", label: "Option 4", checked: false, disabled: false, inError: false, inSuccess: false },
+        { id: "cb15", label: "Option 5", checked: true, disabled: false, inError: false, inSuccess: false },
+    ],
+    isSmall: false,
+};
+
+export default {
+    title: "Components/Checkboxes",
+    render: (args) => Checkboxes(args),
+    argTypes: {
+        id: { control: "text", description: "The id for this component" },
+        legend: { control: "text", description: "The legend of the checkbox group" },
+        hintText: { control: "text", description: "The hint text of the checkbox group" },
+        isRequired: { control: "boolean", description: "If the component requires a response" },
+        inError: { control: "boolean", description: "If the entire component is in an error state", if: { arg: "inSuccess", eq: false } },
+        errorMessage: { control: "text", description: "The error message to be displayed if component is in error" },
+        inSuccess: { control: "boolean", description: "If the entire component is in a success state", if: { arg: "inError", eq: false } },
+        successMessage: { control: "text", description: "The success message to be displayed if component is in success" },
+        inputs: {
+            control: "array",
+            description: "The inputs of the group",
+        },
+        isSmall: { control: "boolean", description: "If the check box should use it's smaller variant" },
+    },
+    args: { ...checkboxesArgs },
+    parameters: {
+        design: {
+            type: "figma",
+            url: figmaLinks.checkboxes.design,
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        ...checkboxesArgs,
+    },
+};
+
+export const defaultVariant = (checkboxesArgs) => Checkboxes({ ...checkboxesArgs });
+defaultVariant.tags = ["!dev"];
+
+export const disabledVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        id: "cb2",
+        inputs: [
+            { id: "cb21", label: "Option 1", checked: true, disabled: true },
+            { id: "cb22", label: "Option 2", checked: false, disabled: true },
+            { id: "cb23", label: "Option 3", checked: true, disabled: true },
+            { id: "cb24", label: "Option 4", checked: false, disabled: true },
+            { id: "cb25", label: "Option 5", checked: true, disabled: true },
+        ],
+    });
+disabledVariant.tags = ["!dev"];
+
+export const errorVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        id: "cb3",
+        inError: true,
+        errorMessage: "Error message",
+        inSuccess: false,
+        successMessage: "Success message",
+        inputs: [
+            { id: "cb31", label: "Option 1", checked: true, inError: true, inSuccess: false },
+            { id: "cb32", label: "Option 2", checked: false, inError: true, inSuccess: false },
+            { id: "cb33", label: "Option 3", checked: true, inError: true, inSuccess: false },
+            { id: "cb34", label: "Option 4", checked: false, inError: true, inSuccess: false },
+            { id: "cb35", label: "Option 5", checked: true, inError: true, inSuccess: false },
+        ],
+    });
+errorVariant.tags = ["!dev"];
+
+export const successVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        id: "cb4",
+        inError: false,
+        errorMessage: "Error message",
+        inSuccess: true,
+        successMessage: "Success message",
+        inputs: [
+            { id: "cb41", label: "Option 1", checked: true, inError: false, inSuccess: true },
+            { id: "cb42", label: "Option 2", checked: false, inError: false, inSuccess: true },
+            { id: "cb43", label: "Option 3", checked: true, inError: false, inSuccess: true },
+            { id: "cb44", label: "Option 4", checked: false, inError: false, inSuccess: true },
+            { id: "cb45", label: "Option 5", checked: true, inError: false, inSuccess: true },
+        ],
+    });
+successVariant.tags = ["!dev"];
+
+export const requiredVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        id: "cb5",
+        isRequired: true,
+        inputs: [
+            { id: "cb51", label: "Option 1", checked: true },
+            { id: "cb52", label: "Option 2", checked: false },
+            { id: "cb53", label: "Option 3", checked: true },
+            { id: "cb54", label: "Option 4", checked: false },
+            { id: "cb55", label: "Option 5", checked: true },
+        ],
+    });
+requiredVariant.tags = ["!dev"];
+
+export const smallVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        id: "cb6",
+        inputs: [
+            { id: "cb61", label: "Option 1", checked: true },
+            { id: "cb62", label: "Option 2", checked: false },
+            { id: "cb63", label: "Option 3", checked: true },
+            { id: "cb64", label: "Option 4", checked: false },
+            { id: "cb65", label: "Option 5", checked: true },
+        ],
+        isSmall: true,
+    });
+smallVariant.tags = ["!dev"];
+
+export const hintTextVariant = (checkboxesArgs) =>
+    Checkboxes({
+        ...checkboxesArgs,
+        hintText: "Select all that apply",
+        id: "cb7",
+        inputs: [
+            { id: "cb71", label: "Option 1", checked: true },
+            { id: "cb72", label: "Option 2", checked: false },
+            { id: "cb73", label: "Option 3", checked: true },
+            { id: "cb74", label: "Option 4", checked: false },
+            { id: "cb75", label: "Option 5", checked: true },
+        ],
+    });
+hintTextVariant.tags = ["!dev"];
+
+export const allVariants = (args, theme) => {
+    return `
+        <div class="${theme}" style="padding: 2rem;">
+            <h3>Default checkboxes</h3>
+            ${defaultVariant(args)}
+            <h3>Disabled checkboxes</h3>
+            ${disabledVariant(args)}
+            <h3>Error checkboxes</h3>
+            ${errorVariant(args)}
+            <h3>Success checkboxes</h3>
+            ${successVariant(args)}
+            <h3>Required checkboxes</h3>
+            ${requiredVariant(args)}
+            <h3>Small checkboxes</h3>
+            ${smallVariant(args)}
+            <h3>Hint text checkboxes</h3>
+            ${hintTextVariant(args)}
+        </div>
+    `;
+};
+allVariants.tags = ["!dev"];
+
+export const white = {
+    args: checkboxesArgs,
+    render: (args) => {
+        return allVariants(args, themes["white"]);
+    },
+};
+
+export const light = {
+    args: checkboxesArgs,
+    render: (args) => {
+        return allVariants(args, themes["light"]);
+    },
+};
+
+export const lightAlt = {
+    args: checkboxesArgs,
+    render: (args) => {
+        return allVariants(args, themes["light alt"]);
+    },
+};
+
+export const dark = {
+    args: checkboxesArgs,
+    render: (args) => {
+        return allVariants(args, themes["dark"]);
+    },
+};
+
+export const darkAlt = {
+    args: checkboxesArgs,
+    render: (args) => {
+        return allVariants(args, themes["dark alt"]);
+    },
+};

package/src/stories/RadioButtons/RadioButtons.js

@@ -0,0 +1,41 @@
+export const RadioButtons = ({ id, legend, hintText, isRequired, inError, errorMessage, inSuccess, successMessage, inputs, isSmall }) => {
+    const getInputClasses = (input) => {
+        if (input.inError) return "qld__input--error";
+        else if (input.inSuccess) return "qld__input--valid";
+        else return "";
+    };
+
+    const getFeedbackMessage = () => {
+        if (inError) {
+            return `
+                <span id="qld__radio-buttons-status-${id}" class="qld__input--error" role="status" aria-live="polite">
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="QLD-icons.svg#status-error"></use></svg>${errorMessage}
+                </span>
+            `;
+        } else if (inSuccess) {
+            return `
+                <span id="qld__radio-buttons-status-${id}" class="qld__input--success" role="status" aria-live="polite">
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="QLD-icons.svg#status-success"></svg>${successMessage}
+                </span>
+            `;
+        } else return "";
+    };
+
+    const getHintText = () => {
+        return hintText ? `<span class="qld__hint-text" id="qld__radio-buttons-hint-${id}">${hintText}</span>` : "";
+    };
+
+    const inputsMapped = inputs
+        ?.map((input) => {
+            return `<div class="qld__control-input ${isSmall ? "qld__control-input--small" : ""}"><input type="radio" id="qld__radio-${input.id}" ${
+                getInputClasses(input) ? `class="${getInputClasses(input)}"` : ""
+            } name="qld__radio-${id}" ${input.checked ? "checked" : ""} ${input.disabled ? "disabled" : ""} value="qld__radio-${input.id}"><label for="qld__radio-${input.id}">${input.label}</label></div>`;
+        })
+        .join("");
+
+    return `        
+        <fieldset class="qld__radio-buttons" role="radiogroup" aria-labelledby="qld__radio-buttons-legend-${id}" ${getFeedbackMessage() ? `aria-describedby="qld__radio-buttons-status-${id}"` : ""}>
+            <legend id="qld__radio-buttons-legend-${id}">${isRequired ? "<abbr title='required'>*</abbr>" : ""}${legend}</legend>${getHintText()}${getFeedbackMessage()}${inputsMapped}
+        </fieldset>
+    `;
+};

package/src/stories/RadioButtons/RadioButtons.mdx

@@ -0,0 +1,45 @@
+import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
+import * as radioButtonsStories from "./RadioButtons.stories";
+import { figmaLinks } from "../../../.storybook/globals";
+
+<Meta of={radioButtonsStories} />
+
+# RadioButtons
+
+## Overview
+
+Radio buttons are a type of control input that allow users to select one item from a predefined set of mutually exclusive options.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+### Valid and invalid states
+
+Adds a border around the control inputs to indicate valid or invalid selections.
+
+<Story of={radioButtonsStories.successVariant} />
+
+<br />
+
+<Story of={radioButtonsStories.errorVariant} />
+
+### Disabled control inputs
+
+Disabled control inputs can be used to indicate inputs that are no longer valid or expired.
+
+<Story of={radioButtonsStories.disabledVariant} />
+
+## Design resources
+
+-   <a className="figma-link" href={figmaLinks.radioButtons.design} target="_blank" rel="noopener noreferrer">
+        Component design view (Figma)
+    </a>
+-   <a className="figma-link" href={figmaLinks.radioButtons.file} target="_blank" rel="noopener noreferrer">
+        Component file (Figma)
+    </a>
+-   <a className="figma-link" href={figmaLinks.radioButtons.ds} target="_blank" rel="noopener noreferrer">
+        Design System website
+    </a>

package/src/stories/RadioButtons/RadioButtons.stories.js

@@ -0,0 +1,209 @@
+import { RadioButtons } from "./RadioButtons";
+import { themes, figmaLinks } from "../../../.storybook/globals";
+
+const radioButtonsArgs = {
+    id: "rb1",
+    legend: "Radio buttons legend",
+    hintText: "",
+    isRequired: false,
+    inError: false,
+    errorMessage: "Error message",
+    inSuccess: false,
+    successMessage: "Success message",
+    inputs: [
+        { id: "rb11", label: "Option 1", checked: true, disabled: false, inError: false, inSuccess: false },
+        { id: "rb12", label: "Option 2", checked: false, disabled: false, inError: false, inSuccess: false },
+        { id: "rb13", label: "Option 3", checked: true, disabled: false, inError: false, inSuccess: false },
+        { id: "rb14", label: "Option 4", checked: false, disabled: false, inError: false, inSuccess: false },
+        { id: "rb15", label: "Option 5", checked: true, disabled: false, inError: false, inSuccess: false },
+    ],
+    isSmall: false,
+};
+
+export default {
+    title: "Components/Radio Buttons",
+    render: (args) => RadioButtons(args),
+    argTypes: {
+        id: { control: "text", description: "The id for this component" },
+        legend: { control: "text", description: "The legend of the radio button group" },
+        hintText: { control: "text", description: "The hint text of the radio button group" },
+        isRequired: { control: "boolean", description: "If the component requires a response" },
+        inError: { control: "boolean", description: "If the entire component is in an error state", if: { arg: "inSuccess", eq: false } },
+        errorMessage: { control: "text", description: "The error message to be displayed if component is in error" },
+        inSuccess: { control: "boolean", description: "If the entire component is in a success state", if: { arg: "inError", eq: false } },
+        successMessage: { control: "text", description: "The success message to be displayed if component is in success" },
+        inputs: {
+            control: "array",
+            description: "The inputs of the group",
+        },
+        isSmall: { control: "boolean", description: "If the radio buttons should use it's smaller variant" },
+    },
+    args: { ...radioButtonsArgs },
+    parameters: {
+        design: {
+            type: "figma",
+            url: figmaLinks.radioButtons.design,
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        ...radioButtonsArgs,
+    },
+};
+
+export const defaultVariant = (radioButtonsArgs) => RadioButtons({ ...radioButtonsArgs });
+defaultVariant.tags = ["!dev"];
+
+export const disabledVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb2",
+        inputs: [
+            { id: "rb21", label: "Option 1", checked: true, disabled: true },
+            { id: "rb22", label: "Option 2", checked: false, disabled: true },
+            { id: "rb23", label: "Option 3", checked: true, disabled: true },
+            { id: "rb24", label: "Option 4", checked: false, disabled: true },
+            { id: "rb25", label: "Option 5", checked: true, disabled: true },
+        ],
+    });
+disabledVariant.tags = ["!dev"];
+
+export const errorVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb3",
+        inError: true,
+        errorMessage: "Error message",
+        inSuccess: false,
+        successMessage: "Success message",
+        inputs: [
+            { id: "rb31", label: "Option 1", checked: true, inError: true, inSuccess: false },
+            { id: "rb32", label: "Option 2", checked: false, inError: true, inSuccess: false },
+            { id: "rb33", label: "Option 3", checked: true, inError: true, inSuccess: false },
+            { id: "rb34", label: "Option 4", checked: false, inError: true, inSuccess: false },
+            { id: "rb35", label: "Option 5", checked: true, inError: true, inSuccess: false },
+        ],
+    });
+errorVariant.tags = ["!dev"];
+
+export const successVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb4",
+        inError: false,
+        errorMessage: "Error message",
+        inSuccess: true,
+        successMessage: "Success message",
+        inputs: [
+            { id: "rb41", label: "Option 1", checked: true, inError: false, inSuccess: true },
+            { id: "rb42", label: "Option 2", checked: false, inError: false, inSuccess: true },
+            { id: "rb43", label: "Option 3", checked: true, inError: false, inSuccess: true },
+            { id: "rb44", label: "Option 4", checked: false, inError: false, inSuccess: true },
+            { id: "rb45", label: "Option 5", checked: true, inError: false, inSuccess: true },
+        ],
+    });
+successVariant.tags = ["!dev"];
+
+export const requiredVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb5",
+        isRequired: true,
+        inputs: [
+            { id: "rb51", label: "Option 1", checked: true },
+            { id: "rb52", label: "Option 2", checked: false },
+            { id: "rb53", label: "Option 3", checked: true },
+            { id: "rb54", label: "Option 4", checked: false },
+            { id: "rb55", label: "Option 5", checked: true },
+        ],
+    });
+requiredVariant.tags = ["!dev"];
+
+export const smallVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb6",
+        inputs: [
+            { id: "rb61", label: "Option 1", checked: true },
+            { id: "rb62", label: "Option 2", checked: false },
+            { id: "rb63", label: "Option 3", checked: true },
+            { id: "rb64", label: "Option 4", checked: false },
+            { id: "rb65", label: "Option 5", checked: true },
+        ],
+        isSmall: true,
+    });
+smallVariant.tags = ["!dev"];
+
+export const hintTextVariant = (radioButtonsArgs) =>
+    RadioButtons({
+        ...radioButtonsArgs,
+        id: "rb7",
+        hintText: "Select one option",
+        inputs: [
+            { id: "rb71", label: "Option 1", checked: true },
+            { id: "rb72", label: "Option 2", checked: false },
+            { id: "rb73", label: "Option 3", checked: true },
+            { id: "rb74", label: "Option 4", checked: false },
+            { id: "rb75", label: "Option 5", checked: true },
+        ],
+    });
+hintTextVariant.tags = ["!dev"];
+
+export const allVariants = (args, theme) => {
+    return `
+        <div class="${theme}" style="padding: 2rem;">
+            <h3>Default radio buttons</h3>
+            ${defaultVariant(args)}
+            <h3>Disabled radio buttons</h3>
+            ${disabledVariant(args)}
+            <h3>Error radio buttons</h3>
+            ${errorVariant(args)}
+            <h3>Success radio buttons</h3>
+            ${successVariant(args)}
+            <h3>Required radio buttons</h3>
+            ${requiredVariant(args)}
+            <h3>Small radio buttons</h3>
+            ${smallVariant(args)}
+            <h3>Hint text radio buttons</h3>
+            ${hintTextVariant(args)}
+        </div>
+    `;
+};
+allVariants.tags = ["!dev"];
+
+export const white = {
+    args: radioButtonsArgs,
+    render: (args) => {
+        return allVariants(args, themes["white"]);
+    },
+};
+
+export const light = {
+    args: radioButtonsArgs,
+    render: (args) => {
+        return allVariants(args, themes["light"]);
+    },
+};
+
+export const lightAlt = {
+    args: radioButtonsArgs,
+    render: (args) => {
+        return allVariants(args, themes["light alt"]);
+    },
+};
+
+export const dark = {
+    args: radioButtonsArgs,
+    render: (args) => {
+        return allVariants(args, themes["dark"]);
+    },
+};
+
+export const darkAlt = {
+    args: radioButtonsArgs,
+    render: (args) => {
+        return allVariants(args, themes["dark alt"]);
+    },
+};

package/src/styles/imports/mixins.scss

@@ -405,28 +405,27 @@
  *
  * @return {string}          - The code
  */
-@mixin QLD-outline($theme: "light", $rounded: true) {
+@mixin QLD-outline($theme: "light", $rounded: true, $offset: 2px) {
     @if $theme == "dark" {
         outline: 3px solid var(--QLD-color-dark__focus);
     } @else {
         outline: 3px solid var(--QLD-color-light__focus);
-
-        // Only add the offset if it's the default style
-        outline-offset: 2px;
     }
 
     // Apply radius if rounded is true
     @if $rounded {
         border-radius: $QLD-border-radius-xs;
     }
+
+    outline-offset: $offset;
 }
 
 /**
  * QLD-focus - Add the outline to focus
  */
-@mixin QLD-focus($theme: "light", $rounded: true) {
+@mixin QLD-focus($theme: "light", $rounded: true, $offset: 2px) {
     &:focus {
-        @include QLD-outline($theme, $rounded);
+        @include QLD-outline($theme, $rounded, $offset);
     }
 
     // Remove Modzilla inner HTML dotted line. github.com/necolas/normalize.css/blob/master/normalize.css#L285
@@ -558,43 +557,6 @@
     $output: $output;
 }
 
-/**
- * QLD-getControlShape Mixin for setting a background image SVG for a control input
- *
- * @param  {keywords} $kind   -  Either one of the following keywords: checkbox, radio
- * @param  {keywords} $part   -  Either one of the following keywords: foreground, background
- * @param  {string} $color1   -  String representing the hex code of the first fill color
- * @param  {string} $color2   -  String representing the hex code of the second fill color
- *
- * @return {string}           - The code; background image containing the encoded SVG
-*/
-@mixin QLD-getControlShape($kind, $part, $color1: transparent, $color2: transparent) {
-    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">';
-    $end: "</svg>";
-
-    $checkbox-background: '<path fill="#{ $color1 }" d="M0,0h32v32H0V0z"/><path fill="#{ $color2 }" d="M2,2h28v28H2V2z"/>';
-    $checkbox-foreground: '<path fill="#{ $color1 }" d="M25.6,11.4c0.2-0.2,0.2-0.5,0-0.7l-2.3-2.3c-0.2-0.2-0.5-0.2-0.7,0L14,17l-3.6-3.6c-0.2-0.2-0.5-0.2-0.7,0l-2.3,2.3 c-0.2,0.2-0.2,0.5,0,0.7l6.3,6.3c0.2,0.2,0.5,0.2,0.7,0L25.6,11.4L25.6,11.4z"/>';
-
-    $radio-background: '<circle fill="#{ $color1 }" cx="16" cy="16" r="16"/><circle fill="#{ $color2 }" cx="16" cy="16" r="14"/>';
-    $radio-foreground: '<circle fill="#{ $color1 }" cx="16" cy="16" r="12"/>';
-
-    @if ($kind == "checkbox" and $part == "background") {
-        background-image: QLD-svguri($start + $checkbox-background + $end);
-    }
-
-    @if ($kind == "checkbox" and $part == "foreground") {
-        background-image: QLD-svguri($start + $checkbox-foreground + $end);
-    }
-
-    @if ($kind == "radio" and $part == "background") {
-        background-image: QLD-svguri($start + $radio-background + $end);
-    }
-
-    @if ($kind == "radio" and $part == "foreground") {
-        background-image: QLD-svguri($start + $radio-foreground + $end);
-    }
-}
-
 /**
  * QLD-side-nav-indent - Mixin for creating indent based off depth
  *