From eaa447d5e064590aa1e44d2e6cd32d99378613d6 Mon Sep 17 00:00:00 2001 From: Ashleigh Simonelli Date: Wed, 6 Mar 2024 17:39:10 +0000 Subject: [PATCH] feat: #22 adds semantic typography tags (#51) * feat: #22 adds semantic typography tags * refactor: added tagged component for layout components * chore: changed extending of interface * chore: linting * docs: added changelog entry * fix: remove deprecated element components * chore: remove unused import * feat: added tests for layout components with tag property * feat: added typography tests for tagged typography abstract component --------- Co-authored-by: Will McVay --- .../__snapshots__/breadcrumb.test.tsx.snap | 152 +- .../__snapshots__/file-input.test.tsx.snap | 252 +- .../key-value-list.test.tsx.snap | 5288 ++++++++++++++++- src/components/layout/__styles__/index.ts | 8 +- .../__snapshots__/layout.test.tsx.snap | 232 +- .../layout/__tests__/layout.test.tsx | 37 +- src/components/layout/layout.tsx | 91 +- .../page-header/__styles__/index.ts | 8 +- .../__snapshots__/page-header.test.tsx.snap | 1164 +++- src/components/typography/__styles__/index.ts | 16 +- .../__snapshots__/typography.test.tsx.snap | 5010 +++++++++++++++- .../typography/__tests__/typography.test.tsx | 35 + src/components/typography/typography.mdx | 8 + .../typography/typography.stories.tsx | 15 + src/components/typography/typography.tsx | 177 +- src/storybook/changelog.mdx | 1 + 16 files changed, 11818 insertions(+), 676 deletions(-) diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap index da9f1ae1..106e3faf 100644 --- a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap +++ b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap @@ -8,8 +8,21 @@ exports[`BreadCrumb should match a snapshot 1`] = ` - @@ -18,9 +31,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Home - - @@ -42,9 +68,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 1 - - @@ -66,9 +105,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 2 - - @@ -90,7 +142,7 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 3 - + , @@ -98,8 +150,21 @@ exports[`BreadCrumb should match a snapshot 1`] = ` - @@ -108,9 +173,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Home - - @@ -132,9 +210,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 1 - - @@ -156,9 +247,22 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 2 - - @@ -180,7 +284,7 @@ exports[`BreadCrumb should match a snapshot 1`] = ` > Level 3 - + , "debug": [Function], diff --git a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap index d222e169..61444c0b 100644 --- a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap +++ b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap @@ -6,8 +6,21 @@ exports[`FileInput component should match a snapshot 1`] = ` "baseElement":
- @@ -29,18 +42,117 @@ exports[`FileInput component should match a snapshot 1`] = ` id="test-static-id" /> Upload File - +
, "container":
- @@ -62,11 +174,97 @@ exports[`FileInput component should match a snapshot 1`] = ` id="test-static-id" /> Upload File - +
, "debug": [Function], @@ -201,8 +399,21 @@ exports[`FileInput component should match a snapshot with full props 1`] = ` Some Label - @@ -251,7 +462,7 @@ exports[`FileInput component should match a snapshot with full props 1`] = ` /> - + , @@ -260,8 +471,21 @@ exports[`FileInput component should match a snapshot with full props 1`] = ` Some Label - @@ -310,7 +534,7 @@ exports[`FileInput component should match a snapshot with full props 1`] = ` /> - + , "debug": [Function], diff --git a/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap b/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap index 97ed5ca9..bb37a426 100644 --- a/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap +++ b/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap @@ -22,22 +22,213 @@ exports[`KeyValueList component should match a snapshot 1`] = ` - - Name - - +
John Doe - - +
+ - - Email - - +
email@example.com - - +
+ - - Parking Spaces - - +
2 - - +
+ - - Date Signed Up - - +
20th September 2023 - - +
+ - - Address - - I added a textEllipsis prop to this one to show how it works. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - + + - - - Description - - - This one I just allowed the text to wrap. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - - - - - , - "container":
-
+
+ Description +
+
+ This one I just allowed the text to wrap. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. +
+
+ +
+ + , + "container":
+
- - Name - - +
John Doe - - +
+
- - Email - - +
email@example.com - - +
+
- - Parking Spaces - - +
2 - - +
+ - - Date Signed Up - - +
20th September 2023 - - +
+ - - - Address - - + Address + +
I added a textEllipsis prop to this one to show how it works. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - +
+ - - Description - - +
This one I just allowed the text to wrap. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - +
+ , @@ -472,8 +2764,21 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = ` classname="" role="listitem" > - - - Name - - +
John Doe - - - +
+ + - - - Email - - +
email@example.com - - - +
+ + - - - Parking Spaces - - +
2 - - - +
+ + - - - Date Signed Up - - +
20th September 2023 - - - +
+ + - - - Address - - I added a textEllipsis prop to this one to show how it works. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - - + + + - - - Description - - +
This one I just allowed the text to wrap. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - - +
+ + @@ -698,8 +4214,21 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = ` classname="" role="listitem" > - - - Name - - +
John Doe - - - +
+ + - - - Email - - +
email@example.com - - - +
+ + - - - Parking Spaces - - +
2 - - - +
+ + - - - Date Signed Up - - +
20th September 2023 - - - +
+ + - - - Address - - I added a textEllipsis prop to this one to show how it works. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - - + + + - - - Description - - +
This one I just allowed the text to wrap. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolorem laudantium, repellat, aut tenetur enim veritatis debitis nostrum iste fugit quas delectus repellendus iusto ratione esse. Ab rem voluptate veritatis. - - - +
+ + , diff --git a/src/components/layout/__styles__/index.ts b/src/components/layout/__styles__/index.ts index 29dcbc6b..0a488ede 100644 --- a/src/components/layout/__styles__/index.ts +++ b/src/components/layout/__styles__/index.ts @@ -6,7 +6,7 @@ import { css } from '@linaria/core' export const elHasGreyBackground = css`` export const elHasMaxWidth = css`` -export const ElMainContainer = styled.main` +export const elMainContainer = css` display: flex; flex-direction: column; width: 100%; @@ -25,7 +25,7 @@ export const ElMainContainer = styled.main` } ` -export const ElPageContainer = styled.section` +export const elPageContainer = css` display: block; padding: 0.5rem 1.25rem; width: 100%; @@ -52,7 +52,7 @@ export const ElPageContainer = styled.section` } ` -export const ElSecondaryNavContainer = styled.aside` +export const elSecondaryNavContainer = css` display: block; width: 14rem; flex: 0 0 14rem; @@ -79,7 +79,7 @@ export const ElMolecule = styled.div` width: 100%; ` -export const ElFlexContainer = styled.div` +export const elFlexContainer = css` display: flex; min-height: 0; min-width: 0; diff --git a/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap b/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap index 4294a49a..a9b81700 100644 --- a/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap +++ b/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap @@ -5,23 +5,49 @@ exports[`FlexContainer should match a snapshot and render children 1`] = ` "asFragment": [Function], "baseElement":
-

