diff --git a/CHANGELOG.md b/CHANGELOG.md index fe7cc97..ba1752e 100644 --- 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 index 9385bc1..d7cb496 100644 --- 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" } -} \ No newline at end of file +} diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx index 3213304..50844cc 100644 --- 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: ( +
+ You can also have a {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + + help text + +
+ ) +}; + 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 index 55fb5f7..dec51ed 100644 --- a/src/components/TextInput/TextInput.tsx +++ b/src/components/TextInput/TextInput.tsx @@ -13,7 +13,7 @@ export type TextInputProps = React.DetailedHTMLProps{help}
} + {help && !error && (typeof help === 'string' ?{help}
: help)} {error &&{error}
} )