@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/Button/Button.css

@@ -0,0 +1,253 @@
+:root,
+:host {
+  --button-variant-primary-font-variation-settings: normal;
+  --button-variant-primary-color: var(--color-primary);
+  --button-variant-primary-hover-color: var(--color-primary-hover);
+  --button-border-radius: var(--radius-1);
+}
+
+.mobius-button {
+  box-sizing: border-box;
+  display: inline-block;
+  outline: none;
+  text-decoration: none;
+  font-family: var(--font-family);
+  cursor: pointer;
+  color: var(--button-content-color);
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--button-border-radius);
+  border-width: var(--size-border-width);
+  border-color: transparent;
+  border-style: solid;
+  position: relative;
+  margin: 0;
+  transition:
+    color var(--transition-standard),
+    background-color var(--transition-standard);
+
+  &:where(.--has-icon) {
+    display: inline-flex;
+    gap: var(--size-xs);
+  }
+
+  /* Sizes */
+  /* TODO: CSS variables for line-height do not produce desired height for buttons. */
+  /* These hard-coded line-height values should be replaced with CSS variables. */
+  &:where(.--size-sm) {
+    font-size: var(--font-size-3);
+    line-height: 16px;
+    padding: 10px var(--size-sm);
+  }
+
+  &:where(.--size-md) {
+    font-size: var(--font-size-4);
+    line-height: 24px;
+    padding: 14px var(--size-md);
+  }
+
+  &:where(.--size-lg) {
+    font-size: var(--font-size-5);
+    line-height: 32px;
+    padding: 14px var(--size-md);
+  }
+
+  /* Primary */
+  &:where(.--variant-primary) {
+    --button-content-color: var(--color-text-inverted);
+    background-color: var(--button-variant-primary-color);
+    font-variation-settings: var(
+      --button-variant-primary-font-variation-settings
+    );
+
+    &:where(:active),
+    &:where(:hover) {
+      background-color: var(--button-variant-primary-hover-color);
+    }
+
+    &:where(:focus-visible) {
+      box-shadow: var(--box-shadow-default);
+    }
+
+    &:where(.--is-disabled) {
+      --button-content-color: var(--color-text-light);
+      background-color: var(--color-background-medium);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Secondary */
+  &:where(.--variant-secondary) {
+    --button-content-color: var(--color-secondary);
+    background-color: transparent;
+    border-color: var(--color-secondary);
+
+    &:where(:active),
+    &:where(:hover) {
+      --button-content-color: var(--color-text-inverted);
+      background-color: var(--color-secondary-hover);
+      border-color: var(--color-secondary-hover);
+    }
+
+    &:where(:focus-visible) {
+      box-shadow: var(--box-shadow-default);
+    }
+
+    &:where(.--is-disabled) {
+      --button-content-color: var(--color-text-light);
+      border-color: transparent;
+      background-color: var(--color-background-medium);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Ghost */
+  &:where(.--variant-ghost) {
+    --button-content-color: var(--color-secondary);
+    background-color: var(--color-background-highlight);
+    border: var(--border-default);
+    border-color: transparent;
+
+    &:where(:active) {
+      background-color: var(--color-secondary-hover);
+    }
+
+    &:where(:hover) {
+      --button-content-color: var(--color-text-inverted);
+      border-color: transparent;
+      background-color: var(--color-secondary-hover);
+    }
+
+    &:where(:focus-visible) {
+      box-shadow: var(--box-shadow-default);
+    }
+
+    &:where(.--is-disabled) {
+      --button-content-color: var(--color-text-light);
+      border-color: transparent;
+      background-color: var(--color-background-medium);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Basic */
+  &:where(.--variant-basic) {
+    --button-content-color: var(--color-text);
+    border-color: transparent;
+    background-color: transparent;
+
+    &:where(:active) {
+      background-color: var(--color-background-light);
+    }
+
+    &:where(:hover) {
+      background-color: var(--color-background-light);
+    }
+
+    &:where(.--is-disabled) {
+      --button-content-color: var(--color-text-light);
+      background-color: var(--color-background-medium);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Success */
+  &:where(.--is-success) {
+    background-color: var(--color-valid);
+    border-color: var(--color-valid);
+    color: transparent;
+
+    /* Hide content, but keep same space occupied */
+    > :not(.mobius-button__icon-wrapper) {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    /* Show succces/tick icon */
+    [data-icon="tick"] path {
+      fill: var(--color-text-inverted);
+    }
+
+    /* Link variant is the exception */
+    &:where(.--variant-link) [data-icon="tick"] path {
+      fill: var(--button-content-color);
+    }
+
+    &:where(:hover) {
+      background-color: var(--color-valid-hover);
+      border-color: var(--color-valid-hover);
+    }
+
+    &:where(:active) {
+      background-color: var(--color-valid);
+    }
+
+    &:where(.--is-disabled) {
+      border-color: transparent;
+      color: transparent;
+      background-color: var(--color-background-medium);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Loading */
+  &:where(.--is-loading) {
+    /* Hide text */
+    color: transparent;
+
+    /* Hide content, but keep same space occupied */
+    > :not(.mobius-button__icon-wrapper) {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    /* Show loading icon */
+    [data-icon="loading"] path {
+      fill: var(--button-content-color);
+    }
+  }
+
+  /* Link */
+  &:where(.--variant-link) {
+    --button-content-color: var(--color-secondary);
+    appearance: none;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    font-weight: normal;
+
+    &:not(.--is-loading) {
+      text-decoration: underline;
+    }
+
+    &:hover,
+    &:active {
+      --button-content-color: var(--color-secondary-hover);
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--size-focus-ring) var(--color-focus);
+      padding: 3px 0;
+    }
+
+    &.--is-disabled {
+      --button-content-color: var(--color-text-light);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.mobius-button__icon-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-items: center;
+}
+
+a.mobius-button:focus-visible,
+.mobius-button:focus-visible {
+  box-shadow: var(--box-shadow-default);
+}

package/src/components/Button/Button.mdx

@@ -205,19 +205,15 @@ const PressButton = () => {
 The following example HTML is rendered for a `<Button>`:
 
 ```html
-<button class="mobius/Button --variant-primary --size-md">Text</button>
+<button class="mobius-button --variant-primary --size-md">Text</button>
 ```
 
 And this for a `<Button>` with an icon:
 
 ```html
-<button class="mobius/Button --variant-primary --size-md">
+<button class="mobius-button --variant-primary --size-md">
   Text
-  <svg
-    class="mobius mobius/Icon svg-inline--mobius-icon"
-    role="img"
-    focusable="false"
-  >
+  <svg class="mobius-icon svg-inline--mobius-icon" role="img" focusable="false">
     (icon)
   </svg>
 </button>
@@ -235,7 +231,3 @@ Class names are augmented with the following flags if true:
 - \--variant-secondary
 - \--variant-ghost
 - \--variant-basic
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Button) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Button/Button.story.styles.css

@@ -1,8 +1,8 @@
-.button-example-with-theme.mobius\/Button {
+.button-example-with-theme.mobius-button {
   background-color: darkred;
 }
 
-.button-example-with-icon.mobius\/Button {
+.button-example-with-icon.mobius-button {
   display: inline-flex;
   gap: var(--size-xs);
   align-items: center;

package/src/components/Button/Button.test.tsx

@@ -4,7 +4,7 @@ import { chevronDown } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
 import { Button } from ".";
 
-const CLASS_NAME = "mobius/Button";
+const CLASS_NAME = "mobius-button";
 
 describe("Button", () => {
   // This is to supress console.warn for the
@@ -49,7 +49,7 @@ describe("Button", () => {
   });
 
   describe("given the button is set to 'loading'", () => {
-    it("should only render the loading icon", () => {
+    it("should render the loading icon", () => {
       const BUTTON_TEXT = "Click me";
 
       const { container } = render(
@@ -59,15 +59,13 @@ describe("Button", () => {
         </Button>,
       );
 
+      const button = screen.getByRole("button");
       const loadingIcon = container.querySelector("[data-icon='loading']");
       const loadingText = screen.getByText("Loading");
-      const buttonIcon = container.querySelector("[data-icon='chevron-down']");
-      const buttonText = screen.queryByText(BUTTON_TEXT);
 
       expect(loadingIcon).toBeInTheDocument();
       expect(loadingText).toBeInTheDocument();
-      expect(buttonIcon).not.toBeInTheDocument();
-      expect(buttonText).not.toBeInTheDocument();
+      expect(button).toHaveClass("--is-loading");
     });
   });
 

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { Ref, forwardRef, RefAttributes, ReactNode, MouseEvent } from "react";
 import classNames from "classnames/dedupe";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
@@ -35,7 +35,7 @@ export interface ButtonProps
   isLoading?: boolean;
   /** Display success style */
   isSuccess?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   children?: ReactNode;
 }
 
@@ -82,7 +82,7 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
     // Reshape class name and apply to outer element
     const classes = classNames(
       "mobius",
-      "mobius/Button",
+      "mobius-button",
       `--variant-${buttonVariant}`,
       `--size-${size}`,
       {
@@ -96,7 +96,7 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
 
     return (
       <Component ref={ref} {...buttonProps} {...otherProps}>
-        {isLoading ? <Loading /> : children && children}
+        {isLoading ? <Loading>{children}</Loading> : children}
         {isSuccess && !isLoading && <Success />}
       </Component>
     );

package/src/components/Button/Loading.tsx

@@ -1,13 +1,26 @@
+import { ReactNode } from "react";
 import { loading } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
+import { VisuallyHidden } from "../VisuallyHidden";
 
-const Loading = () => (
-  <>
-    <div className="mobius/ButtonIconWrapper">
-      <Icon icon={loading} spin />
-    </div>
-    <span className="mobius/LoadingText">Loading</span>
-  </>
-);
+type LoadingProps = {
+  children: ReactNode;
+};
+
+const Loading = (props: LoadingProps) => {
+  const { children } = props;
+
+  return (
+    <>
+      <div className="mobius-button__icon-wrapper">
+        <Icon icon={loading} spin size="md" />
+      </div>
+      <VisuallyHidden className="mobius-button__loading-text">
+        Loading
+      </VisuallyHidden>
+      {children}
+    </>
+  );
+};
 
 export { Loading };

package/src/components/Button/Success.tsx

@@ -4,10 +4,12 @@ import { VisuallyHidden } from "../VisuallyHidden";
 
 const Success = () => (
   <>
-    <div className="mobius/ButtonIconWrapper">
-      <Icon icon={tick} />
+    <div className="mobius-button__icon-wrapper">
+      <Icon icon={tick} size="md" />
     </div>
-    <VisuallyHidden className="mobius/SuccessText">Success</VisuallyHidden>
+    <VisuallyHidden className="mobius-button__success-text">
+      Success
+    </VisuallyHidden>
   </>
 );
 

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,112 @@
+.mobius-checkbox__input {
+  appearance: none;
+  position: absolute;
+  margin-top: 2px;
+  margin-left: 0px;
+  width: 21px;
+  height: 20px;
+  pointer-events: none;
+
+  /* Disable browser default since input already provides focus */
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* Disabled */
+  &.--is-disabled {
+    color: var(--color-text-light);
+    border-color: var(--color-border-medium);
+    background-color: var(--color-background-light);
+  }
+
+  /* Invalid */
+  .--is-invalid &:not(.--is-disabled) {
+    border-color: var(--color-error);
+  }
+}
+
+.mobius-checkbox__label {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  border: var(--border-default);
+  border-radius: var(--radius-1);
+  padding: var(--input-field-padding-tight);
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  background-color: var(--color-background-input);
+
+  /* Disabled */
+  &.--is-disabled {
+    color: var(--color-text-light);
+    border-color: var(--color-border-medium);
+    background-color: var(--color-background-light);
+    cursor: not-allowed;
+
+    .mobius-checkbox__icon {
+      color: var(--color-text-light);
+    }
+  }
+
+  /* Hovered */
+  &:hover:not(.--is-disabled):not(&.--is-invalid) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+
+    .mobius-checkbox__input {
+      border-color: var(--color-primary);
+    }
+
+    .mobius-checkbox__icon {
+      color: var(--color-primary);
+    }
+  }
+
+  /* Focused */
+  &:focus-within:not(.--is-disabled) {
+    &:not(.--is-invalid) {
+      box-shadow: var(--box-shadow-default);
+      border-color: var(--color-primary);
+      background-color: var(--color-background-input-active);
+
+      .mobius-checkbox__icon {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  /* Invalid */
+  &.--is-invalid:not(.--is-disabled) {
+    border-color: var(--color-error);
+    color: var(--color-error);
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--color-error-background);
+    }
+
+    .mobius-checkbox__icon {
+      color: var(--color-error);
+    }
+
+    .mobius-checkbox__input {
+      border-color: var(--color-error);
+    }
+  }
+}
+
+.mobius-checkbox__icon {
+  position: relative;
+  color: var(--color-primary-light);
+}
+
+.mobius-checkbox__visible-label {
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--font-family);
+  line-height: var(--line-height-normal);
+  font-size: var(--font-size-regular);
+  margin-left: var(--size-sm);
+}

package/src/components/Checkbox/Checkbox.mdx

@@ -66,19 +66,17 @@ The `onChange` prop can be used to listen to changes of the selected state of th
 The following example HTML is rendered for a Checkbox:
 
 ```html
-<label class="mobius mobius/Checkbox --is-invalid --is-optional">
+<label class="mobius-checkbox --is-invalid --is-optional">
   <input
-    class="mobius/CheckboxInput --is-invalid --is-optional"
+    class="mobius-checkbox__input --is-invalid --is-optional"
     type="checkbox"
     value="agree"
   />
-  <span class="mobius/CheckboxLabel">I agree</span>
+  <span class="mobius-checkbox__label">I agree</span>
 </label>
-<div class="mobius/ErrorMessage">
-  <span class="mobius/ErrorIcon"></span>
-  <span class="mobius/Text span mobius/ErrorText"
-    >This is an error message</span
-  >
+<div class="mobius-error-message">
+  <span class="mobius-error-message__icon"></span>
+  <span class="mobius-error-message__text">This is an error message</span>
 </div>
 ```
 
@@ -90,7 +88,3 @@ Class names are augmented with the following flags if true:
 - \--is-invalid
 - \--is-required
 - \--is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Checkbox) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Checkbox/Checkbox.test.tsx

@@ -2,8 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Checkbox } from ".";
 
-const CHECKBOX_CONTAINER_CLASS_NAME = "mobius/Checkbox";
-const CHECKBOX_CLASS_NAME = "mobius/CheckboxInput";
+const CHECKBOX_CLASS_NAME = "mobius-checkbox__input";
 
 describe("Checkbox", () => {
   it("should render without error", () => {
@@ -215,11 +214,9 @@ describe("Checkbox", () => {
       );
 
       const input = screen.getByRole("checkbox");
-      const label = input.parentElement;
 
       expect(input).not.toHaveClass(customClass);
       expect(input).toHaveClass(CHECKBOX_CLASS_NAME);
-      expect(label).toHaveClass(customClass);
     });
 
     it("only sets id on the input element", () => {
@@ -247,9 +244,6 @@ describe("Checkbox", () => {
       await userEvent.tab();
 
       expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
-      expect(option.closest("label")).toHaveClass(
-        CHECKBOX_CONTAINER_CLASS_NAME,
-      );
 
       await userEvent.keyboard("[Space]");
 

package/src/components/Checkbox/Checkbox.tsx

@@ -17,6 +17,7 @@ import { CheckboxElementType, CheckboxProps, CheckboxRef } from "./types";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
+import { Stack } from "../Stack";
 
 export const Checkbox: ForwardedRefComponent<
   CheckboxProps,
@@ -59,12 +60,13 @@ export const Checkbox: ForwardedRefComponent<
   // Append an additional wrapper class name to differenitate from input
   const wrapperClasses = classNames(
     "mobius",
-    "mobius/Checkbox",
+    "mobius-checkbox",
     sharedClasses,
     className,
   );
-  const inputClasses = classNames("mobius/CheckboxInput", sharedClasses);
-  const iconClasses = classNames("mobius/CheckboxIcon", sharedClasses);
+  const labelClasses = classNames("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames("mobius-checkbox__icon", sharedClasses);
   const errorMessageId = useId();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
   const describedBy = spaceDelimitedList([
@@ -98,8 +100,8 @@ export const Checkbox: ForwardedRefComponent<
   };
 
   return (
-    <>
-      <label className={wrapperClasses}>
+    <Stack gap="xs" className={wrapperClasses}>
+      <label className={labelClasses}>
         <input
           aria-describedby={describedBy}
           aria-errormessage={shouldErrorMessageShow}
@@ -125,11 +127,11 @@ export const Checkbox: ForwardedRefComponent<
           size="md"
           className={iconClasses}
         />
-        <span id={labelId} className="mobius/CheckboxLabel">
+        <span id={labelId} className="mobius-checkbox__visible-label">
           {label}
         </span>
       </label>
       <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
-    </>
+    </Stack>
   );
 });

package/src/components/Checkbox/CheckboxGroup.css

@@ -0,0 +1,26 @@
+.mobius-checkbox-group {
+  display: grid;
+
+  .mobius-checkbox-group__wrapper {
+    display: grid;
+    margin-bottom: var(--size-sm);
+  }
+
+  .mobius-checkbox,
+  .mobius-checkbox-group__wrapper {
+    margin-bottom: 0;
+  }
+
+  &.--is-horizontal .mobius-checkbox-group__wrapper {
+    grid-template-columns: repeat(var(--checkbox-items-per-row), 1fr);
+    gap: var(--size-sm);
+  }
+
+  &.--is-vertical .mobius-checkbox-group__wrapper {
+    gap: var(--size-xs);
+  }
+
+  &:where(.--is-optional) > :where(.mobius-label)::after {
+    content: " (optional)";
+  }
+}