Skip to content
Permalink
Browse files

feat(typography): heading component (#149)

* fix(tokens): sync font sizes tokens between sg and console themes

* fix(heading): refactor heading styles

* fix(heading): add marginBottom to headingStyle

* fix(typography): change paragraph token

* feat(typography): add heading and heading story

* feat(typography): heading tests

* fix(typography): fix paragraph test

* feat(typography): add heading as validation

* chore: revert original heading

* fix(button): adjust font size token

* fix(text): adjust font size token

* fix(website): adjust font size tokens

* feat(typography): change heading default case

* fix(website): remove unnecessary fontSizes

* feat(typography): paragraph and heading proptypes, and variant prop

* feat(typography): adjust heading story to use variant

* feat(typography): revert prop exports

* feat(typography): update heading tests

* fix(heading): move typography heading to heading

* fix(paragraph): move typography paragraph to paragraph

* fix(typography): separate heading and paragraph

* fix(heading): fix as types

* chore: add prop-type dependency

* chore: update prop-type deps

* chore: fix lint errors and update snapshots

* fix(website): add as props

* chore: moving stories

* chore: removing unnecessary peerdeps

* chore: fix deps version numbers, add paragraph to core

* fix(heading): change switch statement, add more tests

* fix(paragraph): add more tests

* fix(heading): block display, remove children types, snapshot update

* fix(paragraph): remove children types

* chore: adjust default font size token for text story
  • Loading branch information
richbachman committed Oct 31, 2019
1 parent 82780d3 commit 4e033e6f3e58566107271b18057532e768420827
Showing with 797 additions and 247 deletions.
  1. +2 −2 packages/paste-core/components/button/src/styles.ts
  2. +276 −0 packages/paste-core/components/heading/__tests__/__snapshots__/heading.test.tsx.snap
  3. +97 −0 packages/paste-core/components/heading/__tests__/heading.test.tsx
  4. +3 −5 packages/paste-core/components/heading/package.json
  5. +55 −32 packages/paste-core/components/heading/src/index.tsx
  6. +5 −5 packages/paste-core/components/heading/stories/index.stories.tsx
  7. +116 −0 packages/paste-core/components/paragraph/__tests__/__snapshots__/paragraph.test.tsx.snap
  8. +43 −0 packages/paste-core/components/paragraph/__tests__/paragraph.test.tsx
  9. +39 −2 packages/paste-core/components/paragraph/package.json
  10. +35 −0 packages/paste-core/components/paragraph/rollup.config.js
  11. +1 −10 packages/paste-core/components/{typography/src/Paragraph.tsx → paragraph/src/index.tsx}
  12. 0 packages/paste-core/components/{typography → paragraph}/stories/index.stories.tsx
  13. +15 −0 packages/paste-core/components/paragraph/tsconfig.build.json
  14. +4 −0 packages/paste-core/components/paragraph/tsconfig.json
  15. +0 −38 packages/paste-core/components/typography/__tests__/__snapshots__/paragraph.test.tsx.snap
  16. +0 −17 packages/paste-core/components/typography/__tests__/paragraph.test.tsx
  17. +5 −2 packages/paste-core/components/typography/package.json
  18. +2 −1 packages/paste-core/components/typography/src/index.tsx
  19. +4 −1 packages/paste-core/components/typography/tsconfig.build.json
  20. +1 −0 packages/paste-core/core-bundle/package.json
  21. +1 −0 packages/paste-core/core-bundle/src/index.tsx
  22. +42 −42 packages/paste-core/utilities/text/__tests__/__snapshots__/text.spec.tsx.snap
  23. +1 −1 packages/paste-core/utilities/text/src/index.tsx
  24. +1 −1 packages/paste-core/utilities/text/stories/index.stories.tsx
  25. +10 −9 packages/paste-design-tokens/tokens/aliases/font-size.yml
  26. +3 −0 packages/paste-design-tokens/tokens/global/font-size.yml
  27. +0 −11 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-size.yml
  28. +0 −31 packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml
  29. +1 −7 packages/paste-website/src/components/DoDont.tsx
  30. +7 −7 packages/paste-website/src/components/Heading.tsx
  31. +1 −1 packages/paste-website/src/components/Typography.tsx
  32. +1 −1 packages/paste-website/src/components/breadcrumb/index.tsx
  33. +2 −2 packages/paste-website/src/components/callout/index.tsx
  34. +1 −1 packages/paste-website/src/components/empty-state/InDevelopment.tsx
  35. +1 −1 packages/paste-website/src/components/empty-state/NotBuilt.tsx
  36. +1 −1 packages/paste-website/src/components/empty-state/NotFound.tsx
  37. +1 −1 packages/paste-website/src/components/shortcodes/component-header/index.tsx
  38. +2 −2 packages/paste-website/src/components/shortcodes/table-of-contents/styles.ts
  39. +1 −1 packages/paste-website/src/components/site-wrapper/SiteBody.tsx
  40. +2 −2 packages/paste-website/src/components/site-wrapper/sidebar/SidebarHeader.tsx
  41. +1 −1 packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.styles.ts
  42. +1 −1 packages/paste-website/src/components/table/index.tsx
  43. +3 −3 packages/paste-website/src/components/tokens-example/index.tsx
  44. +5 −5 packages/paste-website/src/pages/tokens/how-to-compose-custom-ui-with-tokens.mdx
  45. +5 −0 yarn.lock
@@ -20,13 +20,13 @@ const sizeIcon = (props: ButtonWrapperProps): SerializedStyles => css`
const sizeSmall = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space10')(props)} ${themeGet('space.space30')(props)};
border-radius: ${themeGet('radii.borderRadius10')(props)};
font-size: ${themeGet('fontSizes.fontSize20')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)};
line-height: 24px;
`;
const sizeDefault = (props: ButtonWrapperProps): SerializedStyles => css`
padding: ${themeGet('space.space30')(props)} ${themeGet('space.space60')(props)};
border-radius: ${themeGet('radii.borderRadius20')(props)};
font-size: ${themeGet('fontSizes.fontSize20')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)};
font-weight: ${themeGet('fontWeights.fontWeightSemibold')(props)};
line-height: 24px;
`;
@@ -0,0 +1,276 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Heading it should render an H1 at fontSize90 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 600;
line-height: 1.5;
}

