fix: checkbox helper text and label (#20)

ory · Oct 12, 2022 · c3237a5 · c3237a5
1 parent 8388785
commit c3237a5
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 22 deletions.
diff --git a/src/react-components/checkbox.tsx b/src/react-components/checkbox.tsx
@@ -1,6 +1,7 @@
 import React from "react"
-import { typographyStyle } from "../theme"
+import { gridStyle, typographyStyle } from "../theme"
 import { checkboxInputStyle, checkboxStyle } from "../theme"
+import { Message, MessageStyleProps } from "./message"
 import cn from "classnames"
 
 // we use the fontawesome checkmark instead of the standard checkmark
@@ -9,38 +10,61 @@ import "../assets/fontawesome.min.css"
 import "../assets/fa-solid.min.css"
 
 export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    MessageStyleProps {
   className?: string
   label?: string
+  helperMessage?: React.ReactNode | string
+  messageTestId?: string
+  dataTestid?: string
 }
 
 export const Checkbox = ({
   className,
   label,
+  helperMessage,
+  messageTestId,
+  dataTestid,
   ...props
 }: CheckboxProps): JSX.Element => {
   const id = Math.random().toString(36).substring(2)
   return (
     <div
-      className={cn(
-        className,
-        typographyStyle({ type: "regular", size: "caption" }),
-        checkboxStyle,
-      )}
+      data-testid={dataTestid}
+      className={gridStyle({ gap: 4, direction: "column" })}
     >
-      <input
-        className={checkboxInputStyle}
-        id={id}
-        type={"checkbox"}
-        // we need to set a value here so that the form will submit the checkbox with a boolean type instead of an empty string
-        // the value won't be submitted when the checkbox is unchecked
-        value={1}
-        {...props}
-      />
-      {label && (
-        <label htmlFor={id}>
-          <span>{label}</span>
-        </label>
+      <div
+        className={cn(
+          className,
+          typographyStyle({ type: "regular", size: "caption" }),
+          checkboxStyle,
+        )}
+      >
+        <input
+          className={checkboxInputStyle}
+          id={id}
+          type={"checkbox"}
+          // we need to set a value here so that the form will submit the checkbox with a boolean type instead of an empty string
+          // the value won't be submitted when the checkbox is unchecked
+          value={1}
+          {...props}
+        />
+        {label && (
+          <label htmlFor={id}>
+            <span>{label}</span>
+          </label>
+        )}
+      </div>
+      {typeof helperMessage === "string" ? (
+        <Message
+          data-testid={messageTestId}
+          severity={props.severity}
+          textPosition={"start"}
+        >
+          {helperMessage}
+        </Message>
+      ) : (
+        helperMessage
       )}
     </div>
   )

diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
@@ -179,12 +179,16 @@ export const Node = ({
         return (
           <Checkbox
             className={className}
+            helperMessage={
+              <NodeMessages nodes={[node]} gap={4} textPosition={"start"} />
+            }
             label={getNodeLabel(node)}
             name={attrs.name}
             required={attrs.required}
             defaultValue={attrs.value}
             disabled={attrs.disabled}
             defaultChecked={Boolean(attrs.value)}
+            dataTestid={`node/input/${attrs.name}`}
           />
         )
       default:

diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Story, ComponentMeta } from "@storybook/react"
-import { Checkbox, CheckboxProps } from "../react-components"
+import { Checkbox, CheckboxProps, Message } from "../react-components"
 import { Container } from "./storyhelper"
 
 export default {
@@ -23,3 +23,29 @@ const Template: Story<CheckboxProps> = (args: CheckboxProps) => (
 export const NormalCheckbox = Template.bind({})
 
 NormalCheckbox.args = {}
+
+export const CheckboxWithLabel = Template.bind({})
+
+CheckboxWithLabel.args = {
+  label: "I agree to the terms and conditions",
+  required: true,
+}
+
+export const CheckboxWithHelperText = Template.bind({})
+
+CheckboxWithHelperText.args = {
+  label: "I agree to the terms and conditions",
+  helperMessage: "Password must be at least 8 characters long",
+  severity: "error",
+}
+
+export const CheckboxWithMessageComponentHelperText = Template.bind({})
+
+CheckboxWithMessageComponentHelperText.args = {
+  label: "I agree to the terms and conditions",
+  helperMessage: (
+    <Message severity="error" textPosition="start">
+      You must agree to the terms and conditions
+    </Message>
+  ),
+}
diff --git a/src/stories/InputField.stories.tsx b/src/stories/InputField.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Story, ComponentMeta } from "@storybook/react"
-import { InputField, InputFieldProps } from "../react-components"
+import { InputField, InputFieldProps, Message } from "../react-components"
 import { Container } from "./storyhelper"
 
 export default {
@@ -26,3 +26,23 @@ NormalInputField.args = {
   header: "Password",
   required: true,
 }
+
+export const InputWithHelperText = Template.bind({})
+
+InputWithHelperText.args = {
+  header: "Password",
+  helperMessage: "Password must be at least 8 characters long",
+  required: true,
+}
+
+export const InputWithMessageComponentHelperText = Template.bind({})
+
+InputWithMessageComponentHelperText.args = {
+  header: "Password",
+  helperMessage: (
+    <Message severity="error" textPosition="start">
+      Password must be at least 8 characters long
+    </Message>
+  ),
+  required: true,
+}
diff --git a/src/theme/checkbox.css.ts b/src/theme/checkbox.css.ts
@@ -5,6 +5,7 @@ import { oryTheme } from "./theme.css"
 export const checkboxStyle = style({
   display: "flex",
   justifyContent: "start",
+  alignItems: "center",
   cursor: "pointer",
   gap: pxToRem(8),
 })