@times-components/ts-components 1.24.0 → 1.26.0

package/src/components/in-article-big-numbers/__tests__/__snapshots__/BigNumbers.test.tsx.snap

@@ -3,18 +3,18 @@
 exports[`BigNumbers click show all 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa juVWHz"
+    class="sc-dnqmqq hHfasZ"
   >
     <div
-      class="sc-bwzfXH gozLqp"
+      class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-gZMcBi hyVIiP"
+        class="sc-bwzfXH gzPkze"
       >
         President Race
       </div>
       <div
-        class="sc-htpNat ljnJGi"
+        class="sc-gzVnrw cqivXS"
       >
         The stats behind the two candidates
       </div>
@@ -22,74 +22,74 @@ exports[`BigNumbers click show all 1`] = `
         class="sc-EHOje kSjPZf"
       >
         <ul
-          class="sc-bZQynM bPxSyH"
+          class="sc-ifAKCX LUyZI"
         >
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $497.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Hillary Clinton
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $247.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Donald Trump
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               71.6m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               The number of people who turned in to the final president debate
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               2-7
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Clinton’s odds of winning the US election (provided by Paddy Power)
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               3-1
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Trump’s odds of winning the US election (provided by Paddy Power)
             </div>
@@ -98,10 +98,10 @@ exports[`BigNumbers click show all 1`] = `
       </div>
     </div>
     <div
-      class="sc-bxivhb dqNwGy"
+      class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-ifAKCX kpjxlo"
+        class="sc-htoDjs sc-gZMcBi fiRWob"
       >
         Collapse
       </button>
@@ -113,7 +113,7 @@ exports[`BigNumbers click show all 1`] = `
 exports[`BigNumbers should render the initial loading state correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-iwsKbI PRvgD"
+    class="sc-bdVaJa dwiMsX"
   >
     <div>
       Placeholder
@@ -125,18 +125,18 @@ exports[`BigNumbers should render the initial loading state correctly 1`] = `
 exports[`BigNumbers should render the standard component 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa juVWHz"
+    class="sc-dnqmqq hHfasZ"
   >
     <div
-      class="sc-bwzfXH gozLqp"
+      class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-gZMcBi hyVIiP"
+        class="sc-bwzfXH gzPkze"
       >
         President Race
       </div>
       <div
-        class="sc-htpNat ljnJGi"
+        class="sc-gzVnrw cqivXS"
       >
         The stats behind the two candidates
       </div>
@@ -144,74 +144,74 @@ exports[`BigNumbers should render the standard component 1`] = `
         class="sc-EHOje kSjPZf"
       >
         <ul
-          class="sc-bZQynM bPxSyH"
+          class="sc-ifAKCX LUyZI"
         >
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $497.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Hillary Clinton
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $247.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Donald Trump
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               71.6m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               The number of people who turned in to the final president debate
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               2-7
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Clinton’s odds of winning the US election (provided by Paddy Power)
             </div>
           </li>
           <li
-            class="sc-gzVnrw dAAiph"
+            class="sc-gqjmRU ejoKUJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               3-1
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Trump’s odds of winning the US election (provided by Paddy Power)
             </div>
@@ -220,10 +220,10 @@ exports[`BigNumbers should render the standard component 1`] = `
       </div>
     </div>
     <div
-      class="sc-bxivhb dqNwGy"
+      class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-ifAKCX kpjxlo"
+        class="sc-htoDjs sc-gZMcBi fiRWob"
       >
         Show all
       </button>
@@ -235,18 +235,18 @@ exports[`BigNumbers should render the standard component 1`] = `
 exports[`BigNumbers should render the wide component 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa rtVDO"
+    class="sc-dnqmqq gFoWtC"
   >
     <div
-      class="sc-bwzfXH gozLqp"
+      class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-gZMcBi hyVIiP"
+        class="sc-bwzfXH gzPkze"
       >
         President Race
       </div>
       <div
-        class="sc-htpNat ljnJGi"
+        class="sc-gzVnrw cqivXS"
       >
         The stats behind the two candidates
       </div>
@@ -254,74 +254,74 @@ exports[`BigNumbers should render the wide component 1`] = `
         class="sc-EHOje kSjPZf"
       >
         <ul
-          class="sc-bZQynM bPxSyH"
+          class="sc-ifAKCX LUyZI"
         >
           <li
-            class="sc-gzVnrw gTHlzh"
+            class="sc-gqjmRU dvjqsJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $497.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Hillary Clinton
             </div>
           </li>
           <li
-            class="sc-gzVnrw gTHlzh"
+            class="sc-gqjmRU dvjqsJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               $247.8m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Money raised by Donald Trump
             </div>
           </li>
           <li
-            class="sc-gzVnrw gTHlzh"
+            class="sc-gqjmRU dvjqsJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               71.6m
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               The number of people who turned in to the final president debate
             </div>
           </li>
           <li
-            class="sc-gzVnrw gTHlzh"
+            class="sc-gqjmRU dvjqsJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               2-7
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Clinton’s odds of winning the US election (provided by Paddy Power)
             </div>
           </li>
           <li
-            class="sc-gzVnrw gTHlzh"
+            class="sc-gqjmRU dvjqsJ"
           >
             <div
-              class="sc-htoDjs bxDFJf"
+              class="sc-VigVT lbzqVL"
             >
               3-1
             </div>
             <div
-              class="sc-dnqmqq dDGXyB"
+              class="sc-bxivhb bPVvqJ"
             >
               Trump’s odds of winning the US election (provided by Paddy Power)
             </div>
@@ -330,10 +330,10 @@ exports[`BigNumbers should render the wide component 1`] = `
       </div>
     </div>
     <div
-      class="sc-bxivhb dqNwGy"
+      class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-ifAKCX kpjxlo"
+        class="sc-htoDjs sc-gZMcBi fiRWob"
       >
         Show all
       </button>

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { breakpoints, colours, fonts } from '@times-components/styleguide';
+import { ShowAllButton } from '../common-styles';
 
 export const Container = styled.div<{
   sectionColour: string;
@@ -31,67 +32,10 @@ export const ContentContainer = styled.div`
   padding: 0 16px;
 `;
 
-export const Headline = styled.div`
-  font-family: ${fonts.headline};
-  font-size: 24px;
-  line-height: 24px;
-  color: ${colours.functional.brandColour};
-  margin: 0 0 6px;
-  @media (min-width: ${breakpoints.medium}px) {
-    font-size: 32px;
-    line-height: 32px;
-  }
-`;
-
-export const ShowAllContainer = styled.div<{
-  showAll: boolean;
-  displayShowAll: boolean;
-}>`
-  display: flex;
-  border-top: 1px solid ${colours.functional.keyline};
-  padding: 5px;
-  justify-content: center;
-  display: ${({ displayShowAll: displayShowAll }) =>
-    displayShowAll ? 'flex' : 'none'};
-`;
-
-export const ShowAllButton = styled.button`
+export const StyledShowAllButton = styled(ShowAllButton)`
   font-size: 12px;
-  font-family: ${fonts.supporting};
-  font-weight: 500;
-  line-height: 20px;
-  border: 1px solid ${colours.functional.primary};
-  background: transparent;
   margin: 15px 0;
   padding: 10px 12px 5px;
-  cursor: pointer;
-  &:active {
-    border: 1px solid ${colours.functional.action};
-    color: ${colours.functional.action};
-  }
-`;
-
-export const ListContainer = styled.div<{
-  showAll: boolean;
-  maxHeight: number;
-  displayShowAll: boolean;
-}>`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-  max-height: ${({ showAll, maxHeight, displayShowAll }) =>
-    !showAll && displayShowAll ? maxHeight + 'px' : 'none'};
-`;
-
-export const List = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -2px -1px -15px;
-  list-style: none;
-  padding: 0;
-  @media (min-width: ${breakpoints.medium}px) {
-  }
 `;
 
 export const ListItem = styled.li<{
@@ -129,10 +73,3 @@ export const NumberContainer = styled.div<{ sectionColour: string }>`
     line-height: 40px;
   }
 `;
-
-export const Copy = styled.div`
-  color: ${colours.functional.secondary};
-  font-family: ${fonts.body};
-  font-size: 16px;
-  line-height: 24px;
-`;

package/src/components/in-article-info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`InfoCard renders 1`] = `
                       tabindex="0"
                     >
                       <div
-                        class="sc-jKJlTe daGHwh"
+                        class="sc-hSdWYo dVKMAw"
                       >
                         <img
                           class="sc-kGXeez iiZPJL"
@@ -198,7 +198,7 @@ exports[`InfoCard renders 1`] = `
             class="sc-chPdSV cxUg"
           >
             <div
-              class="sc-dxgOiQ kyeaEO"
+              class="sc-dxgOiQ gNDmzV"
             >
               Best places to stay
             </div>
@@ -307,7 +307,7 @@ exports[`InfoCard renders no image 1`] = `
                       tabindex="0"
                     >
                       <div
-                        class="sc-jKJlTe daGHwh"
+                        class="sc-hSdWYo dVKMAw"
                       >
                         <img
                           class="sc-kGXeez iiZPJL"
@@ -468,7 +468,7 @@ exports[`InfoCard renders no image 1`] = `
             class="sc-chPdSV cxUg"
           >
             <div
-              class="sc-dxgOiQ kyeaEO"
+              class="sc-dxgOiQ gNDmzV"
             >
               Best places to stay
             </div>
@@ -590,7 +590,7 @@ exports[`InfoCard should render the standard component 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="sc-jKJlTe daGHwh"
+                      class="sc-hSdWYo dVKMAw"
                     >
                       <img
                         class="sc-kGXeez iiZPJL"
@@ -746,7 +746,7 @@ exports[`InfoCard should render the standard component 1`] = `
           class="sc-chPdSV cxUg"
         >
           <div
-            class="sc-dxgOiQ kyeaEO"
+            class="sc-dxgOiQ gNDmzV"
           >
             Best places to stay
           </div>
@@ -853,7 +853,7 @@ exports[`InfoCard should render the wide component 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="sc-jKJlTe daGHwh"
+                      class="sc-hSdWYo dVKMAw"
                     >
                       <img
                         class="sc-kGXeez iiZPJL"
@@ -1009,7 +1009,7 @@ exports[`InfoCard should render the wide component 1`] = `
           class="sc-chPdSV cxUg"
         >
           <div
-            class="sc-dxgOiQ kyeaEO"
+            class="sc-dxgOiQ gNDmzV"
           >
             Best places to stay
           </div>

package/src/components/in-article-info-card-bulletpoints/__tests__/__snapshots__/InfoCardBulletPoints.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`InfoCardBulletPoints should render the component 1`] = `
       class="sc-bwzfXH blmhpN"
     >
       <div
-        class="sc-dnqmqq cqnspX"
+        class="sc-dnqmqq cjsHty"
       >
         Venezuelan Politics
       </div>
@@ -88,7 +88,7 @@ exports[`InfoCardBulletPoints tracking click read more 1`] = `
       class="sc-bwzfXH blmhpN"
     >
       <div
-        class="sc-dnqmqq cqnspX"
+        class="sc-dnqmqq cjsHty"
       >
         Venezuelan Politics
       </div>

package/src/components/in-article-puff/__tests__/__snapshots__/InArticlePuff.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`InArticlePuff should render optional fields correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bZQynM eLgtba"
+    class="sc-gqjmRU gHUBfw"
   >
     <div
-      class="sc-gzVnrw giIBiZ"
+      class="sc-VigVT gIbSHY"
     >
       <a
         href="https://www.thetimes.co.uk"
@@ -21,11 +21,11 @@ exports[`InArticlePuff should render optional fields correctly 1`] = `
       </a>
     </div>
     <div
-      class="sc-htoDjs etvidI"
+      class="sc-jTzLTM cAAdkC"
     >
       <div>
         <div
-          class="sc-dnqmqq frenqu"
+          class="sc-fjdhpX bCDTJX"
         >
           interactive
         </div>
@@ -33,13 +33,13 @@ exports[`InArticlePuff should render optional fields correctly 1`] = `
           href="https://www.thetimes.co.uk"
         >
           <h4
-            class="sc-iwsKbI imXvZS"
+            class="sc-jzJRlG bluMUd"
           >
             Where can I get a Covid vaccine in England?
           </h4>
         </a>
         <div
-          class="sc-gZMcBi gBQBMy"
+          class="sc-cSHVUG itcrty"
         >
           Enter your postcode to find your nearest centre
         </div>
@@ -69,14 +69,14 @@ exports[`InArticlePuff should render optional fields correctly 1`] = `
 exports[`InArticlePuff should render required fields correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bZQynM eLgtba"
+    class="sc-gqjmRU gHUBfw"
   >
     <div
-      class="sc-htoDjs hXHeXp"
+      class="sc-jTzLTM jFRmZO"
     >
       <div>
         <div
-          class="sc-dnqmqq bTDdnU"
+          class="sc-fjdhpX gKXrO"
         >
           interactive
         </div>
@@ -84,7 +84,7 @@ exports[`InArticlePuff should render required fields correctly 1`] = `
           href="https://www.thetimes.co.uk"
         >
           <h4
-            class="sc-iwsKbI kBnSBc"
+            class="sc-jzJRlG crzPVo"
           >
             Where can I get a Covid vaccine in England?
           </h4>

package/src/components/in-article-timelines/Timelines.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import { Timelines } from './Timelines';
+import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+
+storiesOf('Typescript Component/In Article/Timelines', module)
+  .addDecorator((storyFn: () => React.ReactNode) => (
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>{storyFn()}</ArticleHarness>
+    </TrackingContextProvider>
+  ))
+  .add('Timelines with Bullet Point', () => (
+    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
+      <Timelines sectionColour="#008347" />
+    </FetchProvider>
+  ))
+  .add('Timelines with Circular Image', () => (
+    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
+      <Timelines sectionColour="#008347" />
+    </FetchProvider>
+  ));