@simplybusiness/mobius 4.16.0 → 5.0.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 (

package/src/components/Select/Select.css

@@ -0,0 +1,85 @@
+:root,
+:host {
+  --select-wrapper-max-width: none;
+}
+
+.mobius-select__outer {
+  box-sizing: border-box;
+  width: 100%;
+
+  > :where(.mobius-label.--is-optional)::after {
+    content: " (optional)";
+  }
+}
+
+.mobius-select__wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  max-width: var(--select-wrapper-max-width);
+}
+
+.mobius-select {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--input-field-padding);
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  border: var(--border-default);
+  border-radius: var(--radius-1);
+  background-color: var(--color-background-input);
+  color: var(--color-text-medium);
+  outline: 0;
+  appearance: none;
+
+  /* Disabled */
+  &.--is-disabled {
+    background-color: var(--color-background-light);
+    border-color: var(--color-border-medium);
+    color: var(--color-text-light);
+    cursor: not-allowed;
+  }
+
+  /* Hovered */
+  &:not(.--is-invalid):not(.--is-disabled):hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+  }
+
+  /* Focused */
+  &:focus-visible {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+    box-shadow: var(--box-shadow-default);
+  }
+
+  /* Invalid */
+  &.--is-invalid {
+    border-color: var(--color-error);
+    background-color: var(--color-error-background);
+    color: var(--color-error);
+  }
+}
+
+.mobius-select__icon {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 2px;
+  height: 100%;
+  padding: var(--size-md);
+  border-radius: var(--radius-1);
+  pointer-events: none;
+  color: var(--color-text-medium);
+
+  &.--is-disabled {
+    color: var(--color-text-light);
+  }
+
+  &.--is-invalid {
+    color: var(--color-error);
+  }
+}

package/src/components/Select/Select.mdx

@@ -171,13 +171,13 @@ The following HTML is rendered for a Select:
 
 ```html
 <div>
-  <label class="mobius/Label" for="{select-id}" id="{label-id}"> Color </label>
-  <div class="mobius/SelectWrapper">
-    <select class="mobius/Select" id="{select-id}" aria-labelledby="{label-id}">
+  <label class="mobius-label" for="{select-id}" id="{label-id}"> Color </label>
+  <div class="mobius-select__wrapper">
+    <select class="mobius-select" id="{select-id}" aria-labelledby="{label-id}">
       <option>Red</option>
       <option>Blue</option>
     </select>
-    <span class="mobius/SelectIcon"></span>
+    <span class="mobius-select__icon"></span>
   </div>
 </div>
 ```
@@ -189,7 +189,3 @@ The span allows for an image overlay to replace the standard select UX in browse
 - \--is-valid
 - \--is-invalid
 - \--is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Select) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Select/Select.test.tsx

@@ -4,8 +4,8 @@ import { ChangeEvent } from "react";
 import { Select } from ".";
 import { Option } from "..";
 
