@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/Checkbox/CheckboxGroup.mdx

@@ -76,53 +76,47 @@ The following example HTML is rendered for a CheckboxGroup:
 <div
   role="group"
   aria-labelledby=":r5q:"
-  class="mobius mobius/CheckboxGroup --is-vertical --is-optional"
+  class="mobius-checkbox-group --is-vertical --is-optional"
 >
-  <span id=":r5q:" class="mobius mobius/Label">Value</span>
-  <div class="mobius/CheckboxWrapper">
-    <label
-      id=":r5t:"
-      class="mobius mobius/Checkbox --is-selected --is-optional"
-    >
+  <span id=":r5q:" class="mobius-label">Value</span>
+  <div class="mobius-checkbox-group__wrapper">
+    <label id=":r5t:" class="mobius-checkbox --is-selected --is-optional">
       <input
         aria-disabled="false"
         aria-invalid="false"
         aria-required="false"
-        class="mobius/CheckboxInput --is-selected --is-optional"
+        class="mobius-checkbox__input --is-selected --is-optional"
         type="checkbox"
         id=":r5r:"
         value="option1"
         checked=""
       />
-      <span class="mobius/CheckboxLabel">Option 1</span>
+      <span class="mobius-checkbox__label">Option 1</span>
     </label>
-    <label id=":r60:" class="mobius mobius/Checkbox --is-optional">
+    <label id=":r60:" class="mobius-checkbox --is-optional">
       <input
         aria-disabled="false"
         aria-invalid="false"
         aria-required="false"
-        class="mobius/CheckboxInput --is-optional"
+        class="mobius-checkbox__input --is-optional"
         type="checkbox"
         id=":r5u:"
         value="option2"
       />
-      <span class="mobius/CheckboxLabel">Option 2</span>
+      <span class="mobius-checkbox__label">Option 2</span>
     </label>
-    <label
-      id=":r63:"
-      class="mobius mobius/Checkbox --is-selected --is-optional"
-    >
+    <label id=":r63:" class="mobius-checkbox --is-selected --is-optional">
       <input
         aria-disabled="false"
         aria-invalid="false"
         aria-required="false"
-        class="mobius/CheckboxInput --is-selected --is-optional"
+        class="mobius-checkbox__input --is-selected --is-optional"
         type="checkbox"
         id=":r61:"
         value="option3"
         checked=""
       />
-      <span class="mobius/CheckboxLabel">Option 3</span>
+      <span class="mobius-checkbox__label">Option 3</span>
     </label>
   </div>
 </div>
@@ -134,7 +128,3 @@ Class names are augmented with the following flags if true:
 - \--is-vertical
 - \--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/CheckboxGroup.test.tsx

@@ -2,9 +2,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Checkbox, CheckboxGroup } from ".";
 
