@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/TextField/TextField.css

@@ -0,0 +1,166 @@
+:root,
+:host {
+  --text-input-max-width: none;
+}
+
+.mobius-text-field {
+  box-sizing: border-box;
+  width: 100%;
+
+  &:where(.--is-optional) > :where(.mobius-label)::after {
+    content: " (optional)";
+  }
+
+  .mobius-label {
+    display: block;
+  }
+}
+
+.mobius-text-field__inner-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.mobius-text-field__prefix-outside,
+.mobius-text-field__suffix-outside {
+  &.mobius-text {
+    margin-top: 0;
+    margin-bottom: 0;
+    align-self: center;
+  }
+}
+
+.mobius-text-field__prefix-outside {
+  &.mobius-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* When Button is prefixOutside, input */
+    /* container should flatten left borders */
+    + .mobius-text-field__input-wrapper {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &.mobius-text {
+    padding-right: var(--size-sm);
+  }
+}
+
+.mobius-text-field__suffix-outside {
+  &.mobius-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.mobius-text {
+    padding-left: var(--size-sm);
+  }
+}
+
+.mobius-text-field__prefix-inside,
+.mobius-text-field__suffix-inside {
+  display: flex;
+  color: var(--color-primary-light);
+
+  &.mobius-button {
+    min-height: 100%;
+    border-radius: 0;
+    align-self: stretch;
+  }
+
+  &.mobius-text {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.mobius-text-field__prefix-inside {
+  padding-left: var(--size-sm);
+}
+
+.mobius-text-field__suffix-inside {
+  padding-right: var(--size-sm);
+}
+
+.mobius-text-field__input-wrapper {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  border-radius: var(--radius-1);
+  color: var(--color-text-medium);
+  overflow: hidden; /* Prevents border-radius from clipping children */
+  background-color: var(--color-background-input);
+
+  &:not(.--is-hidden) {
+    border: var(--border-default);
+  }
+
+  /* If component has Button as suffixOutside */
+  &:has(+ .mobius-button) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* Focused */
+  &:focus-within {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+    box-shadow: var(--box-shadow-default);
+
+    .mobius-text-field__prefix-inside,
+    .mobius-text-field__suffix-inside {
+      color: var(--color-primary);
+    }
+  }
+
+  /* Hovered */
+  &:hover:not(.--is-disabled):not(&.--is-invalid) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+
+    .mobius-text-field__prefix-inside,
+    .mobius-text-field__suffix-inside {
+      color: var(--color-primary);
+    }
+  }
+
+  /* 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);
+  }
+}
+
+.mobius-text-field__input {
+  flex: 1 1 0;
+  padding: var(--input-field-padding);
+  border: none;
+  background-color: transparent;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  color: currentColor;
+  outline: 0;
+  margin: 0;
+  max-width: var(--text-input-max-width);
+
+  &::placeholder {
+    color: var(--color-text-medium);
+  }
+
+  &.--is-disabled {
+    cursor: not-allowed;
+  }
+}

package/src/components/TextField/TextField.mdx

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

package/src/components/TextField/TextField.test.tsx

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import { TextField } from ".";
 
-const WRAPPER_CLASS_NAME = "mobius/TextField";
-const INPUT_CLASS_NAME = "mobius/TextInput";
-
-const INNER_CONTAINER_SELECTOR = ".mobius\\/TextFieldInnerContainer";
-const INPUT_WRAPPER_SELECTOR = ".mobius\\/TextFieldInputWrapper";
-const CHILDREN_CONTAINER_CLASS_NAME = "mobius/TextFieldChildren";
-const PREFIX_OUTSIDE_CLASS_NAME = "mobius/TextFieldPrefixOutside";
-const PREFIX_INSIDE_CLASS_NAME = "mobius/TextFieldPrefixInside";
-const SUFFIX_INSIDE_CLASS_NAME = "mobius/TextFieldSuffixInside";
-const SUFFIX_OUTSIDE_CLASS_NAME = "mobius/TextFieldSuffixOutside";
+const WRAPPER_CLASS_NAME = "mobius-text-field";
+const INPUT_CLASS_NAME = "mobius-text-field__input";
+
+const INNER_CONTAINER_SELECTOR = ".mobius-text-field__inner-container";
+const INPUT_WRAPPER_SELECTOR = ".mobius-text-field__input-wrapper";
+const CHILDREN_CONTAINER_CLASS_NAME = "mobius-text-field__children";
+const PREFIX_OUTSIDE_CLASS_NAME = "mobius-text-field__prefix-outside";
+const PREFIX_INSIDE_CLASS_NAME = "mobius-text-field__prefix-inside";
+const SUFFIX_INSIDE_CLASS_NAME = "mobius-text-field__suffix-inside";
+const SUFFIX_OUTSIDE_CLASS_NAME = "mobius-text-field__suffix-outside";
 
 describe("Test for TextField", () => {
   it("should render without errors", () => {

package/src/components/TextField/TextField.tsx

@@ -19,6 +19,7 @@ import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 import { adornmentWithClassName } from "./adornmentWithClassName";
+import { Stack } from "../Stack";
 
 export type TextFieldElementType = HTMLInputElement;
 export interface TextFieldProps
@@ -104,37 +105,37 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
 
     const containerClasses = classNames(
       "mobius",
-      "mobius/TextField",
+      "mobius-text-field",
       sharedClasses,
     );
 
     const inputClasses = classNames(
       "mobius",
-      "mobius/TextInput",
+      "mobius-text-field__input",
       sharedClasses,
     );
 
     const inputWrapperClasses = classNames(
-      "mobius/TextFieldInputWrapper",
+      "mobius-text-field__input-wrapper",
       sharedClasses,
     );
 
     return (
-      <div className={containerClasses}>
+      <Stack gap="xs" className={containerClasses}>
         {label && !hidden && (
           <Label {...labelProps} className={labelClasses}>
             {label}
           </Label>
         )}
-        <div className="mobius/TextFieldInnerContainer">
+        <div className="mobius-text-field__inner-container">
           {adornmentWithClassName(
             prefixOutside,
-            "mobius/TextFieldPrefixOutside",
+            "mobius-text-field__prefix-outside",
           )}
           <div className={inputWrapperClasses}>
             {adornmentWithClassName(
               prefixInside,
-              "mobius/TextFieldPrefixInside",
+              "mobius-text-field__prefix-inside",
             )}
             <input
               {...otherProps}
@@ -145,18 +146,20 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
             />
             {adornmentWithClassName(
               suffixInside,
-              "mobius/TextFieldSuffixInside",
+              "mobius-text-field__suffix-inside",
             )}
           </div>
           {adornmentWithClassName(
             suffixOutside,
-            "mobius/TextFieldSuffixOutside",
+            "mobius-text-field__suffix-outside",
           )}
         </div>
-        {children && <div className="mobius/TextFieldChildren">{children}</div>}
+        {children && (
+          <div className="mobius-text-field__children">{children}</div>
+        )}
 
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </div>
+      </Stack>
     );
   });
 

package/src/components/Title/Title.css

@@ -0,0 +1,41 @@
+:root,
+:host {
+  --title-decorator-width: 8px;
+}
+
+.mobius-title {
+  display: flex;
+  padding-left: var(--size-sm);
+}
+
+.mobius-title__header {
+  margin: 0;
+  font-size: var(--font-size-small-title);
+  color: var(--color-text);
+  font-weight: var(--font-weight-bold);
+}
+
+.mobius-title__description {
+  margin: 0;
+  font-size: var(--font-size-regular);
+  color: var(--color-text-medium);
+  font-weight: var(--font-weight-normal);
+}
+
+.mobius-title__container {
+  gap: var(--size-xs);
+  line-height: var(--line-height-tight);
+  position: relative;
+  padding-left: calc(var(--size-sm) + var(--title-decorator-width));
+
+  &::before {
+    position: absolute;
+    content: "";
+    display: block;
+    width: var(--title-decorator-width);
+    height: 100%;
+    border-radius: var(--radius-1);
+    left: 0;
+    background-color: var(--color-primary);
+  }
+}

package/src/components/Title/Title.mdx

@@ -35,17 +35,13 @@ import { Title } from "@simplybusiness/mobius";
 The following HTML is rendered for a Title:
 
 ```html
-<element className="mobius/Title">
+<element className="mobius-title">
   <Flex>
-    <svg className="mobius/TitleIcon">{VerticalLine}</svg>
+    <svg className="mobius-title__icon">{VerticalLine}</svg>
     <Flex flexDirection="column">
-      <p className="mobius/Title">Title</p>
-      <div className="mobius/TitleDescription">Description</div>
+      <p className="mobius-title__header">Title</p>
+      <div className="mobius-title__description">Description</div>
     </Flex>
   </Flex>
 </element>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Title) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Title/Title.tsx

@@ -26,10 +26,10 @@ const Title: ForwardedRefComponent<TitleProps, TitleElementType> = forwardRef(
       ...otherProps
     } = props;
 
-    const classes = classNames("mobius", "mobius/Title", otherProps.className);
-    const headerClasses = classNames("mobius", "mobius/TitleHeader");
-    const contentClasses = classNames("mobius", "mobius/TitleDescription");
-    const containerClasses = classNames("mobius", "mobius/TitleContainer");
+    const classes = classNames("mobius", "mobius-title", otherProps.className);
+    const headerClasses = classNames("mobius", "mobius-title__header");
+    const contentClasses = classNames("mobius", "mobius-title__description");
+    const containerClasses = classNames("mobius", "mobius-title__container");
 
     return (
       <Element ref={ref} {...otherProps} className={classes}>

package/src/components/Trust/Trust.mdx

@@ -41,9 +41,7 @@ import { Trust } from "@simplybusiness/mobius";
 The following HTML is rendered for a Trust:
 
 ```html
-<div
-  class="mobius mobius/Trust mobius/TrustThemeDark mobius/TrustVariantMicroCombo"
->
+<div class="mobius-trust --is-dark --is-variant-micro-combo">
   <a
     href="https://www.trustpilot.com/review/simplybusiness.com"
     target="_blank"
@@ -53,7 +51,3 @@ The following HTML is rendered for a Trust:
   </a>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Trust) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Trust/Trust.test.tsx

@@ -13,7 +13,7 @@ describe("Trust", () => {
       );
 
       expect(container.firstChild).toHaveClass(
-        "mobius/TrustThemeLight mobius/TrustVariantHorizontal",
+        "mobius mobius-trust --is-light --is-variant-horizontal",
       );
     });
   });

package/src/components/Trust/Trust.tsx

@@ -19,15 +19,14 @@ export const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =
 
     const { link, ...defaultProps } = getDefaultProps(props);
     const { className: variantClassName, styles } = TRUSTPILOT_WIDGET[variant];
-    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);
 
     const classes = classNames(
       "mobius",
-      "mobius/Trust",
+      "mobius-trust",
       REQUIRED_TRUSTPILOT_CLASS_NAME,
       {
-        [`mobius/TrustTheme${themeClassName}`]: theme,
-        [`mobius/TrustVariant${variantClassName}`]: variant,
+        [`--is-${theme}`]: theme,
+        [variantClassName]: variant,
       },
       otherProps.className,
     );
@@ -62,7 +61,7 @@ export const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =
           href={link}
           target="_blank"
           rel="noopener noreferrer"
-          className="mobius/TrustLink"
+          className="mobius-trust__link"
         >
           Trustpilot
         </a>

package/src/components/Trust/constants.ts

@@ -12,14 +12,14 @@ export const TRUSTPILOT_WIDGET = {
   // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
   "micro-combo": {
     templateId: "5419b6ffb0d04a076446a9af",
-    className: "MicroCombo",
+    className: "--is-variant-micro-combo",
     styles: {
       height: "25px",
     },
   },
   mini: {
     templateId: "53aa8807dec7e10d38f59f32",
-    className: "Mini",
+    className: "--is-variant-mini",
     styles: {
       width: "300px",
       height: "150px",
@@ -27,7 +27,7 @@ export const TRUSTPILOT_WIDGET = {
   },
   horizontal: {
     templateId: "5406e65db0d04a09e042d5fc",
-    className: "Horizontal",
+    className: "--is-variant-horizontal",
     styles: {
       height: "28px",
     },

package/src/components/VisuallyHidden/VisuallyHidden.mdx

@@ -34,7 +34,3 @@ function MyComponent() {
 ### Default
 
 <Canvas of={VisuallyHiddenStories.Default} />
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/VisuallyHidden) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/index.tsx

@@ -30,6 +30,7 @@ export * from "./Radio";
 export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
+export * from "./Stack";
 export * from "./SVG";
 export * from "./Table";
 export * from "./Text";