@simplybusiness/mobius 10.1.0 → 10.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.1.0",
+  "version": "10.1.2",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Alert/Alert.tsx

@@ -3,6 +3,7 @@ import classNames from "classnames/dedupe";
 import type { ReactNode, RefAttributes } from "react";
 import type { DOMProps } from "../../types/dom";
 import { Icon } from "../Icon";
+import { TextOrHTML } from "../TextOrHTML";
 import "./Alert.css";
 
 export type AlertElementType = HTMLDivElement;
@@ -75,7 +76,15 @@ const Alert = ({ ref, ...props }: AlertProps) => {
         <Icon icon={icon[variant]} color={colorValue} />
       </span>
       <div>
-        {header && <p className={headerClasses}>{header}</p>}
+        {header && (
+          <TextOrHTML
+            autoDetect
+            htmlElementType="span"
+            className={headerClasses}
+            htmlClassName={headerClasses}
+            text={header}
+          />
+        )}
         <div className={contentClasses}>{children}</div>
       </div>
     </Element>

package/src/components/Button/Button.css

@@ -50,11 +50,16 @@
       background: var(--button-primary-color);
       font-variation-settings: var(--button-primary-font-variation);
 
-      &:where(:active),
-      &:where(:hover) {
+      &:where(:active) {
         background: var(--button-primary-hover-color);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--button-primary-hover-color);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -72,13 +77,20 @@
       background: transparent;
       border-color: var(--button-secondary-color);
 
-      &:where(:active),
-      &:where(:hover) {
+      &:where(:active) {
         --button-content-color: var(--color-text-inverted);
         background: var(--button-secondary-hover-color);
         border-color: var(--button-secondary-hover-color);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          --button-content-color: var(--color-text-inverted);
+          background: var(--button-secondary-hover-color);
+          border-color: var(--button-secondary-hover-color);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -99,15 +111,19 @@
       border-color: transparent;
 
       &:where(:active) {
-        background: var(--color-secondary-hover);
-      }
-
-      &:where(:hover) {
         --button-content-color: var(--color-text-inverted);
         border-color: transparent;
         background: var(--color-secondary-hover);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          --button-content-color: var(--color-text-inverted);
+          border-color: transparent;
+          background: var(--color-secondary-hover);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -130,8 +146,10 @@
         background: var(--color-background-light);
       }
 
-      &:where(:hover) {
-        background: var(--color-background-light);
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--color-background-light);
+        }
       }
 
       &:where(:focus-visible) {
@@ -167,9 +185,11 @@
         fill: var(--button-content-color);
       }
 
-      &:where(:hover) {
-        background: var(--color-valid-hover);
-        border-color: var(--color-valid-hover);
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--color-valid-hover);
+          border-color: var(--color-valid-hover);
+        }
       }
 
       &:where(:active) {
@@ -217,7 +237,6 @@
         text-decoration: underline;
       }
 
-      &:hover,
       &:active {
         --button-content-color: var(
           --button-link-hover-color,
@@ -227,6 +246,17 @@
         cursor: pointer;
       }
 
+      @media (hover: hover) {
+        &:hover {
+          --button-content-color: var(
+            --button-link-hover-color,
+            var(--color-secondary-hover)
+          );
+          text-decoration: var(--button-link-hover-text-decoration, underline);
+          cursor: pointer;
+        }
+      }
+
       &:focus-visible {
         box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
       }

package/dist/esm/chunk-FTSJNY4J.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/Alert/Alert.tsx"],
-  "sourcesContent": ["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && <p className={headerClasses}>{header}</p>}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],
-  "mappings": ";;;;;AAAA,SAAS,YAAY,YAAY,OAAO,eAAe;AACvD,OAAO,gBAAgB;AAIvB,OAAO;AAqEC,cAEF,YAFE;AArDR,SAAS,eAAe,OAAsC;AAC5D,SACE,UAAU,UACV,UAAU,aACV,UAAU,aACV,UAAU;AAEd;AAEA,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AAC/C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UACJ,eAAe,eAAe,WAAW,IAAI,cAAc;AAE7D,QAAM,aACJ,YAAY,YAAY,uBAAuB,eAAe,OAAO;AAEvE,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAU,YAAY;AAAA,MACtB,aAAa,YAAY;AAAA,MACzB,aAAa,YAAY;AAAA,MACzB,WAAW,YAAY;AAAA,MACvB,gBAAgB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,EACb;AACA,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB,WAAW,UAAU,sBAAsB;AACjE,QAAM,cAAc,WAAW,UAAU,oBAAoB;AAC7D,QAAM,iBAAiB,WAAW,UAAU,uBAAuB;AAEnE,SACE,qBAAC,WAAQ,KAAU,MAAK,SAAS,GAAG,YAAY,WAAW,SACzD;AAAA,wBAAC,UAAK,WAAW,aACf,8BAAC,QAAK,MAAM,KAAK,OAAO,GAAG,OAAO,YAAY,GAChD;AAAA,IACA,qBAAC,SACE;AAAA,gBAAU,oBAAC,OAAE,WAAW,eAAgB,kBAAO;AAAA,MAChD,oBAAC,SAAI,WAAW,gBAAiB,UAAS;AAAA,OAC5C;AAAA,KACF;AAEJ;AAEA,MAAM,cAAc;",
-  "names": []
-}