Skip to content

Commit

Permalink
Merge pull request #224 from WestpacGEL/fixes/form-sizing-and-line-he…
Browse files Browse the repository at this point in the history 
…ights

Fixes/form sizing and line heights
  • Loading branch information
@samithaf
samithaf authored Oct 30, 2023
2 parents 6f96539 + 0c1d5d8 commit efe850d
Show file tree
Hide file tree
Showing 12 changed files with 194 additions and 127 deletions.
195 changes: 98 additions & 97 deletions packages/ui/.storybook/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
5 changes: 3 additions & 2 deletions packages/ui/src/components/error-message/error-message.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
2 changes: 1 addition & 1 deletion packages/ui/src/components/form-hint/form-hint.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/form-label/form-label.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/form/form.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ const FormContext = createContext<FormContextValue | null>(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 (
<FormContext.Provider value={{ inline, size, spacing }}>
<FormContext.Provider value={{ inline, spacing }}>
<form {...props}>{children}</form>
</FormContext.Provider>
);
Expand Down
33 changes: 16 additions & 17 deletions packages/ui/src/components/form/form.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@ export const Default: Story = {
<hr />

<h2 className="typography-body-7 my-4 font-bold">Large size with large spacing</h2>
<Form size="large" spacing="large">
<Form spacing="large">
<Form.Section>
<Form.ChitChat>
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.
</Form.ChitChat>
</Form.Section>

Expand All @@ -71,14 +72,14 @@ export const Default: Story = {
<Form.Label htmlFor="example-large-1">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-1" />
<Input name="example-large-1" size="large" />
</Form.Group>

<Form.Group>
<Form.Label htmlFor="example-large-2">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-2" />
<Input name="example-large-2" size="large" />
</Form.Group>
</Form.Section>

Expand All @@ -87,7 +88,7 @@ export const Default: Story = {
<Form.Label htmlFor="example-large-3">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-3" />
<Input name="example-large-3" size="large" />
</Form.Group>
</Form.Section>
</Form>
Expand Down Expand Up @@ -116,27 +117,25 @@ export const MultipleErrors: Story = {
/**
* > All sizes Story
*/
export const AllSizes: Story = {
export const Size: Story = {
args: {},
render: () => {
return (
<div className="flex flex-col gap-3">
{(['small', 'medium'] as const).map(size => (
<Form size={size}>
<h3>Form with size: {size}</h3>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input />
</Form>
))}
<Form>
<h3>Sizing is currently handled on the child level. See example of size prop on Input component in code.</h3>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input size="large" />
</Form>
</div>
);
},
};

/**
* > All spacings Story
* > All spacings Story. Increases space between label, hint and form groups
*/
export const AllSpacings: Story = {
args: {},
Expand All @@ -145,7 +144,7 @@ export const AllSpacings: Story = {
<div className="flex flex-col gap-3">
{(['medium', 'large'] as const).map(size => (
<Form spacing={size}>
<h3>Form with Spacing:{size}</h3>
<h3>Form with Spacing:{size}. Sets spacing between label, hint and form groups.</h3>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
Expand Down
4 changes: 0 additions & 4 deletions packages/ui/src/components/form/form.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ export type FormContextValue = {
* Whether form is inline
*/
inline?: boolean;
/**
* Size of Form
*/
size?: 'small' | 'medium' | 'large';
/**
* Spacing of Form
*/
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/src/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
@tailwind components;
@tailwind utilities;

body {
@apply typography-body-10;
@layer base {
body {
@apply typography-body-11;
}
}
Loading

1 comment on commit efe850d

@vercel
Copy link

@vercel vercel bot commented on efe850d Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gel-next-site – ./apps/site

gel-next-site-git-main-westpacgel.vercel.app
gel-next-site-westpacgel.vercel.app
gel-next-site.vercel.app

Please sign in to comment.