@simplybusiness/mobius 3.5.1 → 3.6.1

package/src/components/Modal/Modal.story.mdx

@@ -98,7 +98,7 @@ const Demo = () => {
 
 ### Fullscreen Modal
 
-Set the `size` prop to "fullscreen".
+Set the `size` prop to `fullscreen`.
 
 export const FullScreenDemo = props => {
   const [open, setOpen] = useState(false);
@@ -154,6 +154,70 @@ const FullScreenDemo = () => {
 };
 ```
 
+### With Custom Size
+
+Set the `size` prop to `xs`, `sm`, `md`, `lg`, `xl` or `xxl`.
+
+This will attach a custom CSS property `--size-[size]`.
+
+For example, `size="sm"` will produce `--size-sm` CSS class name.
+
+This class name can then be targeted globally or locally to set a modal size based on your application and/or feature requirements.
+
+export const WithCustomSizeDemo = props => {
+  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>
+    </>
+  );
+};
+
+<WithCustomSizeDemo />
+
+```jsx
+const WithCustomSizeDemo = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Show Custom Size Modal 🔸
+      </Button>
+
+      <Modal
+        size="sm"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        preventCloseOnEsc
+      >
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>...</Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
 ### With Animation
 
 Set the `animation` prop to either `slideUp` or `fade`.
@@ -317,6 +381,22 @@ export const ExampleContent = ({ onClose }) => {
   {args => <FullScreenDemo {...args} />}
 </Story>
 
+### With Custom Size
+
+<Story
+  name="With Custom Size"
+  args={{
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    animation: "",
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "sm",
+  }}
+>
+  {args => <WithCustomSizeDemo {...args} />}
+</Story>
+
 ### With Animation
 
 <Story

package/src/components/NumberField/__snapshots__/NumberField.test.tsx.snap

@@ -40,7 +40,6 @@ exports[`NumberField should match snapshot 1`] = `
           class="mobius mobius/Icon"
           focusable="false"
           role="img"
-          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -62,7 +61,6 @@ exports[`NumberField should match snapshot 1`] = `
           class="mobius mobius/Icon"
           focusable="false"
           role="img"
-          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >

package/src/components/Radio/Radio.test.tsx

@@ -1,10 +1,7 @@
 import { render, fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { matchers } from "@emotion/jest";
 import { RadioGroup, Radio } from ".";
 
-expect.extend(matchers);
-
 describe("Radio", () => {
   it("should render without error", () => {
     const component = render(

package/src/components/Radio/Radio.tsx

@@ -7,11 +7,11 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover, HoverProps } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
-import styled from '@emotion/styled';
 import { RadioContext } from "./RadioContext";
 import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { Flex } from "../Flex";
 
 export type RadioElementType = HTMLInputElement;
 
@@ -28,11 +28,6 @@ export interface RadioProps
 
 export type RadioRef = Ref<RadioElementType>;
 
-const StyledLabel = styled(Label)`
-  display: flex;
-  align-items: center;
-`;
-
 const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
   (props: RadioProps, ref: RadioRef) => {
     const radioContext = useContext(RadioContext);
@@ -91,7 +86,9 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
 
     return (
       <>
-        <StyledLabel
+        <Flex
+          alignItems="center"
+          elementType={Label}
           {...hoverProps}
           className={containerClasses}
         >
@@ -112,7 +109,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
           ) : (
             <div className="mobius/RadioContent">{label || children}</div>
           )}
-        </StyledLabel>
+        </Flex>
         {errorMessage && <ErrorMessage errorMessage={errorMessage} />}
       </>
     );

package/src/components/Radio/RadioButton.test.tsx

@@ -1,11 +1,8 @@
 import { render, fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { matchers } from "@emotion/jest";
 import { RadioGroup, RadioButton } from ".";
 import { Icon } from "..";
 
-expect.extend(matchers);
-
 describe("RadioButton", () => {
   it("should render without error", () => {
     const component = render(

package/src/components/Radio/RadioButton.tsx

@@ -14,9 +14,9 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover, HoverProps } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
-import styled from '@emotion/styled';
 import { RadioContext } from "./RadioContext";
 import { ForwardedRefComponent } from "../../types/components";
+import { Flex } from "../Flex";
 
 export type RadioButtonElementType = HTMLInputElement;
 
@@ -32,11 +32,6 @@ export interface RadioButtonProps
 
 export type RadioButtonRef = Ref<RadioButtonElementType>;
 
-const StyledLabel = styled.label`
-  display: flex;
-  align-items: center;
-`;
-
 const RadioButton: ForwardedRefComponent<
   RadioButtonProps,
   RadioButtonElementType
@@ -118,13 +113,15 @@ const RadioButton: ForwardedRefComponent<
   }
 
   return (
-    <StyledLabel
+    <Flex
+      alignItems="center"
+      elementType="label"
       className={containerClasses}
       {...hoverProps}
     >
       {nativeInput}
       {content}
-    </StyledLabel>
+    </Flex>
   );
 });
 

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

@@ -1,15 +1,12 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { matchers } from "@emotion/jest";
 import { Select } from ".";
 import { Option } from "..";
 
 const CLASS_NAME = "mobius/Select";
 const LABEL_CLASS_NAME = "mobius/Label";
 
-expect.extend(matchers);
-
 describe("Select", () => {
   it("should render without error", () => {
     const component = render(

package/src/components/Select/Select.tsx

@@ -13,7 +13,6 @@ import clsx from "clsx";
 import { useFocusRing } from "@react-aria/focus";
 import { HoverProps, useHover } from "@react-aria/interactions";
 import { useSlotId } from "@react-aria/utils";
-import styled from '@emotion/styled';
 import { ForwardedRefComponent } from "../../types/components";
 import { Flex } from "../Flex";
 import { ErrorMessage } from "../ErrorMessage";
@@ -40,10 +39,6 @@ export interface SelectProps
 
 export type SelectRef = Ref<SelectElementType>;
 
-const ColumnFlex = styled(Flex)`
-  flex-direction: column;
-`;
-
 const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
   forwardRef((props: SelectProps, ref: SelectRef) => {
     const {
@@ -102,9 +97,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
     ]);
 
     return (
-      <ColumnFlex
-        className="mobius mobius/SelectOuter"
-      >
+      <Flex flexDirection="column" className="mobius mobius/SelectOuter">
         {label && (
           <Label {...labelProps} className={labelClasses}>
             {label}
@@ -131,7 +124,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
           <span className={iconClasses} />
         </div>
         <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
-      </ColumnFlex>
+      </Flex>
     );
   });
 

package/src/components/Slider/Slider.tsx

@@ -7,7 +7,6 @@ import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import clsx from "clsx";
 import { DOMProps } from "@react-types/shared";
-import styled from '@emotion/styled';
 import { SliderThumb } from "./Thumb";
 import { Label } from "../Label";
 import { useUnwrappedHandler, useWrappedValue } from "./helpers";
@@ -22,29 +21,6 @@ export interface SliderProps extends SpectrumSliderProps<number>, DOMProps {
   formatOptions?: Intl.NumberFormatOptions;
 }
 
-const SliderWrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  touch-action: none;
-`;
-
-const SliderLabelWrapper = styled.div`
-  display: flex;
-  align-self: stretch;
-`;
-
-const SliderTrackWrapper = styled.div`
-  position: relative;
-  width: 100%;
-`;
-
-const SliderTrack = styled.div`
-  position: absolute;
-  width: 100%;
-`;
-
 export function Slider(props: SliderProps) {
   const {
     className,
@@ -96,12 +72,9 @@ export function Slider(props: SliderProps) {
   });
 
   return (
-    <SliderWrapper
-      {...groupProps}
-      className={classes}
-    >
+    <div {...groupProps} className={classes}>
       {/* Create a flex container for the label and output element. */}
-      <SliderLabelWrapper>
+      <div className="mobius/SliderLabelWrapper">
         {label && <Label {...labelProps}>{label}</Label>}
         {label && (
           <output
@@ -111,18 +84,16 @@ export function Slider(props: SliderProps) {
             {state.getThumbValueLabel(0)}
           </output>
         )}
-      </SliderLabelWrapper>
+      </div>
       {/* The track element holds the visible track line and the thumb. */}
-      <SliderTrackWrapper
+      <div
         {...trackProps}
         ref={trackRef}
         className="mobius mobius/SliderTrackWrapper"
       >
-        <SliderTrack
-          className="mobius/SliderTrack"
-        />
+        <div className="mobius/SliderTrack" />
         <SliderThumb index={0} state={state} trackRef={trackRef} />
-      </SliderTrackWrapper>
+      </div>
       <div className="mobius/SliderLabels">
         <div className="mobius/SliderMinLabel" data-testid="min-label">
           {minLabel}
@@ -131,6 +102,6 @@ export function Slider(props: SliderProps) {
           {maxLabel}
         </div>
       </div>
-    </SliderWrapper>
+    </div>
   );
 }

package/src/components/Slider/Thumb.tsx

@@ -8,19 +8,12 @@ import { useSliderThumb } from "@react-aria/slider";
 import { SliderThumbProps as SpectrumSliderThumbProps } from "@react-types/slider";
 import { SliderState } from "@react-stately/slider";
 import clsx from "clsx";
-import styled from '@emotion/styled';
 
 export interface SliderThumbProps extends SpectrumSliderThumbProps {
   state: SliderState;
   trackRef: RefObject<HTMLElement>;
 }
 
-const StyledThumb = styled.div`
-  position: absolute;
-  top: calc(50% - 1px);
-  transform: translateX(-50%);
-`;
-
 export function SliderThumb(props: SliderThumbProps) {
   const { state, trackRef, index, isDisabled } = props;
   const inputRef = useRef(null);
@@ -44,7 +37,7 @@ export function SliderThumb(props: SliderThumbProps) {
   const thumbClasses = clsx("mobius", "mobius/SliderThumb", classes);
 
   return (
-    <StyledThumb
+    <div
       style={{
         left: `${state.getThumbPercent(index) * 100}%`,
       }}
@@ -55,6 +48,6 @@ export function SliderThumb(props: SliderThumbProps) {
           <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
         </VisuallyHidden>
       </div>
-    </StyledThumb>
+    </div>
   );
 }

package/src/components/Text/Text.story.mdx

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
 import { Text } from "./Text";
 import { Box } from "..";
@@ -86,12 +85,11 @@ import { Text } from "@simplybusiness/mobius";
 
 ### Themed
 
-export const StyledText = styled(Text)`
-  color: green;
-`;
-
-<Story name="Themed" args={{ elementType: "h4", variant: "h4" }}>
-  {args => <StyledText {...args}>Sample Text</StyledText>}
+<Story
+  name="Themed"
+  args={{ elementType: "h4", variant: "h4", style: { color: "green" } }}
+>
+  {args => <Text {...args}>Sample Text</Text>}
 </Story>
 
 <!-- prettier-ignore -->

package/src/components/TextArea/TextArea.tsx

@@ -6,7 +6,6 @@ import clsx from "clsx";
 import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";
 import { useFocusRing } from "@react-aria/focus";
 import { HoverProps, useHover } from "@react-aria/interactions";
-import styled from '@emotion/styled';
 import { TextAreaInput } from "../TextAreaInput";
 import { Label } from "../Label";
 import { ForwardedRefComponent } from "../../types/components";
@@ -27,10 +26,6 @@ export interface TextAreaProps
 
 export type TextAreaRef = Ref<TextAreaElementType>;
 
-const ColumnFlex = styled(Flex)`
-  flex-direction: column;
-`;
-
 const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
   forwardRef((props: TextAreaProps, ref: TextAreaRef) => {
     const {
@@ -77,10 +72,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
     });
 
     return (
-      <ColumnFlex
-        className={classes}
-        {...focusProps}
-      >
+      <Flex flexDirection="column" className={classes} {...focusProps}>
         {label && (
           <Label {...labelProps} className={labelClasses}>
             {props.label}
@@ -97,7 +89,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
           aria-invalid={errorMessage != null}
         />
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </ColumnFlex>
+      </Flex>
     );
   });
 

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

@@ -1,14 +1,11 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { matchers } from "@emotion/jest";
 import { TextField } from ".";
 
 const WRAPPER_CLASS_NAME = "mobius/TextField";
 const INPUT_CLASS_NAME = "mobius/TextInput";
 
-expect.extend(matchers);
-
 describe("Test for TextField", () => {
   it("should render without errors", () => {
     render(<TextField label="First name" data-testid="textfield" />);

package/src/components/TextField/TextField.tsx

@@ -13,7 +13,6 @@ import { useHover } from "@react-aria/interactions";
 import { useFocusRing } from "@react-aria/focus";
 import { FocusEvents, HoverEvents, DOMProps } from "@react-types/shared";
 import clsx from "clsx";
-import styled from "@emotion/styled";
 import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { ForwardedRefComponent } from "../../types/components";
@@ -50,10 +49,6 @@ export interface TextFieldProps
 
 export type TextFieldRef = Ref<TextFieldElementType>;
 
-const ColumnFlex = styled(Flex)`
-  flex-direction: column;
-`;
-
 const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
   forwardRef((props: TextFieldProps, ref: TextFieldRef) => {
     const {
@@ -108,10 +103,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
     const inputClasses = clsx("mobius", "mobius/TextInput", textfieldClasses);
 
     return (
-      <ColumnFlex
-        className={containerClasses}
-        {...focusProps}
-      >
+      <Flex flexDirection="column" className={containerClasses} {...focusProps}>
         {label && !hidden && (
           <Label {...labelProps} className={labelClasses}>
             {label}
@@ -131,7 +123,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
           <div className="mobius/TextFieldChildren">{children}</div>
         </div>
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </ColumnFlex>
+      </Flex>
     );
   });
 

package/src/contexts/ThemeContext/ThemeContext.tsx

@@ -46,7 +46,7 @@ export const ThemeProvider = ({ children, icons }: ThemeProviderProps) => {
     () => ({
       icons: {
         ...(baseIcons as Icons),
-        ...(icons?.default as unknown as Icons),
+        ...(icons as Icons),
       },
       breakpoints: breakpointConfig,
       setBreakpoints: setConfig,

package/dist/cjs/components/Fieldset/stories/StyledLegend.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const StyledLegend: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;

package/dist/cjs/components/Fieldset/stories/StyledLegend.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLegend = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.StyledLegend = styled_1.default.legend `
-  margin-bottom: var(--size-20);
-  padding-left: 0;
-  color: var(--color-primary);
-`;
-//# sourceMappingURL=StyledLegend.js.map

package/dist/cjs/components/Fieldset/stories/StyledLegend.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledLegend.js","sourceRoot":"","sources":["../../../../../src/components/Fieldset/stories/StyledLegend.tsx"],"names":[],"mappings":";;;;;;AAAA,6DAAqC;AAExB,QAAA,YAAY,GAAG,gBAAM,CAAC,MAAM,CAAA;;;;CAIxC,CAAC"}

package/dist/cjs/utils/combineTruthyObjects.d.ts

@@ -1,6 +0,0 @@
-/**
- * Combines the provided objects into a single output object,
- * while removing any null or false values.
- * @param objects - the objects to combine
- */
-export declare function combineTruthyObjects<T>(objects: (T | boolean | null)[]): T;

package/dist/cjs/utils/combineTruthyObjects.js

@@ -1,38 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.combineTruthyObjects = void 0;
-const merge = __importStar(require("deepmerge"));
-/**
- * Combines the provided objects into a single output object,
- * while removing any null or false values.
- * @param objects - the objects to combine
- */
-function combineTruthyObjects(objects) {
-    const truthyObjects = objects.filter(o => o && o !== null);
-    return merge.all(truthyObjects);
-}
-exports.combineTruthyObjects = combineTruthyObjects;
-//# sourceMappingURL=combineTruthyObjects.js.map

package/dist/cjs/utils/combineTruthyObjects.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combineTruthyObjects.js","sourceRoot":"","sources":["../../../src/utils/combineTruthyObjects.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAmC;AAEnC;;;;GAIG;AACH,SAAgB,oBAAoB,CAAI,OAA+B;IACrE,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAE3D,OAAO,KAAK,CAAC,GAAG,CAAC,aAAyB,CAAM,CAAC;AACnD,CAAC;AAJD,oDAIC"}

package/dist/cjs/utils/combineTruthyObjects.test.d.ts

@@ -1 +0,0 @@
-export {};