I am child

- +
, "container":
-

I am child

- +
, "debug": [Function], "findAllByAltText": [Function], @@ -82,8 +108,21 @@ exports[`FlexContainer should match a snapshot and render children with all prop "asFragment": [Function], "baseElement":
- I am child

- +
, "container":
- I am child

- +
, "debug": [Function], "findAllByAltText": [Function], @@ -243,23 +295,57 @@ exports[`MainContainer should match a snapshot and render children 1`] = ` "asFragment": [Function], "baseElement":
-

I am child

- +
, "container":
-

I am child

- +
, "debug": [Function], "findAllByAltText": [Function], @@ -393,23 +479,73 @@ exports[`PageContainer should match a snapshot and render children 1`] = ` "asFragment": [Function], "baseElement":
-

I am child

- +
, "container":
-

I am child

- +
, "debug": [Function], "findAllByAltText": [Function], @@ -470,23 +606,59 @@ exports[`SecondaryNavContainer should match a snapshot and render children 1`] = "asFragment": [Function], "baseElement":
-

I am child

- +
, "container":
-

I am child

- +
, "debug": [Function], "findAllByAltText": [Function], diff --git a/src/components/layout/__tests__/layout.test.tsx b/src/components/layout/__tests__/layout.test.tsx index 869ae423..26cdcef3 100644 --- a/src/components/layout/__tests__/layout.test.tsx +++ b/src/components/layout/__tests__/layout.test.tsx @@ -1,5 +1,14 @@ import { render } from '@testing-library/react' -import { MainContainer, PageContainer, SecondaryNavContainer, Molecule, FlexContainer } from '../index' +import { + MainContainer, + PageContainer, + SecondaryNavContainer, + Molecule, + FlexContainer, + TaggedElement, + elMainContainer, +} from '../index' +import { cx } from '@linaria/core' describe('MainContainer', () => { it('should match a snapshot and render children', () => { @@ -86,4 +95,30 @@ describe('FlexContainer', () => { ) expect(wrapper).toMatchSnapshot() }) + + describe('TaggedElements', () => { + describe('TaggedElement', () => { + ;['div', 'main', 'aside', 'section'].forEach((tag) => { + it(`Can return element with tag [${tag}]`, () => { + const component = render() + expect(component.baseElement.querySelector(tag)?.tagName.toLowerCase()).toBe(tag) + }) + }) + }) + + describe('Layout elements can use tag', () => { + ;['div', 'main', 'aside', 'section'].forEach((tag) => { + Object.entries({ + main: , + page: , + secondaryNav: , + }).forEach(([name, element]) => { + it(`${tag} can be used for element ${name}`, () => { + const component = render(element) + expect(component.baseElement.querySelector(tag)?.tagName.toLowerCase()).toBe(tag) + }) + }) + }) + }) + }) }) diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 3148dd1b..ed1b3a8b 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -1,13 +1,13 @@ import React, { HTMLAttributes, FC } from 'react' import { cx } from '@linaria/core' import { - ElMainContainer, - ElPageContainer, - ElSecondaryNavContainer, ElMolecule, - ElFlexContainer, elHasGreyBackground, elHasMaxWidth, + elMainContainer, + elPageContainer, + elSecondaryNavContainer, + elFlexContainer, } from './__styles__' import { elFlexRow, @@ -35,9 +35,11 @@ import { } from '../../styles/flexbox' import { useDeprecateComponent } from '../../storybook/deprecate-var' +type LayoutTags = 'main' | 'aside' | 'section' | 'div' export interface ContainerProps extends HTMLAttributes { hasGreyBackground?: boolean hasMaxWidth?: boolean + tag?: LayoutTags } export interface ContainerFlexProps extends ContainerProps { @@ -66,37 +68,65 @@ export interface ContainerFlexProps extends ContainerProps { hasGreyBackground?: boolean } -export const MainContainer: FC = ({ children, className, hasGreyBackground, hasMaxWidth, ...rest }) => ( - - {children} - -) - -export const PageContainer: FC = ({ children, className, hasGreyBackground, hasMaxWidth, ...rest }) => ( - - {children} - -) +interface TaggedElementProps extends ContainerProps { + baseClass: string +} -export const SecondaryNavContainer: FC = ({ +export const TaggedElement: FC = ({ + tag, children, className, + baseClass, hasGreyBackground, hasMaxWidth, ...rest -}) => ( - +}) => { + const classes = cx(baseClass, hasGreyBackground && elHasGreyBackground, hasMaxWidth && elHasMaxWidth, className) + switch (tag) { + case 'main': + return ( +
+ {children} +
+ ) + case 'aside': + return ( + + ) + case 'section': + return ( +
+ {children} +
+ ) + default: + case 'div': + return ( +
+ {children} +
+ ) + } +} + +export const MainContainer: FC = ({ tag = 'main', children, ...rest }) => ( + + {children} + +) + +export const PageContainer: FC = ({ tag = 'section', children, ...rest }) => ( + + {children} + +) + +export const SecondaryNavContainer: FC = ({ children, tag = 'aside', ...rest }) => ( + {children} - + ) export const Molecule: FC = ({ children, ...rest }) => { @@ -105,6 +135,7 @@ export const Molecule: FC = ({ children, ...rest }) => { } export const FlexContainer: FC = ({ + tag = 'div', children, isFlexRow, isFlexRowReverse, @@ -162,8 +193,8 @@ export const FlexContainer: FC = ({ ) return ( - + {children} - + ) } diff --git a/src/components/page-header/__styles__/index.ts b/src/components/page-header/__styles__/index.ts index 679ffa55..066e4c8a 100644 --- a/src/components/page-header/__styles__/index.ts +++ b/src/components/page-header/__styles__/index.ts @@ -1,7 +1,7 @@ import { styled } from '@linaria/react' import { isTablet } from '../../../styles/media' import { ElAvatar, ElAvatarImage } from '../../avatar' -import { ElTextL, ElTextBase } from '../../typography' +import { elTextL, elTextBase } from '../../typography' import { css } from '@linaria/core' const dot = `data:image/svg+xml;utf8, @@ -16,7 +16,7 @@ export const ElPageHeaderContainer = styled.div` flex-direction: column; justify-content: flex-start; - ${ElTextBase} { + .${elTextBase} { margin-bottom: 0.5rem; } @@ -25,11 +25,11 @@ export const ElPageHeaderContainer = styled.div` justify-content: space-between; margin-bottom: 1.25rem; - ${ElTextBase} { + .${elTextBase} { margin-bottom: 0; } - ${ElTextL} { + .${elTextL} { margin-bottom: 0.5rem; } } diff --git a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap index 0d3e6d3f..1b51a3db 100644 --- a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap +++ b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap @@ -17,8 +17,21 @@ exports[`PageHeader component should match a snapshot 1`] = ` margin-bottom: 1rem; " > - @@ -27,9 +40,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Home - - @@ -51,9 +77,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 1 - - @@ -75,9 +114,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 2 - - @@ -99,7 +151,7 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 3 - + - - Page Title - + @@ -148,33 +302,393 @@ exports[`PageHeader component should match a snapshot 1`] = ` - Page Sub Title - - +
- Page Info 1 - +
- Page Info 2 - + - Page Info 3 - - - + + + - @@ -328,9 +855,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Home - - @@ -352,9 +892,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 1 - - @@ -376,9 +929,22 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 2 - - @@ -400,7 +966,7 @@ exports[`PageHeader component should match a snapshot 1`] = ` > Level 3 - + - - Page Title - + @@ -449,33 +1117,393 @@ exports[`PageHeader component should match a snapshot 1`] = ` - Page Sub Title - - +
- Page Info 1 - +
- Page Info 2 - + - Page Info 3 - - - + + +
- I am a Text2XL - +
, "container":
- I am a Text2XL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -78,19 +256,197 @@ exports[`Typography Base Text2XL should match a snapshot with all modifiers 1`] "asFragment": [Function], "baseElement":
- I am a Text2XL - +
, "container":
- I am a Text2XL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -151,19 +507,197 @@ exports[`Typography Base Text2XS should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a Text2XS - +
, "container":
- I am a Text2XS - +
, "debug": [Function], "findAllByAltText": [Function], @@ -224,19 +758,197 @@ exports[`Typography Base Text2XS should match a snapshot with all modifiers 1`] "asFragment": [Function], "baseElement":
- I am a Text2XS - +
, "container":
- I am a Text2XS - +
, "debug": [Function], "findAllByAltText": [Function], @@ -297,19 +1009,197 @@ exports[`Typography Base Text3XL should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a Text3XL - +
, "container":
- I am a Text3XL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -370,19 +1260,197 @@ exports[`Typography Base Text3XL should match a snapshot with all modifiers 1`] "asFragment": [Function], "baseElement":
- I am a Text3XL - +
, "container":
- I am a Text3XL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -443,19 +1511,191 @@ exports[`Typography Base TextBase should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a TextBase - +
, "container":
- I am a TextBase - +
, "debug": [Function], "findAllByAltText": [Function], @@ -516,19 +1756,191 @@ exports[`Typography Base TextBase should match a snapshot with all modifiers 1`] "asFragment": [Function], "baseElement":
- I am a TextBase - +
, "container":
- I am a TextBase - +
, "debug": [Function], "findAllByAltText": [Function], @@ -584,24 +1996,202 @@ exports[`Typography Base TextBase should match a snapshot with all modifiers 1`] } `; -exports[`Typography Base TextL should match a snapshot 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- - I am a TextL - -
- , - "container":
- +
+
+ I am a TextL +
+
+ , + "container":
+
I am a TextL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -662,19 +2252,197 @@ exports[`Typography Base TextL should match a snapshot with all modifiers 1`] = "asFragment": [Function], "baseElement":
- I am a TextL - +
, "container":
- I am a TextL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -735,19 +2503,197 @@ exports[`Typography Base TextSM should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a TextSM - +
, "container":
- I am a TextSM - +
, "debug": [Function], "findAllByAltText": [Function], @@ -808,19 +2754,197 @@ exports[`Typography Base TextSM should match a snapshot with all modifiers 1`] = "asFragment": [Function], "baseElement":
- I am a TextSM - +
, "container":
- I am a TextSM - +
, "debug": [Function], "findAllByAltText": [Function], @@ -881,19 +3005,197 @@ exports[`Typography Base TextXL should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a TextXL - +
, "container":
- I am a TextXL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -954,19 +3256,197 @@ exports[`Typography Base TextXL should match a snapshot with all modifiers 1`] = "asFragment": [Function], "baseElement":
- I am a TextXL - +
, "container":
- I am a TextXL - +
, "debug": [Function], "findAllByAltText": [Function], @@ -1027,19 +3507,197 @@ exports[`Typography Base TextXS should match a snapshot 1`] = ` "asFragment": [Function], "baseElement":
- I am a TextXS - +
, "container":
- I am a TextXS - +
, "debug": [Function], "findAllByAltText": [Function], @@ -1100,19 +3758,197 @@ exports[`Typography Base TextXS should match a snapshot with all modifiers 1`] = "asFragment": [Function], "baseElement":
- I am a TextXS - +
, "container":
- I am a TextXS - +
, "debug": [Function], "findAllByAltText": [Function], @@ -1174,7 +4010,93 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = ` "baseElement":
I am body text @@ -1182,7 +4104,93 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = ` , "container":
I am body text @@ -1247,7 +4255,93 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers "baseElement":
I am body text @@ -1255,7 +4349,93 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers , "container":
I am body text @@ -1320,7 +4500,93 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = ` "baseElement":
I am small text @@ -1328,7 +4594,93 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = ` , "container":
I am small text @@ -1393,7 +4745,93 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = ` "baseElement":
I am small text @@ -1401,7 +4839,93 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = ` , "container":
I am small text @@ -1460,21 +4984,193 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = ` } `; -exports[`Typography Helpers SmallText should match a snapshot with all modifiers 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- - I am small text - -
- , - "container":
- +
+ + I am small text + +
+ , + "container":
+ I am small text @@ -1539,7 +5235,93 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers "baseElement":
I am small text @@ -1547,7 +5329,93 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers , "container":
I am small text @@ -1612,7 +5480,93 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers "baseElement":
i am some text @@ -1620,7 +5574,93 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers , "container":
i am some text @@ -1685,7 +5725,93 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = ` "baseElement":
I am a subtitle @@ -1693,7 +5819,93 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = ` , "container":
I am a subtitle @@ -1758,7 +5970,93 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers "baseElement":
I am a subtitle @@ -1766,7 +6064,93 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers , "container":
I am a subtitle @@ -1831,7 +6215,93 @@ exports[`Typography Helpers Title should match a snapshot 1`] = ` "baseElement":
I am a title @@ -1839,7 +6309,93 @@ exports[`Typography Helpers Title should match a snapshot 1`] = ` , "container":
I am a title @@ -1904,7 +6460,93 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`] "baseElement":
I am a title @@ -1912,7 +6554,93 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`] , "container":
I am a title diff --git a/src/components/typography/__tests__/typography.test.tsx b/src/components/typography/__tests__/typography.test.tsx index f0072a46..b1d2f784 100644 --- a/src/components/typography/__tests__/typography.test.tsx +++ b/src/components/typography/__tests__/typography.test.tsx @@ -12,6 +12,8 @@ import { TextL, TextSM, TextXL, + TaggedTypography, + TypeographyTag, } from '..' describe('Typography Base', () => { @@ -403,4 +405,37 @@ describe('Typography Helpers', () => { ) expect(wrapper).toMatchSnapshot() }) + + describe('TaggedTypography', () => { + ;[...Array.from({ length: 5 }, (_, i) => i + 1).map((index) => `h${index}`), 'p', 'small', 'span', 'div'].forEach( + (tag) => { + it(`${tag}`, () => { + const component = render() + expect(component.baseElement.querySelector(tag)?.tagName.toString().toLowerCase()).toBe(tag) + }) + }, + ) + + describe('Typography Components', () => { + ;[...Array.from({ length: 5 }, (_, i) => i + 1).map((index) => `h${index}`), 'p', 'small', 'span', 'div'].forEach( + (tag) => { + Object.entries({ + text3xl: , + text2xl: , + textxl: , + textl: , + textBase: , + textSm: , + textXs: , + text2Xs: , + }).forEach(([name, element]) => { + it(`Element ${name} can return ${tag}`, () => { + const component = render(element) + expect(component.baseElement.querySelector(tag)?.tagName.toString().toLowerCase()).toBe(tag) + }) + }) + }, + ) + }) + }) }) diff --git a/src/components/typography/typography.mdx b/src/components/typography/typography.mdx index 290e2477..22e86b6f 100644 --- a/src/components/typography/typography.mdx +++ b/src/components/typography/typography.mdx @@ -28,6 +28,14 @@ The base type scale and wrappers for defining typography and type pairings. +## Semantic Typography + +The base type scale with underlying semantic tags passed via the tag prop. + + + + + ## Modifiers We support a number of modifier to override the default typography, specifically bold, italic, grey coloured and centered text. Also, removing the bottom margin when you want to manually group your text items and adding a bottom margin for denoting the end of a page section. diff --git a/src/components/typography/typography.stories.tsx b/src/components/typography/typography.stories.tsx index 0db0dcd9..cb2856cb 100644 --- a/src/components/typography/typography.stories.tsx +++ b/src/components/typography/typography.stories.tsx @@ -33,6 +33,21 @@ export const BaseScale = { ), } +export const TaggedTypography = { + render: ({}) => ( + <> + I am a Text3XL with an h1 tag + I am a Text2XL with an h2 tag + I am a TextXL with an h4 tag + I am a TextL with an h6 tag + I am a TextBase with a p tag + I am a TextSM with a small tag + I am a TextXS with a div tag + I am a Text2XS with a span tag + + ), +} + export const TypographyModifiers = { render: ({}) => ( <> diff --git a/src/components/typography/typography.tsx b/src/components/typography/typography.tsx index e5e083c6..ce2230d9 100644 --- a/src/components/typography/typography.tsx +++ b/src/components/typography/typography.tsx @@ -15,19 +15,21 @@ import { elHasDisabledText, elHasCapitalisedText, elHasMediumText, - ElText2XL, - ElText3XL, - ElTextXL, - ElTextL, - ElTextSM, - ElTextXS, - ElText2XS, - ElTextBase, + elText2XL, + elText3XL, + elTextXL, + elTextL, + elTextSM, + elTextXS, + elText2XS, + elTextBase, elHasMargin, elHasUpperCasedText, } from './__styles__' import { Intent, getIntentClassName } from '../../helpers/intent' +export type TypeographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'small' | 'div' | 'span' + export interface TypographyProps extends HTMLAttributes { hasGreyText?: boolean hasNoMargin?: boolean @@ -42,10 +44,16 @@ export interface TypographyProps extends HTMLAttributes { hasCapitalisedText?: boolean hasUpperCasedText?: boolean intent?: Intent + tag?: TypeographyTag +} + +export interface TaggedTypographyProps extends TypographyProps { + baseClass?: string } const propsToClass = ({ + baseClass, className, hasGreyText, hasItalicText, @@ -62,13 +70,14 @@ const propsToClass = intent, children, ...rest - }: TypographyProps) => + }: TaggedTypographyProps) => () => { const intentClass = intent ? getIntentClassName(intent) : null return { className: cx( - className, + elTextBase, + baseClass, hasGreyText && elHasGreyText, hasRegularText && elHasRegularText, hasBoldText && elHasBoldText, @@ -82,86 +91,98 @@ const propsToClass = hasCapitalisedText && elHasCapitalisedText, hasUpperCasedText && elHasUpperCasedText, intentClass, + className, ), children, - rest, + ...rest, } } -export const Text3XL: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) +export const TaggedTypography: FC = (props) => { + const { className, children, tag, ...rest } = useMemo(propsToClass(props), [props]) + switch (tag) { + case 'h1': + return ( +

+ {children} +

+ ) + case 'h2': + return ( +

+ {children} +

+ ) + case 'h3': + return ( +

+ {children} +

+ ) + case 'h4': + return ( +

+ {children} +

+ ) + case 'h5': + return ( +
+ {children} +
+ ) + case 'h6': + return ( +
+ {children} +
+ ) + case 'p': + return ( +

+ {children} +

+ ) + case 'small': + return ( + + {children} + + ) + case 'span': + return ( + + {children} + + ) + case 'div': + default: + return ( +
+ {children} +
+ ) + } } -export const Text2XL: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const Text3XL: FC = (props) => -export const TextXL: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const Text2XL: FC = (props) => -export const TextL: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const TextXL: FC = (props) => -export const TextBase: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const TextL: FC = (props) => -export const TextSM: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const TextBase: FC = (props) => -export const TextXS: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const TextSM: FC = (props) => -export const Text2XS: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) - return ( - - {children} - - ) -} +export const TextXS: FC = (props) => + +export const Text2XS: FC = (props) => export const Title: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) + const { className, children, ...rest } = useMemo(propsToClass(props), [props]) return ( {children} @@ -170,7 +191,7 @@ export const Title: FC = (props) => { } export const Subtitle: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) + const { className, children, ...rest } = useMemo(propsToClass(props), [props]) return ( {children} @@ -179,7 +200,7 @@ export const Subtitle: FC = (props) => { } export const BodyText: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) + const { className, children, ...rest } = useMemo(propsToClass(props), [props]) return ( {children} @@ -188,7 +209,7 @@ export const BodyText: FC = (props) => { } export const SmallText: FC = (props) => { - const { className, children, rest } = useMemo(propsToClass(props), [props]) + const { className, children, ...rest } = useMemo(propsToClass(props), [props]) return ( {children} diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx index ba866bec..935fad09 100644 --- a/src/storybook/changelog.mdx +++ b/src/storybook/changelog.mdx @@ -17,6 +17,7 @@ We will publish release version history and changes here. Where possible, we wil Beta versions should be relatively stable but subject to occssional breaking changes. ### **4.1.1 - 06/03/24** +- Added optional `tag` property to layout components and typography - Changed breadcrumbs and accordion items to use anchors ### **4.1.0 - 22/02/24**