replace styled import with our own. improve importing

src/features/newTab/clock/style.ts

@@ -4,7 +4,7 @@
 
 import styled from '../../../theme'
 
-const StyledClock = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
+const StyledClock = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   line-height: 1;
   user-select: none;
@@ -15,7 +15,7 @@ const StyledClock = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
   color: rgb(255, 255, 255);
 `
 
-const StyledTime = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+const StyledTime = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   letter-spacing: 0;
   font-size: 75px;
@@ -25,7 +25,7 @@ const StyledTime = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   display: inline-flex;
 `
 
-const StyledPeriod = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+const StyledPeriod = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-family: inherit;
@@ -38,7 +38,7 @@ const StyledPeriod = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
   vertical-align: top;
 `
 
-const StyledTimeSeparator = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+const StyledTimeSeparator = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   color: inherit;
   font-size: inherit;

src/features/newTab/featureBlock/style.ts → src/features/newTab/featureBlock/index.ts

@@ -3,9 +3,12 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from '../../../theme'
-import { FeatureBlockProps } from './index'
 
-export const StyledFeatureBlock = styled<FeatureBlockProps & React.HTMLProps<HTMLDivElement>, 'div'>('div')`
+export interface FeatureBlockProps {
+  grid?: boolean
+}
+
+export const FeatureBlock = styled<FeatureBlockProps, 'div'>('div')`
   display: grid;
   height: 100%;
   grid-gap: ${p => p.grid ? '30px' : '0'};

src/features/newTab/index.ts

@@ -4,7 +4,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import Clock from './clock'
-import FeatureBlock from './featureBlock'
+import { FeatureBlock } from './featureBlock'
 import { Page, PageWrapper } from './page'
 import PageHeader from './pageHeader'
 import { StatsContainer, StatsItem } from './stats'

src/features/newTab/page/index.ts

@@ -5,15 +5,15 @@
 import styled from '../../../theme'
 import palette from '../../../theme/palette'
 
-export const Page = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
+export const Page = styled<{}, 'div'>('div')`
   -webkit-font-smoothing: antialiased;
   background: linear-gradient(#4b3c6e, #000);
   min-height: 100%;
   height: initial;
   padding: 40px 60px;
 `
 
-export const PageWrapper = styled<React.HTMLProps<HTMLMainElement>, 'main'>('main')`
+export const PageWrapper = styled<{}, 'main'>('main')`
   display: flex;
   flex-direction: column;
   align-items: center;

src/features/newTab/pageHeader/style.ts

@@ -4,7 +4,7 @@
 
 import styled from '../../../theme'
 
-export const StyledPageHeader = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
+export const StyledPageHeader = styled<{}, 'div'>('div')`
   width: 100%;
   padding: 40px 0;
   display: flex;

src/features/newTab/stats/style.ts

@@ -4,7 +4,7 @@
 
 import styled from '../../../theme'
 
-export const StyledStatsItemContainer = styled<React.HTMLProps<HTMLUListElement>, 'ul'>('ul')`
+export const StyledStatsItemContainer = styled<{}, 'ul'>('ul')`
   display: block;
   font-weight: 400;
   margin: 0;
@@ -20,7 +20,7 @@ export const StyledStatsItemContainer = styled<React.HTMLProps<HTMLUListElement>
   }
 `
 
-export const StyledStatsItem = styled<React.HTMLProps<HTMLLIElement>, 'li'>('li')`
+export const StyledStatsItem = styled<{}, 'li'>('li')`
   vertical-align: middle;
   list-style-type: none;
   font-size: inherit;
@@ -40,7 +40,7 @@ export const StyledStatsItem = styled<React.HTMLProps<HTMLLIElement>, 'li'>('li'
   }
 `
 
-export const StyledStatsItemCounter = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+export const StyledStatsItemCounter = styled<{}, 'span'>('span')`
   color: inherit;
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 44px;
@@ -53,7 +53,7 @@ export const StyledStatsItemCounter = styled<React.HTMLProps<HTMLSpanElement>, '
   overflow: hidden;
 `
 
-export const StyledStatsItemText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+export const StyledStatsItemText = styled<{}, 'span'>('span')`
   color: rgb(153, 153, 153);
   font-size: 20px;
   font-family: ${p => p.theme.fontFamily.heading};
@@ -63,7 +63,7 @@ export const StyledStatsItemText = styled<React.HTMLProps<HTMLSpanElement>, 'spa
   letter-spacing: 0;
 `
 
-export const StyledStatsItemDescription = styled<React.HTMLProps<HTMLDivElement>, 'div'>('div')`
+export const StyledStatsItemDescription = styled<{}, 'div'>('div')`
   font-size: 13px;
   font-weight: 400;
   color: rgb(255, 255, 255);

