OR-1775: update forms guidelines

apps/website/src/components/forms/examples/Checkbox-selection-state.astro → apps/website/src/components/forms/examples/Checkbox-disabled.astro

@@ -2,10 +2,10 @@
 import Preview from '../../utils/Preview.astro'
 import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
 
-import * as CheckboxStates from '../preview/Checkbox-selected-states'
+import * as CheckboxDisabled from '../preview/Checkbox-disabled'
 
 const {brand} = Astro.props
-const component = CheckboxStates
+const component = CheckboxDisabled
 const storybookId = `${brand}-o3-form--check-box-group`
 
 

apps/website/src/components/forms/examples/Checkbox-selection-default.astro

@@ -0,0 +1,22 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as CheckboxSelectionDefault from '../preview/Checkbox-selection-default'
+
+const {brand} = Astro.props
+const component = CheckboxSelectionDefault
+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/website/src/components/forms/examples/Checkbox-selection-disabled.astro

@@ -0,0 +1,22 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as CheckboxSelectionDisabled from '../preview/Checkbox-selection-disabled'
+
+const {brand} = Astro.props
+const component = CheckboxSelectionDisabled
+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/website/src/components/forms/examples/Checkbox-selection-error.astro

@@ -0,0 +1,22 @@
+---
+import Preview from '../../utils/Preview.astro'
+import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
+
+import * as CheckboxSelectionError from '../preview/Checkbox-selection-error'
+
+const {brand} = Astro.props
+const component = CheckboxSelectionError
+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/website/src/components/forms/examples/Error-summary.astro → apps/website/src/components/forms/examples/Email-error-summary.astro

@@ -2,10 +2,10 @@
 import Preview from '../../utils/Preview.astro'
 import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
 
-import * as ErrorSummaryTSX from '../preview/Error-summary-in-form'
+import * as EmailErrorSummaryTSX from '../preview/Email-error-summary'
 
 const {brand} = Astro.props
-const component = ErrorSummaryTSX
+const component = EmailErrorSummaryTSX
 const storybookId = `${brand}-o3-form--error-summary`
 ---
 

apps/website/src/components/forms/examples/Input-password-disabled.astro

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

apps/website/src/components/forms/examples/Input-short-text-four.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-four'
+
+const {brand} = Astro.props
+const component = InputShortJSX
+const storybookId = `${brand}-o3-form--short-text-input`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId}  />
+</div>
+

apps/website/src/components/forms/examples/Input-short-text-three.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-three'
+
+const {brand} = Astro.props
+const component = InputShortJSX
+const storybookId = `${brand}-o3-form--short-text-input`
+---
+
+<div>
+	<Preview {component} />
+	<FigmaSbLinks storybookId={storybookId}  />
+</div>
+

apps/website/src/components/forms/examples/Input-short-text.astro → apps/website/src/components/forms/examples/Input-short-text-two.astro

@@ -2,7 +2,7 @@
 import Preview from '../../utils/Preview.astro'
 import FigmaSbLinks from '../../utils/FigmaSbLinks.astro';
 
-import * as InputShortJSX from '../preview/Input-short-text'
+import * as InputShortJSX from '../preview/Input-short-text-two'
 
 const {brand} = Astro.props
 const component = InputShortJSX

apps/website/src/components/forms/examples/Input-state-default.astro

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

apps/website/src/components/forms/examples/Input-state-disabled-guidance.astro

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

apps/website/src/components/forms/examples/Input-state-disabled.astro

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

apps/website/src/components/forms/examples/Input-state-error.astro

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

apps/website/src/components/forms/examples/Input-state-focus.astro

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

