@times-components/ts-components 1.35.1 → 1.35.2

package/src/components/article-flag/ArticleFlag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { colours } from '@times-components/styleguide';
+import { colours } from '@times-components/ts-styleguide';
 import { LiveArticleFlag, BreakingArticleFlag } from './LiveArticleFlag';
 import {
   ArticleFlagContainer,

package/src/components/article-flag/styles.ts

@@ -1,5 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { fonts } from '@times-components/styleguide';
+import { fonts } from '@times-components/ts-styleguide';
 import { FlagType } from './ArticleFlag';
 import { gqlRgbaToStyle } from '@times-components/utils';
 

package/src/components/article-header/styles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ isBreaking: boolean }>`
   display: flex;

package/src/components/carousel/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { fonts, colours, breakpoints } from '@times-components/styleguide';
+import { fonts, colours, breakpoints } from '@times-components/ts-styleguide';
 import ReactElasticCarousel from 'react-elastic-carousel';
 
 export const Headline = styled.div<{ isWide: boolean }>`

package/src/components/common-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, fonts, colours } from '@times-components/styleguide';
+import { breakpoints, fonts, colours } from '@times-components/ts-styleguide';
 
 export const PlaceholderContainer = styled.div`
   position: relative;

package/src/components/in-article-big-numbers/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 import { ShowAllButton } from '../common-styles';
 
 export const Container = styled.div<{

package/src/components/in-article-info-card/InfoCard.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Placeholder } from '@times-components/image';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 import { Card } from './Card';
 import {
   InfoCardContainer,

package/src/components/in-article-info-card/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { fonts, colours, breakpoints } from '@times-components/styleguide';
+import { fonts, colours, breakpoints } from '@times-components/ts-styleguide';
 import ReactElasticCarousel from 'react-elastic-carousel';
 
 export const Headline = styled.div`

package/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.tsx

@@ -6,7 +6,7 @@ import {
   TrackingContextProvider
 } from '../../helpers/tracking/TrackingContextProvider';
 import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 import {
   Container,
   ContentContainer,

package/src/components/in-article-info-card-bulletpoints/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ sectionColour: string }>`
   margin: 0 auto 20px auto;

package/src/components/in-article-link/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colours, fonts } from '@times-components/styleguide';
+import { colours, fonts } from '@times-components/ts-styleguide';
 
 export const Link = styled.a`
   display: flex;

package/src/components/in-article-puff/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ sectionColour: string }>`
   display: flex;

package/src/components/in-article-related-articles/InArticleRelatedArticles.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 import { boolean, select } from '@storybook/addon-knobs';
-import { colours } from '@times-components/styleguide';
+import { colours } from '@times-components/ts-styleguide';
 
 import { InArticleRelatedArticles } from './InArticleRelatedArticles';
 
@@ -63,6 +63,7 @@ storiesOf('Typescript Component/In Article/Related Articles', module)
       { Three: 3, Two: 2, One: 1 },
       3
     );
+    // @ts-ignore
     const sectionColor = select('Section', colours.section, '#636C17');
     return (
       <InArticleRelatedArticles

package/src/components/in-article-related-articles/SingleRelatedArticle.styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const SingleRelatedArticleContainer = styled.div`
   display: flex;

package/src/components/in-article-related-articles/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, fonts, colours } from '@times-components/styleguide';
+import { breakpoints, fonts, colours } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ sectionColour: string }>`
   display: flex;

package/src/components/in-article-timelines/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 import { ShowAllButton } from '../common-styles';
 
 export const Container = styled.div<{

package/src/components/inline-dialog/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, fonts } from '@times-components/styleguide';
+import { breakpoints, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div`
   display: flex;

