diff options
author | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
---|---|---|
committer | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
commit | 7ae38906926dc09bc10670c361af0d2bf0050426 (patch) | |
tree | 5fb10ae366b987db09e4ddb4bc3ba0f75404ad08 /packages/website/ts/components/banner.tsx | |
parent | b5fd3c72a08aaa6957917d74c333387a16edf66b (diff) | |
download | dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.gz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.bz2 dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.lz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.xz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.zst dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.zip |
Update dependency packages
Diffstat (limited to 'packages/website/ts/components/banner.tsx')
-rw-r--r-- | packages/website/ts/components/banner.tsx | 144 |
1 files changed, 0 insertions, 144 deletions
diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx deleted file mode 100644 index ce3fd499a..000000000 --- a/packages/website/ts/components/banner.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -import { Button } from 'ts/components/button'; -import { ThemeInterface } from 'ts/components/siteWrap'; -import { Paragraph } from 'ts/components/text'; - -import { Column, Section } from 'ts/components/newLayout'; - -interface Props { - heading?: string; - subline?: string; - mainCta?: CTAButton; - secondaryCta?: CTAButton; - theme?: ThemeInterface; -} - -interface CTAButton { - text: string; - href?: string; - onClick?: () => void; - shouldOpenInNewTab?: boolean; -} - -interface BorderProps { - isBottom?: boolean; -} - -export const Banner: React.StatelessComponent<Props> = (props: Props) => { - const { heading, subline, mainCta, secondaryCta } = props; - return ( - <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> - <Border /> - <Border isBottom={true} /> - - <Column> - <CustomHeading>{heading}</CustomHeading> - - {subline && ( - <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}> - {subline} - </Paragraph> - )} - </Column> - <Column> - <ButtonWrap> - {mainCta && ( - <Button - color={colors.white} - isTransparent={false} - href={mainCta.href} - target={mainCta.shouldOpenInNewTab ? '_blank' : ''} - > - {mainCta.text} - </Button> - )} - - {secondaryCta && ( - <Button - color={colors.white} - href={secondaryCta.href} - onClick={secondaryCta.onClick} - isTransparent={true} - > - {secondaryCta.text} - </Button> - )} - </ButtonWrap> - </Column> - </CustomSection> - ); -}; - -const CustomSection = styled(Section)` - color: ${colors.white}; - margin-top: 30px; - - @media (max-width: 900px) { - text-align: center; - - p { - margin-bottom: 30px; - } - - div:last-child { - margin-bottom: 0; - } - } -`; - -const CustomHeading = styled.h2` - font-size: 34px; - font-weight: 400; - margin-bottom: 10px @media (max-width: 768px) { - font-size: 30px; - } -`; - -const ButtonWrap = styled.div` - display: inline-block; - - @media (min-width: 768px) { - * + * { - margin-left: 15px; - } - } - - @media (max-width: 768px) { - a, - button { - display: block; - width: 220px; - } - - * + * { - margin-top: 15px; - } - } -`; - -// Note let's refactor this -// is it absolutely necessary to have a stateless component -// to pass props down into the styled icon? -const Border = styled.div<BorderProps>` - position: absolute; - background-image: ${props => - props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'}; - background-position: ${props => (props.isBottom ? 'left top' : 'left bottom')}; - left: 0; - width: calc(100% + 214px); - height: 40px; - top: ${props => !props.isBottom && 0}; - bottom: ${props => props.isBottom && 0}; - transform: translate(-112px); - - @media (max-width: 768px) { - width: calc(100% + 82px); - height: 40px; - transform: translate(-41px); - background-size: auto 80px; - } -`; |