@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/Modal/Modal.css

@@ -0,0 +1,145 @@
+:root,
+:host,
+::backdrop {
+  --modal-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 {
+    --modal-transition-duration: 300ms;
+  }
+}
+
+.mobius-modal {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  max-height: 80%;
+  padding: 0;
+  margin: auto;
+  background-color: var(--color-background);
+  border: none;
+  border-radius: var(--radius-1);
+  overflow: hidden;
+
+  &:not([open]) {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::backdrop {
+    background-color: var(--color-neutral-700);
+    opacity: 0;
+    transition: opacity var(--modal-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;
+    }
+  }
+
+  &.--is-fullscreen {
+    top: 0;
+    border-radius: 0;
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    max-width: 100vw;
+  }
+
+  &.--no-dialog-support {
+    /* Correctly position modal in x/y middle on iOS <= 15.2 */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:not(.--should-transition) {
+    display: none;
+
+    &[open] {
+      display: flex;
+    }
+
+    &::backdrop {
+      opacity: 0.3;
+    }
+  }
+
+  &.--fade {
+    transition: opacity var(--modal-transition-duration) ease-in-out;
+  }
+
+  &.--slide-up {
+    transition: transform var(--modal-transition-duration) ease-in-out;
+  }
+
+  &.--should-transition {
+    &.--transition {
+      &::backdrop {
+        opacity: 0.3;
+      }
+    }
+
+    &.--slide-up {
+      transform: translateY(100vh);
+
+      &.--transition {
+        transform: translateY(0vh);
+      }
+    }
+
+    &.--fade {
+      opacity: 0;
+
+      &.--transition {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.mobius-modal__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  gap: var(--size-sm);
+  align-items: center;
+  padding: var(--size-xs);
+  padding-left: var(--size-sm);
+  font-family: var(--font-family);
+  font-size: var(--font-size-small-title);
+  margin: 0;
+}
+
+.mobius-modal__content {
+  flex-grow: 1;
+  padding: 0 var(--size-sm);
+  margin: var(--size-sm) 0;
+  font-family: var(--font-family);
+  overflow-y: auto;
+}

package/src/components/Modal/Modal.mdx

@@ -310,16 +310,13 @@ export const ExampleContent = ({ onClose }) => {
 The following HTML is rendered for a simple Modal:
 
 ```html
-<dialog class="mobius mobius/Modal --is-open --is-md">
-  <header class="mobius/ModalHeader">
-    <button
-      aria-label="Close"
-      class="mobius mobius/Button --variant-basic mobius/ModalClose"
-    >
-      <svg class="mobius mobius/Icon svg-inline--mobius-icon" ...>{cross}</svg>
+<dialog class="mobius-modal --is-open --is-md">
+  <header class="mobius-modal__header">
+    <button aria-label="Close" class="mobius-modal__close">
+      <svg class="mobius-icon svg-inline--mobius-icon" ...>{cross}</svg>
     </button>
   </header>
-  <div class="mobius/ModalContent">Sample content</div>
+  <div class="mobius-modal__content">Sample content</div>
 </dialog>
 ```
 
@@ -327,7 +324,3 @@ Class names are augmented with the following flags if true (affected classes sho
 
 - \--slide-up
 - \--is-fullscreen
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Modal) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Modal/Modal.test.tsx

@@ -7,8 +7,8 @@ import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
 
 jestHTMLDialogPolyfill();
 
-const MODAL_CLASS_NAME = "mobius/Modal";
-const MODAL_CLOSE_CLASS_NAME = "mobius/ModalClose";
+const MODAL_CLASS_NAME = "mobius-modal";
+const MODAL_CLOSE_CLASS_NAME = "mobius-modal__close";
 const MODAL_TEST_CLASS_NAME = "my-test-class-name";
 
 describe("Modal", () => {

package/src/components/Modal/Modal.tsx

@@ -60,7 +60,7 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
 
   const modalClasses = classNames(
     "mobius",
-    "mobius/Modal",
+    "mobius-modal",
     {
       "--no-dialog-support": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2
       "--should-transition": shouldTransition && animation,

package/src/components/NumberField/NumberField.css

@@ -0,0 +1,64 @@
+:root,
+:host {
+  --number-input-max-width: none;
+}
+
+.mobius-number-field {
+  box-sizing: border-box;
+  width: 100%;
+
+  &:where(.--is-optional) > :where(.mobius-label)::after {
+    content: " (optional)";
+  }
+}
+
+.mobius-number-field__input-wrapper {
+  width: 100%;
+}
+
+.mobius-number-field__input {
+  box-sizing: border-box;
+  border: var(--border-default);
+  border-radius: var(--radius-1);
+  background-color: var(--color-background-input);
+  padding: var(--input-field-padding);
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  color: var(--color-text);
+  outline: none;
+  margin: 0;
+  max-width: var(--text-input-max-width);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-text-medium);
+  }
+
+  /* Focused */
+  &:focus-visible:not(.--is-disabled) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+    box-shadow: var(--box-shadow-default);
+  }
+
+  /* Hovered */
+  &:hover:not(.--is-disabled):not(&.--is-invalid) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+  }
+
+  /* Disabled */
+  &.--is-disabled {
+    background-color: var(--color-background-light);
+    border-color: var(--color-border-medium);
+    color: var(--color-text-light);
+    cursor: not-allowed;
+  }
+
+  /* Invalid */
+  &.--is-invalid:not(.--is-disabled) {
+    border-color: var(--color-error);
+    background-color: var(--color-error-background);
+    color: var(--color-error);
+  }
+}

package/src/components/NumberField/NumberField.mdx

@@ -51,13 +51,13 @@ import { NumberField } from "@simplybusiness/mobius";
 The following HTML is rendered for a NumberField:
 
 ```html
-<div class="mobius/NumberField">
-  <label class="mobius/NumberFieldLabel" id=":ssr-id:" for="test">
+<div class="mobius-number-field">
+  <label class="mobius-number-field__label" id=":ssr-id:" for="test">
     My Number Label
   </label>
-  <div class="mobius/NumberFieldInputWrapper">
+  <div class="mobius-number-field__input-wrapper">
     <input
-      class="mobius/NumberFieldInput"
+      class="mobius-number-field__input"
       id="test"
       type="number"
       value="10"
@@ -77,7 +77,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/NumberField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/NumberField/NumberField.tsx

@@ -18,6 +18,7 @@ import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 import { Validation } from "../../types";
+import { Stack } from "../Stack";
 
 export type NumberFieldElementType = HTMLInputElement;
 
@@ -92,7 +93,7 @@ export const NumberField: ForwardedRefComponent<
     "aria-labelledby": ariaLabelledBy,
   });
 
-  const containerClasses = classNames("mobius/NumberField", className, {
+  const containerClasses = classNames("mobius-number-field", className, {
     "--is-optional": optional,
   });
 
@@ -102,7 +103,7 @@ export const NumberField: ForwardedRefComponent<
   });
 
   const inputClasses = classNames(
-    "mobius/NumberFieldInput",
+    "mobius-number-field__input",
     className,
     {
       "--is-required": required,
@@ -113,7 +114,7 @@ export const NumberField: ForwardedRefComponent<
   );
 
   const labelClasses = classNames(
-    "mobius/NumberFieldLabel",
+    "mobius-number-field__label",
     {
       "--is-disabled": isDisabled,
     },
@@ -155,13 +156,13 @@ export const NumberField: ForwardedRefComponent<
   };
 
   return (
-    <div className={containerClasses}>
+    <Stack gap="xs" className={containerClasses}>
       {label && (
         <Label {...labelProps} className={labelClasses}>
           {label}
         </Label>
       )}
-      <div className="mobius/NumberFieldInputWrapper">
+      <div className="mobius-number-field__input-wrapper">
         <input
           {...fieldProps}
           ref={inputRef || ref}
@@ -186,6 +187,6 @@ export const NumberField: ForwardedRefComponent<
         />
       </div>
       <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
-    </div>
+    </Stack>
   );
 });

package/src/components/PasswordField/PasswordField.css

@@ -0,0 +1,31 @@
+.mobius-password-field {
+  .mobius-text-field--has-suffix-inside {
+    display: flex;
+  }
+
+  :where(.mobius-password-field__show-button) {
+    appearance: none;
+    font-size: var(--font-size-3);
+    font-family: var(--font-family);
+    align-self: center;
+    display: inline-block;
+    background-color: transparent;
+    margin: 0 var(--size-xs) 0 0;
+    padding: 6px var(--size-xs);
+    cursor: pointer;
+    border: none;
+    border-radius: var(--radius-2);
+    color: var(--color-primary);
+    transition: var(--transition-standard);
+    user-select: none;
+
+    &:focus-visible {
+      box-shadow: var(--box-shadow-default);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--color-background-highlight);
+    }
+  }
+}

package/src/components/PasswordField/PasswordField.mdx

@@ -44,10 +44,10 @@ See the example of controlled component using the `onChange` prop.
 The following HTML is rendered for a PasswordField:
 
 ```html
-<div class="mobius/PasswordField mobius/TextField">
-  <label class="mobius/Label">{label}</label>
-  <input class="mobius/TextFieldInput" type="text" />
-  <div class="mobius/ErrorMessage">{errors}</div>
+<div class="mobius-password-field">
+  <label class="mobius-label">{label}</label>
+  <input class="mobius-text-field__input" type="text" />
+  <div class="mobius-error-message">{errors}</div>
 </div>
 ```
 
@@ -57,7 +57,3 @@ Class names are augmented with the following flags if true:
 - \--is-selected
 - \--is-valid
 - \--is-invalid
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/PasswordField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/PasswordField/PasswordField.tsx

@@ -19,7 +19,7 @@ export const PasswordField = forwardRef(
   ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {
     const [show, setShow] = useState(false);
     const type = show ? "text" : "password";
-    const classes = classNames("mobius/PasswordField", className);
+    const classes = classNames("mobius-password-field", className);
     const localRef = useRef<TextFieldElementType>(null);
 
     const handleShowHideButtonClick = () => {

package/src/components/PasswordField/ShowHideButton.tsx

@@ -8,7 +8,7 @@ export const ShowHideButton = ({
   onClick,
 }: ShowHideButtonProps) => (
   <button
-    className="mobius/PasswordFieldShowButton"
+    className="mobius-password-field__show-button"
     type="button"
     onClick={e => {
       e.preventDefault();

package/src/components/Popover/Popover.css

@@ -0,0 +1,43 @@
+:root,
+:host {
+  --popover-max-width: 260px; /* move to variable */
+  --popover-z-index: 2147483647;
+  --color-background-popover: var(--color-azure-700);
+}
+
+.mobius-popover__container {
+  z-index: var(--popover-z-index);
+  max-width: var(--popover-max-width);
+}
+
+.mobius-popover {
+  padding: var(--size-sm);
+  background-color: var(--color-background-popover);
+  color: var(--color-text-inverted);
+  border-radius: var(--radius-2);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-normal);
+  font-family: var(--font-family);
+  line-height: var(--line-height-tight);
+}
+
+.mobius-popover__header {
+  display: flex;
+  padding-bottom: var(--size-sm);
+}
+
+.mobius-popover__close-button {
+  padding: 0;
+  border: none;
+  margin-left: auto;
+  background-color: transparent;
+  color: var(--color-text-inverted);
+}
+
+.mobius-popover__close-icon {
+  height: 1.1em;
+}
+
+.mobius-popover__arrow-icon path {
+  fill: var(--color-background-popover);
+}

package/src/components/Popover/Popover.mdx

@@ -74,26 +74,22 @@ return (
 The following HTML is rendered for Popover toggle:
 
 ```html
-<button class="mobius/PopoverToggle">If only I had more information</button>
+<button class="mobius-popover__toggle">If only I had more information</button>
 ```
 
 Popover content:
 
 ```html
-<div class="mobius mobius/PopoverContainer">
-  <div class="mobius/Popover">
-    <header class="mobius/PopoverHeader">
-      <button class="mobius/PopoverCloseButton" aria-label="Close">
-        <svg class="mobius/PopoverCloseIcon">...</svg>
+<div class="mobius-popover__container">
+  <div class="mobius-popover">
+    <header class="mobius-popover__header">
+      <button class="mobius-popover__close-button" aria-label="Close">
+        <svg class="mobius-popover__close-icon">...</svg>
       </button>
     </header>
-    <div class="mobius/PopoverBody">
+    <div class="mobius-popover__body">
       No way! Now I know everything I need to 🚀.
     </div>
   </div>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Popover) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -4,7 +4,7 @@
   margin: 0 auto;
 }
 
-.popover-example > .mobius\/Button {
+.popover-example > .mobius-button {
   border: none;
   padding: 0;
   font-weight: var(--font-weight-normal);
@@ -13,14 +13,14 @@
   background-color: transparent;
 }
 
-.popover-example .mobius\/Button span {
+.popover-example .mobius-button span {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 6px;
   margin-bottom: 6px;
 }
 
-.popover-example .mobius\/PopoverToggle svg {
+.popover-example .mobius-popover__toggle svg {
   width: 16px;
   margin-left: 4px;
 }

package/src/components/Popover/Popover.test.tsx

@@ -1,13 +1,13 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { Popover } from ".";
 
-const CONTAINER_CLASS_NAME = "mobius/PopoverContainer";
-const TOGGLE_CLASS_NAME = "mobius/PopoverToggle";
-const POPOVER_CLASS_NAME = "mobius/Popover";
-const HEADER_CLASS_NAME = "mobius/PopoverHeader";
-const CLOSE_BUTTON_CLASS_NAME = "mobius/PopoverCloseButton";
-const CLOSE_ICON_CLASS_NAME = "mobius/PopoverCloseIcon";
-const BODY_CLASS_NAME = "mobius/PopoverBody";
+const CONTAINER_CLASS_NAME = "mobius-popover__container";
+const TOGGLE_CLASS_NAME = "mobius-popover__toggle";
+const POPOVER_CLASS_NAME = "mobius-popover";
+const HEADER_CLASS_NAME = "mobius-popover__header";
+const CLOSE_BUTTON_CLASS_NAME = "mobius-popover__close-button";
+const CLOSE_ICON_CLASS_NAME = "mobius-popover__close-icon";
+const BODY_CLASS_NAME = "mobius-popover__body";
 
 describe("Popover", () => {
   it("should render without errors", () => {

package/src/components/Popover/Popover.tsx

@@ -77,7 +77,7 @@ export const Popover = (props: PopoverProps) => {
 
   const containerClasses = classNames(
     "mobius",
-    "mobius/PopoverContainer",
+    "mobius-popover__container",
     className,
   );
 
@@ -94,7 +94,7 @@ export const Popover = (props: PopoverProps) => {
 
   const triggerComponent = cloneElement(trigger, {
     ref: refs.setReference,
-    className: classNames(trigger.props.className, "mobius/PopoverToggle"),
+    className: classNames(trigger.props.className, "mobius-popover__toggle"),
     onClick: toggleVisibility,
     ...getReferenceProps(),
   });
@@ -117,11 +117,11 @@ export const Popover = (props: PopoverProps) => {
           style={floatingStyles}
           {...getFloatingProps()}
         >
-          <div className="mobius/Popover">
-            <header className="mobius/PopoverHeader">
+          <div className="mobius-popover">
+            <header className="mobius-popover__header">
               <Button
                 type="button"
-                className="mobius/PopoverCloseButton"
+                className="mobius-popover__close-button"
                 onClick={toggleVisibility}
                 aria-label="Close"
                 variant="ghost"
@@ -129,17 +129,17 @@ export const Popover = (props: PopoverProps) => {
                 <Icon
                   icon={cross}
                   size="md"
-                  className="mobius/PopoverCloseIcon"
+                  className="mobius-popover__close-icon"
                 />
               </Button>
             </header>
-            <div className="mobius/PopoverBody">{children}</div>
+            <div className="mobius-popover__body">{children}</div>
           </div>
           <FloatingArrow
             ref={arrowRef}
             context={context}
             width={20}
-            className="mobius/PopoverArrowIcon"
+            className="mobius-popover__arrow-icon"
           />
         </div>
       )}

package/src/components/Progress/Progress.css

@@ -0,0 +1,30 @@
+.mobius-progress__track {
+  background-color: var(--color-background-light);
+  margin-bottom: var(--size-xs);
+  height: var(--size-xs);
+}
+
+.mobius-progress__label {
+  display: block;
+  margin-bottom: var(--size-xs);
+}
+
+.mobius-progress__bar {
+  background-color: var(--color-primary);
+  height: 100%;
+}
+
+.mobius-progress__track,
+.mobius-progress__bar {
+  border-radius: 999px;
+}
+
+.mobius-progress {
+  &.--is-primary .mobius-progress__bar {
+    background-color: var(--color-primary);
+  }
+
+  &.--is-secondary .mobius-progress__bar {
+    background-color: var(--color-secondary);
+  }
+}

package/src/components/Progress/Progress.mdx

@@ -57,18 +57,12 @@ The following HTML is rendered for a Progress:
   aria-valuemax="10"
   aria-valuetext="20%"
   role="progressbar"
-  class="mobius mobius/Progress --is-primary"
+  class="mobius-progress --is-primary"
 >
-  <label class="mobius mobius/Label mobius/ProgressLabel" id="456"
-    >Primary</label
-  >
-  <div class="mobius/ProgressTrack">
-    <div class="mobius/ProgressBar css-ufscxh"></div>
+  <label class="mobius-progress__label" id="456">Primary</label>
+  <div class="mobius-progress__track">
+    <div class="mobius-progress__bar"></div>
   </div>
-  <label class="mobius mobius/Label">20%</label>
+  <label class="mobius-label">20%</label>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Progress) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)