@simplybusiness/mobius 3.1.3 → 3.2.1

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file, or link in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - 2023-01-04
+
+### Changed
+
+- Allow providing a `ReactNode` as the `errorMessage` prop for `Question`
+
+### Fixed
+
+- Fixed typo in `<Chopin.Actions />` docs
+- Fixed `<Chopin.Actions />` back button styles when disabled
+
 ## [3.1.3] - 2022-12-19
 
 ### Fixed
@@ -121,6 +132,8 @@ Additionally, mobius and themes are available on the public NPM registry and can
 
 ## Github Links
 
+[3.2.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.2.1
+[3.2.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.2.0
 [3.1.3]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.3
 [3.1.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.2
 [3.1.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.1

package/dist/cjs/components/Chopin/Actions/Actions.js

@@ -26,8 +26,8 @@ const Actions = (0, react_1.forwardRef)((props, ref) => {
     const nextButtonClasses = (0, clsx_1.default)("chopin/ActionsNext", {
         "--single-action": !backButton,
     });
-    const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "basic", icon: "buttonArrowLeft" });
-    const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses });
+    const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "ghost", icon: "leftArrow", size: "large" });
+    const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses, size: "large" });
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [(backButton === null || backButton === void 0 ? void 0 : backButton.href) && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, backButtonProps, { href: backButtonProps.href }, { children: backLabel }))), (nextButton === null || nextButton === void 0 ? void 0 : nextButton.href) && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, nextButtonProps, { href: nextButtonProps.href }, { children: nextLabel })))] })) })));
 });
 exports.Actions = Actions;

package/dist/cjs/components/Chopin/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAwC;AAExC,gDAAwB;AAGxB,qCAAkC;AAElC,iDAAoE;AAepE,MAAM,OAAO,GACX,IAAA,kBAAU,EAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAA,cAAI,EAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,iBAA6B,GACpC,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,GAC7B,CAAC;IAEF,OAAO,CACL,uBAAC,WAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,wBAAC,WAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,0BAAO;AADhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAwC;AAExC,gDAAwB;AAGxB,qCAAkC;AAElC,iDAAoE;AAepE,MAAM,OAAO,GACX,IAAA,kBAAU,EAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAA,cAAI,EAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,WAAuB,EAC7B,IAAI,EAAE,OAAe,GACtB,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,OAAe,GACtB,CAAC;IAEF,OAAO,CACL,uBAAC,WAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,wBAAC,WAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,0BAAO;AADhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/cjs/components/Chopin/Question/Question.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, ReactElement } from "react";
 export interface QuestionProps {
     label?: ReactElement | string;
     description?: string | ReactNode;
-    errorMessage?: string;
+    errorMessage?: ReactNode;
     children?: ReactNode;
     validationState?: "valid" | "invalid" | "";
     help?: ReactNode;

package/dist/esm/components/Chopin/Actions/Actions.js

@@ -20,8 +20,8 @@ const Actions = forwardRef((props, ref) => {
     const nextButtonClasses = clsx("chopin/ActionsNext", {
         "--single-action": !backButton,
     });
-    const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "basic", icon: "buttonArrowLeft" });
-    const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses });
+    const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "ghost", icon: "leftArrow", size: "large" });
+    const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses, size: "large" });
     return (_jsx(Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: _jsxs(Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [(backButton === null || backButton === void 0 ? void 0 : backButton.href) && (_jsx(LinkButton, Object.assign({}, backButtonProps, { href: backButtonProps.href }, { children: backLabel }))), (nextButton === null || nextButton === void 0 ? void 0 : nextButton.href) && (_jsx(LinkButton, Object.assign({}, nextButtonProps, { href: nextButtonProps.href }, { children: nextLabel })))] })) })));
 });
 Actions.displayName = "Actions";

package/dist/esm/components/Chopin/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAExC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AAepE,MAAM,OAAO,GACX,UAAU,CAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,iBAA6B,GACpC,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,GAC7B,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,MAAC,IAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAExC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AAepE,MAAM,OAAO,GACX,UAAU,CAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,WAAuB,EAC7B,IAAI,EAAE,OAAe,GACtB,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,OAAe,GACtB,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,MAAC,IAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/mobius.d.ts