apps/website/src/components/forms/examples/Placement-example-do.astro

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="536" height="345" viewBox="0 0 536 345" fill="none">
+	<rect width="536" height="345" fill="white"/>
+	<rect x="146" y="45.5" width="52" height="4" fill="#E6E6E6"/>
+	<rect x="146" y="100.5" width="88" height="4" fill="#E6E6E6"/>
+	<rect x="146" y="160.5" width="88" height="4" fill="#E6E6E6"/>
+	<rect x="146" y="220.5" width="88" height="4" fill="#E6E6E6"/>
+	<rect x="146" y="57.5" width="245" height="12" rx="2" fill="#999999"/>
+	<rect x="146" y="112.5" width="245" height="24" rx="2" fill="#E6E6E6"/>
+	<rect x="146" y="172.5" width="245" height="24" rx="2" fill="#E6E6E6"/>
+	<rect x="146" y="232.5" width="245" height="24" rx="2" fill="#E6E6E6"/>
+	<rect x="218" y="280.5" width="64" height="24" rx="2" fill="#F2F2F2"/>
+	<rect x="146" y="280.5" width="64" height="24" rx="2" fill="#4BBF73"/>
+</svg>

apps/website/src/components/forms/examples/Placement-example-dont.astro

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="536" height="251" viewBox="0 0 536 251" fill="none">
+    <rect width="536" height="251" fill="white"/>
+    <rect x="146" y="45.5" width="52" height="4" fill="#E6E6E6"/>
+    <rect x="76" y="100.5" width="88" height="4" fill="#E6E6E6"/>
+    <rect x="146" y="57.5" width="245" height="12" rx="2" fill="#999999"/>
+    <rect x="76" y="113" width="102" height="24" rx="2" fill="#E6E6E6"/>
+    <rect x="372" y="100.5" width="88" height="4" fill="#E6E6E6"/>
+    <rect x="372" y="113" width="102" height="24" rx="2" fill="#E6E6E6"/>
+    <rect x="217" y="100.5" width="88" height="4" fill="#E6E6E6"/>
+    <rect x="217" y="113" width="102" height="24" rx="2" fill="#E6E6E6"/>
+    <rect x="273" y="173" width="64" height="24" rx="2" fill="#F2F2F2"/>
+    <rect x="201" y="173" width="64" height="24" rx="2" fill="#4BBF73"/>
+</svg>

apps/website/src/components/forms/examples/Radio-button-disabled.astro

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

apps/website/src/components/forms/examples/Radio-button-selection-default.astro

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

apps/website/src/components/forms/examples/Radio-button-selection-disabled.astro

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

apps/website/src/components/forms/examples/Radio-button-selection-error.astro

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

apps/website/src/components/forms/guidelines/Radio-button-exclusive-choices.astro

@@ -5,15 +5,14 @@ const {brand} = Astro.props
 
 ---
 
-
-<Example do title="Use checkboxes for multiple choices">
+<Example do={false} title="Don’t Use radio buttons when the choices are not mutually exclusive">
     <div data-o3-brand={brand}>
-				<CheckboxGroup />
+        <RadioGroup />
     </div>
 </Example>
 
-<Example do={false} title="Don’t Use radio buttons when the choices are not mutually exclusive">
+<Example do title="Do use checkboxes instead">
     <div data-o3-brand={brand}>
-        <RadioGroup />
+        <CheckboxGroup />
     </div>
 </Example>

apps/website/src/components/forms/preview/Checkbox-disabled.tsx

@@ -0,0 +1,20 @@
+import {Form, CheckBoxItem} from '@financial-times/o3-form';
+
+function CheckboxPreview() {
+	return (
+		<div style={{width: '50%'}}>
+			<meta itemProp="@preview" />
+			<Form>
+				<CheckBoxItem
+					checkboxLabel="Checkbox label"
+					inputId="unchecked-checkbox"
+					attributes={{disabled: true, defaultChecked: true}}
+				/>
+			</Form>
+			<meta itemProp="@preview" />
+		</div>
+	);
+}
+export const filePath = 'src/components/forms/preview/Checkbox-disabled.tsx';
+
+export {CheckboxPreview as preview};