aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-03 19:19:50 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-03 19:19:50 +0800
commit7f77347ea4537b66f045140bd5aa1995c3b2d948 (patch)
tree8d9e26289bb52296a1ad51a2ca1add55e87c60c2 /packages/website/ts/@next/components
parent9ed30fbcca669d27ba56ccadc1597ab41129ca73 (diff)
downloaddexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar.gz
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar.bz2
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar.lz
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar.xz
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.tar.zst
dexon-sol-tools-7f77347ea4537b66f045140bd5aa1995c3b2d948.zip
Changes boolean props to follow is[Property] syntax
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/footer.tsx6
-rw-r--r--packages/website/ts/@next/components/layout.tsx18
-rw-r--r--packages/website/ts/@next/components/logo.tsx5
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx5
-rw-r--r--packages/website/ts/@next/components/text.tsx25
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'};
`;