@simplybusiness/mobius 4.16.1 → 5.0.0

package/src/components/Radio/Radio.css

@@ -1,24 +1,21 @@
-.mobius\/RadioGroup {
-  display: flex;
-  flex-direction: column;
+.mobius-radio-group {
   box-sizing: border-box;
   width: 100%;
-  margin-bottom: var(--size-sm);
 
-  &.--is-horizontal .mobius\/RadioLabel:not(:last-child) {
+  &.--is-horizontal .mobius-radio__label:not(:last-child) {
     margin-right: var(--size-xs);
   }
 
-  &.--is-vertical .mobius\/RadioLabel:not(:last-child) {
+  &.--is-vertical .mobius-radio__label:not(:last-child) {
     margin-bottom: var(--size-xs);
   }
 
-  &:where(.--is-optional) > :where(.mobius\/Label)::after {
+  &:where(.--is-optional) > :where(.mobius-label)::after {
     content: " (optional)";
   }
 }
 
-.mobius\/RadioWrapper {
+.mobius-radio__wrapper {
   display: flex;
 
   &.--is-horizontal {
@@ -30,7 +27,7 @@
   }
 }
 
-.mobius\/RadioInput {
+.mobius-radio__input {
   align-self: center;
   appearance: none;
   margin: 0 calc(var(--size-xs) + 2px) 0 0;
@@ -72,7 +69,7 @@
   }
 }
 
-.mobius\/RadioLabel {
+.mobius-radio__label {
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -105,7 +102,7 @@
   &.--is-selected:not(.--is-invalid &):not(.--is-disabled) {
     border-color: var(--color-primary-light);
 
-    .mobius\/RadioInput {
+    .mobius-radio__input {
       outline-color: var(--color-primary-light);
 
       &:checked::after {
@@ -119,7 +116,7 @@
     border-color: var(--color-primary);
     background-color: var(--color-background-input-active);
 
-    .mobius\/RadioInput {
+    .mobius-radio__input {
       outline-color: var(--color-primary);
 
       &:checked::after {
@@ -136,7 +133,7 @@
       border-color: var(--color-primary);
       background-color: var(--color-background-input-active);
 
-      .mobius\/RadioInput {
+      .mobius-radio__input {
         outline-color: var(--color-primary);
 
         &:checked::after {
@@ -162,7 +159,7 @@
       background-color: var(--color-error-background);
     }
 
-    .mobius\/RadioInput {
+    .mobius-radio__input {
       outline-color: var(--color-error);
 
       &:checked::after {
@@ -172,16 +169,16 @@
   }
 }
 
-.mobius\/RadioContent {
+.mobius-radio__content {
   box-sizing: border-box;
   flex: 1; /* Stretch to fill remaining space */
 }
 
-.mobius\/RadioContentMultiline {
+.mobius-radio__content--multiline {
   flex: 1; /* Stretch to fill remaining space */
 }
 
-.mobius\/RadioContentFirstLine {
+.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

@@ -6,7 +6,7 @@
 /*-----------------------------------------------------------------------------
    Wrapper around select and dropdown icon
   ----------------------------------------------------------------------------*/
-  .mobius\/SegmentGroup {
+.mobius-segment-group {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -20,44 +20,44 @@
   }
 
   /* Margins around SegmentGroup */
-  .mobius\/SegmentGroup.margin-size-xs,
-  &.margin-size-xs {
+  .mobius-segment-group.gap-size-xs,
+  &.gap-size-xs {
     margin: var(--size-xs);
   }
 
-  .mobius\/SegmentGroup.margin-size-s,
-  &.margin-size-s {
+  .mobius-segment-group.gap-size-s,
+  &.gap-size-s {
     margin: var(--size-sm);
   }
 
-  .mobius\/SegmentGroup.margin-size-m,
-  &.margin-size-m {
+  .mobius-segment-group.gap-size-m,
+  &.gap-size-m {
     margin: var(--size-md);
   }
 
-  .mobius\/SegmentGroup.margin-size-l,
-  &.margin-size-l {
+  .mobius-segment-group.gap-size-l,
+  &.gap-size-l {
     margin: var(--size-lm);
   }
 
-  .mobius\/SegmentGroup.margin-size-xl,
-  &.margin-size-xl {
+  .mobius-segment-group.gap-size-xl,
+  &.gap-size-xl {
     margin: var(--size-xl);
   }
 
-  .mobius\/SegmentGroup.margin-size-xxl,
-  &.margin-size-xxl {
+  .mobius-segment-group.gap-size-xxl,
+  &.gap-size-xxl {
     margin: var(--size-xxl);
   }
 
   /* Groups of vertically attached elements */
-  & > .mobius\/Segment {
+  & > .mobius-segment {
     border: none;
     border-top: var(--segment-border);
   }
 
   &:not(.horizontal) {
-    & > .mobius\/Segment {
+    & > .mobius-segment {
       &:first-child {
         border-top: none;
         border-radius: var(--radius-2);
@@ -77,39 +77,39 @@
 
   /* Groups of horizontally attached elements */
   &.horizontal {
-    & > .mobius\/Segment,
-    & > .mobius\/SegmentGroup {
+    & > .mobius-segment,
+    & > .mobius-segment-group {
       border: none;
       border-radius: 0;
       border-left: var(--segment-border);
     }
 
-    & > .mobius\/Segment:first-child,
-    & > .mobius\/SegmentGroup:first-child {
+    & > .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) {
+    & > .mobius-segment:not(:first-child):not(:last-child) {
       border-right: 0;
       border-radius: 0;
     }
 
-    & > .mobius\/Segment:last-child {
+    & > .mobius-segment:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
 
   /* Nested Groups: don't double up on borders */
-  .mobius\/SegmentGroup {
+  .mobius-segment-group {
     border-top: none;
     margin-top: 0;
     margin-bottom: 0;
     flex: 1;
 
-    & > .mobius\/SegmentGroup.horizontal {
+    & > .mobius-segment-group.--is-horizontal {
       border-radius: 0;
       border: 0;
       border-top: var(--segment-border);
@@ -117,8 +117,8 @@
     }
 
     &:not(.horizontal)
-      > .mobius\/SegmentGroup:not(.horizontal)
-      .mobius\/Segment:first-child {
+      > .mobius-segment-group:not(.--is-horizontal)
+      .mobius-segment:first-child {
       border-top: var(--segment-border);
     }
     /* NOTE: We may need a similar rule for horizontally
@@ -126,7 +126,7 @@
   }
 }
 
-.mobius\/Segment {
+.mobius-segment {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -137,11 +137,11 @@
   padding: var(--size-sm);
 
   /* Remove text margins from inner text atoms */
-  .mobius\/Text,
-  .mobius\/Text.h1,
-  .mobius\/Text.h2,
-  .mobius\/Text.h3,
-  .mobius\/Text.h4 {
+  .mobius-text,
+  .mobius-text.--is-h1,
+  .mobius-text.--is-h2,
+  .mobius-text.--is-h3,
+  .mobius-text.--is-h4 {
     margin: 0;
   }
 
@@ -153,7 +153,7 @@
     margin: 0;
   }
 
-  .mobius\/Text.p {
+  .mobius-text.--is-p {
     line-height: var(--font-size-lead);
   }
 
@@ -179,24 +179,24 @@
   }
 
   /* Last child inside a Segment should have no bottom margin */
-  .mobius\/TextField:last-child,
-  .mobius\/Checkbox:last-child,
-  .mobius\/RadioGroup:last-child,
-  .mobius\/TextArea:last-child,
-  .mobius\/SelectOuter:last-child {
+  .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\/SegmentGroup {
+  .mobius-segment-group {
     width: 100%;
     margin-bottom: 0;
   }
 }
 
 /* Heading */
-.mobius\/SegmentHeading {
+.mobius-segment__heading {
   box-sizing: border-box;
   font-size: var(--font-size-regular);
   margin: 0;

package/src/components/Segment/Segment.mdx

@@ -174,9 +174,9 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 </Segment>
 ```
 
-### Bottom margin is removed from the last child in a Segment
+### Bottom gap is removed from the last child in a Segment
 
-<SegmentStories.BottomMarginRemoved />
+<SegmentStories.BottomGapRemoved />
 
 {/* prettier-ignore */}
 ```jsx
@@ -222,9 +222,9 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 </SegmentGroup>
 ```
 
-Add margin around a SegmentGroup with a `margin="size-{xs|s|m|l|xl|xxl}"` prop:
+Add gap around a SegmentGroup with a `gap="size-{xs|s|m|l|xl|xxl}"` prop:
 
-<SegmentStories.MarginAround />
+<SegmentStories.GapAround />
 
 {/* prettier-ignore */}
 ```jsx
@@ -232,7 +232,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 <SegmentGroup>
   <Segment>Top</Segment>
-  <SegmentGroup margin="size-s">
+  <SegmentGroup gap="size-s">
     <Segment>Nested Top</Segment>
     <Segment>Nested Middle</Segment>
     <Segment>Nested Bottom</Segment>
@@ -323,13 +323,9 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
 The following HTML is rendered for a Segment Group:
 
 ```html
-<div class="mobius/SegmentGroup">
-  <div class="mobius/Segment">Top</div>
-  <div class="mobius/Segment">Middle</div>
-  <div class="mobius/Segment">Middle</div>
+<div class="mobius-segment-group">
+  <div class="mobius-segment">Top</div>
+  <div class="mobius-segment">Middle</div>
+  <div class="mobius-segment">Middle</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/Segment/Segment.stories.tsx

@@ -24,9 +24,9 @@ const meta: Meta<typeof Segment> = {
     "HorizontalStack3",
     "Nested2",
     "Nested3",
-    "BottomMarginRemoved",
+    "BottomGapRemoved",
     "CompoundLayout",
-    "MarginAround",
+    "GapAround",
     "PaymentDetails",
   ],
   argTypes: {
@@ -115,10 +115,10 @@ export const HorizontalStack: Meta<typeof SegmentGroup> = {
   ),
   args: {
     horizontal: true,
-    margin: "size-xs",
+    gap: "size-xs",
   },
   argTypes: {
-    margin: {
+    gap: {
       control: { type: "select" },
       options: [...sizeOptions],
     },
@@ -187,7 +187,7 @@ export const HorizontalStack3 = () => (
   </SegmentGroup>
 );
 
-export const BottomMarginRemoved = () => (
+export const BottomGapRemoved = () => (
   <SegmentGroup horizontal>
     <Segment>
       <TextField label="First name" />
@@ -227,10 +227,10 @@ export const CompoundLayout = () => (
   </SegmentGroup>
 );
 
-export const MarginAround = () => (
+export const GapAround = () => (
   <SegmentGroup>
     <Segment>Top</Segment>
-    <SegmentGroup margin="size-s">
+    <SegmentGroup gap="size-s">
       <Segment>Nested Top</Segment>
       <Segment>Nested Middle</Segment>
       <Segment>Nested Bottom</Segment>

package/src/components/Segment/Segment.tsx

@@ -17,7 +17,7 @@ const Segment = (props: SegmentProps) => {
 
   const classes = classNames(
     "mobius",
-    "mobius/Segment",
+    "mobius-segment",
     colour,
     { inverted },
     className,
@@ -25,7 +25,7 @@ const Segment = (props: SegmentProps) => {
 
   return (
     <div className={classes} {...rest}>
-      {heading && <div className="mobius/SegmentHeading">{heading}</div>}
+      {heading && <div className="mobius-segment__heading">{heading}</div>}
       {children}
     </div>
   );

package/src/components/Segment/SegmentGroup.tsx

@@ -5,20 +5,20 @@ import { DOMProps } from "../../types/dom";
 export interface SegmentGroupProps extends DOMProps {
   className?: string;
   horizontal?: boolean;
-  margin?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
+  gap?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
   children?: ReactNode;
 }
 
 const SegmentGroup = (props: SegmentGroupProps) => {
-  const { children, horizontal, margin, className, ...rest } = props;
+  const { children, horizontal, gap, className, ...rest } = props;
 
-  const marginClass = margin ? `margin-${margin}` : "";
+  const gapClass = gap ? `gap-${gap}` : "";
   const classes = classNames(
     "mobius",
-    "mobius/SegmentGroup",
+    "mobius-segment-group",
     className,
-    { horizontal },
-    marginClass,
+    { "--is-horizontal": horizontal },
+    gapClass,
   );
 
   return (