From 64f6691912454310fb5305b07cef21fb38ebe86c Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Thu, 14 Apr 2022 15:46:18 -0400 Subject: [PATCH 1/2] feat: added option to set label of type reactnode in checkboxradioinput component --- CHANGELOG.md | 2 ++ .../CheckboxRadioIInput.stories.tsx | 29 ++++++++++++++++++- src/components/CheckboxRadioInput/index.css | 24 +++++++++++---- src/components/CheckboxRadioInput/index.tsx | 16 +++++++--- 4 files changed, 60 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c532351..5be3c37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Added option to set values of type `React.ReactNode`, in addition to currently accepted type `string`, to `label` prop of `CheckboxRadioInput` component. + ### Fixed ## [3.4.8] 2022-03-07 diff --git a/src/components/CheckboxRadioInput/CheckboxRadioIInput.stories.tsx b/src/components/CheckboxRadioInput/CheckboxRadioIInput.stories.tsx index b3fee30..77d4d62 100644 --- a/src/components/CheckboxRadioInput/CheckboxRadioIInput.stories.tsx +++ b/src/components/CheckboxRadioInput/CheckboxRadioIInput.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 import { Meta, Story } from '@storybook/react/types-6-0'; import React from 'react'; @@ -6,6 +7,18 @@ import classnames from 'classnames'; import { CheckboxRadioInput, CheckboxRadioInputProps } from '.'; import { puiColorClassnameMap } from '../../storybookMappers'; +const labels = { + string: 'Label text content', + jsx: ( +

+ Agree with{' '} + + terms + +

+ ) +}; + export default { title: 'Components/Inputs/Checkbox Radio', component: CheckboxRadioInput, @@ -21,7 +34,16 @@ export default { } }, label: { - defaultValue: 'Label content' + defaultValue: labels.string, + options: Object.keys(labels), + mapping: labels, + control: { + type: 'select', + labels: { + string: 'Text label', + jsx: 'JSX component' + } + } }, defaultChecked: { control: { @@ -70,6 +92,11 @@ NoLabel.args = { label: undefined }; +export const JSXLabel = Template.bind({}); +JSXLabel.args = { + label: labels.jsx +}; + export const WithHelp = Template.bind({}); WithHelp.args = { help: 'You can also have a help text' diff --git a/src/components/CheckboxRadioInput/index.css b/src/components/CheckboxRadioInput/index.css index e2e3edb..08ac986 100644 --- a/src/components/CheckboxRadioInput/index.css +++ b/src/components/CheckboxRadioInput/index.css @@ -133,14 +133,12 @@ @apply h-6 w-6 border-2; } - /* Style the checkbox label */ + /* Style the checkbox label within any html tag */ .pui-checkbox-label, .pui-radio-label { - /* Adds pointer cursor */ - /* Don't allow selection */ /* Make it flex */ /* Align everything vertically */ - @apply cursor-pointer select-none flex items-center; + @apply flex items-center; /* The input inside the label */ input { @@ -157,12 +155,26 @@ } } - /* The label text wraper */ + /* The label content wraper */ span { /* Adds a margin left */ + @apply ml-2; + } + } + + /* Style the checkbox label within label tag (entire label tag clickable) */ + .pui-checkbox-label-clickable, + .pui-radio-label-clickable { + /* Apply the base checkbox/radio styling */ + /* Adds pointer cursor */ + /* Don't allow selection */ + @apply pui-checkbox-label pui-radio-label cursor-pointer select-none; + + /* The label text content wraper */ + span { /* Its color should use the 900 shade */ /* Adds a little bit of letter spacing(just like text input label) */ - @apply ml-2 text-pui-paragraph-900 tracking-wide; + @apply text-pui-paragraph-900 tracking-wide; } } } diff --git a/src/components/CheckboxRadioInput/index.tsx b/src/components/CheckboxRadioInput/index.tsx index 9602ff9..056305e 100644 --- a/src/components/CheckboxRadioInput/index.tsx +++ b/src/components/CheckboxRadioInput/index.tsx @@ -21,9 +21,9 @@ export type CheckboxRadioInputProps = React.DetailedHTMLProps< */ indeterminate?: boolean; /** - * If provided, displays a label above the input + * If provided, displays a label above the input. If value provided is of type string, the content will be parsed as rich text/html content */ - label?: string; + label?: React.ReactNode; /** * If provided, displays a help text under the input */ @@ -95,9 +95,9 @@ export const CheckboxRadioInput: React.FC = ({ ); - return label ? ( + return typeof label === 'string' ? (
-
+ ) : label ? ( +
+
+ {input} + {label} +
+ {bottom} +
) : (
{input} From a94d00e7505bbbfef272ae1fcd98c7d7024fc872 Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Thu, 14 Apr 2022 15:49:06 -0400 Subject: [PATCH 2/2] build: bumping version 3.4.9 --- CHANGELOG.md | 8 ++++++-- package.json | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5be3c37..17f247a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,10 +23,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Added option to set values of type `React.ReactNode`, in addition to currently accepted type `string`, to `label` prop of `CheckboxRadioInput` component. - ### Fixed +## [3.4.9] 2022-04-14 + +### Added + +- Added option to set values of type `React.ReactNode`, in addition to currently accepted type `string`, to `label` prop of `CheckboxRadioInput` component. + ## [3.4.8] 2022-03-07 ### Fixed diff --git a/package.json b/package.json index 71a9b93..668deb9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "3.4.8", + "version": "3.4.9", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git"