@simplybusiness/mobius 3.10.0 → 3.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.33.1",
+    "@microsoft/api-extractor": "^7.36.4",
     "@react-types/breadcrumbs": "^3.4.4",
     "@react-types/button": "^3.6.2",
     "@react-types/checkbox": "^3.4.0",
@@ -49,89 +49,75 @@
     "@react-types/link": "^3.3.4",
     "@react-types/progress": "^3.2.4",
     "@react-types/radio": "^3.3.0",
-    "@react-types/select": "^3.6.4",
     "@react-types/shared": "^3.15.0",
     "@react-types/slider": "^3.3.0",
-    "@storybook/addon-links": "^6.5.13",
-    "@swc/core": "^1.3.8",
-    "@swc/jest": "^0.2.23",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.4.0",
+    "@storybook/addon-links": "^7.3.2",
+    "@swc/core": "^1.3.78",
+    "@swc/jest": "^0.2.29",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.1.2",
+    "@types/jest": "^29.5.4",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^18.13.0",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "@types/react-modal": "^3.13.1",
-    "@types/react-table": "^7.7.12",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "color": "^4.2.3",
-    "csstype": "^3.1.1",
-    "eslint": "^8.25.0",
+    "@types/node": "^20.5.4",
+    "@types/react-dom": "18.2.7",
+    "@types/react-modal": "^3.16.0",
+    "@types/react": "18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "csstype": "^3.1.2",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.6",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.13",
+    "eslint": "^8.47.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.2.0",
-    "jest-environment-jsdom": "^29.2.0",
-    "prettier": "^2.7.1",
-    "react-router-dom": "^6.4.2",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.4.0",
-    "typescript": "^4.9.5"
+    "jest-environment-jsdom": "^29.6.3",
+    "jest": "^29.6.3",
+    "prettier": "^3.0.2",
+    "react-router-dom": "^6.15.0",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.1 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.1 || ^18.0.0"
   },
   "dependencies": {
-    "@internationalized/date": "^3.0.0",
     "@react-aria/breadcrumbs": "^3.3.2",
     "@react-aria/button": "^3.6.2",
-    "@react-aria/calendar": "^3.0.3",
     "@react-aria/checkbox": "^3.6.0",
-    "@react-aria/datepicker": "^3.1.2",
-    "@react-aria/dialog": "^3.4.0",
     "@react-aria/focus": "^3.9.0",
     "@react-aria/i18n": "^3.6.1",
     "@react-aria/interactions": "^3.12.0",
     "@react-aria/label": "^3.4.2",
     "@react-aria/link": "^3.3.4",
     "@react-aria/numberfield": "^3.3.0",
-    "@react-aria/overlays": "^3.11.0",
     "@react-aria/progress": "^3.3.2",
     "@react-aria/radio": "^3.4.0",
-    "@react-aria/select": "^3.8.2",
     "@react-aria/separator": "^3.2.4",
     "@react-aria/slider": "^3.2.2",
     "@react-aria/ssr": "^3.2.0",
     "@react-aria/textfield": "^3.7.2",
     "@react-aria/utils": "^3.14.0",
     "@react-aria/visually-hidden": "^3.5.0",
-    "@react-stately/calendar": "^3.0.3",
     "@react-stately/checkbox": "^3.3.0",
-    "@react-stately/datepicker": "^3.1.0",
     "@react-stately/numberfield": "^3.2.2",
     "@react-stately/radio": "^3.6.0",
-    "@react-stately/select": "^3.3.2",
     "@react-stately/slider": "^3.2.2",
     "@react-stately/toggle": "^3.4.2",
     "@simplybusiness/icons": "^3.8.0",
     "clsx": "^1.2.1",
-    "deepmerge": "^4.2.2",
     "lodash.debounce": "^4.0.8",
     "react-accessible-dropdown-menu-hook": "^3.2.0",
     "react-animate-height": "^3.0.4",
-    "react-modal": "^3.16.1",
-    "react-table": "^7.8.0"
+    "react-modal": "^3.16.1"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --ext .tsx,.ts,.js,.jsx,.mjs --fix"

package/src/components/Button/Button.tsx

@@ -5,7 +5,6 @@ import { useHover } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { AriaFocusRingProps, useFocusRing } from "@react-aria/focus";
-import type { IconName } from "@simplybusiness/icons";
 import { ForwardedRefComponent } from "../../types/components";
 import { Loading } from "./Loading";
 import { Icon } from "../Icon";
@@ -38,7 +37,7 @@ export interface ButtonProps
   /** Display success style */
   isSuccess?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  icon?: IconName;
+  icon?: string;
   iconPosition?: "left" | "right";
   children?: ReactNode;
 }

package/src/components/Icon/Icon.mdx

@@ -31,8 +31,9 @@ import { Icon } from "@simplybusiness/mobius";
 {/* prettier-ignore */}
 ```jsx
 import { Icon } from "@simplybusiness/mobius";
+import { home } from "@simplybusiness/icons"
 
-<Icon name="chevronDown" />
+<Icon icon={home} />
 ```
 
 ### Spinning