-const CHECKBOX_GROUP_CLASS_NAME = "mobius/CheckboxGroup";
-const CHECKBOX_CLASS_NAME = "mobius/CheckboxInput";
-const CHECKBOX_CONTAINER_CLASS_NAME = "mobius/Checkbox";
+const CHECKBOX_GROUP_CLASS_NAME = "mobius-checkbox-group";
+const CHECKBOX_CLASS_NAME = "mobius-checkbox__input";
 
 describe("CheckboxGroup", () => {
   it("renders a Checkbox inside a CheckboxGroup", () => {
@@ -415,7 +414,6 @@ describe("CheckboxGroup", () => {
 
       const option = getByLabelText(optionText);
 
-      expect(option.parentElement).toHaveClass(customClass);
       expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
     });
 
@@ -448,9 +446,6 @@ describe("CheckboxGroup", () => {
       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/CheckboxGroup.tsx

@@ -47,7 +47,7 @@ export const CheckboxGroup: ForwardedRefComponent<
   const [selected, setSelected] = useState<string[]>(defaultValue);
   const checkboxGroupClasses = classNames(
     "mobius",
-    "mobius/CheckboxGroup",
+    "mobius-checkbox-group",
     className,
     {
       "--is-horizontal": orientation === "horizontal",
@@ -112,7 +112,7 @@ export const CheckboxGroup: ForwardedRefComponent<
           {label}
         </Label>
       )}
-      <div className="mobius/CheckboxWrapper">
+      <div className="mobius-checkbox-group__wrapper">
         {Children.map(children, child => {
           if (isValidElement(child)) {
             return cloneElement(child as ReactElement, {

package/src/components/Container/Container.css

@@ -0,0 +1,13 @@
+.mobius-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+
+  &.--is-sm {
+    max-width: var(--size-inner-container);
+  }
+
+  &.--is-md {
+    max-width: var(--size-container);
+  }
+}

package/src/components/Container/Container.mdx

@@ -37,9 +37,5 @@ import { Container } from "@simplybusiness/mobius";
 The following HTML is rendered for a Container:
 
 ```html
-<div class="mobius/Container">{children}</div>
+<div class="mobius-container">{children}</div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Box) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Container/Container.test.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import { Container } from ".";
 
-const CLASS_NAME = "mobius/Container";
+const CLASS_NAME = "mobius-container";
 
 describe("Container", () => {
   it("should render without errors", () => {

package/src/components/Container/Container.tsx

@@ -34,7 +34,7 @@ const Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =
 
     const classes = classNames(
       "mobius",
-      "mobius/Container",
+      "mobius-container",
       sizeClasses(size),
       otherProps.className,
     );

package/src/components/Divider/Divider.css

@@ -0,0 +1,14 @@
+.mobius-divider {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--size-lg);
+}
+
+.mobius-divider__inner {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-background-light);
+}

package/src/components/Divider/Divider.mdx

@@ -35,11 +35,7 @@ import { Divider } from "@simplybusiness/mobius";
 The following HTML is rendered for a Divider:
 
 ```html
-<div class="mobius/Divider">
-  <div class="mobius/DividerInner" />
+<div class="mobius-divider">
+  <div class="mobius-divider__inner"></div>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Label) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Divider/Divider.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { Divider } from ".";
 
-const CLASS_NAME = "mobius/Divider";
+const CLASS_NAME = "mobius-divider";
 
 describe("Divider", () => {
   it("should render without errors", () => {

package/src/components/Divider/Divider.tsx

@@ -12,7 +12,7 @@ const Divider = ({
   className,
   ...rest
 }: DividerProps) => {
-  const classes = classNames("mobius", "mobius/Divider", className);
+  const classes = classNames("mobius", "mobius-divider", className);
 
   return (
     <div
@@ -21,7 +21,7 @@ const Divider = ({
       aria-orientation={ariaOrientation}
       {...rest}
     >
-      <div className="mobius/DividerInner" />
+      <div className="mobius-divider__inner" />
     </div>
   );
 };

package/src/components/Drawer/Content.tsx

@@ -10,7 +10,7 @@ export interface ContentProps
 
 const Content = forwardRef(
   ({ children, ...otherProps }: ContentProps, ref: DivRef) => (
-    <div ref={ref} {...otherProps} className="mobius/DrawerContent">
+    <div ref={ref} {...otherProps} className="mobius-drawer__content">
       {children}
     </div>
   ),

package/src/components/Drawer/Drawer.css

@@ -0,0 +1,189 @@
+:root,
+:host,
+::backdrop {
+  --drawer-transition-duration: 0;
+  /* Redefine colour variable as ::backdrop doesn't inherit from anywhere by default */
+  --color-neutral-700: #18181d;
+}
+
+/* Enable transitions only if reduce motion flag is off */
+@media (prefers-reduced-motion: no-preference) {
+  :root,
+  :host,
+  ::backdrop {
+    --drawer-transition-duration: 300ms;
+  }
+}
+
+.mobius-drawer {
+  --drawer-width: min(100%, 560px);
+  --drawer-height: min(100%, 560px); /* Default height TBD */
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--color-background);
+  overflow: hidden;
+
+  &:not([open]) {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::backdrop {
+    background-color: var(--color-neutral-700);
+    opacity: 0;
+    transition: opacity var(--drawer-transition-duration) ease-in-out;
+  }
+
+  /* Injected by "dialog-polyfill" */
+  /* Required for iOS <= 15.2 */
+  + .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--color-neutral-700);
+    opacity: 0.3;
+
+    + ._dialog_overlay {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  &.--top,
+  &.--bottom {
+    width: 100vw;
+    max-width: 100vw;
+    height: var(--drawer-height);
+    max-height: var(--drawer-height);
+    transition: transform var(--drawer-transition-duration) ease-in-out;
+  }
+
+  &.--left,
+  &.--right {
+    bottom: 0;
+    width: 100%;
+    max-width: var(--drawer-width);
+    height: 100vh;
+    max-height: 100vh;
+    transition: transform var(--drawer-transition-duration) ease-in-out;
+  }
+
+  /* tl;dr For devices runing iOS 15.2 or older animations are disabled */
+  /* In iOS <= 15.2 Safari doesn't support CSS variables in calc() with negative values */
+  /* This doesn't work */
+  /* translateX(calc(var(--drawer-width) * -1)) */
+  /* These work */
+  /* translateX(calc(560px * -1)) */
+  /* translateX(-560px) */
+  /* Initially offset values that transition into view on open are required */
+  /* to ensure correct <Drawer> positioning on iPad/iPhone orientation change */
+  &:not(.--should-transition) {
+    display: none;
+
+    &[open] {
+      display: flex;
+    }
+
+    &.--top {
+      left: 0;
+    }
+
+    &.--bottom {
+      top: auto;
+      bottom: 0;
+      left: 0;
+    }
+
+    &.--left {
+      left: 0;
+    }
+
+    &.--right {
+      right: 0;
+    }
+  }
+
+  &.--should-transition {
+    &.--transition {
+      &::backdrop {
+        opacity: 0.3;
+      }
+    }
+
+    &.--top {
+      top: calc(-1 * var(--drawer-height));
+
+      &.--transition {
+        transform: translateY(var(--drawer-height));
+      }
+    }
+
+    &.--bottom {
+      top: auto;
+      bottom: calc(-1 * var(--drawer-height));
+
+      &.--transition {
+        transform: translateY(calc(-1 * var(--drawer-height)));
+      }
+    }
+
+    &.--left {
+      left: calc(-1 * var(--drawer-width));
+
+      &.--transition {
+        transform: translateX(var(--drawer-width));
+      }
+    }
+
+    &.--right {
+      left: auto;
+      right: calc(-1 * var(--drawer-width));
+
+      &.--transition {
+        transform: translateX(calc(-1 * var(--drawer-width)));
+      }
+    }
+  }
+}
+
+.mobius-drawer__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  gap: var(--size-sm);
+  align-items: center;
+  padding: var(--size-sm) var(--size-lg);
+  padding-bottom: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-small-title);
+
+  & button {
+    color: var(--color-primary);
+  }
+
+  & img {
+    width: 144px;
+  }
+}
+
+.mobius-drawer__content {
+  flex-grow: 1;
+  padding: var(--size-lg);
+  padding-top: var(--size-sm);
+  font-family: var(--font-family);
+  overflow-y: auto;
+}

package/src/components/Drawer/Drawer.mdx

@@ -168,16 +168,13 @@ This particularly applies to components that already have props named `onClose`
 The following HTML is rendered for a simple Drawer:
 
 ```html
-<dialog class="mobius mobius/Drawer --right open">
-  <header class="mobius/DrawerHeader">
-    <button
-      aria-label="Close"
-      class="mobius mobius/Button --variant-basic mobius/DrawerClose"
-    >
-      <svg class="mobius mobius/Icon svg-inline--mobius-icon" ...>{cross}</svg>
+<dialog class="mobius-drawer --right open">
+  <header class="mobius-drawer__header">
+    <button aria-label="Close" class="mobius-drawer__close">
+      <svg class="mobius-icon svg-inline--mobius-icon" ...>{cross}</svg>
     </button>
   </header>
-  <div class="mobius/DrawerContent">Sample content</div>
+  <div class="mobius-drawer__content">Sample content</div>
 </dialog>
 ```
 
@@ -187,7 +184,3 @@ Class names are augmented with the following flags if true (affected classes sho
 - \--right
 - \--top
 - \--bottom
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Drawer) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Drawer/Drawer.test.tsx

@@ -7,8 +7,8 @@ import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
 
 jestHTMLDialogPolyfill();
 
-const DRAWER_CLASS_NAME = "mobius/Drawer";
-const DRAWER_CLOSE_CLASS_NAME = "mobius/DrawerClose";
+const DRAWER_CLASS_NAME = "mobius-drawer";
+const DRAWER_CLOSE_CLASS_NAME = "mobius-drawer__close";
 const DRAWER_TEST_CLASS_NAME = "my-test-class-name";
 
 describe("Drawer", () => {

package/src/components/Drawer/Drawer.tsx

@@ -48,7 +48,7 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
 
   const dialogClasses = classNames(
     "mobius",
-    "mobius/Drawer",
+    "mobius-drawer",
     `--${direction}`,
     className,
     {

package/src/components/Drawer/Header.tsx

@@ -19,13 +19,13 @@ const Header = forwardRef(
     const { onClose, closeLabel } = useDrawer();
 
     return (
-      <header ref={ref} {...otherProps} className="mobius/DrawerHeader">
+      <header ref={ref} {...otherProps} className="mobius-drawer__header">
         {children}
         <Button
           aria-label="Close"
           variant="basic"
           onPress={onClose}
-          className="mobius/DrawerClose"
+          className="mobius-drawer__close"
           size="sm"
         >
           <Icon icon={cross} /> {closeLabel}

package/src/components/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,70 @@
+:root,
+:host {
+  --dropdown-menu-max-width: 200px;
+}
+
+.mobius-dropdown-menu {
+  position: relative;
+  max-width: var(--dropdown-menu-max-width);
+  width: 100%;
+}
+
+.mobius-dropdown-menu__trigger {
+  width: 100%;
+  text-align: right;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: var(--font-size-regular);
+  cursor: pointer;
+  padding: var(--size-xs) 0;
+  color: var(--color-primary);
+}
+
+.mobius-dropdown-menu__list {
+  display: none;
+  width: 100%;
+  box-shadow: 0 0 var(--size-md) rgba(0, 0, 0, 0.2);
+  border-radius: var(--radius-1);
+  margin-top: var(--size-sm);
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+  overflow: hidden;
+  text-align: left;
+  color: var(--color-text);
+
+  &.--is-open {
+    display: block;
+    position: absolute;
+    z-index: 2;
+    background-color: var(--color-background);
+  }
+}
+
+.mobius-dropdown-menu__item {
+  display: block;
+  cursor: pointer;
+  padding: var(--size-sm);
+  border-left: var(--size-xxs) solid transparent;
+
+  &:hover {
+    background-color: var(--color-background-highlight);
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  &:focus-visible {
+    background-color: var(--color-background-highlight);
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.--is-active {
+    border-left-color: var(--color-primary);
+  }
+}

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -111,22 +111,18 @@ export const CustomTrigger = forwardRef((props, ref) => {
 The following HTML is rendered for a DropdownMenu:
 
 ```html
-<nav class="mobius mobius/DropdownMenu">
+<nav class="mobius-dropdown-menu">
   <button
-    class="mobius mobius/DropdownMenuTrigger {className}"
+    class="mobius-dropdown-menu__trigger {className}"
     aria-expanded="{open}"
     {...otherProps}
   >
     {label}
   </button>
-  <ul class="mobius mobius/DropdownMenuList">
-    <li class="mobius mobius/DropdownMenuItem">{child}</li>
+  <ul class="mobius-dropdown-menu__list">
+    <li class="mobius-dropdown-menu__item">{child}</li>
 
     (more li items...)
   </ul>
 </nav>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/DropdownMenu) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,12 +1,12 @@
-.dropdownmenu-example-custom-trigger .mobius\/DropdownMenu {
+.dropdownmenu-example-custom-trigger .mobius-dropdown-menu {
   text-align: right;
 }
 
-.dropdownmenu-example-custom-trigger .mobius\/Icon {
+.dropdownmenu-example-custom-trigger .mobius-icon {
   transform: rotate(0deg);
   transition: transform 150ms ease-in-out 0s;
 }
 
-.dropdownmenu-example-custom-trigger .mobius\/Icon.--is-open {
+.dropdownmenu-example-custom-trigger .mobius-icon.--is-open {
   transform: rotate(180deg);
 }

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef } from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { DropdownMenu } from ".";
 
-const CLASS_NAME = "mobius/DropdownMenu";
-const TRIGGER_CLASS_NAME = "mobius/DropdownMenuTrigger";
-const LIST_CLASS_NAME = "mobius/DropdownMenuList";
-const ITEM_CLASS_NAME = "mobius/DropdownMenuItem";
+const CLASS_NAME = "mobius-dropdown-menu";
+const TRIGGER_CLASS_NAME = "mobius-dropdown-menu__trigger";
+const LIST_CLASS_NAME = "mobius-dropdown-menu__list";
+const ITEM_CLASS_NAME = "mobius-dropdown-menu__item";
 const ACTIVE_ITEM_CLASS_NAME = "--is-active";
 
 describe("DropdownMenu", () => {

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -59,11 +59,11 @@ const DropdownMenu: ForwardedRefComponent<
 
   const classes = classNames(
     "mobius",
-    "mobius/DropdownMenu",
+    "mobius-dropdown-menu",
     otherProps.className,
   );
-  const triggerClasses = classNames("mobius", "mobius/DropdownMenuTrigger");
-  const listClasses = classNames("mobius", "mobius/DropdownMenuList", {
+  const triggerClasses = classNames("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = classNames("mobius", "mobius-dropdown-menu__list", {
     "--is-open": open,
   });
 

package/src/components/DropdownMenu/Item.tsx

@@ -36,7 +36,7 @@ const Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(
     } = props;
     const classes = classNames(
       "mobius",
-      "mobius/DropdownMenuItem",
+      "mobius-dropdown-menu__item",
       { "--is-active": active },
       otherProps.className,
     );

package/src/components/ErrorMessage/ErrorMessage.css

@@ -0,0 +1,11 @@
+.mobius-error-message {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--size-xs);
+  grid-template-columns: min-content 1fr;
+  color: var(--color-error);
+}
+
+.mobius-error-message__text.mobius-text {
+  line-height: var(--font-size-regular);
+}