docs: Add rest of the docs for o3 form (#1852)

* docs: add initial strucutre for forms documentation

* chore: implement test version of tip component

* chore: initialise guidlines for form elements
craete tip component

* chore: introduce copy, heading and tip content

* fix: fix issues with tsx components in nested folders not compailing

* feat: add optional on text-input and password element
- display optional element with classnames instead of using complicated selector
- update sb demos to display optional next to labels
- update TextInputProps interface to extend BaseinputProps instead of FromFieldprops
- Run code formating on passowrd.tsx and input.tsx

* chore: generate sb-figma links for other brands

* feat: - add new guidelines for required-optional example
- update name of a placement-order guideline so there is some consistency

* chore: add o3-form class wrapper so styles apply correctly

* fix: fix issue with astro build by adding postcss config

* feat: change Tip componene API and use array instead of slots for sources

* feat: add styles to form wrapper so it has proper gap, is always aligned left and is stacked vertically

* docs: - add examples and guidlines for form intro page
- organise folders to make it clear where do preveiws, guidlines and exmaples go

* fix: dont display other brands demos since we dont have tokens for it yet.

* chore: merge staging docs

* docs: add text-input docs
- update tip.astro api and remove named slots since there is only one slot at the moment

* chore: move password type to types file and fix ts error related to extending wrong type

* docs: add password-input docs

* docs: add error-summary to docs pages

* docs: add checkbox to docs

* docs: add radiobutton  to docs

* chore: update package.lock

* chore: add types in compilation tool and generate links for o3-figma-sb-links package

* fix: fix issue with astro build and development server

* chore: generate new package-lock file and fix build issue

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/radio-button.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/components/form/guidelines/Radio-button-exclusive-choices.astro

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/checkbox.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/error-summary.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/password-input.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/password-input.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: Update apps/for-everyone-website/src/content/docs/components/Form/error-summary.mdx

Co-authored-by: Ben Freshwater <[email protected]>

* docs: make forms docs clearer

---------

Co-authored-by: ben.freshwater <[email protected]>

apps/for-everyone-website/astro.config.mjs

@@ -15,7 +15,7 @@ export default defineConfig({
 	},
 	vite: {
 		ssr: {
-			noExternal: ['unist-util-visit'],
+			noExternal: ['unist-util-visit', '@astrojs/internal-helpers'],
 		},
 		resolve: {
 			alias: {

apps/for-everyone-website/package.json

@@ -23,7 +23,7 @@
 		"@financial-times/o3-button": "^2.0.0",
 		"@financial-times/o3-editorial-typography": "^2.0.0",
 		"@financial-times/o3-figma-sb-links": "^0.0.0",
-		"@financial-times/o3-form": "^0.3.2",
+		"@financial-times/o3-form": "^0.4.0",
 		"@financial-times/o3-foundation": "^2.0.0",
 		"@financial-times/o3-social-sign-in": "^1.0.0",
 		"@financial-times/o3-tooling-token": "^0.0.0",

apps/for-everyone-website/src/components/form/examples/Checkbox-group.astro

@@ -0,0 +1,18 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as CheckboxGrouptsx from '../preview/Checkbox-group'
+
+const {brand} = Astro.props
+const component = CheckboxGrouptsx
+const storybookId = `${brand}-o3-form--check-box-group`
+
+
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Checkbox-selection-state.astro

@@ -0,0 +1,22 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as CheckboxStates from '../preview/Checkbox-selected-states'
+
+const {brand} = Astro.props
+const component = CheckboxStates
+const storybookId = `${brand}-o3-form--check-box-group`
+
+
+---
+<script>
+	const indeterminateElement = document.getElementById('indeterminate-checkbox')
+	indeterminateElement.indeterminate = true
+</script>
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Disabled-state.astro

@@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--text-input`
 
 <div>
 	<Preview {component} />
-	<FigmaSbLinks storybook={storybookId} />
+	<FigmaSbLinks storybookId={storybookId} />
 </div>
 

apps/for-everyone-website/src/components/form/examples/Input-password-validation.astro

@@ -0,0 +1,16 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as InputPasswordJSX from '../preview/Input-password-validation'
+
+const {brand} = Astro.props
+const component = InputPasswordJSX
+const storybookId = `${brand}-o3-form--password-input-error-state`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Input-password.astro

@@ -0,0 +1,16 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as InputPasswordJSX from '../preview/Input-password'
+
+const {brand} = Astro.props
+const component = InputPasswordJSX
+const storybookId = `${brand}-o3-form--password-input`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Input-short-text.astro

@@ -0,0 +1,16 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as InputShortJSX from '../preview/Input-short-text'
+
+const {brand} = Astro.props
+const component = InputShortJSX
+const storybookId = `${brand}-o3-form--short-text-input`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId}  />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Input-validation.astro

@@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--text-input-error-state`
 
 <div>
 	<Preview {component} />
-	<FigmaSbLinks storybook={storybookId} />
+	<FigmaSbLinks storybookId={storybookId} />
 </div>
 

apps/for-everyone-website/src/components/form/examples/Input-width.astro

@@ -0,0 +1,16 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as InputWidthJSX from '../preview/Input-width'
+
+const {brand} = Astro.props
+const component = InputWidthJSX
+const storybookId = `${brand}-o3-form--text-input`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro

@@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--error-summary`
 
 <div>
 	<Preview {component} />
-	<FigmaSbLinks storybook={storybookId} />
+	<FigmaSbLinks storybookId={storybookId} />
 </div>
 

apps/for-everyone-website/src/components/form/examples/Radio-button-group.astro

@@ -0,0 +1,18 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as RadioGroupTsx from '../preview/Radio-group'
+
+const {brand} = Astro.props
+const component = RadioGroupTsx
+const storybookId = `${brand}-o3-form--radio-button`
+
+
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId} />
+</div>
+

apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro

@@ -1,6 +1,6 @@
 ---
-import {Form, TextInput} from '@financial-times/o3-form/esm'
-import { Button } from '@financial-times/o3-button/esm';
+import {Form, TextInput} from '@financial-times/o3-form'
+import { Button } from '@financial-times/o3-button';
 import Example from '../../Example.astro';
 
 const {brand} = Astro.props

apps/for-everyone-website/src/components/form/guidelines/Placement-order.astro

@@ -1,5 +1,5 @@
 ---
-import {Form, TextInput} from '@financial-times/o3-form/esm'
+import {Form, TextInput} from '@financial-times/o3-form'
 import Example from '../../Example.astro';
 
 const {brand} = Astro.props

apps/for-everyone-website/src/components/form/guidelines/Radio-button-exclusive-choices.astro

@@ -0,0 +1,19 @@
+---
+import Example from "../../Example.astro"
+import {RadioGroup, CheckboxGroup} from './RadioButtonGroup'
+const {brand} = Astro.props
+
+---
+
+
+<Example do title="Use checkboxes for multiple choices">
+    <div data-o3-brand={brand}>
+				<CheckboxGroup />
+    </div>
+</Example>
+
+<Example do={false} title="Don’t Use radio buttons when the choices are not mutually exclusive">
+    <div data-o3-brand={brand}>
+        <RadioGroup />
+    </div>
+</Example>

apps/for-everyone-website/src/components/form/guidelines/RadioButtonGroup.tsx

@@ -0,0 +1,57 @@
+import {
+	Form,
+	RadioButtonGroup,
+	CheckBoxGroup,
+	CheckBoxItem,
+	RadioButtonItem,
+} from '@financial-times/o3-form';
+
+const legend = 'Notification preferences';
+const legendDescription = 'How would you like to be updated?';
+
+const items: string[] = [
+	'Email notifications',
+	'SMS notifications',
+	'In-app notifications',
+];
+
+function convertToLowercaseAndRemoveSpaces(item: string) {
+	return item.toLowerCase().replace(/\s+/g, '');
+}
+
+export function RadioGroup() {
+	return (
+		<Form>
+			<RadioButtonGroup label={legend} description={legendDescription}>
+				{items.map((item) => {
+					return (
+						<RadioButtonItem
+							key={item}
+							radioButtonLabel={item}
+							inputId={convertToLowercaseAndRemoveSpaces(`radio-button-${item}`)}
+						/>
+					);
+				})}
+			</RadioButtonGroup>
+		</Form>
+	);
+}
+
+export function CheckboxGroup() {
+	return (
+		<Form>
+			<CheckBoxGroup label={legend} description={legendDescription}>
+				{items.map((item) => {
+					return (
+						<CheckBoxItem
+							key={item}
+							checkboxLabel={item}
+							inputId={convertToLowercaseAndRemoveSpaces(`checkbox-${item}`)}
+						/>
+					)
+				})}
+			</CheckBoxGroup>
+		</Form>
+	);
+}
+

apps/for-everyone-website/src/components/form/guidelines/Required-optional.astro

@@ -1,5 +1,5 @@
 ---
-import {Form, TextInput} from '@financial-times/o3-form/esm'
+import {Form, TextInput} from '@financial-times/o3-form'
 import Example from '../../Example.astro';
 
 const {brand} = Astro.props

apps/for-everyone-website/src/components/form/preview/Checkbox-group.tsx

@@ -0,0 +1,32 @@
+import {Form, CheckBoxGroup, CheckBoxItem} from '@financial-times/o3-form';
+
+function ButtonPreview() {
+	return (
+		<div style={{width: '50%'}}>
+			<meta itemProp="@preview" />
+			<Form>
+				<CheckBoxGroup
+					label="Notification preferences"
+					description="How would you like to be updated?">
+					<CheckBoxItem
+						checkboxLabel="Email notifications"
+						inputId="email-notification-checkbox"
+						attributes={{defaultChecked: true}}
+					/>
+					<CheckBoxItem
+						checkboxLabel="SMS notifications"
+						inputId="sms-notification-checkbox"
+					/>
+					<CheckBoxItem
+						checkboxLabel="In-app notifications"
+						inputId="in-app-notification-checkbox"
+					/>
+				</CheckBoxGroup>
+			</Form>
+			<meta itemProp="@preview" />
+		</div>
+	);
+}
+export const filePath = 'src/components/form/preview/Checkbox-group.tsx';
+
+export {ButtonPreview as preview};

apps/for-everyone-website/src/components/form/preview/Checkbox-selected-states.tsx

@@ -0,0 +1,26 @@
+import {Form, CheckBoxItem} from '@financial-times/o3-form';
+
+function ButtonPreview() {
+	return (
+		<div style={{width: '50%'}}>
+			<meta itemProp="@preview" />
+			<Form>
+				<CheckBoxItem checkboxLabel="Unchecked" inputId="unchecked-checkbox" />
+				<CheckBoxItem
+					checkboxLabel="Checked"
+					inputId="checked-checkbox"
+					attributes={{defaultChecked: true}}
+				/>
+				<CheckBoxItem
+					checkboxLabel="Indeterminate"
+					inputId="indeterminate-checkbox"
+				/>
+			</Form>
+			<meta itemProp="@preview" />
+		</div>
+	);
+}
+export const filePath =
+	'src/components/form/preview/Checkbox-selected-states.tsx';
+
+export {ButtonPreview as preview};

apps/for-everyone-website/src/components/form/preview/Input-password-validation.tsx

@@ -0,0 +1,23 @@
+import {Form, PasswordInput} from '@financial-times/o3-form';
+
+function ButtonPreview() {
+	return (
+		<div style={{width: "50%"}}>
+			<meta itemProp="@preview" />
+			<Form>
+				<PasswordInput
+					label="Password"
+					description='Must be 8 characters or more and contain a number'
+					feedback={{
+						type: 'error',
+						message: 'Your password must contain a number'
+					}}
+				/>
+			</Form>
+			<meta itemProp="@preview" />
+		</div>
+	);
+}
+export const filePath = 'src/components/form/preview/Input-password.tsx';
+
+export {ButtonPreview as preview};

apps/for-everyone-website/src/components/form/preview/Input-password.tsx

@@ -0,0 +1,19 @@
+import {Form, PasswordInput} from '@financial-times/o3-form';
+
+function ButtonPreview() {
+	return (
+		<div style={{width: "50%"}}>
+			<meta itemProp="@preview" />
+			<Form>
+				<PasswordInput
+					label="Password"
+					description='Must be at least 8 characters long'
+				/>
+			</Form>
+			<meta itemProp="@preview" />
+		</div>
+	);
+}
+export const filePath = 'src/components/form/preview/Input-password.tsx';
+
+export {ButtonPreview as preview};