@simplybusiness/mobius 9.3.4 → 10.1.0

package/dist/types/components/TextOrHTML/TextOrHTML.d.ts

@@ -10,9 +10,11 @@ export interface TextOrHTMLProps extends Omit<TextProps, "children">, RefAttribu
     htmlElementType?: HTMLElementType;
     /** If true, wraps the dangerous HTML element inside a Text component */
     textWrapper?: boolean;
+    /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */
+    autoDetect?: boolean;
 }
 declare const TextOrHTML: {
-    ({ ref, text, htmlClassName, htmlElementType, textWrapper, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { TextOrHTML };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "9.3.4",
+  "version": "10.1.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -67,7 +67,7 @@
     "@eslint/eslintrc": "^3.3.4",
     "@eslint/js": "^9.39.3",
     "@react-types/progress": "^3.5.18",
-    "@simplybusiness/build-scripts": "^2.0.3",
+    "@simplybusiness/build-scripts": "^3.0.0",
     "@simplybusiness/eslint-config": "^2.0.4",
     "@simplybusiness/eslint-plugin": "^1.3.0",
     "@testing-library/dom": "^10.4.1",

package/src/components/Accordion/Accordion.css

@@ -1,89 +1,97 @@
-.mobius-accordion {
-  --transition-duration: 0ms;
+@layer atoms {
+  .mobius-accordion {
+    --transition-duration: 0ms;
 
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  outline: none;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    outline: none;
 
-  &.--should-animate {
-    --transition-duration: 500ms;
+    &.--should-animate {
+      --transition-duration: 500ms;
+    }
   }
-}
 
-.mobius-accordion__content-container {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--transition-duration);
+  .mobius-accordion__content-container {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--transition-duration);
 
-  &.--is-open {
-    grid-template-rows: 1fr;
+    &.--is-open {
+      grid-template-rows: 1fr;
+    }
   }
-}
 
-.mobius-accordion__content {
-  overflow: hidden;
-  opacity: 0;
-  transition:
-    opacity var(--transition-duration),
-    margin var(--transition-duration);
+  .mobius-accordion__content {
+    overflow: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--transition-duration),
+      margin var(--transition-duration);
 
-  &.--is-open {
-    overflow: visible;
-    opacity: 1;
-    margin-top: var(--size-xs);
+    &.--is-open {
+      overflow: visible;
+      opacity: 1;
+      margin-top: var(--size-xs);
+    }
   }
-}
 
-/* Links */
-.mobius-accordion__link {
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-1);
-  color: var(--color-accordion-link, var(--color-secondary));
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
-  text-underline-offset: var(--accordion-link-underline-offset, 6px);
+  /* Links */
+  .mobius-accordion__link {
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-1);
+    color: var(--color-accordion-link, var(--color-secondary));
+    cursor: pointer;
+    outline: none;
+    text-decoration: underline;
+    text-underline-offset: var(--accordion-link-underline-offset, 6px);
+
+    &:hover,
+    &:active {
+      color: var(--color-accordion-link-hover, var(--color-secondary-hover));
+      text-decoration: var(--accordion-link-hover-text-decoration, underline);
+    }
 
-  &:hover,
-  &:active {
-    color: var(--color-accordion-link-hover, var(--color-secondary-hover));
-    text-decoration: var(--accordion-link-hover-text-decoration, underline);
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--accordion-box-shadow, var(--box-shadow-default));
+    }
   }
 
-  &:focus-visible {
-    outline: none;
-    box-shadow: var(--accordion-box-shadow, var(--box-shadow-default));
+  h1.mobius-accordion__link-text,
+  h2.mobius-accordion__link-text,
+  h3.mobius-accordion__link-text,
+  h4.mobius-accordion__link-text,
+  h5.mobius-accordion__link-text,
+  h6.mobius-accordion__link-text,
+  .mobius-accordion__link-text {
+    margin: 0;
+    /* Text order: when icon-position is 1 (left), text is 2; when icon-position is 2 (right), text is 1 */
+    order: calc(3 - var(--mobius-accordion-icon-position, 2));
+    line-height: var(--line-height-normal);
+    font-size: var(--accordion-font-size, var(--font-size-small-paragraph));
+    font-weight: var(--accordion-font-weight, var(--font-weight-normal));
   }
-}
-
-h1.mobius-accordion__link-text,
-h2.mobius-accordion__link-text,
-h3.mobius-accordion__link-text,
-h4.mobius-accordion__link-text,
-h5.mobius-accordion__link-text,
-h6.mobius-accordion__link-text,
-.mobius-accordion__link-text {
-  margin: 0;
-  /* Text order: when icon-position is 1 (left), text is 2; when icon-position is 2 (right), text is 1 */
-  order: calc(3 - var(--mobius-accordion-icon-position, 2));
-  line-height: var(--line-height-normal);
-  font-size: var(--accordion-font-size, var(--font-size-small-paragraph));
-  font-weight: var(--accordion-font-weight, var(--font-weight-normal));
-}
 
-.mobius-accordion__link-icon {
-  /* Icon order: directly uses the position value */
-  order: var(--mobius-accordion-icon-position, 2);
-  /* Dynamic margin: when icon position is 1 (left), margin-left = 0 and margin-right = margin;
-     when icon position is 2 (right), margin-left = margin and margin-right = 0 */
-  margin-left: calc((var(--mobius-accordion-icon-position, 2) - 1) * var(--accordion-icon-margin, var(--size-xs)));
-  margin-right: calc((2 - var(--mobius-accordion-icon-position, 2)) * var(--accordion-icon-margin, var(--size-xs)));
-  transition: transform var(--transition-duration);
+  .mobius-accordion__link-icon {
+    /* Icon order: directly uses the position value */
+    order: var(--mobius-accordion-icon-position, 2);
+    /* Dynamic margin: when icon position is 1 (left), margin-left = 0 and margin-right = margin;
+       when icon position is 2 (right), margin-left = margin and margin-right = 0 */
+    margin-left: calc(
+      (var(--mobius-accordion-icon-position, 2) - 1) *
+        var(--accordion-icon-margin, var(--size-xs))
+    );
+    margin-right: calc(
+      (2 - var(--mobius-accordion-icon-position, 2)) *
+        var(--accordion-icon-margin, var(--size-xs))
+    );
+    transition: transform var(--transition-duration);
 
-  &.--is-open {
-    transform: rotateZ(-180deg);
+    &.--is-open {
+      transform: rotateZ(-180deg);
+    }
   }
 }

package/src/components/Accordion/AccordionList.css

@@ -1,30 +1,32 @@
-.mobius-accordion-list {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+@layer atoms {
+  .mobius-accordion-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 
-  /* Layout overrides for Accordions within the list */
-  & .mobius-accordion__link {
-    justify-content: space-between;
-    text-decoration: none;
-    --accordion-icon-margin: 0;
-
-    &:hover,
-    &:active {
+    /* Layout overrides for Accordions within the list */
+    & .mobius-accordion__link {
+      justify-content: space-between;
       text-decoration: none;
+      --accordion-icon-margin: 0;
+
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
     }
-  }
 
-  & .mobius-accordion__link-text {
-    color: var(--color-text-medium);
-    font-size: var(--font-size-regular);
-    font-weight: var(--font-weight-semibold);
-  }
+    & .mobius-accordion__link-text {
+      color: var(--color-text-medium);
+      font-size: var(--font-size-regular);
+      font-weight: var(--font-weight-semibold);
+    }
 
-  & .mobius-accordion__content {
-    color: var(--color-text-medium);
-    font-size: var(--font-size-regular);
-    font-weight: var(--font-weight-light);
-    line-height: var(--line-height-normal);
+    & .mobius-accordion__content {
+      color: var(--color-text-medium);
+      font-size: var(--font-size-regular);
+      font-weight: var(--font-weight-light);
+      line-height: var(--line-height-normal);
+    }
   }
 }

package/src/components/Alert/Alert.css

@@ -1,54 +1,56 @@
-.mobius-alert__icon {
-  margin-right: var(--size-sm);
-}
+@layer atoms {
+  .mobius-alert__icon {
+    margin-right: var(--size-sm);
+  }
 
-.mobius-alert {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  font-size: var(--font-size-regular);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  border: 2px solid;
-  border-color: inherit;
-  border-radius: var(--radius-1);
-  padding: var(--size-sm);
-
-  &.--has-header {
-    align-items: start;
-
-    & .mobius-alert__icon {
-      margin-top: 2px;
+  .mobius-alert {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height-normal);
+    color: var(--color-text);
+    border: 2px solid;
+    border-color: inherit;
+    border-radius: var(--radius-1);
+    padding: var(--size-sm);
+
+    &.--has-header {
+      align-items: start;
+
+      & .mobius-alert__icon {
+        margin-top: 2px;
+      }
     }
-  }
 
-  &.--info {
-    border-color: var(--color-info);
-    background-color: var(--color-info-background);
-  }
+    &.--info {
+      border-color: var(--color-info);
+      background-color: var(--color-info-background);
+    }
 
-  &.--success {
-    border-color: var(--color-valid);
-    background-color: var(--color-valid-background);
-  }
+    &.--success {
+      border-color: var(--color-valid);
+      background-color: var(--color-valid-background);
+    }
 
-  &.--warning {
-    border-color: var(--color-warning);
-    background-color: var(--color-warning-background);
-  }
+    &.--warning {
+      border-color: var(--color-warning);
+      background-color: var(--color-warning-background);
+    }
 
-  &.--error {
-    border-color: var(--color-error);
-    background-color: var(--color-error-background);
+    &.--error {
+      border-color: var(--color-error);
+      background-color: var(--color-error-background);
+    }
   }
-}
 
-.mobius-alert__icon .mobius-icon {
-  height: 1.32em;
-}
+  .mobius-alert__icon .mobius-icon {
+    height: 1.32em;
+  }
 
-.mobius-alert__header {
-  margin: 0 0 var(--size-xxs);
-  font-size: var(--font-size-regular);
-  font-weight: 600;
+  .mobius-alert__header {
+    margin: 0 0 var(--size-xxs);
+    font-size: var(--font-size-regular);
+    font-weight: 600;
+  }
 }

package/src/components/Box/Box.css

@@ -1,3 +1,5 @@
-.mobius-box {
-  box-sizing: border-box;
+@layer atoms {
+  .mobius-box {
+    box-sizing: border-box;
+  }
 }

package/src/components/Breadcrumbs/Breadcrumbs.css

@@ -1,30 +1,32 @@
-.mobius-breadcrumb {
-  box-sizing: border-box;
-  background-color: var(--color-background-light);
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
+@layer atoms {
+  .mobius-breadcrumb {
+    box-sizing: border-box;
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+
+    & ul,
+    & ol {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+    }
+  }
 
-  & ul,
-  & ol {
+  .mobius-breadcrumb__item {
     box-sizing: border-box;
+    color: var(--color-text);
     display: flex;
+    flex-direction: row;
     align-items: center;
   }
-}
-
-.mobius-breadcrumb__item {
-  box-sizing: border-box;
-  color: var(--color-text);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 
-.mobius-breadcrumb__separator {
-  margin-left: var(--size-xs);
-  margin-right: var(--size-xs);
+  .mobius-breadcrumb__separator {
+    margin-left: var(--size-xs);
+    margin-right: var(--size-xs);
+  }
 }