Skip to content

Commit

Permalink
Merge pull request #226 from WestpacGEL/fix/typography-docs
Browse files Browse the repository at this point in the history 
updated typography docs
  • Loading branch information
@tomjackking
tomjackking authored Oct 30, 2023
2 parents efe850d + ab68c14 commit 17b55b0
Showing 1 changed file with 40 additions and 38 deletions.
78 changes: 40 additions & 38 deletions packages/ui/src/stories/foundation/typography.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,45 @@ const meta: Meta = {

export default meta;

const twentyPixel = '1.428571429';
const fourteenPixel = '0.875rem (14px)';

/**
* Brand fonts
*/
export const BrandFont = () => {
const typographyBrandScale = [
{ className: 'typography-brand-1', size: '3.75rem (60px)' },
{ className: 'typography-brand-2', size: '3.375rem (54px)' },
{ className: 'typography-brand-3', size: '3rem (48px)' },
{ className: 'typography-brand-4', size: '2.625rem (42px)' },
{ className: 'typography-brand-5', size: '2.25rem (36px)' },
{ className: 'typography-brand-6', size: '1.875rem (30px)' },
{ className: 'typography-brand-7', size: '1.5rem (24px)' },
{ className: 'typography-brand-8', size: '1.125rem (18px)' },
{ className: 'typography-brand-9', size: '1rem (16px)' },
{ className: 'typography-brand-10', size: '0.875rem (14px)' },
const typographyScale = [
{ className: 'typography-brand-1', fontSize: '3.75rem (60px)', lineHeight: '1.2' },
{ className: 'typography-brand-2', fontSize: '3.375rem (54px)', lineHeight: '1.2' },
{ className: 'typography-brand-3', fontSize: '3rem (48px)', lineHeight: '1.2' },
{ className: 'typography-brand-4', fontSize: '2.625rem (42px)', lineHeight: '1.2' },
{ className: 'typography-brand-5', fontSize: '2.25rem (36px)', lineHeight: '1.2' },
{ className: 'typography-brand-6', fontSize: '1.875rem (30px)', lineHeight: '1.2' },
{ className: 'typography-brand-7', fontSize: '1.5rem (24px)', lineHeight: '1.2' },
{ className: 'typography-brand-8', fontSize: '1.125rem (18px)', lineHeight: '1.4' },
{ className: 'typography-brand-9', fontSize: '1rem (16px)', lineHeight: '1.4' },
{ className: 'typography-brand-10', fontSize: fourteenPixel, lineHeight: '1.4' },
{ className: 'typography-brand-11', fontSize: fourteenPixel, lineHeight: twentyPixel },
];
return (
<Table>
<Table.Caption>GEL brand typography tokens</Table.Caption>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Token</Table.HeaderCell>
<Table.HeaderCell>Value</Table.HeaderCell>
<Table.HeaderCell>Font size</Table.HeaderCell>
<Table.HeaderCell>Line height</Table.HeaderCell>
<Table.HeaderCell>Tailwind class</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
{typographyBrandScale.map(i => (
{typographyScale.map(i => (
<Table.Row key={i.className}>
<Table.Cell>
<span className={i.className}>{i.className.replace('typography-', '')}</span>
</Table.Cell>
<Table.Cell>{i.size}</Table.Cell>
<Table.Cell>{i.fontSize}</Table.Cell>
<Table.Cell>{i.lineHeight}</Table.Cell>
<Table.Cell>{i.className}</Table.Cell>
</Table.Row>
))}
Expand All @@ -55,35 +61,38 @@ export const BrandFont = () => {
* Body fonts
*/
export const BodyFont = () => {
const typographyBrandScale = [
{ className: 'typography-body-1', size: '3.75rem (60px)' },
{ className: 'typography-body-2', size: '3.375rem (54px)' },
{ className: 'typography-body-3', size: '3rem (48px)' },
{ className: 'typography-body-4', size: '2.625rem (42px)' },
{ className: 'typography-body-5', size: '2.25rem (36px)' },
{ className: 'typography-body-6', size: '1.875rem (30px)' },
{ className: 'typography-body-7', size: '1.5rem (24px)' },
{ className: 'typography-body-8', size: '1.125rem (18px)' },
{ className: 'typography-body-9', size: '1rem (16px)' },
{ className: 'typography-body-10', size: '0.875rem (14px)' },
const typographyScale = [
{ className: 'typography-body-1', fontSize: '3.75rem (60px)', lineHeight: '1.2' },
{ className: 'typography-body-2', fontSize: '3.375rem (54px)', lineHeight: '1.2' },
{ className: 'typography-body-3', fontSize: '3rem (48px)', lineHeight: '1.2' },
{ className: 'typography-body-4', fontSize: '2.625rem (42px)', lineHeight: '1.2' },
{ className: 'typography-body-5', fontSize: '2.25rem (36px)', lineHeight: '1.2' },
{ className: 'typography-body-6', fontSize: '1.875rem (30px)', lineHeight: '1.2' },
{ className: 'typography-body-7', fontSize: '1.5rem (24px)', lineHeight: '1.2' },
{ className: 'typography-body-8', fontSize: '1.125rem (18px)', lineHeight: '1.4' },
{ className: 'typography-body-9', fontSize: '1rem (16px)', lineHeight: '1.4' },
{ className: 'typography-body-10', fontSize: fourteenPixel, lineHeight: '1.4' },
{ className: 'typography-body-11', fontSize: fourteenPixel, lineHeight: twentyPixel },
];
return (
<Table>
<Table.Caption>GEL body typography tokens</Table.Caption>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Token</Table.HeaderCell>
<Table.HeaderCell>Value</Table.HeaderCell>
<Table.HeaderCell>Font size</Table.HeaderCell>
<Table.HeaderCell>Line height</Table.HeaderCell>
<Table.HeaderCell>Tailwind class</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
{typographyBrandScale.map(i => (
{typographyScale.map(i => (
<Table.Row key={i.className}>
<Table.Cell>
<span className={i.className}>{i.className.replace('typography-', '')}</span>
</Table.Cell>
<Table.Cell>{i.size}</Table.Cell>
<Table.Cell>{i.fontSize}</Table.Cell>
<Table.Cell>{i.lineHeight}</Table.Cell>
<Table.Cell>{i.className}</Table.Cell>
</Table.Row>
))}
Expand Down Expand Up @@ -117,28 +126,21 @@ export const LineHeight = () => {
have also been updated and included in the table.
</p>
<Table>
<Table.Caption>GEL 'loose' line-height</Table.Caption>
<Table.Caption>GEL line height tokens</Table.Caption>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Token</Table.HeaderCell>
<Table.HeaderCell>Value</Table.HeaderCell>
<Table.HeaderCell>Line height</Table.HeaderCell>
<Table.HeaderCell>Tailwind class</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row key="typography-11">
<Table.Cell>
<span className="typography-body-11">body-11</span>
</Table.Cell>
<Table.Cell>fontSize: 0.875rem (14px); lineHeight: 1.428571429</Table.Cell>
<Table.Cell>typography-body-11</Table.Cell>
</Table.Row>
{lineHeights.map(i => (
<Table.Row key={i.className}>
<Table.Cell>
<span className={i.className}>{i.className.replace('leading-', '')}</span>
</Table.Cell>
<Table.Cell>lineHeight: {i.lineHeight}</Table.Cell>
<Table.Cell>{i.lineHeight}</Table.Cell>
<Table.Cell>{i.className}</Table.Cell>
</Table.Row>
))}
Expand Down

0 comments on commit 17b55b0

Please sign in to comment.