package/src/components/inline-message/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { fonts } from '@times-components/styleguide';
+import { fonts } from '@times-components/ts-styleguide';
 
 const MessageConfig = {
   info: { background: '#bedeed', foreground: '#1573a2' },

package/src/components/newsletter-puff/NewsletterPuffLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from '@times-components/link';
 import { IconForwardArrow } from '@times-components/icons';
-import { colours } from '@times-components/styleguide';
+import { colours } from '@times-components/ts-styleguide';
 
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 

package/src/components/newsletter-puff/styles.ts

@@ -6,7 +6,7 @@ import {
   fonts,
   fontSizes,
   spacing
-} from '@times-components/styleguide';
+} from '@times-components/ts-styleguide';
 
 const View = styled.div`
   align-items: stretch;

package/src/components/olympics/__tests__/__snapshots__/OlympicsMedalTable.test.tsx.snap

@@ -52,6 +52,7 @@ exports[`<OlympicsMedalTable> click show all 1`] = `
 
 .c0 .pa-medaltable .pa_MedalTableView_medaltable {
   font-size: 16px;
+  color: #1D1D1B;
   font-family: TimesModern-Bold;
   background-color: #F9F9F9;
   padding-bottom: 60px;
@@ -233,6 +234,7 @@ exports[`<OlympicsMedalTable> renders 1`] = `
 
 .c0 .pa-medaltable .pa_MedalTableView_medaltable {
   font-size: 16px;
+  color: #1D1D1B;
   font-family: TimesModern-Bold;
   background-color: #F9F9F9;
   padding-bottom: 60px;
@@ -414,6 +416,7 @@ exports[`<OlympicsMedalTable> renders default keys 1`] = `
 
 .c0 .pa-medaltable .pa_MedalTableView_medaltable {
   font-size: 16px;
+  color: #1D1D1B;
   font-family: TimesModern-Bold;
   background-color: #F9F9F9;
   padding-bottom: 60px;
@@ -595,6 +598,7 @@ exports[`<OlympicsMedalTable> renders outside of article 1`] = `
 
 .c0 .pa-medaltable .pa_MedalTableView_medaltable {
   font-size: 16px;
+  color: #1D1D1B;
   font-family: TimesModern-Bold;
   background-color: #F9F9F9;
   padding-bottom: 60px;

package/src/components/olympics/medal-table/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 import { olympicColour } from '../shared-styles';
 
 const highlightColour = '#e4e4e4';
@@ -22,7 +22,7 @@ export const Container = styled.div<{
   .pa-medaltable {
     .pa_MedalTableView_medaltable {
       font-size: 16px;
-      color: ${fonts.brandColour};
+      color: ${colours.functional.brandColour};
       font-family: ${fonts.headline};
       background-color: ${colours.functional.backgroundPrimary};
       padding-bottom: 60px;

package/src/components/olympics/schedule/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 import { olympicColour } from '../shared-styles';
 
 export const Container = styled.div<{

package/src/components/olympics/shared-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colours, fonts } from '@times-components/styleguide';
+import { colours, fonts } from '@times-components/ts-styleguide';
 
 const highlightColour = '#e4e4e4';
 export const olympicColour = '#402f7a';

package/src/components/opta/football/fixtures/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/football/match-stats/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/football/shared-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
   margin: 0 auto 20px auto;

package/src/components/opta/football/standings/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/football/summary/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/rugby/fixtures/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/rugby/match-stats/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/rugby/shared-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
   margin: 0 auto 20px auto;

package/src/components/opta/rugby/standings/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/opta/rugby/summary/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 

package/src/components/related-article-slice/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div`
   display: none;

package/src/components/updated-timestamp/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colours, fonts } from '@times-components/styleguide';
+import { colours, fonts } from '@times-components/ts-styleguide';
 
 export const Container = styled.div`
   display: flex;

package/src/fixtures/article-harness/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 export const ArticlePage = styled.div`
   background-color: #f5efeb;

package/src/types/externs.d.ts

@@ -19,48 +19,37 @@ declare module '@times-components/tracking' {
   export function withTrackEvents<T>(component: FC<T>, attr: any): FC<T>;
 }
 
-declare module '@times-components/icons' {
-  import { FC } from 'react';
-  type IconProps = {
-    fillColour: string | null;
-    height?: number;
-    width?: number;
+declare module '@times-components/ts-slices' {
+  export const Slice = React.FC;
+  export type SliceArticle = {
+    id?: string;
+    url?: string;
+    label?: string;
+    byline?: string;
+    headline: string;
+    standfirst?: string;
+    summary?: string;
+    cta?: string;
+    datePublished?: string;
+    dateUpdated?: string;
+    template?: string;
+    images: {
+      alt?: string;
+      crops: Array<{
+        url: string;
+        ratio: string;
+      }>;
+    };
   };
-  export const IconForwardChevron: FC<IconProps>;
-  export const IconForwardArrow: FC<IconProps>;
-}
-
-declare module '@times-components/image' {
-  import { FC } from 'react';
-
-  export const Placeholder: FC;
-  const Image: FC<{
-    aspectRatio: number;
-    uri: string;
-  }>;
-  export default Image;
+  export type ClickHandlerType = (
+    event: MouseEventType,
+    article: SliceArticle,
+    position?: string
+  ) => void;
+  export type MouseEventType = React.MouseEvent<HTMLAnchorElement, MouseEvent>;
 }
 
-declare module '@times-components/test-utils' {
-  export const delay: (ms: number) => Promise<never>;
-}
-
-declare module '@times-components/utils' {
-  type appendToImageURL = (
-    url: string,
-    key: string,
-    value: string | number
-  ) => string;
-
-  export const TcView: React.FC<{ style?: React.CSSProperties }>;
-  export const TcText: React.FC<{ style?: React.CSSProperties }>;
-  export const TcScrollView: React.FC<{ style?: React.CSSProperties }>;
-  export const capitalise: (s: string) => string;
-  export const stripTags: (input: string, replaceWith: string) => string;
-  export const gqlRgbaToStyle: (colour: string | undefined) => string | null;
-}
-
-declare module '@times-components/styleguide' {
+declare module '@times-components/ts-styleguide' {
   type ColourMap = Record<string, string>;
   type Colours = Record<string, ColourMap>;
 
@@ -112,6 +101,47 @@ declare module '@times-components/styleguide' {
   export default styleguide;
 }
 
+declare module '@times-components/icons' {
+  import { FC } from 'react';
+  type IconProps = {
+    fillColour: string | null;
+    height?: number;
+    width?: number;
+  };
+  export const IconForwardChevron: FC<IconProps>;
+  export const IconForwardArrow: FC<IconProps>;
+}
+
+declare module '@times-components/image' {
+  import { FC } from 'react';
+
+  export const Placeholder: FC;
+  const Image: FC<{
+    aspectRatio: number;
+    uri: string;
+  }>;
+  export default Image;
+}
+
+declare module '@times-components/test-utils' {
+  export const delay: (ms: number) => Promise<never>;
+}
+
+declare module '@times-components/utils' {
+  type appendToImageURL = (
+    url: string,
+    key: string,
+    value: string | number
+  ) => string;
+
+  export const TcView: React.FC<{ style?: React.CSSProperties }>;
+  export const TcText: React.FC<{ style?: React.CSSProperties }>;
+  export const TcScrollView: React.FC<{ style?: React.CSSProperties }>;
+  export const capitalise: (s: string) => string;
+  export const stripTags: (input: string, replaceWith: string) => string;
+  export const gqlRgbaToStyle: (colour: string | undefined) => string | null;
+}
+
 declare module '@times-components/button' {
   import { FC } from 'react';