Merge pull request #106 from perimetre/10.1.0

10.1.0
perimetre · Apr 17, 2023 · c4c7a07 · c4c7a07
2 parents 85ceb7c + 92f2f0f
commit c4c7a07
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [10.1.0] 2023-04-17
+
+### Added
+
+- Added option to use JSX as help text of `TextInput`
+
 ## [10.0.2] 2023-04-12
 
 ### Fixed

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
@@ -161,4 +161,4 @@
   "resolutions": {
     "@storybook/react/webpack": "^5"
   }
-}
+}
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
@@ -57,6 +57,18 @@ WithHelp.args = {
   help: 'You can also have a help text'
 };
 
+export const HelpJSX = Template.bind({});
+HelpJSX.args = {
+  help: (
+    <p>
+      You can also have a {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a href="#" className="text-pui-primary underline">
+        help text
+      </a>
+    </p>
+  )
+};
+
 export const WithError = Template.bind({});
 WithError.args = {
   error: 'Input is required'

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -13,7 +13,7 @@ export type TextInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<H
   /**
    * If provided, displays a help text under the input
    */
-  help?: string;
+  help?: React.ReactNode;
   /**
    * The error text to replace the help text with
    */
@@ -62,7 +62,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         <input {...props} ref={ref} className={classnames('pui-text-input', className)} />
         {children}
       </span>
-      {help && !error && <p className="pui-help-text-input">{help}</p>}
+      {help && !error && (typeof help === 'string' ? <p className="pui-help-text-input">{help}</p> : help)}
       {error && <p className="pui-animate-fadeDown pui-help-text-input text-pui-error">{error}</p>}
     </div>
   )