@financial-times/o3-form 0.5.4 → 0.6.0

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CufC9u5W.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/CheckBox.js

@@ -4,7 +4,7 @@ var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
 const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
-  let { inputId, attributes, optional, error } = props;
+  let { inputId, checkboxDescription, attributes, optional, error } = props;
   if (!inputId) {
     inputId = uniqueId("_");
   }
@@ -24,7 +24,10 @@ const CheckBoxItem = (props) => {
         "aria-required": !optional
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: props.checkboxLabel })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+      props.checkboxLabel,
+      checkboxDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input-checkbox__description", children: checkboxDescription })
+    ] }) })
   ] });
 };
 const CheckBox = (props) => {
@@ -33,7 +36,13 @@ const CheckBox = (props) => {
     labelId: props.inputId,
     descriptionId: props.inputId
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.TitledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckBoxItem, { ...newProps, children: " " }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.TitledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    CheckBoxItem,
+    {
+      ...newProps,
+      checkboxDescription: props.checkboxDescription
+    }
+  ) });
 };
 const CheckBoxGroup = (props) => {
   const { children, ...restProps } = props;

package/cjs/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-B6g8Gfrb.js';
+import { E as ErrorSummaryProps } from './index-CufC9u5W.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-B6g8Gfrb.js';
+import { P as PasswordInputProps } from './index-CufC9u5W.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CufC9u5W.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-B6g8Gfrb.js';
+import { T as TextInputProps } from './index-CufC9u5W.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/Feedback.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-B6g8Gfrb.js';
+import { a as FeedbackProps } from '../index-CufC9u5W.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/FormField.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B6g8Gfrb.js';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CufC9u5W.js';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/cjs/{index-B6g8Gfrb.d.ts → index-CufC9u5W.d.ts}

@@ -19,6 +19,7 @@ interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
     feedback?: FeedbackProps;
+    checkboxDescription?: string;
 }
 interface RadioButtonProps extends BaseInputProps {
     inputId: string;

package/cjs/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-B6g8Gfrb.js';
+import './index-CufC9u5W.js';

package/css/main.css

@@ -168,6 +168,9 @@ input[class*=o3-form-text-input][type=text]:disabled {
 .o3-form-input-checkbox__input:disabled + label {
   color: var(--_o3-form-color-use-case-border-disabled);
 }
+.o3-form-input-checkbox__input:disabled + label .o3-form-input-checkbox__description {
+  color: var(--_o3-form-color-use-case-border-disabled);
+}
 .o3-form-input-checkbox__input:checked:disabled + label::before {
   background-color: var(--_o3-form-color-use-case-selected-disabled);
   border-color: var(--_o3-form-color-use-case-selected-disabled);
@@ -231,13 +234,22 @@ input[class*=o3-form-text-input][type=text]:disabled {
 }
 .o3-form-input-checkbox__label {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   font-family: var(--o3-type-body-base-font-family);
   font-size: var(--o3-type-body-base-font-size);
   font-weight: var(--o3-type-body-base-font-weight);
   line-height: var(--o3-type-body-base-line-height);
   color: var(--o3-color-use-case-body-text);
 }
+.o3-form-input-checkbox__description {
+  display: block;
+  font-family: var(--o3-type-detail-font-family);
+  font-size: var(--o3-type-detail-font-size);
+  font-weight: var(--o3-type-detail-font-weight);
+  line-height: var(--o3-type-detail-line-height);
+  color: var(--o3-color-use-case-body-text);
+  margin-top: var(--o3-spacing-4xs);
+}
 
 /* src/css/components/radio-button.css */
 .o3-form-input-radio-button + label::before {

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CufC9u5W.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/CheckBox.js

@@ -4,7 +4,7 @@ import { uidBuilder } from "@financial-times/o-utils";
 import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
 const uniqueId = uidBuilder("o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
-  let { inputId, attributes, optional, error } = props;
+  let { inputId, checkboxDescription, attributes, optional, error } = props;
   if (!inputId) {
     inputId = uniqueId("_");
   }
@@ -24,7 +24,10 @@ const CheckBoxItem = (props) => {
         "aria-required": !optional
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: props.checkboxLabel })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: /* @__PURE__ */ jsxs("span", { children: [
+      props.checkboxLabel,
+      checkboxDescription && /* @__PURE__ */ jsx("span", { className: "o3-form-input-checkbox__description", children: checkboxDescription })
+    ] }) })
   ] });
 };
 const CheckBox = (props) => {
@@ -33,7 +36,13 @@ const CheckBox = (props) => {
     labelId: props.inputId,
     descriptionId: props.inputId
   };
-  return /* @__PURE__ */ jsx(TitledFormField, { ...newProps, children: /* @__PURE__ */ jsx(CheckBoxItem, { ...newProps, children: " " }) });
+  return /* @__PURE__ */ jsx(TitledFormField, { ...newProps, children: /* @__PURE__ */ jsx(
+    CheckBoxItem,
+    {
+      ...newProps,
+      checkboxDescription: props.checkboxDescription
+    }
+  ) });
 };
 const CheckBoxGroup = (props) => {
   const { children, ...restProps } = props;

package/esm/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-B6g8Gfrb.js';
+import { E as ErrorSummaryProps } from './index-CufC9u5W.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-B6g8Gfrb.js';
+import { P as PasswordInputProps } from './index-CufC9u5W.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CufC9u5W.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-B6g8Gfrb.js';
+import { T as TextInputProps } from './index-CufC9u5W.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/Feedback.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-B6g8Gfrb.mjs';
+import { a as FeedbackProps } from '../index-CufC9u5W.mjs';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/FormField.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B6g8Gfrb.mjs';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CufC9u5W.mjs';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/esm/{index-B6g8Gfrb.d.ts → index-CufC9u5W.d.ts}

@@ -19,6 +19,7 @@ interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
     feedback?: FeedbackProps;
+    checkboxDescription?: string;
 }
 interface RadioButtonProps extends BaseInputProps {
     inputId: string;

package/esm/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-B6g8Gfrb.js';
+import './index-CufC9u5W.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.5.4",
+	"version": "0.6.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",