npm - @simplybusiness/mobius - Versions diffs - 3.7.1 → 3.9.0 - Mend

@simplybusiness/mobius 3.7.1 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (441) hide show

package/src/components/LoadingIndicator/LoadingIndicator.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { Icon } from "../Icon";
 export interface LoadingIndicatorProps extends RefAttributes<SVGSVGElement> {
   className?: string;
   icon?: IconName;
+  fontSize?: string;
+  color?: string;
 }
 export type LoadingIndicatorRef = Ref<SVGSVGElement>;

package/src/components/MaskedField/{MaskedField.story.mdx → MaskedField.mdx} RENAMED Viewed

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { MaskedField, MaskedFieldProps } from "./MaskedField";
+import * as MaskedFieldStories from "./MaskedField.stories";
-<Meta title="Components/MaskedField" component={MaskedField} />
+<Meta of={MaskedFieldStories} />
 # MaskedField
@@ -22,9 +23,7 @@ import { MaskedField } from "@simplybusiness/mobius";
 ## Normal
 <Canvas>
-  <Story name="Normal" args={{ label: "MaskedField", pattern: "ssn" }}>
-    {args => <MaskedField {...args} />}
-  </Story>
+  <Story of={MaskedFieldStories.Normal} />
 </Canvas>
 ## Props
@@ -45,13 +44,13 @@ The following HTML is rendered for a MaskedField:
 Class names are augmented with the following flags if true:
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-- --is-optional
+- \--is-focused
+- \--is-disabled
+- \--is-hovered
+- \--is-selected
+- \--is-valid
+- \--is-invalid
+- \--is-optional
 ---

package/src/components/MaskedField/MaskedField.stories.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import type { Meta } from "@storybook/react";
+import { MaskedField, MaskedFieldProps } from "./MaskedField";
+import { excludeControls } from "../../utils/excludeControls";
+export default {
+  title: "Components/MaskedField",
+  component: MaskedField,
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["text", "number"],
+    },
+    ...excludeControls("className"),
+  },
+};
+export const Normal: Meta<typeof MaskedField> = {
+  render: (args: MaskedFieldProps) => <MaskedField {...args} />,
+  args: {
+    label: "MaskedField",
+    pattern: "ssn",
+    isRequired: false,
+    type: "",
+    errorMessage: "",
+  },
+};

package/src/components/Modal/{Modal.story.mdx → Modal.mdx} RENAMED Viewed

@@ -1,28 +1,12 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Modal } from ".";
 import { excludeControls } from "../../utils/excludeControls";
+import * as ModalStories from "./Modal.stories";
-<Meta
-  title="Components/Modal"
-  component={Modal}
-  argTypes={{
-    animation: { control: "radio", options: ["", "slideUp", "fade"] },
-    size: {
-      control: "radio",
-      options: ["md", "fullscreen"],
-    },
-    ...excludeControls(
-      "className",
-      "onClose",
-      "appElement",
-      "parentSelector",
-      "isOpen",
-    ),
-  }}
-/>
+<Meta of={ModalStories} />
 # Modal