<div
className="emotion-1"
>
<h1
className="emotion-0"
display="block"
fontSize="fontSize90"
fontWeight="fontWeightSemibold"
>
This is an H1
</h1>
</div>
`;

exports[`Heading it should render an H2 at fontSize70 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.6;
}

<div
className="emotion-1"
>
<h2
className="emotion-0"
display="block"
fontSize="fontSize70"
fontWeight="fontWeightSemibold"
>
This is an H2
</h2>
</div>
`;

exports[`Heading it should render an H3 at fontSize60 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
}

<div
className="emotion-1"
>
<h3
className="emotion-0"
display="block"
fontSize="fontSize60"
fontWeight="fontWeightSemibold"
>
This is an H3
</h3>
</div>
`;

exports[`Heading it should render an H4 at fontSize40 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.75rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.6;
}

<div
className="emotion-1"
>
<h4
className="emotion-0"
display="block"
fontSize="fontSize40"
fontWeight="fontWeightSemibold"
>
This is an H4
</h4>
</div>
`;

exports[`Heading it should render an H5 at fontSize30 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.714285714;
}

<div
className="emotion-1"
>
<h5
className="emotion-0"
display="block"
fontSize="fontSize30"
fontWeight="fontWeightSemibold"
>
This is an H5
</h5>
</div>
`;

exports[`Heading it should render an H6 at fontSize20 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.666666667;
}

<div
className="emotion-1"
>
<h6
className="emotion-0"
display="block"
fontSize="fontSize20"
fontWeight="fontWeightSemibold"
>
This is an H6
</h6>
</div>
`;

exports[`Heading it should render an italic H2 at fontSize50 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 1.15;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.6;
}

<div
className="emotion-1"
>
<h2
className="emotion-0"
display="block"
fontSize="fontSize70"
fontWeight="fontWeightSemibold"
>
<i>
This is an italic H2
</i>
</h2>
</div>
`;
@@ -0,0 +1,97 @@
import * as React from 'react';
import renderer from 'react-test-renderer';
import {Theme} from '@twilio-paste/theme';
import {Heading} from '../src';

describe('Heading', () => {
it('it should render an H1 at fontSize90', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h1" variant="headingStyle60">
This is an H1
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an H2 at fontSize70', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h2" variant="headingStyle50">
This is an H2
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an H3 at fontSize60', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h3" variant="headingStyle40">
This is an H3
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an H4 at fontSize40', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h4" variant="headingStyle30">
This is an H4
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an H5 at fontSize30', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h5" variant="headingStyle20">
This is an H5
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an H6 at fontSize20', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h6" variant="headingStyle10">
This is an H6
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('it should render an italic H2 at fontSize50', (): void => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h2" variant="headingStyle50">
<i>This is an italic H2</i>
</Heading>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});

1 comment on commit 4e033e6

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.