make newtab feature-components export ready

stories/features/newTab/components/clock/index.tsx → src/features/newTab/clock/index.tsx

@@ -11,12 +11,9 @@ import {
    StyledTimeSeparator
  } from './style'
 
-export interface ClockTheme {
-  color?: string
-}
 export interface ClockProps {
   id?: string
-  customStyle?: ClockTheme
+  testId?: string
 }
 
 export interface ClockState {
@@ -81,9 +78,9 @@ class Clock extends React.PureComponent<ClockProps, ClockState> {
   }
 
   render () {
-    const { id, customStyle } = this.props
+    const { testId } = this.props
     return (
-      <StyledClock id={id} customStyle={customStyle}>
+      <StyledClock data-test-id={testId}>
         <StyledTime>{this.formattedTime}</StyledTime>
         <StyledPeriod>{this.formattedTimePeriod}</StyledPeriod>
       </StyledClock>

stories/features/newTab/components/clock/style.ts → src/features/newTab/clock/style.ts

@@ -4,8 +4,7 @@
 
 import styled from 'styled-components'
 
-const StyledClock = styled.div`
-  color: inherit;
+const StyledClock = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   line-height: 1;
   user-select: none;
@@ -14,19 +13,19 @@ const StyledClock = styled.div`
   -webkit-font-smoothing: antialiased;
   font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: rgb(255, 255, 255);
-` as any
+`
 
-const StyledTime = styled.span`
+const StyledTime = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   letter-spacing: 0;
   font-size: 75px;
   font-weight: 300;
   color: inherit;
   font-family: inherit;
   display: inline-flex;
-` as any
+`
 
-const StyledPeriod = styled.span`
+const StyledPeriod = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-family: inherit;
@@ -37,17 +36,17 @@ const StyledPeriod = styled.span`
   margin-top: 8px;
   margin-left: 3px;
   vertical-align: top;
-` as any
+`
 
-const StyledTimeSeparator = styled.span`
+const StyledTimeSeparator = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-size: inherit;
   font-family: inherit;
   font-weight: 300;
   /* center colon vertically in the text-content line */
   margin-top: -0.1em;
-` as any
+`
 
 export {
   StyledClock,

stories/features/newTab/components/featureBlock/index.tsx → src/features/newTab/featureBlock/index.tsx

@@ -18,7 +18,7 @@ export interface FeatureBlockProps {
  * @prop {boolean} grid - whether or not the styled block should behave like a grid
  * @prop {React.ReactNode} children - the child elements
  */
-export class FeatureBlock extends React.PureComponent<FeatureBlockProps, {}> {
+export default class FeatureBlock extends React.PureComponent<FeatureBlockProps, {}> {
   render () {
     const { testId, grid, children } = this.props
     return (

stories/features/newTab/components/featureBlock/style.ts → src/features/newTab/featureBlock/style.ts

@@ -5,11 +5,11 @@
 import styled from 'styled-components'
 import { FeatureBlockProps } from './index'
 
-export const StyledFeatureBlock = styled<{}, 'div'>('div')`
+export const StyledFeatureBlock = styled<FeatureBlockProps, 'div'>('div')`
   display: grid;
   height: 100%;
-  grid-gap: ${(p: FeatureBlockProps) => p.grid ? '30px' : '0'};
-  grid-template-columns: ${(p: FeatureBlockProps) => p.grid ? '1fr 5fr 1fr' : '1fr'};
+  grid-gap: ${p => p.grid ? '30px' : '0'};
+  grid-template-columns: ${p => p.grid ? '1fr 5fr 1fr' : '1fr'};
   grid-template-rows: 1fr;
   max-width: 800px;
   border-top: solid 1px rgba(255,255,255,.1);

src/features/newTab/index.ts

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License,
+ * v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Clock from './clock'
+import FeatureBlock from './featureBlock'
+import { Page, PageWrapper } from './page'
+import PageHeader from './pageHeader'
+import { StatsContainer, StatsItem } from './stats'
+import {
+  NewTabHeading,
+  Paragraph,
+  LinkText,
+  EmphasizedText,
+  LabelledText,
+  SmallText
+} from './text'
+
+export {
+  Clock,
+  FeatureBlock,
+  Page,
+  PageWrapper,
+  PageHeader,
+  StatsContainer,
+  StatsItem,
+  NewTabHeading,
+  Paragraph,
+  LinkText,
+  EmphasizedText,
+  LabelledText,
+  SmallText
+ }

stories/features/newTab/components/page/style.ts → src/features/newTab/page/style.ts

@@ -3,15 +3,11 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
-import theme from '../../../../../src/theme/brave-default'
-import palette from '../../../../../src/theme/palette'
+import palette from '../../../theme/palette'
 
 export const StyledPage = styled<{}, 'div'>('div')`
   -webkit-font-smoothing: antialiased;
-  background: linear-gradient(
-    ${theme.color.privateTabBackground},
-    ${theme.color.privateTabBackground2}
-  );
+  background: linear-gradient(#4b3c6e, #000);
   min-height: 100%;
   height: initial;
   padding: 40px 60px;
@@ -26,7 +22,7 @@ export const StyledPageWrapper = styled<{}, 'main'>('main')`
   h1 {
     max-width: 800px;
     font-size: 26px;
-    font-family: ${theme.fontFamily.heading};
+    font-family: ${p => p.theme.fontFamily.heading};
     color: ${palette.white};
     letter-spacing: -0.4px;
     margin: 20px 0 40px;

stories/features/newTab/components/stats/style.ts → src/features/newTab/stats/style.ts

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
-import theme from '../../../../../src/theme/brave-default'
 
 export const StyledStatsItemContainer = styled<{}, 'ul'>('ul')`
   display: block;
@@ -43,7 +42,7 @@ export const StyledStatsItem = styled<{}, 'li'>('li')`
 
 export const StyledStatsItemCounter = styled<{}, 'span'>('span')`
   color: inherit;
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${p => p.theme.fontFamily.heading};
   font-size: 44px;
   font-weight: 400;
   line-height: 53px;
@@ -57,7 +56,7 @@ export const StyledStatsItemCounter = styled<{}, 'span'>('span')`
 export const StyledStatsItemText = styled<{}, 'span'>('span')`
   color: rgb(153, 153, 153);
   font-size: 20px;
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${p => p.theme.fontFamily.heading};
   line-height: 24px;
   margin-left: 3px;
   display: inline;
@@ -70,5 +69,5 @@ export const StyledStatsItemDescription = styled<{}, 'div'>('div')`
   color: rgb(255, 255, 255);
   line-height: 24px;
   margin-left: 3px;
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${p => p.theme.fontFamily.heading};
 `

stories/features/newTab/components/text/index.tsx → src/features/newTab/text/index.tsx

@@ -3,27 +3,26 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css } from 'styled-components'
-import theme from '../../../../../src/theme/brave-default'
 
-import Heading, { HeadingProps } from '../../../../../src/components/text/heading'
+import { Heading } from '../../../index'
 
 export const NewTabHeading = styled(Heading)`
-  ${(props: HeadingProps) => props.level === 2 && css`
+  ${p => p.level === 2 && css`
     display: flex;
     white-space: nowrap;
     margin: 6px 0 10px;
-    font-family: ${theme.fontFamily.heading};
+    font-family: ${p => p.theme.fontFamily.heading};
     font-size: 20px;
     font-weight: 400;
     color: rgba(255, 255, 255, 1);
     letter-spacing: -0.2px;
   `}
 
-  ${(props: HeadingProps) => props.level === 3 && css`
+  ${p => p.level === 3 && css`
     line-height: 1.75;
     font-size: 16px;
     color: rgba(255,255,255,0.8);
-    font-family: ${theme.fontFamily.heading};
+    font-family: ${p => p.theme.fontFamily.heading};
   `}
 `
 
@@ -36,7 +35,7 @@ export const Paragraph = styled<{}, 'p'>('p')`
   font-size: 16px;
   color: rgba(255,255,255,0.8);
   -webkit-font-smoothing: antialiased;
-  font-family: ${theme.fontFamily.body};
+  font-family: ${p => p.theme.fontFamily.body};
 `
 
 export const LinkText = styled<{}, 'a'>('a')`
@@ -50,7 +49,7 @@ export const LinkText = styled<{}, 'a'>('a')`
 `
 
 export const EmphasizedText = styled<{}, 'em'>('em')`
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${p => p.theme.fontFamily.heading};
   font-size: 20px;
   font-weight: 600;
   color: rgba(255, 255, 255, 1);
@@ -69,13 +68,13 @@ export const LabelledText = styled<{}, 'span'>('span')`
   align-self: center;
   font-weight: 600;
   font-size: 11px;
-  font-family: ${theme.fontFamily.heading};
+  font-family: ${p => p.theme.fontFamily.heading};
 `
 
 export const SmallText = styled<{}, 'small'>('small')`
   margin: 0;
   line-height: 1.5;
   font-size: 13px;
   color: rgba(255, 255, 255, .5);
-  font-family: ${theme.fontFamily.body};
+  font-family: ${p => p.theme.fontFamily.body};
 `

src/theme/brave-default.ts

@@ -31,9 +31,7 @@ const theme: ITheme = {
     disabled: colors.grey300,
     // backgrounds
     primaryBackground: colors.white,
-    secondaryBackground: colors.grey400,
-    privateTabBackground: '#4b3c6e',
-    privateTabBackground2: '#000'
+    secondaryBackground: colors.grey400
   },
   fontFamily: {
     heading: 'Poppins, sans-serif',

src/theme/theme-interface.ts

@@ -12,8 +12,6 @@ export default interface IThemeProps {
     disabled: string,
     primaryBackground: string,
     secondaryBackground: string,
-    privateTabBackground: string,
-    privateTabBackground2: string,
     defaultControl: string,
     defaultControlInteracting: string,
     defaultControlActive: string

stories/features/newTab/private/index.tsx

@@ -5,19 +5,19 @@
 import * as React from 'react'
 
 // Components
-import { Page, PageWrapper } from '../components/page'
-import PageHeader from '../components/pageHeader'
-import { StatsContainer, StatsItem } from '../components/stats'
-import { FeatureBlock } from '../components/featureBlock'
+import { Page, PageWrapper } from '../../../../src/features/newTab/page'
+import PageHeader from '../../../../src/features/newTab/pageHeader'
+import { StatsContainer, StatsItem } from '../../../../src/features/newTab/stats'
+import FeatureBlock from '../../../../src/features/newTab/featureBlock'
 import {
   NewTabHeading,
   SmallText,
   EmphasizedText,
   LabelledText,
   Paragraph,
   LinkText
-} from '../components/text'
-import Clock from '../components/clock'
+} from '../../../../src/features/newTab/text'
+import Clock from '../../../../src/features/newTab/clock'
 import Toggle from '../../../../src/components/formControls/toggle'
 
 // Assets