diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 07:57:35 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:56:11 +0800 |
commit | 9ebb0960254f1dcfb9513cbc6203840a87ee60e4 (patch) | |
tree | 222218f42cdf3cf964725cec8a8c0752f4035a3d /packages/website/ts/components/ui/container.tsx | |
parent | f8b925c9adcc9fecf237d29e002fe993ca4f41a8 (diff) | |
download | dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar.gz dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar.bz2 dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar.lz dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar.xz dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.tar.zst dexon-sol-tools-9ebb0960254f1dcfb9513cbc6203840a87ee60e4.zip |
feat: add Select component and use for configurator
Diffstat (limited to 'packages/website/ts/components/ui/container.tsx')
-rw-r--r-- | packages/website/ts/components/ui/container.tsx | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 7eab2a50f..cd0ed9986 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -1,6 +1,9 @@ import { TextAlignProperty } from 'csstype'; +import { darken } from 'polished'; import * as React from 'react'; +import { styled } from 'ts/style/theme'; + type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; @@ -17,10 +20,13 @@ export interface ContainerProps { paddingLeft?: StringOrNum; backgroundColor?: string; background?: string; + border?: string; + borderTop?: string; borderRadius?: StringOrNum; borderBottomLeftRadius?: StringOrNum; borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; + borderColor?: string; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; @@ -42,10 +48,23 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + shouldDarkenOnHover?: boolean; + shouldAddBoxShadowOnHover?: boolean; } -export const Container: React.StatelessComponent<ContainerProps> = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; +export const PlainContainer: React.StatelessComponent<ContainerProps> = props => { + const { + children, + className, + Tag, + isHidden, + id, + onClick, + shouldDarkenOnHover, + shouldAddBoxShadowOnHover, + // tslint:disable-next-line:trailing-comma + ...style + } = props; const visibility = isHidden ? 'hidden' : undefined; return ( <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> @@ -54,6 +73,16 @@ export const Container: React.StatelessComponent<ContainerProps> = props => { ); }; +export const Container = styled(PlainContainer)` + &:hover { + ${props => + props.shouldDarkenOnHover + ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` + : ''}; + ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + } +`; + Container.defaultProps = { Tag: 'div', }; |