@financial-times/o3-form 0.3.3 → 0.5.0

package/esm/RadioButton.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { uidBuilder } from "@financial-times/o-utils";
+import { FormFieldset } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-radio-button-input");
+const RadioButtonItem = (props) => {
+  let { inputId, attributes, optional, error } = props;
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
+  const classNames = ["o3-form-input-radio-button", "o3-visually-hidden"];
+  if (error) {
+    classNames.push("o3-form-input-error");
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...attributes,
+        type: "radio",
+        id: inputId,
+        className: classNames.join(" "),
+        required: !optional,
+        "aria-required": !optional
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input-radio-button__label", children: props.radioButtonLabel })
+  ] });
+};
+const RadioButtonGroup = (props) => {
+  const { children, ...restProps } = props;
+  const radioGroupName = Math.random().toString(36).substring(7);
+  return /* @__PURE__ */ jsx(FormFieldset, { ...restProps, children: children.map((child) => {
+    const hasError = props.feedback?.errorElementIds?.includes(
+      child.props.inputId
+    );
+    return /* @__PURE__ */ createElement(
+      RadioButtonItem,
+      {
+        ...child.props,
+        error: hasError,
+        key: child.props.inputId,
+        attributes: {
+          ...child.props.attributes,
+          name: radioGroupName
+        }
+      }
+    );
+  }) });
+};
+export {
+  RadioButtonGroup,
+  RadioButtonItem
+};

package/esm/TextInput.d.ts

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

package/esm/TextInput.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import "../../main.css";
+import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -11,6 +12,7 @@ const TextInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -24,16 +26,17 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId,
+      inputId: id,
+      optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
           ...attributes,
-          id: inputId,
+          id,
           disabled,
           className: inputClasses.join(" "),
-          required: optional,
-          "aria-required": optional,
+          required: !optional,
+          "aria-required": !optional,
           maxLength: length,
           type: "text"
         }

package/esm/fieldComponents/Feedback.d.mts

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

package/esm/fieldComponents/Feedback.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const Feedback = ({ message, type }) => {
+  return /* @__PURE__ */ jsx("div", { className: `o3-form-feedback o3-form-feedback__${type}`, children: /* @__PURE__ */ jsx("span", { className: `o3-form-feedback__${type}-message`, children: message }) });
+};
+export {
+  Feedback
+};

package/esm/fieldComponents/Form.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Form: ({ children }: {
+    children: JSX.Element | JSX.Element[];
+}) => react_jsx_runtime.JSX.Element;
+
+export { Form };

package/esm/fieldComponents/Form.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const Form = ({ children }) => {
+  return /* @__PURE__ */ jsx("form", { className: "o3-form", children });
+};
+export {
+  Form
+};

package/esm/fieldComponents/FormField.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.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;
+declare const FormFieldset: ({ label, description, feedback, children, optional, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { FormFieldset, LabeledFormField, TitledFormField };

package/esm/fieldComponents/FormField.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
+import { Feedback } from "./Feedback";
+const uniqueId = uidBuilder("o3-form");
+const LabeledFormField = ({
+  inputId,
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const id = inputId || uniqueId("input_");
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelClasses = ["o3-form-field__label"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ jsx("label", { className: labelClasses.join(" "), htmlFor: id, children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+const TitledFormField = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelId = uniqueId("label_");
+  const labelClasses = ["o3-form-field__title"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ jsx("span", { className: labelClasses.join(" "), id: labelId, children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+const FormFieldset = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = uniqueId("checkbox_");
+  const labelClasses = ["o3-form-field__legend"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("fieldset", { className: "o3-form-field", "aria-describedby": `${descriptionId}`, children: [
+    /* @__PURE__ */ jsxs("legend", { className: labelClasses.join(" "), children: [
+      label,
+      " ",
+      description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description })
+    ] }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+export {
+  FormFieldset,
+  LabeledFormField,
+  TitledFormField
+};

package/esm/{index-BZth9mTZ.d.ts → index-D6jDTWIC.d.ts}

@@ -6,21 +6,30 @@ type BaseInputProps = {
     error?: boolean;
     attributes?: JSX.IntrinsicElements['input'];
 };
-interface TextInputProps extends FormFieldProps {
+interface TextInputProps extends BaseInputProps {
     disabled?: boolean;
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface PasswordInputProps extends BaseInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
     feedback?: FeedbackProps;
 }
+interface RadioButtonProps extends BaseInputProps {
+    inputId: string;
+    radioButtonLabel: string;
+}
 interface FormFieldsetProps {
     label: string;
     description?: string;
     children: JSX.Element | JSX.Element[];
     feedback?: FeedbackProps;
+    optional?: boolean;
 }
 interface FormFieldProps extends BaseInputProps {
     feedback?: FeedbackProps;
@@ -31,5 +40,13 @@ type FeedbackProps = {
     message: string;
     type: 'error';
 };
+type ErrorSummaryProps = {
+    errorMessage?: string;
+    errors: {
+        id: string;
+        fieldName: string;
+        message: string;
+    }[];
+};
 
-export type { CheckBoxProps as C, FeedbackProps as F, TextInputProps as T, FormFieldProps as a, FormFieldsetProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };

package/esm/index.d.ts

@@ -1,15 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
+export { Feedback } from './fieldComponents/Feedback.js';
+export { FormFieldset, LabeledFormField, TitledFormField } from './fieldComponents/FormField.js';
+export { Form } from './fieldComponents/Form.js';
 export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
-
-declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
-
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
-
-declare const Form: ({ children }: {
-    children: JSX.Element | JSX.Element[];
-}) => react_jsx_runtime.JSX.Element;
-
-export { Feedback, Form, FormFieldset, LabeledFormField, TitledFormField };
+export { RadioButtonGroup, RadioButtonItem } from './RadioButton.js';
+export { ErrorSummary } from './Error-summary.js';
+export { PasswordInput } from './PasswordInput.js';
+export { TextInput } from './TextInput.js';
+import 'react/jsx-runtime';
+import './index-D6jDTWIC.js';

package/esm/index.js

@@ -2,3 +2,7 @@ export * from "./fieldComponents/Feedback";
 export * from "./fieldComponents/FormField";
 export * from "./fieldComponents/Form";
 export * from "./CheckBox";
+export * from "./RadioButton";
+export * from "./Error-summary";
+export * from "./PasswordInput";
+export * from "./TextInput";

package/package.json

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