@@ -278,13 +262,13 @@ const WithAnimationDemo = () => {
 ### Step 1: Create embeddable `<iframe>`
-1. Create `example` directory with `index.html` file in it:
+1.  Create `example` directory with `index.html` file in it:
 ```
 mkdir example && cd example && touch index.html
 ```
-2. Edit your `index.html` file as follows:
+2.  Edit your `index.html` file as follows:
 ```html
 <html>
@@ -300,7 +284,7 @@ mkdir example && cd example && touch index.html
 </html>
 ```
-3. Start a simple HTTP server from within the `example` directory:
+3.  Start a simple HTTP server from within the `example` directory:
 ```
 npx serve .
@@ -351,67 +335,19 @@ export const ExampleContent = ({ onClose }) => {
 ### Normal
-<Story
-  name="Normal"
-  args={{
-    isOpen: false,
-    shouldFocusAfterRender: true,
-    animation: "",
-    preventCloseOnEsc: false,
-    closeLabel: "Close",
-    size: "md",
-  }}
->
-  {args => <Demo {...args} />}
-</Story>
+<Story of={ModalStories.Normal} />
 ### Full Screen
-<Story
-  name="Full Screen"
-  args={{
-    isOpen: false,
-    shouldFocusAfterRender: true,
-    animation: "",
-    preventCloseOnEsc: false,
-    closeLabel: "Close",
-    size: "fullscreen",
-  }}
->
-  {args => <FullScreenDemo {...args} />}
-</Story>
+<Story of={ModalStories.FullScreen} />
 ### With Custom Size
-<Story
-  name="With Custom Size"
-  args={{
-    isOpen: false,
-    shouldFocusAfterRender: true,
-    animation: "",
-    preventCloseOnEsc: false,
-    closeLabel: "Close",
-    size: "sm",
-  }}
->
-  {args => <WithCustomSizeDemo {...args} />}
-</Story>
+<Story of={ModalStories.WithCustomSize} />
 ### With Animation
-<Story
-  name="With Animation"
-  args={{
-    isOpen: false,
-    animation: "slideUp",
-    shouldFocusAfterRender: true,
-    preventCloseOnEsc: false,
-    closeLabel: "Close",
-    size: "md",
-  }}
->
-  {args => <WithAnimationDemo {...args} />}
-</Story>
+<Story of={ModalStories.WithAnimation} />
 ## Props
@@ -442,16 +378,16 @@ The following HTML is rendered for a simple Modal:
 Class names are augmented with the following flags if true (affected classes shown above):
-- --slide-up
-- --fade
-- --has-reduced-motion
-- --is-fullscreen
-- --is-xs
-- --is-sm
-- --is-md
-- --is-lg
-- --is-xl
-- --is-xxl
+- \--slide-up
+- \--fade
+- \--has-reduced-motion
+- \--is-fullscreen
+- \--is-xs
+- \--is-sm
+- \--is-md
+- \--is-lg
+- \--is-xl
+- \--is-xxl
 ---

package/src/components/Modal/Modal.stories.tsx ADDED Viewed

@@ -0,0 +1,181 @@
+import type { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../Button";
+import { Modal, ModalProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+const Demo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Modal</Button>
+      <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+const FullScreenDemo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Show Fullscreen Modal 🚀
+      </Button>
+      <Modal
+        {...props}
+        size="fullscreen"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        preventCloseOnEsc
+      >
+        <Modal.Header>The Full Screen Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+const WithCustomSizeDemo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Show Custom Size Modal 🔸
+      </Button>
+      <Modal
+        {...props}
+        size="sm"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        preventCloseOnEsc
+      >
+        <Modal.Header>The Custom Size Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+type WithAnimationDemoProps = {
+  animation?: "slideUp" | "fade";
+};
+const WithAnimationDemo = ({
+  animation,
+}: ModalProps & WithAnimationDemoProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Show Modal With Animation 🧙‍♂️
+      </Button>
+      <Modal isOpen={open} onClose={() => setOpen(false)} animation={animation}>
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+export default {
+  title: "Components/Modal",
+  component: Modal,
+  argTypes: {
+    animation: {
+      options: ["slideUp", "fade", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        slideUp: "slideUp",
+        fade: "fade",
+        neither: undefined,
+      },
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["md", "fullscreen"],
+    },
+    ...excludeControls(
+      "className",
+      "onClose",
+      "appElement",
+      "parentSelector",
+      "isOpen",
+    ),
+  },
+};
+export const Normal: Meta<typeof Demo> = {
+  render: (args: ModalProps) => <Demo {...args} />,
+  args: {
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "md",
+  },
+};
+export const FullScreen: Meta<typeof FullScreenDemo> = {
+  render: (args: ModalProps) => <FullScreenDemo {...args} />,
+  args: {
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "fullscreen",
+  },
+};
+export const WithCustomSize: Meta<typeof WithCustomSizeDemo> = {
+  render: (args: ModalProps) => <WithCustomSizeDemo {...args} />,
+  args: {
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "sm",
+  },
+};
+export const WithAnimation: Meta<typeof WithAnimationDemo> = {
+  render: (args: ModalProps) => <WithAnimationDemo {...args} />,
+  args: {
+    isOpen: false,
+    animation: "slideUp",
+    shouldFocusAfterRender: true,
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "md",
+  },
+};

package/src/components/Modal/Modal.tsx CHANGED Viewed

@@ -11,6 +11,7 @@ import ReactModal from "react-modal";
 import clsx from "clsx";
 import { SizeType } from "../../types/size";
 import { sizeClasses } from "../../utils/sizeClasses";
+import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 export type ModalSizeType = SizeType | "fullscreen";
 export interface ModalProps {
@@ -46,6 +47,7 @@ const Modal = ({
     "(prefers-reduced-motion: no-preference)",
   );
   const shouldAnimate = noPreference.matches && !!animation;
+  useBodyScrollLock({ enabled: isOpen });
   const modalClasses = clsx(
     "mobius",

package/src/components/NumberField/NumberField.mdx ADDED Viewed

@@ -0,0 +1,104 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { NumberField, NumberFieldProps } from "./NumberField";
+import { excludeControls } from "../../utils/excludeControls";
+import * as NumberFieldStories from "./NumberField.stories";
+<Meta of={NumberFieldStories} />
+# NumberField
+The `NumberField` component is used for creating a numeric input field. It can be customised by providing any of the valid
+[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)
+options as the `formatOptions` prop.
+## Install
+```bash
+yarn add @simplybusiness/mobius
+```
+## Usage
+```js
+import { NumberField } from "@simplybusiness/mobius";
+```
+## Normal
+<Canvas>
+  <Story of={NumberFieldStories.Normal} />
+</Canvas>
+## Formatted
+<Canvas>
+  <Story of={NumberFieldStories.Formatted} />
+</Canvas>
+## Limited range
+<Canvas>
+  <Story of={NumberFieldStories.LimitedRange} />
+</Canvas>
+## Valid
+<Canvas>
+  <Story of={NumberFieldStories.Valid} />
+</Canvas>
+## Valid
+<Canvas>
+  <Story of={NumberFieldStories.Invalid} />
+</Canvas>
+## Disabled
+<Canvas>
+  <Story of={NumberFieldStories.Disabled} />
+</Canvas>
+## Props
+<ArgsTable of={NumberField} />
+## Component HTML Structure and Class names
+The following HTML is rendered for a NumberField:
+```html
+<div class="mobius/NumberField">
+  <label class="mobius mobius/Label mobius/NumberFieldLabel">Label</label>
+  <div class="mobius/NumberFieldInputGroup">
+    <input class="mobius/NumberFieldInput" />
+    <button class="mobius/NumberFieldButton mobius/NumberFieldButtonPlus">
+      +
+    </button>
+    <button
+      type="button"
+      class="mobius/NumberFieldButton mobius/NumberFieldButtonMinus"
+      tabindex="-1"
+      aria-label="Decrease Number field"
+      aria-controls="react-aria7586995458-316"
+    >
+      -
+    </button>
+  </div>
+  <div class="mobius/ErrorMessage">Error message</div>
+</div>
+```
+Class names are augmented with the following flags if true:
+- \--is-disabled
+- \--is-hovered
+- \--is-focused
+- \--is-valid
+- \--is-invalid
+- \--is-required
+- \--is-optional
+---
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/NumberField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/NumberField/NumberField.stories.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import type { Meta } from "@storybook/react";
+import { NumberField, NumberFieldProps } from "./NumberField";
+import { excludeControls } from "../../utils/excludeControls";
+export default {
+  title: "Forms/NumberField",
+  component: NumberField,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    minValue: {
+      control: {
+        control: { type: "range" },
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    maxValue: {
+      control: {
+        control: { type: "range" },
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    ...excludeControls("className", "value", "aria-describedby"),
+  },
+  args: {
+    minValue: 0,
+    maxValue: 100,
+  },
+};
+export const Normal: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    defaultValue: 0,
+    errorMessage: "",
+    step: 1,
+    isRequired: false,
+  },
+};
+export const Formatted: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    defaultValue: 0,
+    formatOptions: {
+      style: "percent",
+    },
+    errorMessage: "",
+    step: 1,
+    isRequired: false,
+  },
+};
+export const LimitedRange: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    minValue: -10,
+    maxValue: 10,
+    defaultValue: 0,
+    errorMessage: "",
+    step: 1,
+    isRequired: false,
+  },
+};
+export const Valid: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    validationState: "valid",
+    defaultValue: 0,
+    errorMessage: "",
+    step: 1,
+    isRequired: false,
+  },
+};
+export const Invalid: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    validationState: "invalid",
+    errorMessage: "Error message",
+    defaultValue: 0,
+    step: 1,
+    isRequired: false,
+  },
+};
+export const Disabled: Meta<typeof NumberField> = {
+  render: (args: NumberFieldProps) => <NumberField {...args} />,
+  args: {
+    label: "Number field",
+    isDisabled: true,
+    defaultValue: 0,
+    errorMessage: "",
+    step: 1,
+    isRequired: false,
+  },
+};