WIP Begin cleanup, adds mediaquery component

2018-12-13 18:22:36 +01:00
parent 142d29ba57
commit f4a95c295c
11 changed files with 62 additions and 58 deletions
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -66,6 +66,7 @@
        "react-loadable": "^5.5.0",
        "react-popper": "^1.0.0-beta.6",
        "react-redux": "^5.0.3",
+        "react-responsive": "^6.0.1",
        "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
        "react-syntax-highlighter": "^10.1.1",
        "react-tooltip": "^3.2.7",
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -11,9 +11,10 @@ import { addFadeInAnimation } from 'ts/@next/constants/animations';

 interface Props {
    title: string;
-    description: React.Node;
+    description: Node;
    linkLabel?: string;
    linkUrl?: string;
+    children?: Node;
 }

 export const AboutPageLayout = (props: Props) => (
@@ -28,9 +29,9 @@ export const AboutPageLayout = (props: Props) => (

           <Column width="70%" maxWidth="800px">
               <Column width="100%" maxWidth="680px">
-                   <AnimatedHeading size="medium">
-                     {props.title}
-                   </AnimatedHeading>
+                    <AnimatedHeading size="medium">
+                        {props.title}
+                    </AnimatedHeading>

                   <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
                     {props.description}
@@ -38,14 +39,14 @@ export const AboutPageLayout = (props: Props) => (

                   {(props.linkLabel && props.linkUrl) &&
                        <AnimatedLink
-                          to={props.linkUrl}
-                          isWithArrow={true}
+                            to={props.linkUrl}
+                            isWithArrow={true}
                        >
-                             {props.linkLabel}
+                            {props.linkLabel}
                        </AnimatedLink>
                   }
-               </Column>
-           </Column>
+                </Column>
+            </Column>
        </Section>

        {props.children}
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -43,8 +43,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
            <Border/>
            <Border isBottom={true} />

-            <Column colWidth="1/2" isPadLarge={true}>
-                <CustomHeading isNoMargin={true}>{heading}</CustomHeading>
+            <Column>
+                <CustomHeading>{heading}</CustomHeading>

                {subline &&
                    <Paragraph isMuted={0.5} isNoMargin={true}>
@@ -52,7 +52,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                    </Paragraph>
                }
            </Column>
-            <Column colWidth="1/2" isPadLarge={true}>
+            <Column>
                <ButtonWrap>
                    {mainCta &&
                        <Button
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -15,8 +15,8 @@ interface ButtonInterface {
    isAccentColor?: boolean;
    hasIcon?: boolean | string;
    isInline?: boolean;
-    type?: string;
    href?: string;
+    to?: string;
    onClick?: () => any;
    theme?: {
        textColor: string;
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -18,7 +18,7 @@ interface Props {
    icon: string;
    iconSize?: 'medium' | 'large' | number;
    title: string;
-    description: React.Node;
+    description: Node;
    actions?: Action[];
 }

@@ -43,6 +43,7 @@ export const Definition = (props: Props) => (
                <LinkWrap>
                    {props.actions.map((item, index) => (
                        <Button
+                            key={`dlink-${index}`}
                            href={item.url}
                            isWithArrow={true}
                            isAccentColor={true}
@@ -56,7 +57,7 @@ export const Definition = (props: Props) => (
    </Wrap>
 );

-const Wrap = styled.div`
+const Wrap = styled.div<Props>`
    max-width: ${props => props.isInline && '354px'};

    & + & {
@@ -81,7 +82,7 @@ const Wrap = styled.div`
    }
 `;

-const TextWrap = styled.div`
+const TextWrap = styled.div<Props>`
    width: 100%;
    max-width: 560px;

--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,10 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';

 import { Logo } from 'ts/@next/components/logo';
-import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
+import { Column, ColumnProps, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
 import { NewsletterForm } from 'ts/@next/components/newsletter_form';

 interface LinkInterface {
@@ -15,6 +16,7 @@ interface LinkInterface {

 interface LinkRows {
    heading: string;
+    isOnMobile?: boolean;
    links: LinkInterface[];
 }

@@ -65,25 +67,22 @@ export const Footer: React.StatelessComponent = () => (
    <FooterWrap>
        <FlexWrap>
            <FooterColumn width="35%">
-                <Logo isLight={true} />
+                <Logo />
                <NewsletterForm />
            </FooterColumn>

            <FooterColumn width="55%">
                <WrapGrid isCentered={false} isWrapped={true}>
-                    {_.map(linkRows, (row, index) => (
-                        <FooterSectionWrap
-                            key={`fc-${index}`}
-                            colWidth="1/4"
-                            isNoPadding={true}
-                            isMobileHidden={!row.isOnMobile}
-                        >
-                            <RowHeading>
-                                {row.heading}
-                            </RowHeading>
+                    {_.map(linkRows, (row: LinkRows, index) => (
+                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768}>
+                            <FooterSectionWrap key={`fc-${index}`}>
+                                <RowHeading>
+                                    {row.heading}
+                                </RowHeading>

-                            <LinkList links={row.links} />
-                        </FooterSectionWrap>
+                                <LinkList links={row.links} />
+                            </FooterSectionWrap>
+                        </MediaQuery>
                    ))}
                </WrapGrid>
            </FooterColumn>
@@ -124,7 +123,6 @@ const FooterColumn = styled(Column)`
    }

    @media (max-width: 768px) {
-        display: ${props => props.isMobileHidden && 'none'};
        text-align: left;
    }
 `;
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';

@@ -10,11 +11,15 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
+import { ThemeInteface } from 'ts/@next/components/siteWrap';
 import { Paragraph } from 'ts/@next/components/text';

 interface HeaderProps {
-    isOpen: boolean;
+    isOpen?: boolean;
    location?: Location;
+    isNavToggled?: boolean;
+    toggleMobileNav: () => void;
+    theme: ThemeInterface;
 }

 interface HeaderState {
@@ -89,7 +94,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
            <StyledHeader isOpen={isOpen}>
                <HeaderWrap>
                    <ReactRouterLink to="/next">
-                        <Logo/>
+                        <Logo />
                    </ReactRouterLink>

                    <NavLinks>
@@ -102,13 +107,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                        ))}
                    </NavLinks>

-                    <TradeButton
-                        bgColor={theme.headerButtonBg}
-                        color="#ffffff"
-                        href="https://0xproject.com/portal"
-                    >
-                        Trade on 0x
-                    </TradeButton>
+                    <MediaQuery minWidth={990}>
+                        <TradeButton
+                            bgColor={theme.headerButtonBg}
+                            color="#ffffff"
+                            href="https://0xproject.com/portal"
+                        >
+                            Trade on 0x
+                        </TradeButton>
+                    </MediaQuery>

                    <Hamburger onClick={toggleMobileNav}/>
                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
@@ -120,12 +127,12 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {

 export const Header = withTheme(HeaderBase);

-const NavItem = (props): React.ReactNode => {
-    const { link, index } = props;
+const NavItem = (props: NavItem): React.ReactNode => {
+    const { link } = props;
    const Subnav = link.dropdownComponent;

    return (
-        <LinkWrap key={`nav-${index}`}>
+        <LinkWrap>
            <StyledNavLink
                to={link.url}
                isTransparent={true}
@@ -253,8 +260,4 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`

 const TradeButton = styled(Button)`
    padding: 14px 22px !important;
-
-    @media (max-width: 990px) {
-        display: none !important;
-    }
 `;
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';

-interface WrapProps {
+export interface WrapProps {
+    bgColor?: string;
    offsetTop?: string;
    maxWidth?: string;
    wrapWidth?: string;
@@ -11,7 +12,7 @@ interface WrapProps {
    isWrapped?: boolean;
 }

-interface WrapGridProps {
+export interface WrapGridProps {
    isWrapped?: boolean;
    isCentered?: boolean;
 }
@@ -20,7 +21,7 @@ export interface WrapStickyProps {
    offsetTop?: string;
 }

-interface SectionProps extends WrapProps {
+export interface SectionProps extends WrapProps {
    isPadded?: boolean;
    isFullWidth?: boolean;
    isFlex?: boolean;
@@ -28,15 +29,16 @@ interface SectionProps extends WrapProps {
    flexBreakpoint?: string;
    maxWidth?: string;
    bgColor?: 'dark' | 'light' | string;
+    children: any;
 }

-interface FlexProps {
+export interface FlexProps {
    padding?: string;
    isFlex?: boolean;
    flexBreakpoint?: string;
 }

-interface ColumnProps {
+export interface ColumnProps {
    padding?: string;
    width?: string;
    maxWidth?: string;
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -71,7 +71,7 @@ const GLOBAL_THEMES: ThemeInterface = {
    },
 };

-export class SiteWrap extends React.Component {
+export class SiteWrap extends React.Component<Props> {
    public state = {
        isMobileNavOpen: false,
    };
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -72,7 +72,7 @@ export const Next0xInstant = () => (
          <MarqueeWrap>
              <div>
                  {[...Array(12)].map((item, index) => (
-                    <Card index={index}>
+                    <Card key={`card-${index}`} index={index}>
                      <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
                    </Card>
                  ))}
@@ -83,6 +83,7 @@ export const Next0xInstant = () => (
        <Section>
            {_.map(featuresData, (item, index) => (
                <Definition
+                    key={`definition-${index}`}
                    icon={item.icon}
                    title={item.title}
                    description={item.description}
--- a/packages/website/tsconfig.json
+++ b/packages/website/tsconfig.json
@@ -28,8 +28,5 @@
        ]

    },
-    "include": ["./ts/**/*"],
-    "reportFiles": [
-        "./ts/@next/**/*"
-    ],
+    "include": ["./ts/**/*"]
 }