@@ -42,8 +43,9 @@ import { Icon } from "@simplybusiness/mobius";
 {/* prettier-ignore */}
 ```jsx
 import { Icon } from "@simplybusiness/mobius";
+import { loading } from "@simplybusiness/icons"
 
-<Icon name="loading" spin={true} />
+<Icon icon={loading} spin />
 ```
 
 ## Accessibility
@@ -52,7 +54,7 @@ All icons are marked with aria-hidden and should not be used without some form o
 
 ```jsx
 <Link aria-label="Go back to home" href="/">
-  <Icon name="chevronLeft" title="Go back" />
+  <Icon icon={arrowLeft} title="Go back" />
 </Link>
 ```
 

package/src/components/Icon/Icon.stories.tsx

@@ -7,44 +7,46 @@ export default {
   title: "Components/Icon",
   component: Icon,
   argTypes: {
-    name: {
-      options: [
-        "menu",
-        "rightArrow",
-        "leftArrow",
-        "dropdown",
-        "home",
-        "star",
-        "youtube",
-        "error",
-        "search",
-        "user",
-        "chevronDown",
-        "loading",
-      ],
-      control: { type: "radio" },
-    },
-    spin: {
-      if: {
-        arg: "name",
-        eq: "loading",
-      },
-    },
     ...excludeControls("className", "icon"),
   },
 };
 
+const defaultArgs = {
+  spin: false,
+  spinReverse: false,
+  fixedWidth: false,
+  size: "1x",
+} as const;
+
+const home = {
+  iconName: "home",
+  width: 576,
+  height: 512,
+  svgPathData:
+    "M303.5 13.7L288 .5 272.5 13.7l-264 224 31.1 36.6L64 253.5V488v24H88 488h24V488 253.5l24.5 20.8 31.1-36.6-264-224zM464 212.8V464H112V212.8L288 63.5 464 212.8z",
+  iconType: "fill",
+  fill: "none",
+} as const;
+
 export const Normal: Meta<typeof Icon> = {
-  render: (args: IconProps) => <Icon {...args} />,
+  render: (args: IconProps) => (
+    <p>
+      <Icon {...args} icon={home} />
+    </p>
+  ),
   args: {
-    name: "chevronDown",
+    ...defaultArgs,
   },
 };
 
 export const Spinning: Meta<typeof Icon> = {
-  render: (args: IconProps) => <Icon {...args} />,
+  render: (args: IconProps) => (
+    <p>
+      <Icon {...args} icon={home} />
+    </p>
+  ),
   args: {
+    ...defaultArgs,
     spin: true,
-    name: "loading",
   },
 };

package/src/components/Icon/Icon.tsx

@@ -1,26 +1,68 @@
-import { forwardRef } from "react";
-import { ForwardedRefComponent } from "../../types/components";
-
-import { IconFromName } from "./IconFromName";
-import { IconFromObject } from "./IconFromObject";
-import {
-  IconRef,
-  IconProps,
-  IconFromNameProps,
-  IconFromObjectProps,
-} from "./types";
-
-const Icon: ForwardedRefComponent<IconProps, SVGSVGElement> = forwardRef(
-  (props: IconProps, ref: IconRef) => {
-    const { name } = props;
-
-    if (name) {
-      return <IconFromName {...(props as IconFromNameProps)} ref={ref} />;
-    }
-
-    return <IconFromObject {...(props as IconFromObjectProps)} ref={ref} />;
-  },
-);
-
-Icon.displayName = "Icon";
-export { Icon };
+import clsx from "clsx";
+import * as allIcons from "@simplybusiness/icons";
+import { applyStyles } from "./IconStyle";
+import { IconProps } from "./types";
+
+const ICON_PREFIX = "mobius-icon";
+
+function getIconByName(name: string) {
+  if (name in allIcons) {
+    return allIcons[name as keyof typeof allIcons];
+  }
+  // eslint-disable-next-line no-console
+  console.error("Missing icon name:", name);
+  return allIcons.notdef;
+}
+
+export function Icon({
+  icon,
+  name,
+  className,
+  size,
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  ...otherProps
+}: IconProps) {
+  if (!icon && !name) {
+    throw new Error("Must specify either an icon object or an icon name");
+  }
+
+  const iconToUse = icon ?? getIconByName(name as string);
+
+  if (!iconToUse) {
+    throw new Error("Missing icon definition");
+  }
+
+  const classes = clsx(
+    "mobius",
+    "mobius/Icon",
+    `svg-inline--${ICON_PREFIX}`,
+    className,
+    {
+      [`${ICON_PREFIX}-${size}`]: size,
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,
+    },
+  );
+
+  applyStyles();
+
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-icon={iconToUse.iconName}
+      className={classes}
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${iconToUse.width} ${iconToUse.height}`}
+      color={color}
+      {...otherProps}
+    >
+      <path fill="currentColor" d={iconToUse.svgPathData} />
+    </svg>
+  );
+}