@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/Progress/Progress.test.tsx

@@ -1,6 +1,10 @@
 import { render } from "@testing-library/react";
 import { Progress } from ".";
 
+const BASE_CLASS = "mobius";
+const PROGRESS_CLASS = "mobius-progress";
+const PROGRESS_LABEL_CLASS = "mobius-progress__label";
+
 describe("Progress", () => {
   describe("classnames", () => {
     let result: any;
@@ -16,7 +20,7 @@ describe("Progress", () => {
       );
     });
 
-    const classNames = ["mobius", "mobius/Progress", "test"];
+    const classNames = [BASE_CLASS, PROGRESS_CLASS, "test"];
     it.each(classNames)("should have classname %s", className => {
       expect(result.container.firstChild).toHaveClass(className);
     });
@@ -74,11 +78,11 @@ describe("Progress", () => {
       );
 
       const labelId = container
-        .getElementsByClassName("mobius mobius/ProgressLabel")[0]
+        .getElementsByClassName(PROGRESS_LABEL_CLASS)[0]
         ?.getAttribute("id");
 
       const labelledById = container
-        .getElementsByClassName("mobius mobius/Progress")[0]
+        .getElementsByClassName(PROGRESS_CLASS)[0]
         ?.getAttribute("aria-labelledby");
 
       expect(labelledById).toEqual(labelId);

package/src/components/Progress/Progress.tsx

@@ -68,7 +68,7 @@ const getLabelComponent = (
     return (
       <Label
         id={progressLabelId}
-        className="mobius/ProgressLabel"
+        className="mobius-progress__label"
         elementType="span"
       >
         {label}
@@ -80,7 +80,7 @@ const getLabelComponent = (
     <VisuallyHidden>
       <Label
         id={progressLabelId}
-        className="mobius/ProgressLabel"
+        className="mobius-progress__label"
         elementType="span"
       >
         {label}
@@ -134,7 +134,7 @@ const Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =
     );
     const barWidth = `${percentage}%`;
 
-    const classes = classNames("mobius", "mobius/Progress", className, {
+    const classes = classNames("mobius", "mobius-progress", className, {
       "--is-primary": variant === "primary",
       "--is-secondary": variant === "secondary",
     });
@@ -160,8 +160,8 @@ const Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =
         aria-labelledby={progressLabelId}
       >
         {labelComponent}
-        <div className="mobius/ProgressTrack">
-          <div className="mobius/ProgressBar" style={{ width: barWidth }} />
+        <div className="mobius-progress__track">
+          <div className="mobius-progress__bar" style={{ width: barWidth }} />
         </div>
         {showValueLabel && (
           <Label data-testid="value-label" elementType="span">

package/src/components/Radio/Radio.css

@@ -0,0 +1,185 @@
+.mobius-radio-group {
+  box-sizing: border-box;
+  width: 100%;
+
+  &.--is-horizontal .mobius-radio__label:not(:last-child) {
+    margin-right: var(--size-xs);
+  }
+
+  &.--is-vertical .mobius-radio__label:not(:last-child) {
+    margin-bottom: var(--size-xs);
+  }
+
+  &:where(.--is-optional) > :where(.mobius-label)::after {
+    content: " (optional)";
+  }
+}
+
+.mobius-radio__wrapper {
+  display: flex;
+
+  &.--is-horizontal {
+    flex-direction: row;
+  }
+
+  &.--is-vertical {
+    flex-direction: column;
+  }
+}
+
+.mobius-radio__input {
+  align-self: center;
+  appearance: none;
+  margin: 0 calc(var(--size-xs) + 2px) 0 0;
+  padding: 3px;
+  outline: 2px solid var(--color-primary-light);
+  border-radius: 50%;
+  background-color: transparent;
+
+  /* Overwrite browser default */
+  &:focus-visible {
+    outline-offset: 0;
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: transparent;
+  }
+
+  &:checked::after {
+    background-color: var(--color-primary);
+  }
+
+  &:disabled {
+    outline-color: var(--color-border-medium);
+
+    &:checked::after {
+      background-color: var(--color-background-light);
+    }
+  }
+
+  &.--is-multiline {
+    align-self: flex-start;
+    margin-top: var(--size-xxs);
+    margin-right: calc(var(--size-sm) - 1px);
+  }
+}
+
+.mobius-radio__label {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--input-field-padding-tight);
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  font-weight: var(--font-weight-normal);
+  border: var(--border-default);
+  border-radius: var(--radius-1);
+  color: var(--color-text);
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--color-background-input);
+
+  /* Disabled */
+  &.--is-disabled {
+    background-color: var(--color-background-light);
+    border-color: var(--color-border-medium);
+    color: var(--color-text-light);
+    cursor: not-allowed;
+
+    &.--is-selected {
+      border-color: var(--color-border-light);
+    }
+  }
+
+  /* Selected  */
+  &.--is-selected:not(.--is-invalid &):not(.--is-disabled) {
+    border-color: var(--color-primary-light);
+
+    .mobius-radio__input {
+      outline-color: var(--color-primary-light);
+
+      &:checked::after {
+        background-color: var(--color-primary-light);
+      }
+    }
+  }
+
+  /* Hovered  */
+  &:hover:not(.--is-disabled):not(.--is-invalid &) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+
+    .mobius-radio__input {
+      outline-color: var(--color-primary);
+
+      &:checked::after {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+
+  /* Focused */
+  &:focus-within:not(.--is-disabled) {
+    box-shadow: var(--box-shadow-default);
+
+    &:not(.--is-invalid &) {
+      border-color: var(--color-primary);
+      background-color: var(--color-background-input-active);
+
+      .mobius-radio__input {
+        outline-color: var(--color-primary);
+
+        &:checked::after {
+          background-color: var(--color-primary);
+        }
+      }
+    }
+  }
+
+  /* Multiline */
+  &.--is-multiline {
+    width: 100%;
+  }
+
+  /* Invalid */
+  .--is-invalid &:not(.--is-disabled) {
+    border-color: var(--color-error);
+    color: var(--color-error);
+
+    &:hover,
+    &:focus-within {
+      border-color: var(--color-error);
+      background-color: var(--color-error-background);
+    }
+
+    .mobius-radio__input {
+      outline-color: var(--color-error);
+
+      &:checked::after {
+        background-color: var(--color-error);
+      }
+    }
+  }
+}
+
+.mobius-radio__content {
+  box-sizing: border-box;
+  flex: 1; /* Stretch to fill remaining space */
+}
+
+.mobius-radio__content--multiline {
+  flex: 1; /* Stretch to fill remaining space */
+}
+
+.mobius-radio__content-first-line {
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--size-xs);
+  padding-top: calc(var(--size-xxs) - 1px);
+}

package/src/components/Radio/Radio.mdx

@@ -133,16 +133,16 @@ The `onChange` prop can be used to listen to changes of the selected radio butto
 The following HTML is rendered for a Radio Group:
 
 ```html
-<div class="mobius mobius/RadioGroup --is-vertical" role="radiogroup">
-  <label class="mobius/Label --is-vertical">Color</label>
-  <div class="mobius/RadioWrapper">
-    <label class="mobius/RadioLabel">
-      <input class="mobius/RadioInput" type="radio" value="red" />
-      <div class="mobius/RadioContent">Red</div>
+<div class="mobius-radio-group --is-vertical" role="radiogroup">
+  <label class="mobius-label --is-vertical">Color</label>
+  <div class="mobius-radio__wrapper">
+    <label class="mobius-radio__label">
+      <input class="mobius-radio__input" type="radio" value="red" />
+      <div class="mobius-radio__content">Red</div>
     </label>
-    <label class="mobius/RadioLabel">
-      <input class="mobius/RadioInput" type="radio" value="blue" checked />
-      <div class="mobius/RadioContent">Blue</div>
+    <label class="mobius-radio__label">
+      <input class="mobius-radio__input" type="radio" value="blue" checked />
+      <div class="mobius-radio__content">Blue</div>
     </label>
   </div>
 </div>
@@ -163,7 +163,3 @@ Class names for `<RadioGroup />`:
 - \--is-required
 - \--is-optional
 - \--is-horizontal OR --is-vertical
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Radio) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Radio/Radio.test.tsx

@@ -3,6 +3,11 @@ import userEvent from "@testing-library/user-event";
 import { Radio, RadioGroup } from ".";
 import { HTMLElementEvent } from "../../types/events";
 
+const RADIO_GROUP_CLASS = "mobius-radio-group";
+const LABEL_CLASS = "mobius-label";
+const RADIO_WRAPPER_CLASS = "mobius-radio__wrapper";
+const RADIO_INPUT_CLASS = "mobius-radio__input";
+
 describe("Radio", () => {
   it("should render without error", () => {
     const component = render(
@@ -286,7 +291,7 @@ describe("Radio", () => {
         </RadioGroup>,
       );
 
-      expect(container.firstChild).toHaveClass("mobius/RadioGroup");
+      expect(container.firstChild).toHaveClass(RADIO_GROUP_CLASS);
     });
 
     it("uses base Mobius class", () => {
@@ -303,10 +308,10 @@ describe("Radio", () => {
       const label = screen.getByText(labelText);
       const inputs = screen.queryAllByRole("radio");
 
-      expect(containerElement).toHaveClass("mobius/RadioGroup");
-      expect(label).toHaveClass("mobius/Label");
-      expect(label.nextElementSibling).toHaveClass("mobius/RadioWrapper");
-      inputs.forEach(input => expect(input).toHaveClass("mobius/RadioInput"));
+      expect(containerElement).toHaveClass(RADIO_GROUP_CLASS);
+      expect(label).toHaveClass(LABEL_CLASS);
+      expect(label.nextElementSibling).toHaveClass(RADIO_WRAPPER_CLASS);
+      inputs.forEach(input => expect(input).toHaveClass(RADIO_INPUT_CLASS));
     });
 
     it("includes custom class names", () => {

package/src/components/Radio/Radio.tsx

@@ -90,11 +90,11 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
       "--is-required": isRequired,
     };
     const containerClasses = classNames(
-      "mobius/RadioLabel",
+      "mobius-radio__label",
       radioClasses,
       className,
     );
-    const inputClasses = classNames("mobius/RadioInput", radioClasses);
+    const inputClasses = classNames("mobius-radio__input", radioClasses);
 
     const handleClick = (event: MouseEvent<RadioElementType>) => {
       if (onChange) {
@@ -133,12 +133,12 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
             {...rest}
           />
           {isMultiline ? (
-            <div className="mobius/RadioContentMultiline">
-              <div className="mobius/RadioContentFirstLine">{label}</div>
-              <div className="mobius/RadioExtraContent">{children}</div>
+            <div className="mobius-radio__content--multiline">
+              <div className="mobius-radio__content-first-line">{label}</div>
+              <div className="mobius-radio__extra-content">{children}</div>
             </div>
           ) : (
-            <div className="mobius/RadioContent">{label || children}</div>
+            <div className="mobius-radio__content">{label || children}</div>
           )}
         </Label>
         {errorMessage && <ErrorMessage errorMessage={errorMessage} />}

package/src/components/Radio/RadioGroup.tsx

@@ -21,6 +21,7 @@ import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 import { Validation } from "../../types";
 import { useValidationClasses } from "../../hooks";
+import { Stack } from "../Stack";
 
 export type RadioGroupElementType = HTMLDivElement;
 
@@ -109,11 +110,11 @@ const RadioGroup: ForwardedRefComponent<
   };
   const radioGroupClasses = classNames(
     "mobius",
-    "mobius/RadioGroup",
+    "mobius-radio-group",
     radioClasses,
     validationClasses,
   );
-  const radioWrapperClasses = classNames("mobius/RadioWrapper", {
+  const radioWrapperClasses = classNames("mobius-radio__wrapper", {
     [`--is-${orientation}`]: true,
   });
   const labelClasses = classNames(radioClasses, validationClasses);
@@ -143,30 +144,32 @@ const RadioGroup: ForwardedRefComponent<
       className={radioGroupClasses}
       role="radiogroup"
     >
-      {label && (
-        <Label htmlFor={name} id={labelId} className={labelClasses}>
-          {label}
-        </Label>
-      )}
-      <div className={radioWrapperClasses}>
-        {Children.map(children, child => {
-          if (isValidElement(child)) {
-            return cloneElement(child as ReactElement, {
-              orientation,
-              groupDisabled: isDisabled,
-              name: nameAttribute,
-              selected,
-              setSelected,
-              isRequired,
-              "aria-describedby": describedBy,
-              onChange,
-            });
-          }
+      <Stack gap="xs">
+        {label && (
+          <Label htmlFor={name} id={labelId} className={labelClasses}>
+            {label}
+          </Label>
+        )}
+        <div className={radioWrapperClasses}>
+          {Children.map(children, child => {
+            if (isValidElement(child)) {
+              return cloneElement(child as ReactElement, {
+                orientation,
+                groupDisabled: isDisabled,
+                name: nameAttribute,
+                selected,
+                setSelected,
+                isRequired,
+                "aria-describedby": describedBy,
+                onChange,
+              });
+            }
 
-          return child;
-        })}
-      </div>
-      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
+            return child;
+          })}
+        </div>
+        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
+      </Stack>
     </div>
   );
 });

package/src/components/SVG/SVG.mdx

@@ -61,9 +61,5 @@ export const Star = (
 The following HTML is rendered for an SVG image:
 
 ```html
-<svg class="mobius/SVG">{children}</svg>
+<svg class="mobius-svg">{children}</svg>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/SVG) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/SVG/SVG.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { SVG } from ".";
 
-const CLASS_NAME = "mobius/SVG";
+const CLASS_NAME = "mobius-svg";
 
 const SvgImage = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.8 85">

package/src/components/SVG/SVG.tsx

@@ -15,7 +15,7 @@ const SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(
   (props: SVGProps, ref: SVGRef) => {
     const { children, className, ...otherProps } = props;
 
-    const classes = classNames("mobius", "mobius/SVG", className);
+    const classes = classNames("mobius", "mobius-svg", className);
     const svgNode = Children.only(children);
     // Remove originalType and mdxType props
     const { children: svgChildren, viewBox, xmlns } = svgNode.props;

package/src/components/Segment/Segment.css

@@ -0,0 +1,204 @@
+:root,
+:host {
+  --segment-border: var(--size-border-width) solid var(--color-border-light);
+}
+
+/*-----------------------------------------------------------------------------
+   Wrapper around select and dropdown icon
+  ----------------------------------------------------------------------------*/
+.mobius-segment-group {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: var(--segment-border);
+  border-radius: var(--radius-2);
+  margin-bottom: var(--size-sm);
+
+  /* Horizontal stack */
+  &.horizontal {
+    flex-direction: row;
+  }
+
+  /* Margins around SegmentGroup */
+  .mobius-segment-group.gap-size-xs,
+  &.gap-size-xs {
+    margin: var(--size-xs);
+  }
+
+  .mobius-segment-group.gap-size-s,
+  &.gap-size-s {
+    margin: var(--size-sm);
+  }
+
+  .mobius-segment-group.gap-size-m,
+  &.gap-size-m {
+    margin: var(--size-md);
+  }
+
+  .mobius-segment-group.gap-size-l,
+  &.gap-size-l {
+    margin: var(--size-lm);
+  }
+
+  .mobius-segment-group.gap-size-xl,
+  &.gap-size-xl {
+    margin: var(--size-xl);
+  }
+
+  .mobius-segment-group.gap-size-xxl,
+  &.gap-size-xxl {
+    margin: var(--size-xxl);
+  }
+
+  /* Groups of vertically attached elements */
+  & > .mobius-segment {
+    border: none;
+    border-top: var(--segment-border);
+  }
+
+  &:not(.horizontal) {
+    & > .mobius-segment {
+      &:first-child {
+        border-top: none;
+        border-radius: var(--radius-2);
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+        border-bottom: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  /* Groups of horizontally attached elements */
+  &.horizontal {
+    & > .mobius-segment,
+    & > .mobius-segment-group {
+      border: none;
+      border-radius: 0;
+      border-left: var(--segment-border);
+    }
+
+    & > .mobius-segment:first-child,
+    & > .mobius-segment-group:first-child {
+      border-left: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & > .mobius-segment:not(:first-child):not(:last-child) {
+      border-right: 0;
+      border-radius: 0;
+    }
+
+    & > .mobius-segment:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  /* Nested Groups: don't double up on borders */
+  .mobius-segment-group {
+    border-top: none;
+    margin-top: 0;
+    margin-bottom: 0;
+    flex: 1;
+
+    & > .mobius-segment-group.--is-horizontal {
+      border-radius: 0;
+      border: 0;
+      border-top: var(--segment-border);
+      margin: 0;
+    }
+
+    &:not(.horizontal)
+      > .mobius-segment-group:not(.--is-horizontal)
+      .mobius-segment:first-child {
+      border-top: var(--segment-border);
+    }
+    /* NOTE: We may need a similar rule for horizontally
+    nested Segments inside groups for a left border */
+  }
+}
+
+.mobius-segment {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  border: var(--segment-border);
+  border-radius: var(--radius-2);
+  padding: var(--size-sm);
+
+  /* Remove text margins from inner text atoms */
+  .mobius-text,
+  .mobius-text.--is-h1,
+  .mobius-text.--is-h2,
+  .mobius-text.--is-h3,
+  .mobius-text.--is-h4 {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  .mobius-text.--is-p {
+    line-height: var(--font-size-lead);
+  }
+
+  /* Colours */
+  &.subtle {
+    background-color: var(--color-background-highlight);
+  }
+
+  &.grey {
+    background-color: var(--color-background-light);
+  }
+
+  &.primary {
+    background-color: var(--color-primary);
+  }
+
+  &.secondary {
+    background-color: var(--color-secondary);
+  }
+
+  &.inverted {
+    color: var(--color-text-inverted);
+  }
+
+  /* Last child inside a Segment should have no bottom margin */
+  .mobius-text-field:last-child,
+  .mobius-checkbox:last-child,
+  .mobius-radio-group:last-child,
+  .mobius-text-area:last-child,
+  .mobius-select__outer:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  /* Nested Groups inside Segments:
+  make full width and remove bottom margin*/
+  .mobius-segment-group {
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+/* Heading */
+.mobius-segment__heading {
+  box-sizing: border-box;
+  font-size: var(--font-size-regular);
+  margin: 0;
+  margin-bottom: var(--size-sm);
+}