From b6be21a6f217a77f17b2fe9db7c49e47c7c5bc36 Mon Sep 17 00:00:00 2001 From: Akaki Mikaia Date: Wed, 16 Oct 2024 14:45:57 +0100 Subject: [PATCH] Or 960/add o3 form docs (#1849) * 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. * docs: make it clear that o3-forms is coming for other brands but currenlty users can use whitelabel --------- Co-authored-by: ben.freshwater --- apps/for-everyone-website/package.json | 5 +- apps/for-everyone-website/postcss.config.cjs | 16 + .../images/documentation/components/tip.svg | 3 + .../components/form/anatomy/Text-input.astro | 28 + .../form/examples/Disabled-state.astro | 16 + .../form/examples/Input-validation.astro | 16 + .../form/examples/Page-level-validation.astro | 16 + .../form/guidelines/Form-submission.astro | 22 + .../form/guidelines/Labels-grouping.astro | 25 + .../form/guidelines/Placement-order.astro | 48 + .../form/guidelines/Required-optional.astro | 23 + .../components/form/preview/Error-summary.tsx | 20 + .../form/preview/Input-disabled-state.tsx | 21 + .../components/form/preview/Input-error.tsx | 23 + .../src/components/utils/Tip.astro | 84 + .../content/docs/components/Form/index.mdx | 141 ++ .../docs/components/Form/text-input.mdx | 42 + .../o3-form/src/css/components/form-field.css | 18 +- .../o3-form/src/css/components/form.css | 4 + components/o3-form/src/tsx/PasswordInput.tsx | 34 +- components/o3-form/src/tsx/TextInput.tsx | 8 +- .../src/tsx/fieldComponents/FormField.tsx | 21 +- components/o3-form/src/tsx/index.ts | 2 + components/o3-form/src/types/index.ts | 3 +- .../stories/core/passwordInput.stories.tsx | 39 +- .../professional/passwordInput.stories.tsx | 43 +- .../core/professional/textInput.stories.tsx | 59 +- .../stories/core/textInput.stories.tsx | 59 +- .../internal/passwordInput.stories.tsx | 43 +- .../stories/internal/textInput.stories.tsx | 59 +- .../passwordInput.stories.tsx | 43 +- .../sustainable-views/textInput.stories.tsx | 59 +- .../whitelabel/passwordInput.stories.tsx | 44 +- .../stories/whitelabel/textInput.stories.tsx | 60 +- .../o3-figma-sb-links/src/figma-links.json | 26 +- libraries/o3-figma-sb-links/src/links.json | 66 +- libraries/o3-figma-sb-links/src/sb-links.json | 26 +- package-lock.json | 1929 ++++++++++++++++- tools/o3-compilation/index.js | 2 +- 39 files changed, 2884 insertions(+), 312 deletions(-) create mode 100644 apps/for-everyone-website/postcss.config.cjs create mode 100644 apps/for-everyone-website/public/assets/images/documentation/components/tip.svg create mode 100644 apps/for-everyone-website/src/components/form/anatomy/Text-input.astro create mode 100644 apps/for-everyone-website/src/components/form/examples/Disabled-state.astro create mode 100644 apps/for-everyone-website/src/components/form/examples/Input-validation.astro create mode 100644 apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro create mode 100644 apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro create mode 100644 apps/for-everyone-website/src/components/form/guidelines/Labels-grouping.astro create mode 100644 apps/for-everyone-website/src/components/form/guidelines/Placement-order.astro create mode 100644 apps/for-everyone-website/src/components/form/guidelines/Required-optional.astro create mode 100644 apps/for-everyone-website/src/components/form/preview/Error-summary.tsx create mode 100644 apps/for-everyone-website/src/components/form/preview/Input-disabled-state.tsx create mode 100644 apps/for-everyone-website/src/components/form/preview/Input-error.tsx create mode 100644 apps/for-everyone-website/src/components/utils/Tip.astro create mode 100644 apps/for-everyone-website/src/content/docs/components/Form/index.mdx create mode 100644 apps/for-everyone-website/src/content/docs/components/Form/text-input.mdx diff --git a/apps/for-everyone-website/package.json b/apps/for-everyone-website/package.json index 714870f1ed..969e706c98 100644 --- a/apps/for-everyone-website/package.json +++ b/apps/for-everyone-website/package.json @@ -23,11 +23,14 @@ "@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-foundation": "^2.0.0", "@financial-times/o3-social-sign-in": "^1.0.0", "@financial-times/o3-tooling-token": "^0.0.0", "@financial-times/o3-tooltip": "^2.0.0", "astro": "^4.0.9", + "autoprefixer": "^10.4.20", + "postcss-preset-env": "^10.0.7", "prettier": "3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -41,6 +44,6 @@ "devDependencies": { "globby": "^14.0.1", "html-minifier": "^4.0.0", - "jsdom": "^24.1.0" + "jsdom": "^25.0.0" } } diff --git a/apps/for-everyone-website/postcss.config.cjs b/apps/for-everyone-website/postcss.config.cjs new file mode 100644 index 0000000000..fd808e7afa --- /dev/null +++ b/apps/for-everyone-website/postcss.config.cjs @@ -0,0 +1,16 @@ +const autoprefixer = require('autoprefixer'); +const postcssPresetEnv = require('postcss-preset-env'); + +const config = { + plugins: [ + postcssPresetEnv({ + stage: 3, + features: { + 'nesting-rules': true, + }, + }), + autoprefixer(), + ], +}; + +module.exports = config; diff --git a/apps/for-everyone-website/public/assets/images/documentation/components/tip.svg b/apps/for-everyone-website/public/assets/images/documentation/components/tip.svg new file mode 100644 index 0000000000..f0c376768b --- /dev/null +++ b/apps/for-everyone-website/public/assets/images/documentation/components/tip.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/for-everyone-website/src/components/form/anatomy/Text-input.astro b/apps/for-everyone-website/src/components/form/anatomy/Text-input.astro new file mode 100644 index 0000000000..c6bb86a204 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/anatomy/Text-input.astro @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..6e364ec35b --- /dev/null +++ b/apps/for-everyone-website/src/components/form/examples/Disabled-state.astro @@ -0,0 +1,16 @@ +--- +import Preview from '../../utils/Preview.astro' +import FigmaSbLinks from '../../utils/FigmaSbLinks.astro'; + +import * as DisabledInput from '../preview/Input-disabled-state' + +const {brand} = Astro.props +const component = DisabledInput +const storybookId = `${brand}-o3-form--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 new file mode 100644 index 0000000000..f720ec31b9 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/examples/Input-validation.astro @@ -0,0 +1,16 @@ +--- +import Preview from '../../utils/Preview.astro' +import FigmaSbLinks from '../../utils/FigmaSbLinks.astro'; + +import * as InputValidatio from '../preview/Input-error' + +const {brand} = Astro.props +const component = InputValidatio +const storybookId = `${brand}-o3-form--text-input-error-state` +--- + +
+ + +
+ 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 new file mode 100644 index 0000000000..0d1992e898 --- /dev/null +++ b/apps/for-everyone-website/src/components/form/examples/Page-level-validation.astro @@ -0,0 +1,16 @@ +--- +import Preview from '../../utils/Preview.astro' +import FigmaSbLinks from '../../utils/FigmaSbLinks.astro'; + +import * as ErrorSummary from '../preview/Error-summary' + +const {brand} = Astro.props +const component = ErrorSummary +const storybookId = `${brand}-o3-form--error-summary` +--- + +
+ + +
+ 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 new file mode 100644 index 0000000000..4b8991a10d --- /dev/null +++ b/apps/for-everyone-website/src/components/form/guidelines/Form-submission.astro @@ -0,0 +1,22 @@ +--- +import {Form, TextInput} from '@financial-times/o3-form/esm' +import { Button } from '@financial-times/o3-button/esm'; +import Example from '../../Example.astro'; + +const {brand} = Astro.props +--- + + +
+
+ + +