diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 21:55:13 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 21:55:13 +0800 |
| commit | bb63c5c86fd6559c13e2cebef253e81f379b46a6 (patch) | |
| tree | 9d3a22e94f05c3285b8a3b291e0b3376a3325154 | |
| parent | 82d6f2150b5a96b9effbaf86b9c28abb5b2b750a (diff) | |
| download | dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.gz dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.bz2 dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.lz dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.xz dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.zst dexon-sol-tools-bb63c5c86fd6559c13e2cebef253e81f379b46a6.zip | |
Adds proposal for padding prop on Wrappers
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 23 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 8 |
2 files changed, 26 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index ce5d6d578..e66dac8a9 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -12,6 +12,10 @@ interface ColumnWidths { [key: string]: string; } +interface PaddingSizes { + [key: string]: string; +} + interface SectionProps { noPadding?: any; padLarge?: any; @@ -23,6 +27,7 @@ interface SectionProps { interface WrapProps { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; + margin?: number | (string | number)[]; } interface ColumnProps { @@ -37,7 +42,6 @@ interface GetColWidthArgs { columns: number; } - const _getColumnWidth = (args: GetColWidthArgs) => { const { span = 1, columns } = args; const percentWidth = (span / columns) * 100; @@ -45,6 +49,18 @@ const _getColumnWidth = (args: GetColWidthArgs) => { return `calc(${percentWidth}% - ${gutterDiff}px)`; }; +const _getPadding = (value: number | (string | number)[]) => { + let padding = ''; + + if (Array.isArray(value)) { + padding = value.map(val => PADDING_SIZES[val] || '0px').join(' '); + } else { + padding = `${value}px`; + } + + return padding; +} + const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { @@ -62,6 +78,10 @@ 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` @@ -87,6 +107,7 @@ export const Section = styled.section<SectionProps>` const WrapBase = styled.div<WrapProps>` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + padding: ${props => _getPadding(props.margin)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 61d07641b..2793993f9 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -69,9 +69,9 @@ export const NextLanding = () => ( </Button> </WrapCentered> - <Wrap> + <Wrap margin={['large', 0, 0, 0]}> {/* NOTE: this probably should be withComponent as part of a <dl> */} - <Column colWidth="1/3"> + <Column colWidth="1/3" noPadding> <Heading size="medium" center> 873,435 </Heading> @@ -81,7 +81,7 @@ export const NextLanding = () => ( </Paragraph> </Column> - <Column colWidth="1/3"> + <Column colWidth="1/3" noPadding> <Heading size="medium" center> $203M </Heading> @@ -91,7 +91,7 @@ export const NextLanding = () => ( </Paragraph> </Column> - <Column colWidth="1/3"> + <Column colWidth="1/3" noPadding> <Heading size="medium" center> 227,372 </Heading> |