Merge pull request #1619 from dave4506/feature/website/add-banner-component

Adding announcement component for hero (for vote)

packages/website/ts/components/announcement.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from '../style/colors';
+
+import { Button } from './button';
+
+export interface AnnouncementProps {
+    headline: string;
+    href: string;
+}
+
+const BrandColorSpan = styled.span`
+    color: ${colors.white};
+    padding-right: 9px;
+`;
+
+const Wrap = styled.div`
+    padding: 20px 0 56px 0;
+    color: ${colors.brandLight};
+`;
+
+const AnnouncementLink = styled(Button)`
+    @media (max-width: 500px) {
+        && {
+            white-space: pre-wrap;
+            line-height: 1.3;
+        }
+    }
+`;
+export const Announcement: React.StatelessComponent<AnnouncementProps> = (props: AnnouncementProps) => {
+    return (
+        <Wrap>
+            <AnnouncementLink isWithArrow={true} isAccentColor={true} href={props.href}>
+                <BrandColorSpan>{'New!'}</BrandColorSpan>
+                {props.headline}
+            </AnnouncementLink>
+        </Wrap>
+    );
+};

packages/website/ts/components/hero.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
 import { addFadeInAnimation } from 'ts/constants/animations';
 
+import { Announcement, AnnouncementProps } from './announcement';
+
 interface Props {
     title: string;
     maxWidth?: string;
@@ -13,6 +14,7 @@ interface Props {
     description: string;
     figure?: React.ReactNode;
     actions?: React.ReactNode;
+    announcement?: AnnouncementProps;
 }
 
 const Section = styled.section`
@@ -126,6 +128,7 @@ export const Hero: React.StatelessComponent<Props> = (props: Props) => (
             {props.figure && <Content width="400px">{props.figure}</Content>}
 
             <Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
+                {!!props.announcement && <Announcement {...props.announcement} />}
                 <Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}>
                     {props.title}
                 </Title>

packages/website/ts/components/sections/landing/hero.tsx

@@ -7,6 +7,11 @@ import { LandingAnimation } from 'ts/components/heroImage';
 import { HeroAnimation } from 'ts/components/heroAnimation';
 import { WebsitePaths } from 'ts/types';
 
+const announcement = {
+    headline: 'Vote on ZEIP-23 MultiAssetProxy',
+    href: '/vote',
+};
+
 export const SectionLandingHero = () => (
     <Hero
         title="Powering Decentralized Exchange"
@@ -15,6 +20,7 @@ export const SectionLandingHero = () => (
         description="0x is an open protocol that enables the peer-to-peer exchange of assets on the Ethereum blockchain."
         figure={<LandingAnimation image={<HeroAnimation />} />}
         actions={<HeroActions />}
+        announcement={announcement}
     />
 );