From 7f77347ea4537b66f045140bd5aa1995c3b2d948 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 3 Dec 2018 12:19:50 +0100 Subject: Changes boolean props to follow is[Property] syntax --- packages/website/ts/@next/components/text.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) (limited to 'packages/website/ts/@next/components/text.tsx') diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 4bc21f0fc..4e2b22f52 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,20 +1,19 @@ import * as React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { colors } from 'ts/style/colors'; +import styled from 'styled-components'; + interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; size?: 'default' | 'medium' | 'large' | 'small'; - center?: boolean; - children: Node | string; - noMargin?: any; + isCentered?: boolean; + isNoMargin?: boolean; } interface ParagraphProps { - noMargin?: any; + isNoMargin?: boolean; size?: 'default' | 'small' | 'medium' | 'large'; - muted?: any; - center?: any; + isMuted?: boolean | number; + isCentered?: boolean; } interface HeadingSizes { @@ -50,8 +49,8 @@ const StyledHeading = styled.h1` color: ${props => props.color || props.theme.textColor}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; font-weight: 300; - margin-bottom: ${props => !props.noMargin && '30px'}; - text-align: ${props => props.center && 'center'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; + text-align: ${props => props.isCentered && 'center'}; `; export const Heading: React.StatelessComponent = props => { @@ -69,9 +68,9 @@ export const Heading: React.StatelessComponent = props => { // for literally anything = export const Paragraph = styled.p` font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; - margin-bottom: ${props => !props.noMargin && '30px'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; line-height: 1.4; color: ${props => props.color || props.theme.textColor}; - opacity: ${props => props.muted || 0.75}; - text-align: ${props => props.center && 'center'}; + opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; + text-align: ${props => props.isCentered && 'center'}; `; -- cgit v1.2.3