@financial-times/o3-form 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +332 -45
  2. package/cjs/CheckBox.d.ts +1 -1
  3. package/cjs/CheckBox.js +1 -1
  4. package/cjs/TextInput.d.ts +1 -1
  5. package/cjs/TextInput.js +1 -0
  6. package/cjs/{index-BP51ZwQo.d.ts → index-BZth9mTZ.d.ts} +1 -0
  7. package/cjs/index.d.ts +3 -3
  8. package/css/main.css +28 -14
  9. package/css/whitelabel.css +3 -3
  10. package/esm/CheckBox.d.ts +1 -1
  11. package/esm/CheckBox.js +2 -2
  12. package/esm/TextInput.d.ts +1 -1
  13. package/esm/TextInput.js +1 -0
  14. package/esm/{index-BP51ZwQo.d.ts → index-BZth9mTZ.d.ts} +1 -0
  15. package/esm/index.d.ts +3 -3
  16. package/package.json +2 -2
package/README.md CHANGED
@@ -2,28 +2,173 @@
2
2
 
3
3
  Provides components to construct forms.
4
4
 
5
+ - [Overview](#overview)
6
+ - [Components](#components)
7
+ - [Form](#form)
8
+ - [Form Field, Form Fieldset and Feedback](#form-field-form-fieldset-and-feedback)
9
+ - [Text Input](#text-input)
10
+ - [Short text input](#short-text-input)
11
+ - [Checkbox](#checkbox)
12
+ - [Checkbox Group](#checkbox-group)
13
+ - [Contact](#contact)
14
+ - [Licence](#licence)
15
+
5
16
  ## Overview
6
17
 
7
18
  o3-form provides UI form elements with consistent labelling, descriptions, and error styles and interfaces.
8
19
 
9
20
  ## Components
10
21
 
22
+ ### Form
23
+
24
+ Form is the top-level component that wraps all form elements. It can be used as plain HTML:
25
+
26
+ ```html
27
+ <form class="o3-form">
28
+ <!-- form elements go here -->
29
+ </form>
30
+ ```
31
+
32
+ Or users can also import JSX components:
33
+
34
+ ```tsx
35
+ import {Form} from '@financial-times/o3-form/cjs'; // or esm
36
+
37
+ <Form>
38
+ <!-- form elements go here -->
39
+ </Form>;
40
+ ```
41
+
42
+ | Prop | Description | required | Type | Default |
43
+ | ---------- | -------------------------------- | -------- | ---- | ------- |
44
+ | `children` | The form elements to be rendered | true | any | - |
45
+
46
+ ### Form Field, Form Fieldset and Feedback
47
+
48
+ Form Field components can be complex and contain multiple elements. Form Field and Form Fieldset are containers for form elements. Shared anatomy of Form Field and Form Fieldset looks like composition of the following elements:
49
+
50
+ ```html
51
+ <form>
52
+ <form-field-element>
53
+ <title-label-element>
54
+ Title/Label
55
+ </title-label-element>
56
+ <description-element>
57
+ Description
58
+ </description-element>
59
+ <!-- form elements go here -->
60
+ <feedback-element>
61
+ Feedback
62
+ </feedback-element>
63
+ </form-field>
64
+ </form>
65
+ ```
66
+
67
+ We are using Title and Label interchangeably. But we export two JSX components from `o3-form` package: `TitledFormField` and `LabeledFormField`. Both components are similar but `TitledFormField` is used with checkboxes, radio buttons and use-cases when `<label>` element needs to be part of form element or more flexibility is require. `LabeledFormField` is used with other text inputs.
68
+
69
+ The main difference between them is HTML they output. `TitledFormField` outputs:
70
+
71
+ ```html
72
+ <div className="o3-form-field">
73
+ <span className="o3-form-field__title" id="{labelId}"> Title </span>
74
+ <!--- Description -->
75
+ {children}
76
+ <!--- Feedback --->
77
+ </div>
78
+ ```
79
+
80
+ And `LabeledFormField` outputs:
81
+
82
+ ```html
83
+ <div className="o3-form-field">
84
+ <label className="o3-form-field__label" htmlFor="{id}"> label </label>
85
+ <!--- Description -->
86
+ {children}
87
+ <!--- Feedback --->
88
+ </div>
89
+ ```
90
+
91
+ `TitleFormField` expects children to contain both `<input>` and `<label>` elements, which helps us a lot with checkboxes and radio buttons. `LabeledFormField` expects children to contain only `<input>` element. Two components in JSX can be used as follows:
92
+
93
+ ```tsx
94
+ import {
95
+ Form,
96
+ TitledFormField,
97
+ LabeledFormField,
98
+ CheckBoxItem,
99
+ } from '@financial-times/o3-form/cjs'; // or esm
100
+
101
+ <Form>
102
+ <TitledFormField label="Title for checkbox" description="Description">
103
+ <input type="checkbox" id={inputId} />
104
+ <label htmlFor={inputId}>Checkbox Label</label>
105
+ </TitledFormField>
106
+
107
+ <LabeledFormField
108
+ label="Label for text input"
109
+ description="Description"
110
+ inputId={inputId}>
111
+ <input type="text" id={inputId} />
112
+ </LabeledFormField>
113
+ </Form>;
114
+ ```
115
+
116
+ Form Field and Form Fieldset components have same props:
117
+
118
+ | Prop | Description | required | Type | Default |
119
+ | ------------- | -------------------------------------------------------------------------------------------------- | -------- | ------ | ------- |
120
+ | `label` | The label for the form fieldset | true | string | - |
121
+ | `inputId` | The id of the form input element | false | string | - |
122
+ | `description` | A description of the form fieldset | false | string | - |
123
+ | `children` | The form elements to be rendered | true | any | - |
124
+ | `feedback` | The feedback object for the form fieldset that contains `message` and `type` of message properties | false | string | - |
125
+
126
+ Form Fieldset is used to group related form elements together such as checkboxes. They can be used as plain HTML:
127
+
128
+ ```html
129
+ <form class="o3-form">
130
+ <div class="o3-form-field">
131
+ <fieldset className="o3-form-field" aria-describedby="descriptionId">
132
+ <legend className="o3-form-field__legend ">
133
+ Field group label/title
134
+ </legend>
135
+ <span className="o3-form-input__description" id="descriptionId">
136
+ description of the field group
137
+ </span>
138
+ <!-- form elements go here -->
139
+ </fieldset>
140
+ </div>
141
+ </form>
142
+ ```
143
+
144
+ Or users can also import JSX components:
145
+
146
+ ```tsx
147
+ import {Form, FormFieldset} from '@financial-times/o3-form/cjs'; // or esm
148
+
149
+ <Form>
150
+ <FormFieldset label="Field group label/title" description="description of the field group">
151
+ <!-- form elements go here -->
152
+ </FormFieldset>
153
+ </Form>;
154
+ ```
155
+
156
+ | Prop | Description | required | Type | Default |
157
+ | ------------- | -------------------------------------------------------------------------------------------------- | -------- | ------ | ------- |
158
+ | `label` | The label for the form fieldset | true | string | - |
159
+ | `description` | A description of the form fieldset | false | string | - |
160
+ | `children` | The form elements to be rendered | true | any | - |
161
+ | `feedback` | The feedback object for the form fieldset that contains `message` and `type` of message properties | false | string | - |
162
+
11
163
  ### Text Input
12
164
 
13
165
  A standard text input for collecting text values.
14
166
  label: 'Full name',
15
167
  description: 'Your full name as printed on your driving license',
16
168
 
17
- ```tsx
18
- <TextInput label='Full name'
19
- disabled={false}
20
- description='Your full name as printed on your driving license'
21
- />
22
- ```
23
-
24
169
  **HTML**
25
170
 
26
- ```
171
+ ```html
27
172
  <div data-o3-brand="whitelabel">
28
173
  <div class="o3-form-field">
29
174
  <label for="my-input-field">Full name</label>
@@ -37,66 +182,208 @@ description: 'Your full name as printed on your driving license',
37
182
  </div>
38
183
  ```
39
184
 
185
+ **JSX**
186
+
187
+ ```tsx
188
+ import {TextInput} from '@financial-times/o3-form/cjs'; // or esm
189
+
190
+ <TextInput
191
+ label="Full name"
192
+ disabled="{false}"
193
+ description="Your full name as printed on your driving license"
194
+ />
195
+ ```
196
+
40
197
  #### Short text input
41
198
 
42
199
  The size and max length of the text input can be limited with the `length` property.
43
200
 
201
+ **HTML**
202
+
44
203
  ```html
204
+ <div class="o3-form-field">
205
+ <label for="my-input-field">Security Code</label>
206
+ <span class="o3-form-input-description">
207
+ 3 digit security code as printed on the back of your credit card.
208
+ </span>
209
+ <input
210
+ id="my-input-field"
211
+ class="o3-form o3-form-text-input o3-form-text-input--short-3"
212
+ maxlength="3"
213
+ type="text"
214
+ />
215
+ </div>
216
+ ```
45
217
 
46
- <TextInput label="Security code"
47
- description="3 digit security code as printed on the back of your credit card."
48
- length={3} />;
218
+ **JSX**
219
+
220
+ ```tsx
221
+ import {TextInput} from '@financial-times/o3-form/cjs'; // or esm
222
+
223
+ <TextInput
224
+ label="Security code"
225
+ description="3 digit security code as printed on the back of your credit card."
226
+ length="{3}"
227
+ />;
49
228
  ```
50
229
 
230
+ This will provide a text box 3 characters wide and only allow 3 characters to be typed.
231
+
232
+ If you prefer to limit the length without styling, use the `maxLength` attribute instead.
233
+
51
234
  **HTML**
52
235
 
53
236
  ```html
54
237
  <div class="o3-form-field">
55
- <label for="my-input-field">Security Code</label>
56
- <span
57
- class="o3-form-input-description"
58
- >
59
- 3 digit security code as printed on the back of your credit card.
60
- </span>
61
- <input
62
- id="my-input-field"
63
- class="o3-form o3-form-text-input o3-form-text-input--short-3"
64
- maxlength="3"
65
- type="text"
66
- />
238
+ <label for="my-input-field">Security Code</label>
239
+ <span class="o3-form-input-description">
240
+ 3 digit security code as printed on the back of your credit card.
241
+ </span>
242
+ <input
243
+ id="my-input-field"
244
+ class="o3-form o3-form-text-input"
245
+ maxlength="3"
246
+ type="text"
247
+ />
248
+ </div>
67
249
  ```
68
250
 
69
- This will provide a text box 3 characters wide and only allow 3 characters to be typed.
251
+ **JSX**
70
252
 
71
- If you prefer to limit the length without styling, use the `maxLength` attribute instead.
253
+ ```tsx
254
+ import {TextInput} from '@financial-times/o3-form/cjs'; // or esm
255
+
256
+ <TextInput
257
+ label="Security code"
258
+ description="3 digit security code as printed on the back of your credit card."
259
+ feedback={args.feedback}
260
+ attributes={{
261
+ maxLength: 3,
262
+ }}
263
+ />
264
+ ```
265
+
266
+ ### Checkbox
267
+
268
+ A customizable and accessible checkbox input for selecting one or more items from a list, or turning an item on or off. Checkbox can also have a state of `indeterminate` and `o3-form` provides styling, for `indeterminate` state but this state can only be set using javaScript. Read more about [indeterminate state](https://css-tricks.com/indeterminate-checkboxes/).
269
+
270
+ Checkboxes can be used as plain HTML:
271
+
272
+ ```html
273
+ <form class="o3-form">
274
+ <div class="o3-form-field">
275
+ <span class="o3-form-field__title" id="o3-form-label_Demo_ID">
276
+ Check this box
277
+ </span>
278
+ <span class="o3-form-input__description" id="o3-form-description_DEMO_ID">
279
+ Please check the box to continue
280
+ </span>
281
+ <div class="o3-form-input__checkbox">
282
+ <input
283
+ type="checkbox"
284
+ id="checkbox_1"
285
+ class="o3-form-input__checkbox-input o3-visually-hidden"
286
+ required=""
287
+ aria-required="true"
288
+ />
289
+ <label for="checkbox_1" class="o3-form-input__checkbox-label">
290
+ I agree to the terms and conditions
291
+ </label>
292
+ </div>
293
+ </div>
294
+ </form>
295
+ ```
296
+
297
+ Or users can also import JSX components:
72
298
 
73
299
  ```tsx
74
- <TextInput label="Security code"
75
- description="3 digit security code as printed on the back of your credit card."
76
- feedback={args.feedback}
77
- attributes={{
78
- maxLength: 3
79
- }} />;
300
+ import {CheckBox, TitledFormField} from '@financial-times/o3-form/cjs'; // or esm
301
+
302
+ <TitledFormField>
303
+ <CheckBox
304
+ inputId="terms"
305
+ checkboxLabel="I agree to the terms and conditions"
306
+ optional={false}
307
+ />
308
+ ;
309
+ </TitledFormField>;
80
310
  ```
81
311
 
82
- **HTML**
312
+ | Prop | Description | required | Type | Default |
313
+ | --------------- | --------------------------------------------------------------------------------------------- | -------- | ------- | ------- |
314
+ | `inputId` | The id of the checkbox input | true | string | - |
315
+ | `checkboxLabel` | The label for the checkbox | true | string | - |
316
+ | `feedback` | The feedback object for the checkbox that contains `message` and `type` of message properties | false | string | - |
317
+ | `optional` | Whether the checkbox is optional | false | boolean | - |
318
+ | `label` | The title for the checkbox | false | string | - |
319
+ | `description` | A description of the checkbox | false | string | - |
320
+
321
+ #### Checkbox Group
322
+
323
+ For multiple related checkboxes, use the CheckBoxGroup component:
83
324
 
84
325
  ```html
85
- <div class="o3-form-field">
86
- <label for="my-input-field">Security Code</label>
87
- <span
88
- class="o3-form-input-description"
89
- >
90
- 3 digit security code as printed on the back of your credit card.
91
- </span>
92
- <input
93
- id="my-input-field"
94
- class="o3-form o3-form-text-input"
95
- maxlength="3"
96
- type="text"
97
- />
326
+ <form class="o3-form">
327
+ <fieldset
328
+ class="o3-form-field"
329
+ aria-describedby="o3-form-Interest-description"
330
+ >
331
+ <legend class="o3-form-field__legend">Select your interests</legend>
332
+ <span class="o3-form-input__description" id="o3-form-Interest-description2">
333
+ Choose all interests that apply
334
+ </span>
335
+ <div class="o3-form-input__checkbox">
336
+ <input
337
+ type="checkbox"
338
+ id="interest-tech"
339
+ class="o3-form-input__checkbox-input o3-visually-hidden"
340
+ />
341
+ <label for="interest-tech" class="o3-form-input__checkbox-label">
342
+ Technology
343
+ </label>
344
+ </div>
345
+ <div class="o3-form-input__checkbox">
346
+ <input
347
+ type="checkbox"
348
+ id="interest-finance"
349
+ class="o3-form-input__checkbox-input o3-visually-hidden"
350
+ />
351
+ <label for="interest-finance" class="o3-form-input__checkbox-label">
352
+ Finance
353
+ </label>
354
+ </div>
355
+ <div class="o3-form-input__checkbox">
356
+ <input
357
+ type="checkbox"
358
+ id="interest-sports"
359
+ class="o3-form-input__checkbox-input o3-visually-hidden"
360
+ />
361
+ <label for="interest-sports" class="o3-form-input__checkbox-label">
362
+ Sports
363
+ </label>
364
+ </div>
365
+ </fieldset>
366
+ </form>
367
+ ```
368
+
369
+ ```tsx
370
+ import {CheckBoxGroup, CheckBoxItem} from '@financial-times/o3-form/cjs'; // or esm
371
+
372
+ <CheckBoxGroup
373
+ label="Select your interests"
374
+ description="Choose all that apply">
375
+ <CheckBoxItem inputId="interest-tech" checkboxLabel="Technology" />
376
+ <CheckBoxItem inputId="interest-finance" checkboxLabel="Finance" />
377
+ <CheckBoxItem inputId="interest-sports" checkboxLabel="Sports" />
378
+ </CheckBoxGroup>;
98
379
  ```
99
380
 
381
+ | Attribute | Description | Type | Default |
382
+ | ------------- | ---------------------------------------- | ---------- | ------- |
383
+ | `label` | The label for the group of checkboxes | string | |
384
+ | `description` | A description of the group of checkboxes | string | |
385
+ | `children` | The checkboxes to be rendered | CheckBox[] | |
386
+
100
387
  ## Contact
101
388
 
102
389
  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).
package/cjs/CheckBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
2
+ import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
3
3
 
4
4
  declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
package/cjs/CheckBox.js CHANGED
@@ -28,7 +28,7 @@ const CheckBox = (props) => {
28
28
  labelId: props.inputId,
29
29
  descriptionId: props.inputId
30
30
  };
31
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.LabeledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckBoxItem, { ...newProps, children: " " }) });
31
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.TitledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckBoxItem, { ...newProps, children: " " }) });
32
32
  };
33
33
  const CheckBoxGroup = (props) => {
34
34
  const { children, ...restProps } = props;
package/cjs/TextInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { T as TextInputProps } from './index-BP51ZwQo.js';
2
+ import { T as TextInputProps } from './index-BZth9mTZ.js';
3
3
 
4
4
  declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/cjs/TextInput.js CHANGED
@@ -24,6 +24,7 @@ const TextInput = ({
24
24
  label,
25
25
  feedback,
26
26
  description,
27
+ inputId,
27
28
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
28
29
  "input",
29
30
  {
package/cjs/{index-BP51ZwQo.d.ts → index-BZth9mTZ.d.ts} RENAMED
@@ -14,6 +14,7 @@ interface TextInputProps extends FormFieldProps {
14
14
  interface CheckBoxProps extends BaseInputProps {
15
15
  inputId: string;
16
16
  checkboxLabel: string;
17
+ feedback?: FeedbackProps;
17
18
  }
18
19
  interface FormFieldsetProps {
19
20
  label: string;
package/cjs/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
2
+ import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
3
3
  export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
4
4
 
5
5
  declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
6
6
 
7
- declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
8
- declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
7
+ declare const LabeledFormField: ({ inputId, label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
8
+ declare const TitledFormField: ({ label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
9
9
  declare const FormFieldset: ({ label, description, feedback, children, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
10
10
 
11
11
  declare const Form: ({ children }: {
package/css/main.css CHANGED
@@ -1,5 +1,3 @@
1
- @import "@financial-times/o3-foundation/grid.css";
2
-
3
1
  /* src/css/components/form.css */
4
2
  .o3-form {
5
3
  font-family: var(--o3-font-family-metric);
@@ -18,8 +16,8 @@
18
16
  border: 0;
19
17
  }
20
18
  .o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend) {
21
- font-size: var(--o3-font-size-metric2-0);
22
- line-height: var(--o3-font-lineheight-metric2-0);
19
+ font-size: var(--o3-font-size-metric2-negative-1);
20
+ line-height: var(--o3-font-lineheight-metric2-negative-1);
23
21
  font-weight: var(--o3-font-weight-medium);
24
22
  color: var(--o3-color-use-case-body-text);
25
23
  }
@@ -33,8 +31,8 @@
33
31
  padding: 0 0 var(--o3-spacing-5xs) 0;
34
32
  }
35
33
  .o3-form-field .o3-form-input__description {
36
- font-size: var(--o3-font-size-metric2-0);
37
- line-height: var(--o3-font-lineheight-metric2-0);
34
+ font-size: var(--o3-font-size-metric2-negative-1);
35
+ line-height: var(--o3-font-lineheight-metric2-negative-1);
38
36
  font-weight: var(--o3-font-weight-regular);
39
37
  color: var(--o3-color-palette-black-60);
40
38
  }
@@ -43,19 +41,34 @@
43
41
  }
44
42
  .o3-form-field__feedback--error {
45
43
  color: var(--o3-color-use-case-error);
46
- font-size: var(--o3-font-size-metric2-0);
44
+ font-size: var(--o3-font-size-metric2-negative-1);
47
45
  }
48
46
 
49
47
  /* src/css/components/feedback.css */
50
48
  .o3-form-feedback__error {
51
49
  display: flex;
52
50
  align-items: center;
53
- font-size: var(--o3-font-size-metric2-0);
54
- line-height: var(--o3-font-lineheight-metric2-0);
51
+ font-size: var(--o3-font-size-metric2-negative-1);
52
+ line-height: var(--o3-font-lineheight-metric2-negative-1);
55
53
  color: var(--o3-color-palette-crimson);
56
54
  }
57
55
  .o3-form-feedback__error-message {
58
- margin-left: var(--o3-spacing-5xs);
56
+ display: flex;
57
+ }
58
+ .o3-form-feedback__error-message::before {
59
+ content: "";
60
+ display: inline-block;
61
+ align-self: center;
62
+ margin-right: var(--o3-spacing-5xs);
63
+ background-color: var(--o3-color-use-case-error);
64
+ width: var(--o3-font-size-metric2-negative-1);
65
+ height: var(--o3-font-size-metric2-negative-1);
66
+ -webkit-mask-image: var(--o3-icons-ft-icon-error);
67
+ mask-image: var(--o3-icons-ft-icon-error);
68
+ -webkit-mask-repeat: no-repeat;
69
+ mask-repeat: no-repeat;
70
+ -webkit-mask-size: contain;
71
+ mask-size: contain;
59
72
  }
60
73
 
61
74
  /* src/css/components/text-input.css */
@@ -63,6 +76,7 @@
63
76
  border: var(--_o3-form-text-input-border);
64
77
  padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs);
65
78
  background-color: var(--_o3-form-text-input-background-color);
79
+ box-sizing: border-box;
66
80
  border-radius: var(--_o3-form-text-input-border-radius);
67
81
  --o3-grid-columns-to-span-count: 4;
68
82
  max-width: var(--_o3-form-text-input-max-width, var(--o3-grid-columns-to-span-width));
@@ -153,8 +167,8 @@
153
167
  width: var(--o3-spacing-s);
154
168
  height: var(--o3-spacing-s);
155
169
  background-color: var(--o3-color-palette-white);
156
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='4' rx='2' fill='%23CC0000'/%3E%3C/svg%3E%0A");
157
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='4' rx='2' fill='%23CC0000'/%3E%3C/svg%3E%0A");
170
+ -webkit-mask-image: var(--o3-icons-ft-icon-minus);
171
+ mask-image: var(--o3-icons-ft-icon-minus);
158
172
  -webkit-mask-repeat: no-repeat;
159
173
  mask-repeat: no-repeat;
160
174
  -webkit-mask-size: contain;
@@ -179,8 +193,8 @@
179
193
  .o3-form-input__checkbox-label {
180
194
  display: flex;
181
195
  align-items: center;
182
- font-size: var(--o3-font-size-metric2-0);
183
- line-height: var(--o3-font-lineheight-metric2-0);
196
+ font-size: var(--o3-font-size-metric2-negative-1);
197
+ line-height: var(--o3-font-lineheight-metric2-negative-1);
184
198
  font-weight: var(--o3-font-weight-regular);
185
199
  color: var(--o3-color-use-case-body-text);
186
200
  }
package/css/whitelabel.css CHANGED
@@ -3,11 +3,11 @@
3
3
 
4
4
  /* src/css/tokens/whitelabel/o3-form/_variables.css */
5
5
  [data-o3-brand=whitelabel] .o3-form {
6
+ --_o3-form-text-input-border-radius: 6px;
7
+ --_o3-form-text-input-background-color-error: rgba(204, 0, 0, 0.06);
8
+ --_o3-form-text-input-background-color: var(--o3-color-palette-white);
6
9
  --_o3-form-text-input-border: 2px solid var(--o3-color-palette-black-30);
7
10
  --_o3-form-text-input-border-error: 2px solid var(--o3-color-use-case-alert-text);
8
- --_o3-form-text-input-background-color: var(--o3-color-palette-white);
9
- --_o3-form-text-input-background-color-error: rgba(204, 0, 0, 0.06);
10
- --_o3-form-text-input-border-radius: 0.375rem;
11
11
  }
12
12
 
13
13
  /* src/css/brands/whitelabel.css */
package/esm/CheckBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
2
+ import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
3
3
 
4
4
  declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
package/esm/CheckBox.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { createElement } from "react";
3
- import { LabeledFormField, FormFieldset } from "./fieldComponents/FormField";
3
+ import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
4
4
  const CheckBoxItem = (props) => {
5
5
  let { inputId, attributes, optional, error } = props;
6
6
  const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
@@ -28,7 +28,7 @@ const CheckBox = (props) => {
28
28
  labelId: props.inputId,
29
29
  descriptionId: props.inputId
30
30
  };
31
- return /* @__PURE__ */ jsx(LabeledFormField, { ...newProps, children: /* @__PURE__ */ jsx(CheckBoxItem, { ...newProps, children: " " }) });
31
+ return /* @__PURE__ */ jsx(TitledFormField, { ...newProps, children: /* @__PURE__ */ jsx(CheckBoxItem, { ...newProps, children: " " }) });
32
32
  };
33
33
  const CheckBoxGroup = (props) => {
34
34
  const { children, ...restProps } = props;
package/esm/TextInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { T as TextInputProps } from './index-BP51ZwQo.js';
2
+ import { T as TextInputProps } from './index-BZth9mTZ.js';
3
3
 
4
4
  declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/esm/TextInput.js CHANGED
@@ -24,6 +24,7 @@ const TextInput = ({
24
24
  label,
25
25
  feedback,
26
26
  description,
27
+ inputId,
27
28
  children: /* @__PURE__ */ jsx(
28
29
  "input",
29
30
  {
package/esm/{index-BP51ZwQo.d.ts → index-BZth9mTZ.d.ts} RENAMED
@@ -14,6 +14,7 @@ interface TextInputProps extends FormFieldProps {
14
14
  interface CheckBoxProps extends BaseInputProps {
15
15
  inputId: string;
16
16
  checkboxLabel: string;
17
+ feedback?: FeedbackProps;
17
18
  }
18
19
  interface FormFieldsetProps {
19
20
  label: string;
package/esm/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BP51ZwQo.js';
2
+ import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
3
3
  export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
4
4
 
5
5
  declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
6
6
 
7
- declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
8
- declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
7
+ declare const LabeledFormField: ({ inputId, label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
8
+ declare const TitledFormField: ({ label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
9
9
  declare const FormFieldset: ({ label, description, feedback, children, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
10
10
 
11
11
  declare const Form: ({ children }: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o3-form",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
5
5
  "keywords": [
6
6
  "form",
@@ -36,7 +36,7 @@
36
36
  "peerDependencies": {
37
37
  "@financial-times/o-utils": "^2.2.1",
38
38
  "@financial-times/o3-figma-sb-links": "^0.0.0",
39
- "@financial-times/o3-foundation": "^1.2.0"
39
+ "@financial-times/o3-foundation": "^2.0.0"
40
40
  },
41
41
  "engines": {
42
42
  "npm": ">7"