aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/layout.tsx22
-rw-r--r--packages/website/ts/@next/components/text.tsx19
3 files changed, 16 insertions, 27 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2c153788a..1e59ae9c2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -28,7 +28,7 @@ export const Button = styled.button<ButtonInterface>`
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
color: ${props => props.color || props.theme.textColor};
- padding: ${props => !props.isNoPadding && '14px 22px'};
+ padding: ${props => !props.isNoPadding && '18px 30px'};
text-align: center;
font-size: 18px;
text-decoration: none;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 5c5d1bbda..d30b7a9d1 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -12,10 +13,6 @@ interface ColumnWidths {
[key: string]: string;
}
-interface PaddingSizes {
- [key: string]: string;
-}
-
interface SectionProps {
isNoPadding?: boolean;
isPadLarge?: boolean;
@@ -24,12 +21,11 @@ interface SectionProps {
isFullWidth?: boolean;
}
-interface WrapProps {
+interface WrapProps extends PaddingInterface {
width?: 'default' | 'full' | 'medium' | 'narrow';
bgColor?: string;
isWrapped?: boolean;
isCentered?: boolean;
- padding?: number | Array<'large' | 'default' | number>;
}
interface ColumnProps {
@@ -52,14 +48,6 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
-const _getPadding = (value: number | Array<string | number>): string => {
- if (Array.isArray(value)) {
- return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
- } else {
- return `${value}px`;
- }
-};
-
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
const BREAKPOINTS = {
@@ -77,10 +65,6 @@ const COLUMN_WIDTHS: ColumnWidths = {
'1/2': _getColumnWidth({ columns: 2 }),
'2/3': _getColumnWidth({ span: 2, columns: 3 }),
};
-const PADDING_SIZES: PaddingSizes = {
- 'default': '30px',
- 'large': '60px',
-};
export const Main = styled.main`
border: 1px dotted rgba(0, 0, 255, 0.3);
@@ -113,7 +97,7 @@ export const Section = styled.section<SectionProps>`
const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
- padding: ${props => props.padding && _getPadding(props.padding)};
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
background-color: ${props => props.bgColor};
margin: 0 auto;
`;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index a746cb3b9..0be24d233 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,19 +1,22 @@
import * as React from 'react';
import styled from 'styled-components';
+import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
-interface HeadingProps {
- asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+interface BaseTextInterface extends PaddingInterface {
size?: 'default' | 'medium' | 'large' | 'small';
isCentered?: boolean;
+}
+
+interface HeadingProps extends BaseTextInterface {
+ asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+ isCentered?: boolean;
isNoMargin?: boolean;
color?: string;
}
-interface ParagraphProps {
+interface ParagraphProps extends BaseTextInterface {
isNoMargin?: boolean;
- size?: 'default' | 'small' | 'medium' | 'large';
isMuted?: boolean | number;
- isCentered?: boolean;
}
interface HeadingSizes {
@@ -55,10 +58,11 @@ const PARAGRAPH_SIZES: ParagraphSizes = {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
font-size: ${props => HEADING_SIZES[props.size || 'default']};
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']};
- font-weight: 300;
margin-bottom: ${props => !props.isNoMargin && '30px'};
text-align: ${props => props.isCentered && 'center'};
+ font-weight: 300;
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {
@@ -77,8 +81,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
export const Paragraph = styled.p<ParagraphProps>`
font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
margin-bottom: ${props => !props.isNoMargin && '30px'};
- line-height: 1.4;
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
color: ${props => props.color || props.theme.textColor};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
text-align: ${props => props.isCentered && 'center'};
+ line-height: 1.4;
`;