@@ -813,7 +813,7 @@ declare type QuestionGroupRef = Ref<QuestionGroupElementType>;
 declare interface QuestionProps {
     label?: ReactElement | string;
     description?: string | ReactNode;
-    errorMessage?: string;
+    errorMessage?: ReactNode;
     children?: ReactNode;
     validationState?: "valid" | "invalid" | "";
     help?: ReactNode;

package/package.json

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

package/src/components/Chopin/Actions/Actions.story.mdx

@@ -55,9 +55,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 <Chopin.Actions
   backLabel="Back"
-  backButton={ href: "https://www.google.com" }
+  backButton={{ href: "https://www.google.com" }}
   nextLabel="Next Step"
-  nextButton={ href: "https://www.google.com" }
+  nextButton={{ href: "https://www.google.com" }}
 />
 ```
 
@@ -84,7 +84,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 <Chopin.Actions
   nextLabel="Next Step"
-  nextButton={ href: "https://www.google.com" }
+  nextButton={{ href: "https://www.google.com" }}
 />
 ```
 
@@ -111,10 +111,10 @@ import { Chopin } from "@simplybusiness/mobius";
 
 <Chopin.Actions
   backLabel="Back"
-  backButton={
+  backButton={{
     href: "https://www.google.com",
     isDisabled: false,
-  }
+  }}
 />
 ```
 
@@ -128,7 +128,7 @@ import { Chopin } from "@simplybusiness/mobius";
       backButton: {
         href: "https://www.google.com",
         elementType: "button",
-        isDisabled: false,
+        isDisabled: true,
       },
       nextLabel: "Next Step",
       nextButton: {
@@ -152,15 +152,15 @@ import { Chopin } from "@simplybusiness/mobius";
 
 <Chopin.Actions
   backLabel="Back"
-  backButton={
+  backButton={{
     href: "https://www.google.com",
     isDisabled: false,
-  }
+  }}
   nextLabel="Next Step"
-  nextButton={
+  nextButton={{
     href: "https://www.google.com",
     isDisabled: true,
-  }
+  }}
 />
 ```
 

package/src/components/Chopin/Actions/Actions.tsx

@@ -2,7 +2,7 @@ import { forwardRef, Ref } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import type { IconName } from "@simplybusiness/icons";
-import { Variant } from "../../Button";
+import { Size, Variant } from "../../Button";
 import { Flex } from "../../Flex";
 import { ForwardedRefComponent } from "../../../types/components";
 import { LinkButton, type LinkButtonProps } from "../../LinkButton";
@@ -33,13 +33,15 @@ const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType> =
     const backButtonProps = {
       ...backButton,
       className: "chopin/ActionsBack",
-      variant: "basic" as Variant,
-      icon: "buttonArrowLeft" as IconName,
+      variant: "ghost" as Variant,
+      icon: "leftArrow" as IconName,
+      size: "large" as Size,
     };
 
     const nextButtonProps = {
       ...nextButton,
       className: nextButtonClasses,
+      size: "large" as Size,
     };
 
     return (

package/src/components/Chopin/Question/Question.story.mdx

@@ -343,6 +343,19 @@ import { Chopin } from "@simplybusiness/mobius";
   {args => <Question {...args} />}
 </Story>
 
+<Story
+  name="With Rich Error"
+  args={{
+    label: "Question label",
+    children: <TextField />,
+    errorMessage: <>This <em>contains</em> <strong>HTML</strong> <u>formatting</u></>,
+    validationState: "invalid",
+    closeHelpOnOutsideClick: false,
+  }}
+>
+  {args => <Question {...args} />}
+</Story>
+
 <!-- prettier-ignore -->
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";

package/src/components/Chopin/Question/Question.tsx

@@ -16,7 +16,7 @@ import { QuestionHelp } from "../QuestionHelp/QuestionHelp";
 export interface QuestionProps {
   label?: ReactElement | string;
   description?: string | ReactNode;
-  errorMessage?: string;
+  errorMessage?: ReactNode;
   children?: ReactNode;
   validationState?: "valid" | "invalid" | "";
   help?: ReactNode;