@financial-times/o3-form 0.2.0 → 0.3.1

package/README.md

@@ -1 +1,108 @@
 # o3-form[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
+
+Provides components to construct forms.
+
+## Overview
+
+o3-form provides UI form elements with consistent labelling, descriptions, and error styles and interfaces.
+
+## Components
+
+### Text Input
+
+A standard text input for collecting text values.
+label: 'Full name',
+description: 'Your full name as printed on your driving license',
+
+```tsx
+    <TextInput label='Full name'
+			   disabled={false}
+			   description='Your full name as printed on your driving license'
+/>
+```
+
+**HTML**
+
+```
+<div data-o3-brand="whitelabel">
+  <div class="o3-form-field">
+    <label for="my-input-field">Full name</label>
+    <span
+      class="o3-form-input-description"
+    >
+      Your full name as printed on your driving license
+    </span>
+    <input id="my-input-field" class="o3-form o3-form-text-input" type="text" />
+  </div>
+</div>
+```
+
+#### Short text input
+
+The size and max length of the text input can be limited with the `length` property.
+
+```html
+
+<TextInput label="Security code"
+		   description="3 digit security code as printed on the back of your credit card."
+		   length={3} />;
+```
+
+**HTML**
+
+```html
+<div class="o3-form-field">
+	<label for="my-input-field">Security Code</label>
+	<span
+		class="o3-form-input-description"
+	>
+      3 digit security code as printed on the back of your credit card.
+    </span>
+	<input
+		id="my-input-field"
+		class="o3-form o3-form-text-input o3-form-text-input--short-3"
+		maxlength="3"
+		type="text"
+	/>
+```
+
+This will provide a text box 3 characters wide and only allow 3 characters to be typed.
+
+If you prefer to limit the length without styling, use the `maxLength` attribute instead.
+
+```tsx
+    <TextInput label="Security code"
+			   description="3 digit security code as printed on the back of your credit card."
+			   feedback={args.feedback}
+			   attributes={{
+				   maxLength: 3
+			   }} />;
+```
+
+**HTML**
+
+```html
+<div class="o3-form-field">
+	<label for="my-input-field">Security Code</label>
+	<span
+		class="o3-form-input-description"
+	>
+      3 digit security code as printed on the back of your credit card.
+    </span>
+	<input
+		id="my-input-field"
+		class="o3-form o3-form-text-input"
+		maxlength="3"
+		type="text"
+	/>
+```
+
+## Contact
+
+If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o3-editorial-typography/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).
+
+---
+
+## Licence
+
+This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).

package/cjs/CheckBox.d.ts

@@ -1,2 +1,8 @@
-import 'react/jsx-runtime';
-export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
+
+declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
+declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
+declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { CheckBox, CheckBoxGroup, CheckBoxItem };

package/cjs/TextInput.d.ts

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

package/cjs/TextInput.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+require('../../main.css');
+var _FormField = require('./fieldComponents/FormField');
+const TextInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  length,
+  attributes,
+  inputId,
+  optional
+}) => {
+  const inputClasses = ["o3-form", "o3-form-text-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-input--error");
+  }
+  if (length) {
+    inputClasses.push(`o3-form-text-input--short-${length}`);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _FormField.LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ...attributes,
+          id: inputId,
+          disabled,
+          className: inputClasses.join(" "),
+          required: optional,
+          "aria-required": optional,
+          maxLength: length,
+          type: "text"
+        }
+      )
+    }
+  );
+};
+
+
+exports.TextInput = TextInput;

