@simplybusiness/mobius 4.6.4 → 4.6.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.6.5
+
+### Patch Changes
+
+- cf617b8: Fix `<Button variant="secondary" isDisabled>` hover state; map `inverse`, `inverse-ghost` to alternatives
+
 ## 4.6.4
 
 ### Patch Changes

package/dist/cjs/components/Button/Button.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Button", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Button: function() {
         return Button;
+    },
+    VARIANT_DEPRECATION_WARNING: function() {
+        return VARIANT_DEPRECATION_WARNING;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -20,18 +28,30 @@ function _interop_require_default(obj) {
     };
 }
 let HAS_DEPRECATION_WARNING_SHOWN = false;
+const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 const Button = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", icon, iconPosition, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onClick, ...otherProps } = props;
     const { buttonProps } = (0, _useButton.useButton)(props);
-    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {
+    if ((variant === "inverse" || variant === "inverse-ghost") && !HAS_DEPRECATION_WARNING_SHOWN) {
         // eslint-disable-next-line no-console
-        console.warn("icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.");
+        console.warn(VARIANT_DEPRECATION_WARNING);
         HAS_DEPRECATION_WARNING_SHOWN = true;
     }
+    // Map deprecated variants to alternative ones
+    const getVariant = (type)=>{
+        if (type === "inverse") {
+            return "basic";
+        }
+        if (type === "inverse-ghost") {
+            return "secondary";
+        }
+        return variant;
+    };
+    const buttonVariant = getVariant(variant);
     // Reshape class name and apply to outer element
-    const classes = (0, _dedupe.default)("mobius", "mobius/Button", `--variant-${variant}`, `--size-${size}`, {
+    const classes = (0, _dedupe.default)("mobius", "mobius/Button", `--variant-${buttonVariant}`, `--size-${size}`, {
         "--is-disabled": isDisabled,
         "--is-loading": isLoading,
         "--is-success": isSuccess && !isLoading

package/dist/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAsGSA;;;eAAAA;;;;uBApGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AA0CpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport const VARIANT_DEPRECATION_WARNING =\n  \"Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if (\n      (variant === \"inverse\" || variant === \"inverse-ghost\") &&\n      !HAS_DEPRECATION_WARNING_SHOWN\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(VARIANT_DEPRECATION_WARNING);\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","VARIANT_DEPRECATION_WARNING","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","console","warn","getVariant","type","buttonVariant","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA+GSA,MAAM;eAANA;;IApGIC,2BAA2B;eAA3BA;;;;uBAT6C;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AAE7B,MAAMD,8BACX;AAkCF,MAAMD,uBACJG,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAACd;IAElC,IACE,AAACQ,CAAAA,YAAY,aAAaA,YAAY,eAAc,KACpD,CAACV,+BACD;QACA,sCAAsC;QACtCiB,QAAQC,IAAI,CAACnB;QACbC,gCAAgC;IAClC;IAEA,8CAA8C;IAC9C,MAAMmB,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOV;IACT;IAEA,MAAMW,gBAAgBF,WAAWT;IAEjC,gDAAgD;IAChD,MAAMY,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEV,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWU,SAAS;IAEtBV,WAAWU,SAAS,GAAGF;IAEvB,qBACE,qBAAChB;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,qBAACiB,gBAAO,QAAMrB,YAAYA;;AAG7C;AAEFN,OAAO4B,WAAW,GAAG"}