Merge pull request #62 from perimetre/3.4.9

3.4.9
perimetre · Apr 18, 2022 · e0f44ff · e0f44ff
2 parents 4136be1 + a94d00e
commit e0f44ff
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 12 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
 
+## [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
@@ -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"

diff --git 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: (
+    <p>
+      Agree with{' '}
+      <a href="#" target="_blank" rel="noreferrer noopener" className="pui-link">
+        terms
+      </a>
+    </p>
+  )
+};
+
 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
@@ -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
@@ -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,16 +95,24 @@ export const CheckboxRadioInput: React.FC<CheckboxRadioInputProps> = ({
     </div>
   );
 
-  return label ? (
+  return typeof label === 'string' ? (
     <div>
-      <label className={`${type === 'checkbox' ? 'pui-checkbox-label' : 'pui-radio-label'}`}>
+      <label className={`${type === 'checkbox' ? 'pui-checkbox-label-clickable' : 'pui-radio-label-clickable'}`}>
         {input}
         <span>
           <HTMLParsedContent content={label} className="max-w-none" />
         </span>
       </label>
       {bottom}
     </div>
+  ) : label ? (
+    <div>
+      <div className={`${type === 'checkbox' ? 'pui-checkbox-label' : 'pui-radio-label'}`}>
+        {input}
+        <span>{label}</span>
+      </div>
+      {bottom}
+    </div>
   ) : (
     <div>
       <span>{input}</span>