-const CLASS_NAME = "mobius/Select";
-const LABEL_CLASS_NAME = "mobius/Label";
+const CLASS_NAME = "mobius-select";
+const LABEL_CLASS_NAME = "mobius-label";
 
 describe("Select", () => {
   it("should render without error", () => {

package/src/components/Select/Select.tsx

@@ -15,11 +15,11 @@ import { DOMProps, Validation } from "../../types";
 import { ForwardedRefComponent } from "../../types/components";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
-import { Flex } from "../Flex";
 import { Label } from "../Label";
 import { OptionProps } from "../Option";
 import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
+import { Stack } from "../Stack";
 
 export type SelectElementType = HTMLSelectElement;
 export interface SelectProps
@@ -72,21 +72,21 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
     const sharedClasses = classNames(validationClasses, stateClasses);
 
     const wrapperClasses = classNames(
-      "mobius/SelectWrapper",
+      "mobius-select__wrapper",
       sharedClasses,
       otherProps.className,
     );
     const selectClasses = classNames(
-      "mobius/Select",
+      "mobius-select",
       sharedClasses,
       otherProps.className,
     );
     const labelClasses = classNames(
-      "mobius/Label",
+      "mobius-label",
       sharedClasses,
       otherProps.className,
     );
-    const iconClasses = classNames("mobius/SelectIcon", sharedClasses);
+    const iconClasses = classNames("mobius-select__icon", sharedClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
@@ -101,7 +101,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
     };
 
     return (
-      <Flex flexDirection="column" className="mobius mobius/SelectOuter">
+      <Stack className="mobius mobius-select__outer" gap="xs">
         {label && (
           <Label {...labelProps} className={labelClasses}>
             {label}
@@ -127,7 +127,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
         {errorMessage && (
           <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
         )}
-      </Flex>
+      </Stack>
     );
   });
 

package/src/components/Slider/Slider.css

@@ -0,0 +1,138 @@
+:root,
+:host {
+  --slider-primary-track-background: #4632d820; /* --color-primary, alpha channel 20% */
+  --slider-primary-thumb-background: var(--color-primary);
+  --slider-secondary-track-background: #e943c920; /* --color-secondary, alpha channel 20% */
+  --slider-secondary-thumb-background: var(--color-accent);
+  --thumb-size: 20px;
+}
+
+.mobius-slider {
+  position: relative;
+  display: grid;
+  gap: var(--size-xxs);
+
+  &.--is-primary {
+    .mobius-slider__track {
+      background-color: var(--slider-primary-track-background);
+    }
+
+    .mobius-slider__track::-webkit-slider-thumb {
+      background-color: var(--slider-primary-thumb-background);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--slider-primary-thumb-background);
+    }
+
+    .mobius-slider__track::-moz-range-thumb {
+      background-color: var(--slider-primary-thumb-background);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--slider-primary-thumb-background);
+    }
+  }
+
+  &.--is-secondary {
+    .mobius-slider__track {
+      background-color: var(--slider-secondary-track-background);
+    }
+
+    .mobius-slider__track::-webkit-slider-thumb {
+      background-color: var(--slider-secondary-thumb-background);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--slider-secondary-thumb-background);
+    }
+
+    .mobius-slider__track::-moz-range-thumb {
+      background-color: var(--slider-secondary-thumb-background);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--slider-secondary-thumb-background);
+    }
+  }
+
+  &.--is-disabled {
+    color: var(--color-text-light);
+    cursor: not-allowed;
+
+    .mobius-slider__track {
+      background-color: var(--color-background-light);
+    }
+
+    .mobius-slider__track::-webkit-slider-thumb {
+      background-color: var(--color-background-light);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--color-border-medium);
+      cursor: not-allowed;
+    }
+
+    .mobius-slider__track::-moz-range-thumb {
+      background-color: var(--color-background-light);
+      box-shadow:
+        0 0 0 var(--size-xxs) var(--color-background),
+        0 0 0 5px var(--color-border-medium);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.mobius-slider__track-wrapper {
+  position: relative;
+  width: 100%;
+  height: 30px;
+}
+
+.mobius-slider__track {
+  position: absolute;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: var(--size-xs);
+  top: calc(var(--size-xs) + 2px);
+  border-radius: 999px;
+  touch-action: none; /* TODO: check */
+  outline: none;
+}
+
+.mobius-slider__label-wrapper {
+  display: flex;
+  align-self: stretch;
+}
+
+/* Thumb */
+.mobius-slider__track::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: var(--thumb-border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.mobius-slider__track::-moz-range-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: var(--thumb-border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Thumb focus blur */
+.mobius-slider__track:focus-visible::-webkit-slider-thumb {
+  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
+}
+
+.mobius-slider__track:focus-visible::-moz-range-thumb {
+  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
+}
+
+.mobius-slider__labels {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}

package/src/components/Slider/Slider.mdx

@@ -53,18 +53,16 @@ import { Slider } from "@simplybusiness/mobius";
 The following HTML is rendered for a Slider:
 
 ```html
-<div class="mobius mobius/Slider --is-primary">
-  <div class="mobius/SliderLabelWrapper">
-    <label class="mobius mobius/Label" for=":r1:" id=":r2:">
-      My Slider Label
-    </label>
+<div class="mobius-slider --is-primary">
+  <div class="mobius-slider__label-wrapper">
+    <label class="mobius-label" for=":r1:" id=":r2:"> My Slider Label </label>
     <output>5</output>
   </div>
 
-  <div class="mobius mobius/SliderTrackWrapper">
+  <div class="mobius-slider__track-wrapper">
     <input
       id=":r1:"
-      class="mobius/SliderTrack"
+      class="mobius-slider__track"
       type="range"
       value="5"
       min="1"
@@ -74,13 +72,9 @@ The following HTML is rendered for a Slider:
     />
   </div>
 
-  <div class="mobius/SliderLabels">
-    <div class="mobius/SliderMinLabel">Min</div>
-    <div class="mobius/SliderMaxLabel">Max</div>
+  <div class="mobius-slider__labels">
+    <div class="mobius-slider__min-label">Min</div>
+    <div class="mobius-slider__max-label">Max</div>
   </div>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Slider) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Slider/Slider.test.tsx

@@ -2,6 +2,9 @@ import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Slider } from "./Slider";
 
+const BASE_CLASS = "mobius";
+const SLIDER_CLASS = "mobius-slider";
+
 describe("Slider", () => {
   it("should render without errors", () => {
     const { container } = render(
@@ -37,7 +40,7 @@ describe("Slider", () => {
       );
     });
 
-    const classNames = ["mobius", "mobius/Slider", "test"];
+    const classNames = [BASE_CLASS, SLIDER_CLASS, "test"];
     it.each(classNames)("should have classname %s", className => {
       expect(result.container.firstChild).toHaveClass(className);
     });

package/src/components/Slider/Slider.tsx

@@ -57,7 +57,7 @@ export const Slider = (props: SliderProps) => {
   });
   const formattedValue = numberFormatter(currentValue, formatOptions);
 
-  const classes = classNames("mobius", "mobius/Slider", className, {
+  const classes = classNames("mobius", "mobius-slider", className, {
     "--is-disabled": isDisabled,
     "--is-primary": variant === "primary",
     "--is-secondary": variant === "secondary",
@@ -85,7 +85,7 @@ export const Slider = (props: SliderProps) => {
 
   return (
     <div className={classes}>
-      <div className="mobius/SliderLabelWrapper">
+      <div className="mobius-slider__label-wrapper">
         {label && <Label {...labelProps}>{label}</Label>}
         {label && (
           <output style={{ flex: "1 0 auto", textAlign: "end" }}>
@@ -95,9 +95,9 @@ export const Slider = (props: SliderProps) => {
       </div>
 
       {/* The track element holds the visible track line and the thumb. */}
-      <div ref={trackRef} className="mobius mobius/SliderTrackWrapper">
+      <div ref={trackRef} className="mobius-slider__track-wrapper">
         <input
-          className="mobius/SliderTrack"
+          className="mobius-slider__track"
           type="range"
           min={minValue}
           max={maxValue}
@@ -114,11 +114,11 @@ export const Slider = (props: SliderProps) => {
         />
       </div>
 
-      <div className="mobius/SliderLabels">
-        <div className="mobius/SliderMinLabel" data-testid="min-label">
+      <div className="mobius-slider__labels">
+        <div className="mobius-slider__min-label" data-testid="min-label">
           {minLabel}
         </div>
-        <div className="mobius/SliderMaxLabel" data-testid="max-label">
+        <div className="mobius-slider__max-label" data-testid="max-label">
           {maxLabel}
         </div>
       </div>

package/src/components/Stack/Stack.css

@@ -0,0 +1,30 @@
+.mobius-stack {
+  display: grid;
+  flex: 1 1 auto;
+  align-self: stretch;
+  grid-auto-flow: row;
+
+  &.--gap-xxs {
+    gap: var(--size-xxs);
+  }
+
+  &.--gap-xs {
+    gap: var(--size-xs);
+  }
+
+  &.--gap-sm {
+    gap: var(--size-sm);
+  }
+
+  &.--gap-md {
+    gap: var(--size-md);
+  }
+
+  &.--gap-lg {
+    gap: var(--size-lg);
+  }
+
+  &.--gap-xl {
+    gap: var(--size-xl);
+  }
+}

package/src/components/Stack/Stack.mdx

@@ -0,0 +1,41 @@
+import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs";
+import * as StackStories from "./Stack.stories";
+import { Stack } from "./Stack";
+
+<Meta of={StackStories} />
+
+# Stack
+
+The `Stack` component is used for creating a stack of components, with an optional gap between each component. It is useful for creating vertical layouts of components.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Stack } from "@simplybusiness/mobius";
+```
+
+### Default
+
+<Canvas of={StackStories.Default} />
+
+### Nested
+
+<Canvas of={StackStories.Nested} />
+
+## Props
+
+<ArgTypes of={Stack} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Stack:
+
+```html
+<div class="mobius mobius-stack">{children}</div>
+```