Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added default fontSize to Heading #389

Closed
wants to merge 7 commits into from
Closed

Added default fontSize to Heading #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dd470f0
Merge pull request #371 from ConsenSys/development
gesquinca Oct 3, 2019
e0d8040
Added default fontsize to Heading component based on as prop. Updated…
Oct 22, 2019
57c93d1
Merge branch 'master' into ml-add-heading-default-fontsize-#61
Oct 22, 2019
a07614f
Update storybook stories with as prop on Headings.
Oct 22, 2019
ba87543
Fixed fontSize prop not getting honored on Heading component with as …
Oct 23, 2019
2b4b0c1
Merge branch 'development' into ml-add-heading-default-fontsize-#61
Oct 23, 2019
76b8ef8
Updated snapshot tests
Oct 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/Heading/__snapshots__/Heading.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ exports[`Heading component sanity matches default snapshot 1`] = `
margin: 0;
padding: 0;
font-family: "Source Sans Pro",-apple-system,sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.25;
font-size: 48px;
Expand All @@ -14,7 +13,6 @@ exports[`Heading component sanity matches default snapshot 1`] = `
<h1
class="c0"
font-family="sansSerif"
font-size="4"
font-weight="3"
>
Heading 1
Expand All @@ -26,7 +24,6 @@ exports[`Heading component sanity matches themed snapshot 1`] = `
margin: 0;
padding: 0;
font-family: "Source Sans Pro",-apple-system,sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.25;
font-size: 48px;
Expand All @@ -44,7 +41,6 @@ exports[`Heading component sanity matches themed snapshot 1`] = `
<h1
class="c1"
font-family="sansSerif"
font-size="4"
font-weight="3"
>
Heading 1
Expand Down
37 changes: 20 additions & 17 deletions src/Heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,27 @@ const StyledHeading = styled.div`
${COMMON}
${TYPOGRAPHY}
font-size: ${props => {
switch (props.as) {
case 'h1':
return props.theme.fontSizes[6];
case 'h2':
return props.theme.fontSizes[5];
case 'h3':
return props.theme.fontSizes[4];
case 'h4':
return props.theme.fontSizes[3];
case 'h5':
return props.theme.fontSizes[2];
case 'h6':
return props.theme.fontSizes[1];
default:
return props.theme.fontSizes[4];
if (typeof props.fontSize !== 'undefined') {
return props.fontSize;
} else {
switch (props.as) {
case 'h1':
return `${props.theme.fontSizes[6]}px`;
case 'h2':
return `${props.theme.fontSizes[5]}px`;
case 'h3':
return `${props.theme.fontSizes[4]}px`;
case 'h4':
return `${props.theme.fontSizes[3]}px`;
case 'h5':
return `${props.theme.fontSizes[2]}px`;
case 'h6':
return `${props.theme.fontSizes[1]}px`;
default:
return `${props.theme.fontSizes[4]}px`;
}
}
}}px
}}
`;

StyledHeading.defaultProps = {
Expand All @@ -48,7 +52,6 @@ const Heading = React.forwardRef((props, ref) => (
Heading.defaultProps = {
...defaultProps,
as: 'h3',
fontSize: 4,
};

Heading.propTypes = {
Expand Down
24 changes: 22 additions & 2 deletions storybook/stories/Heading.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,38 @@
import React from 'react';
import { Heading } from 'rimble-ui';
import { Heading, Text } from 'rimble-ui';

export default {
title: 'Heading',
};

export const heading = () => (
<>
<Text>Defaul headings with `as` prop</Text>
<Heading as={'h1'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading as={'h2'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading as={'h3'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading as={'h4'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading as={'h5'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading as={'h6'}>The quick brown fox jumps over the lazy dog</Heading>
<Heading>The quick brown fox jumps over the lazy dog</Heading>

<Text mt={5}>Custom Headings</Text>
<Heading>Heading with no `as` prop</Heading>
<Heading fontSize={'100px'}>
Heading with no `as` prop but with fontSize
</Heading>
<Heading fontSize={1}>
Heading with no `as` prop but with fontSize and styled-system value
</Heading>
<Heading as={'h1'} fontSize={'75px'}>
Heading with `as` prop and fontSize
</Heading>
<Heading as={'h1'} fontSize={1}>
Heading with `as` prop and fontSize and styled-system value
</Heading>
<Heading.h1>Heading.h1 component with no fontSize</Heading.h1>
<Heading.h1 fontSize={1}>
Heading.h1 component with fontSize and styled-system value
</Heading.h1>
<Heading>Heading with no props</Heading>
</>
);