Skip to content
Permalink
Browse files

fix: change heading variants (#196)

* fix: change heading variants

* fix: rebase website to use new variants

* fix: invert heading variant scale

* fix: snapshot update

* Update packages/paste-core/components/heading/src/index.tsx

Co-Authored-By: Simon Taggart <staggart@twilio.com>

* chore: change heading to beta
  • Loading branch information
richbachman committed Nov 21, 2019
1 parent e06459f commit 061cc3ecce7bc7ee5b8c8d2e95ddb8e0cd744e64
@@ -18,12 +18,12 @@ exports[`Heading it should render an H1 at fontSize90 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 500;
line-height: 2.5rem;
display: block;
color: #282a2b;
}

<div
@@ -58,12 +58,12 @@ exports[`Heading it should render an H2 at fontSize70 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 500;
line-height: 2rem;
display: block;
color: #282a2b;
}

<div
@@ -98,12 +98,12 @@ exports[`Heading it should render an H3 at fontSize60 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.75rem;
display: block;
color: #282a2b;
}

<div
@@ -138,12 +138,12 @@ exports[`Heading it should render an H4 at fontSize40 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.75rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.75rem;
display: block;
color: #282a2b;
}

<div
@@ -178,12 +178,12 @@ exports[`Heading it should render an H5 at fontSize30 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5rem;
display: block;
color: #282a2b;
}

<div
@@ -218,12 +218,12 @@ exports[`Heading it should render an H6 at fontSize20 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.25rem;
display: block;
color: #282a2b;
}

<div
@@ -258,12 +258,12 @@ exports[`Heading it should render an italic H2 at fontSize50 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
display: block;
color: #282a2b;
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 500;
line-height: 2rem;
display: block;
color: #282a2b;
}

<div
@@ -8,7 +8,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h1" variant="headingStyle60">
<Heading as="h1" variant="heading10">
This is an H1
</Heading>
</Theme.Provider>
@@ -21,7 +21,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h2" variant="headingStyle50">
<Heading as="h2" variant="heading20">
This is an H2
</Heading>
</Theme.Provider>
@@ -34,7 +34,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h3" variant="headingStyle40">
<Heading as="h3" variant="heading30">
This is an H3
</Heading>
</Theme.Provider>
@@ -47,7 +47,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h4" variant="headingStyle30">
<Heading as="h4" variant="heading40">
This is an H4
</Heading>
</Theme.Provider>
@@ -60,7 +60,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h5" variant="headingStyle20">
<Heading as="h5" variant="heading50">
This is an H5
</Heading>
</Theme.Provider>
@@ -73,7 +73,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h6" variant="headingStyle10">
<Heading as="h6" variant="heading60">
This is an H6
</Heading>
</Theme.Provider>
@@ -86,7 +86,7 @@ describe('Heading', () => {
const tree = renderer
.create(
<Theme.Provider>
<Heading as="h2" variant="headingStyle50">
<Heading as="h2" variant="heading20">
<i>This is an italic H2</i>
</Heading>
</Theme.Provider>
@@ -2,7 +2,7 @@
"name": "@twilio-paste/heading",
"version": "1.0.3",
"category": "typography",
"status": "alpha",
"status": "beta",
"description": "Twilio's Heading component",
"author": "Twilio Inc.",
"license": "MIT",
@@ -3,63 +3,57 @@ import * as PropTypes from 'prop-types';
import {Text} from '@twilio-paste/text';

export type asTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'span';
export type HeadingStyle =
| 'headingStyle10'
| 'headingStyle20'
| 'headingStyle30'
| 'headingStyle40'
| 'headingStyle50'
| 'headingStyle60';
export type HeadingVariants = 'heading10' | 'heading20' | 'heading30' | 'heading40' | 'heading50' | 'heading60';

interface Heading {
as: asTags;
id?: string;
className?: never;
variant?: HeadingStyle;
variant?: HeadingVariants;
}

function getHeadingStyles(headingStyle?: HeadingStyle): {} {
switch (headingStyle) {
case 'headingStyle60':
function getHeadingProps(headingVariant?: HeadingVariants): {} {
switch (headingVariant) {
case 'heading10':
return {
marginBottom: 'space70',
fontSize: 'fontSize90',
fontWeight: 'fontWeightSemibold',
lineHeight: 'lineHeight90',
};
case 'headingStyle40':
case 'heading30':
return {
marginBottom: 'space50',
fontSize: 'fontSize60',
fontWeight: 'fontWeightSemibold',
lineHeight: 'lineHeight60',
};
case 'headingStyle30':
case 'heading40':
return {
marginBottom: 'space40',
fontSize: 'fontSize40',
fontWeight: 'fontWeightSemibold',
lineHeight: 'lineHeight40',
};
case 'headingStyle20':
case 'heading50':
return {
marginBottom: 'space30',
fontSize: 'fontSize30',
fontWeight: 'fontWeightSemibold',
lineHeight: 'lineHeight30',
};
case 'headingStyle10':
case 'heading60':
return {
marginBottom: 'space30',
fontSize: 'fontSize20',
fontWeight: 'fontWeightSemibold',
lineHeight: 'lineHeight20',
};
/**
* headingStyle50 is out of order because its also default.
* heading20 is out of order because its also default.
* Default is at the bottom of switch statement for readability.
*/
case 'headingStyle50':
case 'heading20':
default:
return {
marginBottom: 'space60',
@@ -72,26 +66,19 @@ function getHeadingStyles(headingStyle?: HeadingStyle): {} {

const Heading: React.FC<Heading> = ({as, children, id, variant}) => {
return (
<Text as={as} display="block" id={id} textColor="colorText" {...getHeadingStyles(variant)}>
<Text {...getHeadingProps(variant)} as={as} display="block" id={id} textColor="colorText">
{children}
</Text>
);
};

Heading.propTypes = {
as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span'] as asTags[]).isRequired,
variant: PropTypes.oneOf([
'headingStyle60',
'headingStyle50',
'headingStyle40',
'headingStyle30',
'headingStyle20',
'headingStyle10',
]),
variant: PropTypes.oneOf(['heading10', 'heading20', 'heading30', 'heading40', 'heading50', 'heading60']),
};

Heading.defaultProps = {
variant: 'headingStyle50',
variant: 'heading20',
};

Heading.displayName = 'Heading';
@@ -1,24 +1,17 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {withKnobs, text, select} from '@storybook/addon-knobs';
import {asTags, Heading, HeadingStyle} from '../src';
import {asTags, Heading, HeadingVariants} from '../src';

const headingStyleOptions = [
'headingStyle10',
'headingStyle20',
'headingStyle30',
'headingStyle40',
'headingStyle50',
'headingStyle60',
];
const headingVariantOptions = ['heading10', 'heading20', 'heading30', 'heading40', 'heading50', 'heading60'];

storiesOf('Components|Typography', module)
.addDecorator(withKnobs)
.add('Heading', () => {
const asOptions = text('as', 'h2') as asTags;
const headingStyleValue = select('variant', headingStyleOptions, 'headingStyle50') as HeadingStyle;
const headingVariantValue = select('variant', headingVariantOptions, 'heading20') as HeadingVariant;
return (
<Heading as={asOptions} variant={headingStyleValue}>
<Heading as={asOptions} variant={headingVariantValue}>
I am a Very Large Heading
</Heading>
);
@@ -69,7 +69,7 @@ const Item: React.FC<DoProps> = ({center = false, ...props}) => {
borderLeftWidth="borderWidth0"
borderColor={props.do ? 'colorBorderSuccess' : 'colorBorderError'}
>
<Heading as="h5" variant="headingStyle20">
<Heading as="h5" variant="heading50">
{props.title}
</Heading>
<Text as="p">{props.body}</Text>
@@ -16,7 +16,7 @@ const borderColorPartial = (variant?: CalloutVariants): BorderColor => {
};

const CalloutTitle: React.FC<CalloutTitleProps> = ({as = 'h3', children}) => (
<Heading as={as} variant="headingStyle20">
<Heading as={as} variant="heading50">
{children}
</Heading>
);
@@ -20,7 +20,7 @@ const InDevelopment: React.FC<InDevelopmentProps> = ({type, name}) => {
{type === 'utility' ? 'Utilities' : 'Components'}
</BreadcrumbItem>
</Breadcrumb>
<Heading as="h1" variant="headingStyle60">
<Heading as="h1" variant="heading10">
{getHumanizedNameFromPackageName(name)}
</Heading>
<Box>
@@ -21,7 +21,7 @@ const NotBuilt: React.FC<NotBuiltProps> = ({type, name}) => {
{type === 'utility' ? 'Utilities' : 'Components'}
</BreadcrumbItem>
</Breadcrumb>
<Heading as="h1" variant="headingStyle60">
<Heading as="h1" variant="heading10">
{getHumanizedNameFromPackageName(name)}
</Heading>
<Box>
@@ -9,7 +9,7 @@ const NotFound: React.FC<{}> = () => (
<Breadcrumb>
<BreadcrumbItem to="/">Home</BreadcrumbItem>
</Breadcrumb>
<Heading as="h1" variant="headingStyle60">
<Heading as="h1" variant="heading10">
Oops, this page doesn&apos;t exist
</Heading>
<Box>
@@ -46,12 +46,12 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
<MDXProvider
components={{
...shortcodes,
h1: (props: Heading): React.ReactElement => <Heading {...props} as="h1" variant="headingStyle60" />,
h2: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h2" variant="headingStyle50" />,
h3: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h3" variant="headingStyle40" />,
h4: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h4" variant="headingStyle30" />,
h5: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h5" variant="headingStyle20" />,
h6: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h6" variant="headingStyle10" />,
h1: (props: Heading): React.ReactElement => <Heading {...props} as="h1" variant="heading10" />,
h2: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h2" variant="heading20" />,
h3: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h3" variant="heading30" />,
h4: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h4" variant="heading40" />,
h5: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h5" variant="heading50" />,
h6: (props: Heading): React.ReactElement => <AnchoredHeading {...props} as="h6" variant="heading60" />,
p: (props: React.ComponentProps<typeof Paragraph>): React.ReactElement => <Paragraph {...props} />,
ul: (props: React.ComponentProps<typeof UL>): React.ReactElement => <UL {...props} />,
ol: (props: React.ComponentProps<typeof OL>): React.ReactElement => <OL {...props} />,
@@ -30,7 +30,7 @@ const ComponentHeaderBasic: React.FC<{
<BreadcrumbItem to="/">Home</BreadcrumbItem>
<BreadcrumbItem to={categoryRoute}>{getCategoryNameFromRoute(categoryRoute)}</BreadcrumbItem>
</Breadcrumb>
<Heading as="h1" variant="headingStyle60">
<Heading as="h1" variant="heading10">
{getHumanizedNameFromPackageName(name)}
</Heading>
</>

1 comment on commit 061cc3e

@now

This comment has been minimized.

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