src/features/newTab/text/index.tsx

@@ -6,7 +6,7 @@ import styled, { css } from '../../../theme'
 import Heading, { HeadingProps } from '../../../components/text/heading'
 
 // TODO: consider exporting props to the main export file
-export const NewTabHeading = styled<HeadingProps & React.HTMLProps<HTMLHeadingElement>, any>(Heading)`
+export const NewTabHeading = styled<HeadingProps, any>(Heading)`
   ${p => p.level === 2 && css`
     display: flex;
     white-space: nowrap;
@@ -26,7 +26,7 @@ export const NewTabHeading = styled<HeadingProps & React.HTMLProps<HTMLHeadingEl
   `}
 `
 
-export const Paragraph = styled<React.HTMLProps<HTMLParagraphElement>, 'p'>('p')`
+export const Paragraph = styled<{}, 'p'>('p')`
   display: flex;
   align-items: center;
   margin: 0 0 10px;
@@ -38,7 +38,7 @@ export const Paragraph = styled<React.HTMLProps<HTMLParagraphElement>, 'p'>('p')
   font-family: ${p => p.theme.fontFamily.body};
 `
 
-export const LinkText = styled<React.HTMLProps<HTMLAnchorElement>, 'a'>('a')`
+export const LinkText = styled<{}, 'a'>('a')`
   line-height: 1.75;
   font-size: 16px;
   color: #FF6000;
@@ -48,7 +48,7 @@ export const LinkText = styled<React.HTMLProps<HTMLAnchorElement>, 'a'>('a')`
   text-decoration: underline;
 `
 
-export const EmphasizedText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+export const EmphasizedText = styled<{}, 'em'>('em')`
   font-family: ${p => p.theme.fontFamily.heading};
   font-size: 20px;
   font-weight: 600;
@@ -57,7 +57,7 @@ export const EmphasizedText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('
   font-style: normal;
 `
 
-export const LabelledText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+export const LabelledText = styled<{}, 'span'>('span')`
   padding: 3px 8px;
   border-radius: 12px;
   text-transform: uppercase;
@@ -71,7 +71,7 @@ export const LabelledText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('sp
   font-family: ${p => p.theme.fontFamily.heading};
 `
 
-export const SmallText = styled<React.HTMLProps<HTMLSpanElement>, 'span'>('span')`
+export const SmallText = styled<{}, 'small'>('small')`
   margin: 0;
   line-height: 1.5;
   font-size: 13px;

stories/features/newTab/private/index.tsx

@@ -4,19 +4,23 @@
 
 import * as React from 'react'
 
-// Components
-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'
+// Feature-specific Components
 import {
+  Page,
+  PageWrapper,
+  PageHeader,
+  StatsContainer,
+  StatsItem,
+  FeatureBlock,
   NewTabHeading,
   SmallText,
   EmphasizedText,
   LabelledText,
   Paragraph,
   LinkText
-} from '../../../../src/features/newTab/text'
+} from '../../../../src/features/newTab'
+
+// Components
 import Clock from '../../../../src/features/newTab/clock'
 import Toggle from '../../../../src/components/formControls/toggle'
 
@@ -61,7 +65,7 @@ export default class NewPrivateTab extends React.PureComponent<{}, {}> {
           </PageHeader>
           <div>
             <NewTabHeading>{locale.thisIsAPrivateTab}</NewTabHeading>
-            <FeatureBlock grid={true} testId='tor'>
+            <FeatureBlock grid={true}>
               <aside>
                 <img src={torIcon} />
               </aside>
@@ -83,7 +87,7 @@ export default class NewPrivateTab extends React.PureComponent<{}, {}> {
             {
               isTor
               ? (
-                <FeatureBlock testId='duckduckgoWithTor'>
+                <FeatureBlock>
                   <Paragraph>
                     {locale.defaultSearchEngineDisclaimer}&nbsp;&nbsp;
                     <a href='#' target='blank' rel='noreferrer noopener'>
@@ -93,7 +97,7 @@ export default class NewPrivateTab extends React.PureComponent<{}, {}> {
                 </FeatureBlock>
               )
               : (
-                <FeatureBlock grid={true} testId='duckduckgoNoTor'>
+                <FeatureBlock grid={true}>
                   <aside>
                     <img src={ddgIcon} />
                   </aside>
@@ -110,7 +114,7 @@ export default class NewPrivateTab extends React.PureComponent<{}, {}> {
                 </FeatureBlock>
               )
             }
-            <FeatureBlock testId='footer'>
+            <FeatureBlock>
               <NewTabHeading level={3}>{locale.moreAboutPrivateTabs}</NewTabHeading>
               <SmallText>{locale.privateTabsDisclaimer}</SmallText>
             </FeatureBlock>