From facdbbec47dd6552e00638021d73f39642b5f281 Mon Sep 17 00:00:00 2001 From: Tom King Date: Mon, 30 Oct 2023 15:14:05 +1000 Subject: [PATCH 1/3] - fixed styling on form - added typography-11 and loose option for leading based on old GEL - added story for line height - removed un-used size prop from form - updated size story for form - added description for what happens for spacing prop on form --- packages/ui/.storybook/global.css | 195 +++++++++--------- .../error-message/error-message.styles.ts | 5 +- .../components/form-hint/form-hint.styles.ts | 2 +- .../form-label/form-label.styles.ts | 2 +- .../ui/src/components/form/form.component.tsx | 4 +- .../ui/src/components/form/form.stories.tsx | 33 ++- packages/ui/src/components/form/form.types.ts | 4 - packages/ui/src/css/global.css | 6 +- .../stories/foundation/typography.stories.tsx | 47 ++++- .../ui/src/tailwind/constants/typography.ts | 4 + packages/ui/src/tailwind/tailwind-plugin.ts | 6 + 11 files changed, 181 insertions(+), 127 deletions(-) diff --git a/packages/ui/.storybook/global.css b/packages/ui/.storybook/global.css index 2f17748c8..59cdd7a98 100644 --- a/packages/ui/.storybook/global.css +++ b/packages/ui/.storybook/global.css @@ -2,107 +2,108 @@ @tailwind components; @tailwind utilities; -/* BOM fonts */ -@font-face { - src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'), - url('/fonts/lineto-brown-pro-light.woff') format('woff'); - font-family: 'Brown Pro'; - font-weight: 300; - font-style: normal; -} -@font-face { - src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'), - url('/fonts/lineto-brown-pro-regular.woff') format('woff'); - font-family: 'Brown Pro'; - font-weight: 400; - font-style: normal; -} -@font-face { - src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'), - url('/fonts/lineto-brown-pro-bold.woff') format('woff'); - font-family: 'Brown Pro'; - font-weight: 700; - font-style: normal; -} +@layer base { + /* BOM fonts */ + @font-face { + src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'), + url('/fonts/lineto-brown-pro-light.woff') format('woff'); + font-family: 'Brown Pro'; + font-weight: 300; + font-style: normal; + } + @font-face { + src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'), + url('/fonts/lineto-brown-pro-regular.woff') format('woff'); + font-family: 'Brown Pro'; + font-weight: 400; + font-style: normal; + } + @font-face { + src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'), + url('/fonts/lineto-brown-pro-bold.woff') format('woff'); + font-family: 'Brown Pro'; + font-weight: 700; + font-style: normal; + } -/* BSA fonts */ -@font-face { - src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff'); - font-family: 'Aller'; - font-weight: 300; - font-style: normal; -} -@font-face { - src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff'); - font-family: 'Aller'; - font-weight: 700; - font-style: normal; -} - -/* RAMS fonts */ -@font-face { - src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), - url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); - font-family: 'Source Sans Pro'; - font-weight: normal; - font-style: normal; -} -@font-face { - src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), - url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff'); - font-family: 'Source Sans Pro'; - font-weight: 600; - font-style: normal; -} -@font-face { - src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), - url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff'); - font-family: 'Source Sans Pro'; - font-weight: 700; - font-style: normal; -} + /* BSA fonts */ + @font-face { + src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff'); + font-family: 'Aller'; + font-weight: 300; + font-style: normal; + } + @font-face { + src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff'); + font-family: 'Aller'; + font-weight: 700; + font-style: normal; + } -/* STG fonts */ -@font-face { - src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'), - url('/fonts/dragonbold-bold-webfont.woff') format('woff'); - font-family: 'Dragon Bold'; - font-weight: 400; - font-style: normal; -} + /* RAMS fonts */ + @font-face { + src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), + url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); + font-family: 'Source Sans Pro'; + font-weight: normal; + font-style: normal; + } + @font-face { + src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), + url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff'); + font-family: 'Source Sans Pro'; + font-weight: 600; + font-style: normal; + } + @font-face { + src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), + url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff'); + font-family: 'Source Sans Pro'; + font-weight: 700; + font-style: normal; + } -/* WBC fonts */ -@font-face { - src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff'); - font-family: 'Westpac'; - font-weight: 400; - font-style: normal; -} + /* STG fonts */ + @font-face { + src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'), + url('/fonts/dragonbold-bold-webfont.woff') format('woff'); + font-family: 'Dragon Bold'; + font-weight: 400; + font-style: normal; + } -/* WBG fonts */ -@font-face { - src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'), - url('/fonts/montserrat-v14-latin-300.woff') format('woff'); - font-family: 'Montserrat'; - font-weight: 300; - font-style: normal; -} -@font-face { - src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'), - url('/fonts/montserrat-v14-latin-regular.woff') format('woff'); - font-family: 'Montserrat'; - font-weight: 400; - font-style: normal; -} -@font-face { - src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'), - url('/fonts/montserrat-v14-latin-700.woff') format('woff'); - font-family: 'Montserrat'; - font-weight: 700; - font-style: normal; -} + /* WBC fonts */ + @font-face { + src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff'); + font-family: 'Westpac'; + font-weight: 400; + font-style: normal; + } + /* WBG fonts */ + @font-face { + src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'), + url('/fonts/montserrat-v14-latin-300.woff') format('woff'); + font-family: 'Montserrat'; + font-weight: 300; + font-style: normal; + } + @font-face { + src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'), + url('/fonts/montserrat-v14-latin-regular.woff') format('woff'); + font-family: 'Montserrat'; + font-weight: 400; + font-style: normal; + } + @font-face { + src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'), + url('/fonts/montserrat-v14-latin-700.woff') format('woff'); + font-family: 'Montserrat'; + font-weight: 700; + font-style: normal; + } -body { - @apply typography-body-10; + body { + @apply typography-body-11; + } } diff --git a/packages/ui/src/components/error-message/error-message.styles.ts b/packages/ui/src/components/error-message/error-message.styles.ts index 2e0f5e28c..84946e97c 100644 --- a/packages/ui/src/components/error-message/error-message.styles.ts +++ b/packages/ui/src/components/error-message/error-message.styles.ts @@ -2,8 +2,9 @@ import { tv } from 'tailwind-variants'; export const styles = tv({ slots: { - base: 'typography-body-10 flex items-center text-danger', + base: 'typography-body-11 flex items-center text-danger', list: 'mb-2 flex flex-col gap-1', - icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top', + // below should be em rather than rem based on old GEL + icon: 'mr-[0.5em] align-top', }, }); diff --git a/packages/ui/src/components/form-hint/form-hint.styles.ts b/packages/ui/src/components/form-hint/form-hint.styles.ts index 8b8100350..5bf07200f 100644 --- a/packages/ui/src/components/form-hint/form-hint.styles.ts +++ b/packages/ui/src/components/form-hint/form-hint.styles.ts @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - base: 'typography-body-10 mb-2 text-muted', + base: 'typography-body-11 mb-2 text-muted', variants: { spacing: { medium: '-mt-1 mb-2', diff --git a/packages/ui/src/components/form-label/form-label.styles.ts b/packages/ui/src/components/form-label/form-label.styles.ts index 906bd1be5..1271c6ee0 100644 --- a/packages/ui/src/components/form-label/form-label.styles.ts +++ b/packages/ui/src/components/form-label/form-label.styles.ts @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - base: 'typography-body-9 block font-medium', + base: 'typography-body-9 leading-loose block font-medium', variants: { spacing: { medium: '', diff --git a/packages/ui/src/components/form/form.component.tsx b/packages/ui/src/components/form/form.component.tsx index fca05f742..7387ddc71 100644 --- a/packages/ui/src/components/form/form.component.tsx +++ b/packages/ui/src/components/form/form.component.tsx @@ -14,9 +14,9 @@ const FormContext = createContext(null); export const useFormContext = () => useContext(FormContext) || {}; -export function Form({ children, size = 'medium', spacing = 'medium', inline = false, ...props }: FormProps) { +export function Form({ children, spacing = 'medium', inline = false, ...props }: FormProps) { return ( - +
{children}
 ); diff --git a/packages/ui/src/components/form/form.stories.tsx b/packages/ui/src/components/form/form.stories.tsx index 36732cc86..2c3163a40 100644 --- a/packages/ui/src/components/form/form.stories.tsx +++ b/packages/ui/src/components/form/form.stories.tsx @@ -59,10 +59,11 @@ export const Default: Story = {

Large size with large spacing

-
+ - Hello, I’m the friendly conversational text component. I live at the top of the form pod if required. + Spacing increases space after label, hint and form group. Sizing can be changed via props on the component + that needs to be bigger i.e. input. @@ -71,14 +72,14 @@ export const Default: Story = { This is a label This is a hint - + This is a label This is a hint - + @@ -87,7 +88,7 @@ export const Default: Story = { This is a label This is a hint - + @@ -116,27 +117,25 @@ export const MultipleErrors: Story = { /** * > All sizes Story */ -export const AllSizes: Story = { +export const Size: Story = { args: {}, render: () => { return (
- {(['small', 'medium'] as const).map(size => ( -
-

Form with size: {size}

- This is a label - This is a hint - - - - ))} +
+

Sizing is currently handled on the child level. See example of size prop on Input component in code.

+ This is a label + This is a hint + + +
); }, }; /** - * > All spacings Story + * > All spacings Story. Increases space between label, hint and form groups */ export const AllSpacings: Story = { args: {}, @@ -145,7 +144,7 @@ export const AllSpacings: Story = {
{(['medium', 'large'] as const).map(size => (
-

Form with Spacing:{size}

+

Form with Spacing:{size}. Sets spacing between label, hint and form groups.

This is a label This is a hint diff --git a/packages/ui/src/components/form/form.types.ts b/packages/ui/src/components/form/form.types.ts index 5d8aea236..956035e26 100644 --- a/packages/ui/src/components/form/form.types.ts +++ b/packages/ui/src/components/form/form.types.ts @@ -5,10 +5,6 @@ export type FormContextValue = { * Whether form is inline */ inline?: boolean; - /** - * Size of Form - */ - size?: 'small' | 'medium' | 'large'; /** * Spacing of Form */ diff --git a/packages/ui/src/css/global.css b/packages/ui/src/css/global.css index cba1b297d..6f73ea04a 100644 --- a/packages/ui/src/css/global.css +++ b/packages/ui/src/css/global.css @@ -2,6 +2,8 @@ @tailwind components; @tailwind utilities; -body { - @apply typography-body-10; +@layer base { + body { + @apply typography-body-11; + } } diff --git a/packages/ui/src/stories/foundation/typography.stories.tsx b/packages/ui/src/stories/foundation/typography.stories.tsx index 3fb9b6f79..1d7868b3e 100644 --- a/packages/ui/src/stories/foundation/typography.stories.tsx +++ b/packages/ui/src/stories/foundation/typography.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, StoryFn } from '@storybook/react'; -import { Table } from '../../components/index.js'; +import { Link, Table } from '../../components/index.js'; const meta: Meta = { title: 'Foundation/Typography', @@ -91,3 +91,48 @@ export const BodyFont = () => { ); }; + +/** + * Line height + */ +export const LineHeight = () => { + return ( +
+

+ The pre-Next version of GEL had a fall-back line height of 1.428571429 for things inside the body, the reasoning + for this can be found{' '} + + here + + . A typography type has been added and the leading style in tailwind (with 14px font) has been extended to + include this value for use to match the older version of GEL. +

+ + GEL 'loose' line-height + + + Tailwind Class + CSS Value + + + + + + typography-body-11 + + fontSize: 0.875rem; lineHeight: 1.428571429 + + + + leading-loose + + lineHeight: 1.428571429 + + +
+
+ ); +}; diff --git a/packages/ui/src/tailwind/constants/typography.ts b/packages/ui/src/tailwind/constants/typography.ts index d3a6f2f5a..3ac29abb0 100644 --- a/packages/ui/src/tailwind/constants/typography.ts +++ b/packages/ui/src/tailwind/constants/typography.ts @@ -53,4 +53,8 @@ export const FONT_SIZES = { fontSize: '0.875rem', lineHeight: 'normal', }, + 11: { + fontSize: '0.875rem', + lineHeight: 'loose', + }, }; diff --git a/packages/ui/src/tailwind/tailwind-plugin.ts b/packages/ui/src/tailwind/tailwind-plugin.ts index 50c3f79fe..ae606dcc7 100644 --- a/packages/ui/src/tailwind/tailwind-plugin.ts +++ b/packages/ui/src/tailwind/tailwind-plugin.ts @@ -48,6 +48,8 @@ export const WestpacUIKitBasePlugin = plugin( lineHeight: { tight: '1.2', normal: '1.4', + // See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning + loose: '1.428571429', }, borderWidth: { 5: '0.3125rem', @@ -125,6 +127,10 @@ export const WestpacUIKitBasePlugin = plugin( fontSize: '0.875rem', lineHeight: 'normal', }, + 11: { + fontSize: '0.875rem', + lineHeight: 'loose', + }, }, formControl: { base: 'no-inner-spin-button box-border w-fit appearance-none overflow-visible rounded border bg-white align-middle text-text transition placeholder:font-light placeholder:text-text-50 placeholder:opacity-100 focus:focus-outline disabled:form-control-disabled', From e4926828b9c971c951c39c723255c7ca7ab5719d Mon Sep 17 00:00:00 2001 From: Tom King Date: Mon, 30 Oct 2023 15:33:49 +1000 Subject: [PATCH 2/3] - updated test constants --- packages/ui/src/tailwind/__mocks__/utils.constants.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/ui/src/tailwind/__mocks__/utils.constants.ts b/packages/ui/src/tailwind/__mocks__/utils.constants.ts index a412aa55e..099de7490 100644 --- a/packages/ui/src/tailwind/__mocks__/utils.constants.ts +++ b/packages/ui/src/tailwind/__mocks__/utils.constants.ts @@ -40,6 +40,7 @@ export const EXPECTED_SPACING = { export const EXPECTED_FONT_SIZES_VARS = { 'body-1': '3.75rem', 'body-10': '0.875rem', + 'body-11': '0.875rem', 'body-2': '3.375rem', 'body-3': '3rem', 'body-4': '2.625rem', @@ -50,6 +51,7 @@ export const EXPECTED_FONT_SIZES_VARS = { 'body-9': '1rem', 'brand-1': '3.75rem', 'brand-10': '0.875rem', + 'brand-11': '0.875rem', 'brand-2': '3.375rem', 'brand-3': '3rem', 'brand-4': '2.625rem', From 0c1d5d8e46a0a468808ad0a9240c7cb0d1f676f2 Mon Sep 17 00:00:00 2001 From: Tom King Date: Mon, 30 Oct 2023 16:12:50 +1000 Subject: [PATCH 3/3] - updated line height story --- .../stories/foundation/typography.stories.tsx | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/stories/foundation/typography.stories.tsx b/packages/ui/src/stories/foundation/typography.stories.tsx index 1d7868b3e..4f907db5a 100644 --- a/packages/ui/src/stories/foundation/typography.stories.tsx +++ b/packages/ui/src/stories/foundation/typography.stories.tsx @@ -96,6 +96,11 @@ export const BodyFont = () => { * Line height */ export const LineHeight = () => { + const lineHeights = [ + { className: 'leading-normal', lineHeight: '1.4' }, + { className: 'leading-tight', lineHeight: '1.2' }, + { className: 'leading-loose', lineHeight: '1.428571429' }, + ]; return (

@@ -108,29 +113,35 @@ export const LineHeight = () => { here . A typography type has been added and the leading style in tailwind (with 14px font) has been extended to - include this value for use to match the older version of GEL. + include this value for use to match the older version of GEL. The default tailwind values for normal and tight + have also been updated and included in the table.

GEL 'loose' line-height - Tailwind Class - CSS Value + Token + Value + Tailwind class - typography-body-11 - - fontSize: 0.875rem; lineHeight: 1.428571429 - - - - leading-loose + body-11 - lineHeight: 1.428571429 + fontSize: 0.875rem (14px); lineHeight: 1.428571429 + typography-body-11 + {lineHeights.map(i => ( + + + {i.className.replace('leading-', '')} + + lineHeight: {i.lineHeight} + {i.className} + + ))}