@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/ErrorMessage/ErrorMessage.test.tsx

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

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,5 +1,7 @@
 import classNames from "classnames/dedupe";
+import { error } from "@simplybusiness/icons";
 import { Text } from "../Text";
+import { Icon } from "../Icon";
 
 export interface ErrorMessageProps {
   errorMessage?: string;
@@ -12,14 +14,14 @@ export const ErrorMessage = ({
   errorMessage,
   className,
 }: ErrorMessageProps) => {
-  const classes = classNames("mobius", "mobius/ErrorMessage", className);
+  const classes = classNames("mobius", "mobius-error-message", className);
 
   if (!errorMessage) return null;
 
   return (
     <div id={id} className={classes} data-testid="ErrorMessage">
-      <span className="mobius/ErrorIcon" />
-      <Text elementType="span" className="mobius/ErrorText">
+      <Icon icon={error} className="mobius-error-message__icon" />
+      <Text elementType="span" className="mobius-error-message__text">
         {errorMessage}
       </Text>
     </div>

package/src/components/Fieldset/Fieldset.css

@@ -0,0 +1,15 @@
+.mobius-fieldset {
+  box-sizing: border-box;
+  flex-direction: column;
+
+  .mobius-text-field {
+    margin-bottom: var(--size-sm);
+  }
+}
+
+.mobius-fieldset__legend {
+  box-sizing: border-box;
+  margin-bottom: var(--size-sm);
+  padding: 0;
+  font-weight: var(--font-weight-bold);
+}

package/src/components/Fieldset/Fieldset.mdx

@@ -43,12 +43,8 @@ A `legend` can provided to help screen readers spell out the fieldset name when
 The following HTML is rendered for a Fieldset:
 
 ```html
-<div class="mobius/Fieldset" role="group" aria-labelledby=":r0:">
-  <legend id=":r0:" class="mobius/Legend">Legend text</legend>
+<div class="mobius-fieldset" role="group" aria-labelledby=":r0:">
+  <legend id=":r0:" class="mobius-fieldset__legend">Legend text</legend>
   (collection of <input />...)
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Fieldset) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Fieldset/Fieldset.tsx

@@ -75,10 +75,10 @@ const Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType> =
 
     const { legendProps, containerProps } = useFieldset(props);
 
-    const classes = classNames("mobius", "mobius/Fieldset", props.className);
+    const classes = classNames("mobius", "mobius-fieldset", props.className);
 
     // Set class on legend
-    legendProps.className = "mobius/Legend";
+    legendProps.className = "mobius-fieldset__legend";
 
     return (
       <Flex {...containerProps} {...otherProps} className={classes}>

package/src/components/Flex/Flex.css

@@ -0,0 +1,4 @@
+.mobius-flex {
+  box-sizing: border-box;
+  display: flex;
+}

package/src/components/Flex/Flex.mdx

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

package/src/components/Flex/Flex.test.tsx

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

package/src/components/Flex/Flex.tsx

@@ -12,7 +12,7 @@ const Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(
       className,
       ...otherProps
     } = props;
-    const classes = classNames("mobius", "mobius/Flex", className);
+    const classes = classNames("mobius", "mobius-flex", className);
 
     const [styleProps, restProps] = splitProps(otherProps);
     const flexStyles = buildFlexStyles(styleProps);

package/src/components/Grid/Grid.mdx

@@ -394,7 +394,3 @@ const AlignSquare = ({ children, ...props }) => (
 ## Props
 
 <ArgTypes of={Grid} />
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Grid) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Grid/Grid.tsx

@@ -64,7 +64,7 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       style,
       ...rest
     } = props;
-    const classes = classNames("mobius", "mobius/Grid", className);
+    const classes = classNames("mobius", "mobius-grid", className);
 
     const styles: CSSProperties = filterUndefinedProps({
       boxSizing: "border-box",

package/src/components/Grid/Item.tsx

@@ -77,7 +77,7 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
       xxl,
     });
     const [responsiveSpan, setResponsiveSpan] = useState();
-    const classes = classNames("mobius/GridItem", className);
+    const classes = classNames("mobius-grid__item", className);
 
     useEffect(() => {
       // @ts-expect-error

package/src/components/Icon/Icon.css

@@ -0,0 +1,44 @@
+.mobius-icon {
+  height: 1em;
+  vertical-align: -0.2em;
+  transform-origin: center;
+
+  /* 16px */
+  &.--size-xs {
+    font-size: 1em;
+  }
+
+  /* 20px */
+  &.--size-sm {
+    font-size: 1.25em;
+    line-height: 0.05em;
+    vertical-align: -0.075em;
+  }
+
+  /* 24px */
+  &.--size-md {
+    font-size: 1.5em;
+    line-height: 0.0416666682em;
+    vertical-align: -0.125em;
+  }
+
+  /* 32px */
+  &.--size-lg {
+    font-size: 2em;
+    line-height: 0.03125em;
+    vertical-align: -0.1875em;
+  }
+}
+
+.mobius-icon.--is-spinning {
+  animation: MobiusIconSpinningKeyframes 2s linear infinite;
+}
+
+@keyframes MobiusIconSpinningKeyframes {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

package/src/components/Icon/Icon.mdx

@@ -67,11 +67,7 @@ All icons are marked with aria-hidden and should not be used without some form o
 The following HTML is rendered for an Icon:
 
 ```html
-<svg class="mobius/Icon" focusable="false" role="img">
+<svg class="mobius-icon" focusable="false" role="img">
   <g ... />
 </svg>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Icon) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Icon/Icon.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { chevronLeft } from "@simplybusiness/icons";
 import { Icon } from ".";
 
-const CLASS_NAME = "mobius/Icon";
+const CLASS_NAME = "mobius-icon";
 const XS_SIZE_CLASS_NAME = "--size-xs";
 
 describe("Test for Icon", () => {

package/src/components/Icon/Icon.tsx

@@ -23,7 +23,7 @@ export function Icon({
 
   const classes = classNames(
     "mobius",
-    "mobius/Icon",
+    "mobius-icon",
     `svg-inline--${ICON_PREFIX}`,
     `--size-${size}`,
     className,

package/src/components/Image/Image.mdx

@@ -80,9 +80,5 @@ Image must have an `alt` prop specified. If the image is not adding any valuable
 The following HTML is rendered for an Image:
 
 ```html
-<img class="mobius/Image" src="/path/to/image" alt="" />
+<img class="mobius-image" src="/path/to/image" alt="" />
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Image) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Image/Image.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { Image } from ".";
 
-const CLASS_NAME = "mobius/Image";
+const CLASS_NAME = "mobius-image";
 
 const defaultProps = {
   src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",

package/src/components/Image/Image.tsx

@@ -27,7 +27,7 @@ const Image: ForwardedRefComponent<ImageProps, HTMLImageElement> = forwardRef(
     { alt, elementType: Component = "img", ...otherProps }: ImageProps,
     ref: ImageRef,
   ) => {
-    const classes = classNames("mobius", "mobius/Image", otherProps.className);
+    const classes = classNames("mobius", "mobius-image", otherProps.className);
 
     return (
       <Component alt={alt} ref={ref} {...otherProps} className={classes} />

package/src/components/Label/Label.css

@@ -0,0 +1,21 @@
+:root,
+:host {
+  --label-font-weight: var(--font-weight-bold);
+  --label-font-variation-settings: normal;
+}
+
+.mobius-label {
+  box-sizing: border-box;
+  font-size: var(--font-size-regular);
+  line-height: var(--line-height-normal);
+  font-family: var(--font-family);
+  font-weight: var(--label-font-weight);
+  font-variation-settings: var(--label-font-variation-settings);
+  color: var(--color-text);
+
+  &:not(.--is-disabled) {
+    &.--is-invalid {
+      color: var(--color-error);
+    }
+  }
+}

package/src/components/Label/Label.mdx

@@ -44,9 +44,5 @@ Label supports all React label props. Because `for` is a reserved JavaScript key
 The following HTML is rendered for a Label:
 
 ```html
-<label class="mobius/Label" htmlFor="{input-id}">{Label text}</label>
+<label class="mobius-label" htmlFor="{input-id}">{Label text}</label>
 ```
-
----
-
-[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/Label/Label.test.tsx

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

package/src/components/Label/Label.tsx

@@ -24,7 +24,7 @@ const Label: ForwardedRefComponent<LabelProps, LabelElementType> = forwardRef(
   (props: LabelProps, ref: LabelRef) => {
     const { elementType: Element = "label", children, ...otherProps } = props;
 
-    const classes = classNames("mobius", "mobius/Label", props.className);
+    const classes = classNames("mobius", "mobius-label", props.className);
     otherProps.className = classes;
 
     return (

package/src/components/Link/Link.css

@@ -0,0 +1,26 @@
+.mobius-link {
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  line-height: var(--line-height-normal);
+  color: var(--color-secondary);
+  outline: none;
+  border-radius: var(--radius-1);
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+    cursor: pointer;
+    color: var(--color-secondary-hover);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--box-shadow-default);
+    padding: 3px 0;
+  }
+
+  &.--is-disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+}

package/src/components/Link/Link.mdx

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

package/src/components/Link/Link.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Link } from ".";
 
-const CLASS_NAME = "mobius/Link";
+const CLASS_NAME = "mobius-link";
 
 describe("Test for Link", () => {
   it("should render without errors", () => {

package/src/components/Link/Link.tsx

@@ -45,7 +45,7 @@ const Link: ForwardedRefComponent<LinkProps, LinkElementType> = forwardRef(
     };
 
     const styles = { ...style, ...(isDisabled && disabledStyles) };
-    const classes = classNames("mobius", "mobius/Link", className, {
+    const classes = classNames("mobius", "mobius-link", className, {
       "--is-disabled": isDisabled,
     });
 

package/src/components/LinkButton/LinkButton.mdx

@@ -34,9 +34,5 @@ import { LinkButton } from "@simplybusiness/mobius";
 The following HTML is rendered for a LinkButton:
 
 ```html
-<a class="mobius/LinkButton mobius/Button" href="path/to/page">{link text}</a>
+<a class="mobius-link-button" href="path/to/page">{link text}</a>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LinkButton) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/LinkButton/LinkButton.tsx

@@ -26,7 +26,7 @@ export function LinkButton({
     throw new Error("LinkButton requires a href prop");
   }
 
-  const classes = classNames("mobius", "mobius/LinkButton", className);
+  const classes = classNames("mobius", "mobius-link-button", className);
 
   return (
     // @ts-expect-error Button only allows elementType of string, not React component

package/src/components/List/List.css

@@ -0,0 +1,60 @@
+.mobius-list {
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  width: 100%;
+  text-align: left;
+  margin: 0;
+
+  &.--has-icon {
+    padding-left: 0;
+  }
+
+  &.--is-disc {
+    list-style-type: disc;
+  }
+
+  &.--is-circle {
+    list-style-type: circle;
+  }
+
+  &.--is-square {
+    list-style-type: square;
+  }
+
+  &.--is-decimal {
+    list-style-type: decimal;
+  }
+
+  &.--is-georgian {
+    list-style-type: georgian;
+  }
+
+  &.--is-trad-chinese-informal {
+    list-style-type: trad-chinese-informal;
+  }
+
+  &.--is-kannada {
+    list-style-type: kannada;
+  }
+}
+
+.mobius-list__item {
+  &.--has-icon {
+    list-style-type: none;
+    margin-bottom: var(--size-xs);
+
+    p {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.mobius-list__item-content {
+  display: flex;
+}
+
+.mobius-list__icon {
+  flex-shrink: 0;
+  margin-right: var(--size-xs);
+}

package/src/components/List/List.mdx

@@ -127,8 +127,8 @@ import { tick, cross } from "@simplybusiness/icons";
 The following HTML is rendered for an unordered List:
 
 ```html
-<ul class="mobius/List">
-  <li class="mobius/ListItem">...</li>
+<ul class="mobius-list">
+  <li class="mobius-list__item">...</li>
 
   (more ListItems...)
 </ul>
@@ -137,13 +137,9 @@ The following HTML is rendered for an unordered List:
 And an ordered List:
 
 ```html
-<ol class="mobius/List">
-  <li class="mobius/ListItem">...</li>
+<ol class="mobius-list">
+  <li class="mobius-list__item">...</li>
 
   (more ListItems...)
 </ol>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/List) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/List/List.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from "@testing-library/react";
 import { ListStyleType, List, ListItem } from ".";
 
-const LIST_CLASS_NAME = "mobius/List";
-const ITEM_CLASS_NAME = "mobius/ListItem";
+const LIST_CLASS_NAME = "mobius-list";
+const ITEM_CLASS_NAME = "mobius-list__item";
 const ICON_CLASS_NAME = "--has-icon";
-const ITEM_CONTENT_CLASSNAME = "mobius/ListItemContent";
-const LIST_ICON_CLASS_NAME = "mobius/ListIcon";
+const ITEM_CONTENT_CLASSNAME = "mobius-list__item-content";
+const LIST_ICON_CLASS_NAME = "mobius-list__icon";
 
 describe("List", () => {
   it("should render without errors", () => {

package/src/components/List/List.tsx

@@ -49,7 +49,7 @@ const List: ForwardedRefComponent<ListProps, ListElementType> = forwardRef(
 
     const classes = classNames(
       "mobius",
-      "mobius/List",
+      "mobius-list",
       {
         "--has-icon": icon,
         [`--is-${liststyletype}`]: liststyletype,

package/src/components/List/ListItem.tsx

@@ -22,14 +22,14 @@ const ListItem: ForwardedRefComponent<ListItemProps, ListItemElementType> =
     const iconContent = icon || parentIcon;
     const classes = classNames(
       "mobius",
-      "mobius/ListItem",
+      "mobius-list__item",
       {
         "--has-icon": iconContent,
       },
       props.className,
     );
-    const contentClasses = classNames("mobius", "mobius/ListItemContent");
-    const iconClasses = classNames("mobius", "mobius/ListIcon");
+    const contentClasses = classNames("mobius", "mobius-list__item-content");
+    const iconClasses = classNames("mobius", "mobius-list__icon");
 
     if (iconContent) {
       return (

package/src/components/LoadingIndicator/LoadingIndicator.css

@@ -0,0 +1,3 @@
+.mobius-loading-indicator {
+  color: var(--color-primary);
+}

package/src/components/LoadingIndicator/LoadingIndicator.mdx

@@ -47,11 +47,7 @@ import { LoadingIndicator } from "@simplybusiness/mobius";
 The following HTML is rendered for an Icon:
 
 ```html
-<svg class="mobius/Icon mobius/LoadingIndicator" focusable="false" role="img">
+<svg class="mobius-loading-indicator" focusable="false" role="img">
   <g ... />
 </svg>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LoadingIndicator) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/LoadingIndicator/LoadingIndicator.test.tsx

@@ -2,7 +2,7 @@
 import { render, screen } from "@testing-library/react";
 import { LoadingIndicator } from ".";
 
-const CLASS_NAME = "mobius/LoadingIndicator";
+const CLASS_NAME = "mobius-loading-indicator";
 
 describe("Test for LoadingIndicator", () => {
   it("should render the LoadingIndicator component", () => {

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -18,7 +18,7 @@ const LoadingIndicator: ForwardedRefComponent<
 
   const classes = classNames(
     "mobius",
-    "mobius/LoadingIndicator",
+    "mobius-loading-indicator",
     otherProps.className,
   );
 

package/src/components/Logo/Logo.mdx

@@ -43,9 +43,5 @@ Logo is often combined with an `<a>` tag. To make the component accessible, add
 The following HTML is rendered for a Logo:
 
 ```html
-<svg width="144" className="mobius mobius/Logo" viewBox="0 0 144 37">...</svg>
+<svg width="144" className="mobius-logo" viewBox="0 0 144 37">...</svg>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Logo) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Logo/Logo.test.tsx

@@ -2,7 +2,7 @@ import { render } from "@testing-library/react";
 import { Logo } from ".";
 
 const MOBIUS_CLASS_NAME = "mobius";
-const LOGO_CLASS_NAME = "mobius/Logo";
+const LOGO_CLASS_NAME = "mobius-logo";
 
 describe("Logo", () => {
   it("should render without errors", () => {

package/src/components/Logo/Logo.tsx

@@ -20,7 +20,7 @@ export const Logo: ForwardedRefComponent<LogoProps, LogoElementType> =
   forwardRef((props: LogoProps, ref: LogoRef) => {
     const { className, width, height, ...otherProps } = props;
 
-    const classes = classNames("mobius", "mobius/Logo", className);
+    const classes = classNames("mobius", "mobius-logo", className);
 
     return (
       <svg

package/src/components/Modal/Content.tsx

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

package/src/components/Modal/Header.tsx

@@ -19,13 +19,13 @@ const Header = forwardRef(
     const { onClose, closeLabel } = useModal();
 
     return (
-      <header ref={ref} {...otherProps} className="mobius/ModalHeader">
+      <header ref={ref} {...otherProps} className="mobius-modal__header">
         {children}
         <Button
           aria-label="Close"
           variant="basic"
           onPress={onClose}
-          className="mobius/ModalClose"
+          className="mobius-modal__close"
         >
           <Icon icon={cross} /> {closeLabel}
         </Button>