@simplybusiness/mobius 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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
+
 ## [3.1.3] - 2022-12-19
 
 ### Fixed
@@ -121,6 +131,7 @@ Additionally, mobius and themes are available on the public NPM registry and can
 
 ## Github Links
 
+[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/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/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.0",
   "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,
-  }
+  }}
 />
 ```
 
@@ -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/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;