diff options
Diffstat (limited to 'packages/website/ts/@next/components')
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 25 |
5 files changed, 30 insertions, 29 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index b431ba9e5..032d2e8a1 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -61,18 +61,18 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( bgColor="#181818" noMargin> <Wrap> - <Column colWidth="1/2" noPadding> + <Column colWidth="1/2" isNoPadding={true}> <Logo light /> <NewsletterForm /> </Column> - <Column colWidth="1/2" noPadding> + <Column colWidth="1/2" isNoPadding={true}> <Wrap> {_.map(linkRows, (row, index) => ( <Column key={`fc-${index}`} colWidth="1/3" - noPadding> + isNoPadding={true}> <RowHeading> { row.heading } </RowHeading> diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 86072b81d..28503711c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -17,11 +17,11 @@ interface PaddingSizes { } interface SectionProps { - noPadding?: any; - padLarge?: any; - noMargin?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; + isNoMargin?: any; bgColor?: string; - fullWidth?: any; + isFullWidth?: boolean; } interface WrapProps { @@ -32,8 +32,8 @@ interface WrapProps { interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; - padLarge?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; bgColor?: string; } @@ -93,8 +93,8 @@ export const Main = styled.main` // just <Section asElement?="div/section/footer/header/whatever" /> ? export const Section = styled.section<SectionProps>` width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); @@ -137,7 +137,7 @@ export const WrapGrid = styled(WrapBase)` `; export const Column = styled.div<ColumnProps>` - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; border: 1px dotted rgba(255, 0, 0, 0.3); background-color: ${props => props.bgColor}; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 0b98fcf9d..5d6258f37 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import styled from 'styled-components'; +import { ThemeInterface } from 'ts/@next/components/siteWrap'; import LogoIcon from '../icons/logo-with-type.svg'; interface LogoInterface { - // showType: boolean; light?: any; + theme?: ThemeInterface; } @@ -20,7 +21,7 @@ const Icon = styled(LogoIcon)` flex-shrink: 0; path { - fill: ${props => props.light ? '#fff' : props.theme.textColor}; + fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor}; } `; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 7529e90c9..d38c7c50c 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -13,14 +13,15 @@ interface Props { children: any; } -interface GlobalThemes { +// we proabbly want to put this somewhere else (themes) +export interface ThemeInterface { [key: string]: { bgColor: string; textColor: string; } } -const GLOBAL_THEMES: GlobalThemes = { +const GLOBAL_THEMES: ThemeInterface = { dark: { bgColor: '#000000', textColor: '#FFFFFF', 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<HeadingProps>` 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<HeadingProps> = props => { @@ -69,9 +68,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { // for literally anything = export const Paragraph = styled.p<ParagraphProps>` 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'}; `; |