diff --git a/apps/for-everyone-website/astro.config.mjs b/apps/for-everyone-website/astro.config.mjs index c67d8f5c26..dbc16c9be3 100644 --- a/apps/for-everyone-website/astro.config.mjs +++ b/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: { diff --git a/apps/for-everyone-website/package.json b/apps/for-everyone-website/package.json index 969e706c98..09c8344787 100644 --- a/apps/for-everyone-website/package.json +++ b/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", diff --git a/apps/for-everyone-website/src/components/form/anatomy/Checkbox.astro b/apps/for-everyone-website/src/components/form/anatomy/Checkbox.astro new file mode 100644 index 0000000000..934ad6281a --- /dev/null +++ b/apps/for-everyone-website/src/components/form/anatomy/Checkbox.astro @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/for-everyone-website/src/components/form/anatomy/Error-summary.astro b/apps/for-everyone-website/src/components/form/anatomy/Error-summary.astro new file mode 100644 index 0000000000..fd49cbc076 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/anatomy/Error-summary.astro @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/for-everyone-website/src/components/form/anatomy/Password-input.astro b/apps/for-everyone-website/src/components/form/anatomy/Password-input.astro new file mode 100644 index 0000000000..34ccf104f5 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/anatomy/Password-input.astro @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/for-everyone-website/src/components/form/anatomy/Radio-button.astro b/apps/for-everyone-website/src/components/form/anatomy/Radio-button.astro new file mode 100644 index 0000000000..a7f49b9e3c --- /dev/null +++ b/apps/for-everyone-website/src/components/form/anatomy/Radio-button.astro @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/for-everyone-website/src/components/form/examples/Checkbox-group.astro b/apps/for-everyone-website/src/components/form/examples/Checkbox-group.astro new file mode 100644 index 0000000000..fd14fdf598 --- /dev/null +++ b/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` + + +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Checkbox-selection-state.astro b/apps/for-everyone-website/src/components/form/examples/Checkbox-selection-state.astro new file mode 100644 index 0000000000..1842bf8f74 --- /dev/null +++ b/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` + + +--- + + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Disabled-state.astro b/apps/for-everyone-website/src/components/form/examples/Disabled-state.astro index 6e364ec35b..e4af1755f0 100644 --- a/apps/for-everyone-website/src/components/form/examples/Disabled-state.astro +++ b/apps/for-everyone-website/src/components/form/examples/Disabled-state.astro @@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--text-input`
- +
diff --git a/apps/for-everyone-website/src/components/form/examples/Input-password-validation.astro b/apps/for-everyone-website/src/components/form/examples/Input-password-validation.astro new file mode 100644 index 0000000000..c47c43407f --- /dev/null +++ b/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` +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Input-password.astro b/apps/for-everyone-website/src/components/form/examples/Input-password.astro new file mode 100644 index 0000000000..bb3ca15d62 --- /dev/null +++ b/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` +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Input-short-text.astro b/apps/for-everyone-website/src/components/form/examples/Input-short-text.astro new file mode 100644 index 0000000000..8de26b505b --- /dev/null +++ b/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` +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Input-validation.astro b/apps/for-everyone-website/src/components/form/examples/Input-validation.astro index f720ec31b9..7e191dacc5 100644 --- a/apps/for-everyone-website/src/components/form/examples/Input-validation.astro +++ b/apps/for-everyone-website/src/components/form/examples/Input-validation.astro @@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--text-input-error-state`
- +
diff --git a/apps/for-everyone-website/src/components/form/examples/Input-width.astro b/apps/for-everyone-website/src/components/form/examples/Input-width.astro new file mode 100644 index 0000000000..a2e5714cde --- /dev/null +++ b/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` +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro b/apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro index 0d1992e898..089b6415e0 100644 --- a/apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro +++ b/apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro @@ -11,6 +11,6 @@ const storybookId = `${brand}-o3-form--error-summary`
- +
diff --git a/apps/for-everyone-website/src/components/form/examples/Radio-button-group.astro b/apps/for-everyone-website/src/components/form/examples/Radio-button-group.astro new file mode 100644 index 0000000000..03b24566a2 --- /dev/null +++ b/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` + + +--- + +
+ + +
+ diff --git a/apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro b/apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro index 4b8991a10d..e8f4c1c54d 100644 --- a/apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro +++ b/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 diff --git a/apps/for-everyone-website/src/components/form/guidelines/Placement-order.astro b/apps/for-everyone-website/src/components/form/guidelines/Placement-order.astro index 9f65ee4e41..8bed60966d 100644 --- a/apps/for-everyone-website/src/components/form/guidelines/Placement-order.astro +++ b/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 diff --git a/apps/for-everyone-website/src/components/form/guidelines/Radio-button-exclusive-choices.astro b/apps/for-everyone-website/src/components/form/guidelines/Radio-button-exclusive-choices.astro new file mode 100644 index 0000000000..e2a3a9fc10 --- /dev/null +++ b/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 + +--- + + + +
+ +
+ + + +
+ +
+ diff --git a/apps/for-everyone-website/src/components/form/guidelines/RadioButtonGroup.tsx b/apps/for-everyone-website/src/components/form/guidelines/RadioButtonGroup.tsx new file mode 100644 index 0000000000..177075f2c4 --- /dev/null +++ b/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 ( +
+ + {items.map((item) => { + return ( + + ); + })} + +
+ ); +} + +export function CheckboxGroup() { + return ( +
+ + {items.map((item) => { + return ( + + ) + })} + +
+ ); +} + diff --git a/apps/for-everyone-website/src/components/form/guidelines/Required-optional.astro b/apps/for-everyone-website/src/components/form/guidelines/Required-optional.astro index 9c7de950a2..9ee2acd237 100644 --- a/apps/for-everyone-website/src/components/form/guidelines/Required-optional.astro +++ b/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 diff --git a/apps/for-everyone-website/src/components/form/preview/Checkbox-group.tsx b/apps/for-everyone-website/src/components/form/preview/Checkbox-group.tsx new file mode 100644 index 0000000000..07830f67d0 --- /dev/null +++ b/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 ( +
+ +
+ + + + + +
+ +
+ ); +} +export const filePath = 'src/components/form/preview/Checkbox-group.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Checkbox-selected-states.tsx b/apps/for-everyone-website/src/components/form/preview/Checkbox-selected-states.tsx new file mode 100644 index 0000000000..06e249df3b --- /dev/null +++ b/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 ( +
+ +
+ + + + + +
+ ); +} +export const filePath = + 'src/components/form/preview/Checkbox-selected-states.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Input-password-validation.tsx b/apps/for-everyone-website/src/components/form/preview/Input-password-validation.tsx new file mode 100644 index 0000000000..c3c64d4fd9 --- /dev/null +++ b/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 ( +
+ +
+ + + +
+ ); +} +export const filePath = 'src/components/form/preview/Input-password.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Input-password.tsx b/apps/for-everyone-website/src/components/form/preview/Input-password.tsx new file mode 100644 index 0000000000..de59f3c6f6 --- /dev/null +++ b/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 ( +
+ +
+ + + +
+ ); +} +export const filePath = 'src/components/form/preview/Input-password.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Input-short-text.tsx b/apps/for-everyone-website/src/components/form/preview/Input-short-text.tsx new file mode 100644 index 0000000000..f3fb3ca0a2 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/preview/Input-short-text.tsx @@ -0,0 +1,27 @@ +import {Form, TextInput} from '@financial-times/o3-form/esm'; + +function ButtonPreview() { + return ( + <> + +
+ + + + + + + ); +} +export const filePath = 'src/components/form/preview/Input-short-text.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Input-width.tsx b/apps/for-everyone-website/src/components/form/preview/Input-width.tsx new file mode 100644 index 0000000000..ae059c72d9 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/preview/Input-width.tsx @@ -0,0 +1,19 @@ +import {Form, TextInput} from '@financial-times/o3-form/esm'; + +function ButtonPreview() { + return ( + <> + +
+ + + + + ); +} +export const filePath = 'src/components/form/preview/Input-width.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/form/preview/Radio-group.tsx b/apps/for-everyone-website/src/components/form/preview/Radio-group.tsx new file mode 100644 index 0000000000..0a483a1820 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/preview/Radio-group.tsx @@ -0,0 +1,34 @@ +import { + Form, + RadioButtonGroup, + RadioButtonItem, +} from '@financial-times/o3-form'; + +function ButtonPreview() { + return ( +
+ +
+ + + + + +
+ +
+ ); +} +export const filePath = 'src/components/form/preview/Radio-group.tsx'; + +export {ButtonPreview as preview}; diff --git a/apps/for-everyone-website/src/components/utils/FigmaSbLinks.astro b/apps/for-everyone-website/src/components/utils/FigmaSbLinks.astro index 0090462341..619f2b665f 100644 --- a/apps/for-everyone-website/src/components/utils/FigmaSbLinks.astro +++ b/apps/for-everyone-website/src/components/utils/FigmaSbLinks.astro @@ -1,8 +1,20 @@ --- import links from '@financial-times/o3-figma-sb-links'; + +interface Props { + /** Storybook Id from o3-figma-sb-links package. Tries to find both storybook path and figma link */ + storybookId?: string; + /** Extra parameters to modify controls in sotrybook and display preciese example for demos */ + sbPathParams?: string; + /** Custom URL that will be used for storybook demo link */ + storybook?: string; + /** Custom URL that will be used to link to Figma designs */ + figma?: string +} + const {storybook, figma} = getLinks(Astro.props); -function getLinks(props) { +function getLinks(props: Props) { let {storybookId, sbPathParams, storybook, figma} = props; const brandedstorybookId = storybookId?.startsWith('professional') ? `core-${storybookId}` diff --git a/apps/for-everyone-website/src/components/utils/Tip.astro b/apps/for-everyone-website/src/components/utils/Tip.astro index 96b58fafbc..eadf06c3eb 100644 --- a/apps/for-everyone-website/src/components/utils/Tip.astro +++ b/apps/for-everyone-website/src/components/utils/Tip.astro @@ -15,7 +15,7 @@ const {sources} = Astro.props;
- + { sources?.length > 0 && ( diff --git a/apps/for-everyone-website/src/content/docs/components/Form/checkbox.mdx b/apps/for-everyone-website/src/content/docs/components/Form/checkbox.mdx new file mode 100644 index 0000000000..16e0019919 --- /dev/null +++ b/apps/for-everyone-website/src/content/docs/components/Form/checkbox.mdx @@ -0,0 +1,88 @@ +--- +title: Checkbox +description: Checkboxes allow users to select one or more items from a list or toggle an option on or off. +--- + +import {Aside} from '@astrojs/starlight/components'; +import {Form, CheckBoxItem} from '@financial-times/o3-form'; + +import Tip from '../../../../components/utils/Tip.astro'; +import Example from '../../../../components/Example.astro'; + +import {default as CheckboxAnatomy} from '../../../../components/form/anatomy/Checkbox.astro'; + +import {default as CheckboxSelectedStates} from '../../../../components/form/examples/Checkbox-selection-state.astro'; +import {default as CheckboxGroup} from '../../../../components/form/examples/Checkbox-group.astro'; + +import '@financial-times/o3-form/css/whitelabel.css'; + + + Currently we have a limited brand support for form components. We are working + on expanding this to all brands. For now, please refer to the [whitelabel text + input component](/whitelabel/components/form/checkbox) for more information. + + + +Checkboxes allow users to select one or more items from a list or toggle an option on or off. Changes made with checkboxes do not take effect immediately; the user needs to confirm the selection by performing an additional action, such as clicking a "Submit" button. + + + +## Anatomy + + + +1. Label: Indicates the purpose of the entire group of checkboxes. It provides an instruction or context for the available options. +2. Description: Provides additional context/instructions about the checkbox. It helps users understand what is required or gives examples of the kind of information they should enter. +3. Checkbox container: The checkbox selection control. +4. Checkbox label: Indicates the purpose of each individual checkbox(es). It should clearly communicates the choice or option represented by that specific checkbox. + +## Usage Guidelines + +### Selection states + + +Checkboxes have three selection states: Unchecked, Checked, and Indeterminate. The +indeterminate state is typically used to indicate a partially selected group of options +or when some but not all sub-options are selected. + +### Group Related Checkboxes + + +- When possible, group related checkboxes together and provide a clear heading or label +to describe the group. This helps users quickly understand what the options are related +to. +- Avoid putting more than 7 checkboxes in one group. + +### Labels + +Phrase the labels clearly so that no helper text is needed to clarify what will happen when you select the respective checkbox. + +Provide clear and descriptive labels to aid users in understanding the purpose of each checkbox. Avoid using negative statements like 'check to prevent X'. Instead, use positive, active statements that clearly describe what will happen when the checkbox is selected. + + +
+
+ + +
+ + + +
+
+ + +
+ + + diff --git a/apps/for-everyone-website/src/content/docs/components/Form/error-summary.mdx b/apps/for-everyone-website/src/content/docs/components/Form/error-summary.mdx new file mode 100644 index 0000000000..c5289347cd --- /dev/null +++ b/apps/for-everyone-website/src/content/docs/components/Form/error-summary.mdx @@ -0,0 +1,71 @@ +--- +title: Error summary +description: The Error Summary appears on the top of a page after a user submits a form which generates an error. +--- + +import {Aside} from '@astrojs/starlight/components'; +import {Form, TextInput} from '@financial-times/o3-form'; + +import Tip from '../../../../components/utils/Tip.astro'; +import Example from '../../../../components/Example.astro'; + +import {default as ErrorSummaryAnatomy} from '../../../../components/form/anatomy/Error-summary.astro'; + +import {default as InputWidthExample} from '../../../../components/form/examples/Input-width.astro'; +import {default as ShortTextEample} from '../../../../components/form/examples/Input-short-text.astro'; + +import '@financial-times/o3-form/css/whitelabel.css'; + + + Currently we have a limited brand support for form components. We are working + on expanding this to all brands. For now, please refer to the [whitelabel text + input component](/whitelabel/components/form/error-summary) for more + information. + + + +The Error Summary appears on the top of a page after a user submits a form which generates an error. It presents a list of errors that have occurred and allows users to identify and correct mistakes easily. + + +## Anatomy + + + +1. Title: A brief general feedback message summarizing the presence of errors +2. Icon: A visual indicator of an error +3. Details: A list of specific errors that led to the feedback message. +4. Box: A colored area that contains the entire error summary. + +## Usage Guidelines + +### Placement + +The error summary should always appear on top of the page, before the form elements. + + +

+ By positioning errors on top of the page we make sure they’re the first + thing a user sees after the page loads. This way also helps with users on a + screen reader since this is the first information they’ll get in the content block. +

+ + +### message + +The summary should provide a concise list of all errors, ideally in the order they appear on the form. Each item in the list should describe the error clearly and be clickable. Clicking on an error should take the user directly to the problematic field, ensuring that they can quickly locate and resolve the issue. + +### Validation + +Only use the error summary for actual errors that won’t let the user navigate further. Don’t use it for information, tips, etc. + + diff --git a/apps/for-everyone-website/src/content/docs/components/Form/index.mdx b/apps/for-everyone-website/src/content/docs/components/Form/index.mdx index 5e3e679968..b3dbee611c 100644 --- a/apps/for-everyone-website/src/content/docs/components/Form/index.mdx +++ b/apps/for-everyone-website/src/content/docs/components/Form/index.mdx @@ -21,15 +21,15 @@ import '@financial-times/o3-form/css/whitelabel.css'; Form components are used to collect information and guide users. Here you’ll find general rules for using them that apply to all components. Structure, sequence, and messaging are essential to creating a good user experience. -{/* ### Form Componentes +### Form Componentes */} + Password Input + Checkbox + Radio Button + Error summary + ## Placement and Order @@ -52,7 +52,7 @@ When placing form components on a page, there are two basic rules: url: 'https://www.nngroup.com/articles/web-form-design/', }, ]}> -

+

The vertical order of form components is crucial for helping users navigate efficiently. A clear top-to-bottom layout aligns with natural reading patterns, ensuring a smoother experience. Avoid placing components @@ -67,7 +67,7 @@ It’s best practice to only mark the optional components. No special indicator -

+

In order to reduce cognitive load for the user, we decided to omit the “required” label. This makes for easier scanning when there are multiple inputs with less visual disruptions. @@ -95,7 +95,7 @@ Input-level validation happens while the user interacts with the individual comp -

    +
    1. Validation on each keystroke would create unnecessary error feedback noise while the user is typing. @@ -122,7 +122,7 @@ Some components support disabled states, but they should be used sparingly. Alwa -

      +

      When used without sufficient context, disabled states can confuse users and negatively impact the user experience. Disabled components can also pose accessibility challenges, making it harder for users with assistive @@ -138,4 +138,5 @@ We have made a number of considerations to ensure accessible forms ([perceivable - Form validation states are conveyed with both colour, iconography. and text. This improves perceivability for people with colour blindness, for example, who may find it difficult to distinguish colour. - On submit an error summary component provides keyboard users a means to quickly navigate to the form field with an error, improving operability. - Form inputs and their labels are connected and clickable, providing a large touch target area for people with limited dexterity, or other reasons, that make it difficult to click a small target area. + diff --git a/apps/for-everyone-website/src/content/docs/components/Form/password-input.mdx b/apps/for-everyone-website/src/content/docs/components/Form/password-input.mdx new file mode 100644 index 0000000000..c364bffe9d --- /dev/null +++ b/apps/for-everyone-website/src/content/docs/components/Form/password-input.mdx @@ -0,0 +1,79 @@ +--- +title: Password Input +description: The password input component is used for entering sensitive information, such as passwords or passphrases. +--- + +import {Aside} from '@astrojs/starlight/components'; +import {Form, TextInput} from '@financial-times/o3-form'; + +import Tip from '../../../../components/utils/Tip.astro'; +import Example from '../../../../components/Example.astro'; + +import {default as TextInputAnatomy} from '../../../../components/form/anatomy/Password-input.astro'; + +import {default as PasswordExample} from '../../../../components/form/examples/Input-password.astro'; +import {default as PasswordValidation} from '../../../../components/form/examples/Input-password-validation.astro'; + +import '@financial-times/o3-form/css/whitelabel.css'; + + + Currently we have a limited brand support for form components. We are working + on expanding this to all brands. For now, please refer to the [whitelabel text + input component](/whitelabel/components/form/password-input) for more + information. + + + +The password input component is used for entering sensitive information, such as passwords or passphrases. It masks the user's input to maintain privacy and security by replacing typed characters with symbols like dots or asterisks. + +

      + +## Anatomy + + + +1. Title: Clearly indicates that this is a password input field. +2. Text hint: Provides instructions about the password requirements. +3. Input box: The interactive area where users can type their passwords. Characters are masked to ensure privacy. +4. Show password toggle: An option that users can activate to unmask their input. +5. Forgot password: Provides access to the functionality to reset a password. + +## Usage Guidelines + +### Password Requirements + +If there are specific password requirements (e.g., minimum length, special characters) display them as hint in the description field. + + + +### Validation + +Provide clear and specific error message if the password doesn't meet the requirements. + + + + +
        +
      1. + Eliminating the confirm password field simplifies the registration + process, reducing the number of steps and making it quicker and easier for + users to sign up. +
        2. +
      2. + Providing a "Show Password" toggle allows users to verify their input + without retyping it +
        3. +
      +       + + diff --git a/apps/for-everyone-website/src/content/docs/components/Form/radio-button.mdx b/apps/for-everyone-website/src/content/docs/components/Form/radio-button.mdx new file mode 100644 index 0000000000..a96ea2617f --- /dev/null +++ b/apps/for-everyone-website/src/content/docs/components/Form/radio-button.mdx @@ -0,0 +1,66 @@ +--- +title: Radio Button +description: Radio buttons allow users to select a single option from a predefined set of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time. +--- + +import {Aside} from '@astrojs/starlight/components'; + +import Tip from '../../../../components/utils/Tip.astro'; +import Example from '../../../../components/Example.astro'; + +import {default as RadioButtonAnatomy} from '../../../../components/form/anatomy/Radio-button.astro'; + +import {default as RadioButtonExclusiveChoicesGuideline} from '../../../../components/form/guidelines/Radio-button-exclusive-choices.astro'; + +import {default as RadioButtonGroup} from '../../../../components/form/examples/Radio-button-group.astro'; + +import '@financial-times/o3-form/css/whitelabel.css'; + + + Currently we have a limited brand support for form components. We are working + on expanding this to all brands. For now, please refer to the [whitelabel text + input component](/whitelabel/components/form/text-input) for more information. + + + +Radio buttons allow users to select a single option from a predefined set of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time. + + +## Anatomy + + + +1. Label: Indicates the purpose of the radio buttons. It should clearly communicate what kind of decision has to be made +2. Description: Provides additional context/instructions +3. Radio button: The radio button selection control. +4. Radio button label: Describes the purpose of the radio buttons. It should clearly communicate what kind of choice is expected. + +## Usage Guidelines + +### Use for Small Sets + +Radio buttons are best suited for small sets of options (typically 2 to 5). For larger sets of options, consider using a dropdown menu instead to reduce visual clutter. + +### Use for Mutually Exclusive Choices + +Only use radio buttons when the options are mutually exclusive. If multiple selections are possible, consider using checkboxes instead. + + + +### Preselected Option + + + +If one of the options is the most common or recommended, pre-select it as the default option. However, ensure it’s easy for the user to change their selection. + + diff --git a/apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx b/apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx index 4a700733f0..f237df9941 100644 --- a/apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx +++ b/apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx @@ -4,9 +4,25 @@ description: Text inputs allow users to enter free-form text data such as fillin --- import {Aside} from '@astrojs/starlight/components'; +import {Form, TextInput} from '@financial-times/o3-form'; + +import Tip from '../../../../components/utils/Tip.astro'; +import Example from '../../../../components/Example.astro'; import {default as TextInputAnatomy} from '../../../../components/form/anatomy/Text-input.astro'; +import {default as InputWidthExample} from '../../../../components/form/examples/Input-width.astro'; +import {default as ShortTextEample} from '../../../../components/form/examples/Input-short-text.astro'; + +import '@financial-times/o3-form/css/whitelabel.css'; + + + Currently we have a limited brand support for form components. We are working + on expanding this to all brands. For now, please refer to the [whitelabel text + input component](/whitelabel/components/form/text-input) for more information. + + + Text inputs allow users to enter free-form text data such as filling in contact or payment information.