package/cjs/{CheckBox-DRFC93iL.d.ts → index-BP51ZwQo.d.ts}

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
 type BaseInputProps = {
     inputId?: string;
     label?: string;
@@ -8,6 +6,11 @@ type BaseInputProps = {
     error?: boolean;
     attributes?: JSX.IntrinsicElements['input'];
 };
+interface TextInputProps extends FormFieldProps {
+    disabled?: boolean;
+    length?: 2 | 3 | 4 | 5;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
@@ -28,8 +31,4 @@ type FeedbackProps = {
     type: 'error';
 };
 
-declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
-declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
-declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
-
-export { CheckBoxItem as C, type FeedbackProps as F, type FormFieldProps as a, type FormFieldsetProps as b, CheckBox as c, CheckBoxGroup as d };
+export type { CheckBoxProps as C, FeedbackProps as F, TextInputProps as T, FormFieldProps as a, FormFieldsetProps as b };

package/cjs/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './CheckBox-DRFC93iL.js';
-export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
+import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
+export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/css/main.css

@@ -1,3 +1,5 @@
+@import "@financial-times/o3-foundation/grid.css";
+
 /* src/css/components/form.css */
 .o3-form {
   font-family: var(--o3-font-family-metric);
@@ -56,6 +58,32 @@
   margin-left: var(--o3-spacing-5xs);
 }
 
+/* src/css/components/text-input.css */
+.o3-form-text-input {
+  border: var(--_o3-form-text-input-border);
+  padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs);
+  background-color: var(--_o3-form-text-input-background-color);
+  border-radius: var(--_o3-form-text-input-border-radius);
+  --o3-grid-columns-to-span-count: 4;
+  max-width: var(--_o3-form-text-input-max-width, var(--o3-grid-columns-to-span-width));
+}
+.o3-form-text-input--short-2 {
+  --_o3-form-text-input-max-width: 1.5em;
+}
+.o3-form-text-input--short-3 {
+  --_o3-form-text-input-max-width: 2.5em;
+}
+.o3-form-text-input--short-4 {
+  --_o3-form-text-input-max-width: 3.5em;
+}
+.o3-form-text-input--short-5 {
+  --_o3-form-text-input-max-width: 4.5em;
+}
+.o3-form-text-input--error {
+  border: var(--_o3-form-text-input-border-error);
+  background-color: var(--_o3-form-text-input-background-color-error);
+}
+
 /* src/css/components/checkbox.css */
 .o3-form-input__checkbox-input + label::before {
   content: "";

package/css/whitelabel.css

@@ -1,4 +1,13 @@
 @import "@financial-times/o3-foundation/css/whitelabel.css";
 @import "./main.css";
 
+/* src/css/tokens/whitelabel/o3-form/_variables.css */
+[data-o3-brand=whitelabel] .o3-form {
+  --_o3-form-text-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-text-input-border-error: 2px solid var(--o3-color-use-case-alert-text);
+  --_o3-form-text-input-background-color: var(--o3-color-palette-white);
+  --_o3-form-text-input-background-color-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-text-input-border-radius: 0.375rem;
+}
+
 /* src/css/brands/whitelabel.css */

package/esm/CheckBox.d.ts

@@ -1,2 +1,8 @@
-import 'react/jsx-runtime';
-export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
+
+declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
+declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
+declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { CheckBox, CheckBoxGroup, CheckBoxItem };

package/esm/TextInput.d.ts

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

package/esm/TextInput.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import "../../main.css";
+import { LabeledFormField } from "./fieldComponents/FormField";
+const TextInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  length,
+  attributes,
+  inputId,
+  optional
+}) => {
+  const inputClasses = ["o3-form", "o3-form-text-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-input--error");
+  }
+  if (length) {
+    inputClasses.push(`o3-form-text-input--short-${length}`);
+  }
+  return /* @__PURE__ */ jsx(
+    LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...attributes,
+          id: inputId,
+          disabled,
+          className: inputClasses.join(" "),
+          required: optional,
+          "aria-required": optional,
+          maxLength: length,
+          type: "text"
+        }
+      )
+    }
+  );
+};
+export {
+  TextInput
+};

package/esm/{CheckBox-DRFC93iL.d.ts → index-BP51ZwQo.d.ts}

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
 type BaseInputProps = {
     inputId?: string;
     label?: string;
@@ -8,6 +6,11 @@ type BaseInputProps = {
     error?: boolean;
     attributes?: JSX.IntrinsicElements['input'];
 };
+interface TextInputProps extends FormFieldProps {
+    disabled?: boolean;
+    length?: 2 | 3 | 4 | 5;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
@@ -28,8 +31,4 @@ type FeedbackProps = {
     type: 'error';
 };
 
-declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
-declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
-declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
-
-export { CheckBoxItem as C, type FeedbackProps as F, type FormFieldProps as a, type FormFieldsetProps as b, CheckBox as c, CheckBoxGroup as d };
+export type { CheckBoxProps as C, FeedbackProps as F, TextInputProps as T, FormFieldProps as a, FormFieldsetProps as b };

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './CheckBox-DRFC93iL.js';
-export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
+import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
+export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/package.json

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