@times-components/ts-components 1.64.2 → 1.65.0

package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`LiveArticleFlag should render the base live article flag 1`] = `
           />
         </div>
         <span
-          class="sc-bwzfXH hBgZUv"
+          class="sc-bwzfXH crsvMm"
         >
           BASE
         </span>
@@ -44,7 +44,7 @@ exports[`LiveArticleFlag should render the breaking article flag 1`] = `
           />
         </div>
         <span
-          class="sc-bwzfXH hBgZUv"
+          class="sc-bwzfXH crsvMm"
         >
           BREAKING
         </span>
@@ -71,7 +71,7 @@ exports[`LiveArticleFlag should render the live article flag 1`] = `
           />
         </div>
         <span
-          class="sc-bwzfXH hBgZUv"
+          class="sc-bwzfXH crsvMm"
         >
           LIVE
         </span>

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

@@ -17,7 +17,9 @@ export const LiveArticleFlagText = styled.span`
   color: #ffffff;
   font-weight: 500;
   font-size: 12px;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
 `;
 
 const flashing = keyframes`

package/src/components/article-header/ArticleHeader.stories.tsx

@@ -29,29 +29,30 @@ const getAttributes = () => {
 };
 
 storiesOf('Typescript Component/Article Header', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
-    <ArticleHarness>{storyFn()}</ArticleHarness>
-  ))
   .add('Article Header with headline', () => {
     const props = getAttributes();
     return (
-      <ArticleHeader
-        updated={props.updated}
-        // date={props.date}
-        // time={props.time}
-        breaking={props.breaking}
-        headline={encodeURIComponent(props.headline)}
-      />
+      <ArticleHarness>
+        <ArticleHeader
+          updated={props.updated}
+          // date={props.date}
+          // time={props.time}
+          breaking={props.breaking}
+          headline={encodeURIComponent(props.headline)}
+        />
+      </ArticleHarness>
     );
   })
   .add('Article Header without headline', () => {
     const props = getAttributes();
     return (
-      <ArticleHeader
-        updated={props.updated}
-        // date={props.date}
-        // time={props.time}
-        breaking={props.breaking}
-      />
+      <ArticleHarness>
+        <ArticleHeader
+          updated={props.updated}
+          // date={props.date}
+          // time={props.time}
+          breaking={props.breaking}
+        />
+      </ArticleHarness>
     );
   });

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

@@ -34,14 +34,14 @@ export const TimeSincePublishingContainer = styled.div`
 export const TimeSincePublishing = styled.div`
   color: ${colours.functional.brandColour};
   font-family: ${fonts.supporting};
-  font-size: 14px;
+  font-size: 13px;
   line-height: 18px;
 `;
 
 const updatedStyle = css`
   color: ${colours.functional.secondary};
   font-family: ${fonts.supporting};
-  font-size: 14px;
+  font-size: 13px;
   line-height: 18px;
 `;
 

package/src/components/carousel/GalleryCarousel.stories.tsx

@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/gallery-carousel';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 storiesOf('Typescript Component/Gallery Carousel', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Wide', () => (
     <TrackingContextProvider
       analyticsStream={analyticsStream}
       context={{
@@ -21,27 +21,52 @@ storiesOf('Typescript Component/Gallery Carousel', module)
         }
       }}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43486]}>
+          <div style={{ margin: '20px 0px' }}>
+            <GalleryCarousel sectionColour="#13354E" />
+          </div>
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
   ))
-  .add('Wide', () => (
-    <FetchProvider previewData={previewData[43486]}>
-      <div style={{ margin: '20px 0px' }}>
-        <GalleryCarousel sectionColour="#13354E" />
-      </div>
-    </FetchProvider>
-  ))
   .add('Regular', () => (
-    <FetchProvider previewData={previewData[43484]}>
-      <div style={{ margin: '20px 0px' }}>
-        <GalleryCarousel sectionColour="#13354E" />
-      </div>
-    </FetchProvider>
+    <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'Headline',
+          section_details: 'Section'
+        }
+      }}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43484]}>
+          <div style={{ margin: '20px 0px' }}>
+            <GalleryCarousel sectionColour="#13354E" />
+          </div>
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ))
   .add('Small', () => (
-    <FetchProvider previewData={previewData[43434]}>
-      <div style={{ margin: '20px 0px' }}>
-        <GalleryCarousel sectionColour="#13354E" />
-      </div>
-    </FetchProvider>
+    <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'Headline',
+          section_details: 'Section'
+        }
+      }}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43434]}>
+          <div style={{ margin: '20px 0px' }}>
+            <GalleryCarousel sectionColour="#13354E" />
+          </div>
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ));

package/src/components/carousel/__tests__/__snapshots__/GalleryCarousel.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`GalleryCarousel should render the component 1`] = `
           class="sc-kAzzGY eTzlhe"
         >
           <div
-            class="sc-ckVGcZ pKgO"
+            class="sc-ckVGcZ jscMvM"
           >
             Label 1
           </div>
@@ -159,7 +159,7 @@ exports[`GalleryCarousel should render the component 1`] = `
             </div>
             <div>
               <div
-                class="sc-gqjmRU cwbOMy"
+                class="sc-gqjmRU elBRrc"
               >
                 Michael Clarke
               </div>
@@ -222,7 +222,7 @@ exports[`GalleryCarousel should render the component 1`] = `
         style="padding-left: 16px; padding-right: 16px;"
       >
         <div
-          class="sc-gqjmRU cwbOMy"
+          class="sc-gqjmRU elBRrc"
         >
           Michael Clarke
         </div>

package/src/components/common-styles.ts

@@ -22,7 +22,7 @@ export const Label = styled.div<{ sectionColour: string }>`
   text-transform: uppercase;
   color: ${({ sectionColour }) => `${sectionColour}`};
   padding-bottom: 5px;
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
 `;
 
 export const HiddenDiv = styled.div`

package/src/components/in-article-big-numbers/BigNumbers.stories.tsx

@@ -7,7 +7,7 @@ import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextP
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 storiesOf('Typescript Component/In Article/Big Numbers', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Standard without a headline', () => (
     <TrackingContextProvider
       context={{
         component: 'ArticleSkeleton',
@@ -18,21 +18,46 @@ storiesOf('Typescript Component/In Article/Big Numbers', module)
       }}
       analyticsStream={analyticsStream}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44335">
+          <BigNumbers sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
   ))
-  .add('Standard without a headline', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44335">
-      <BigNumbers sectionColour="#636C17" />
-    </FetchProvider>
-  ))
   .add('Standard with One Card', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44336">
-      <BigNumbers sectionColour="#636C17" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44336">
+          <BigNumbers sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ))
   .add('Wide with a headline', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44334">
-      <BigNumbers sectionColour="#636C17" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44334">
+          <BigNumbers sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ));

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

@@ -9,7 +9,7 @@ exports[`BigNumbers click show all 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         President Race
       </div>
@@ -101,7 +101,7 @@ exports[`BigNumbers click show all 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi fiRWob"
+        class="sc-htoDjs sc-gZMcBi gJkCHi"
       >
         Collapse
       </button>
@@ -131,7 +131,7 @@ exports[`BigNumbers should render the standard component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         President Race
       </div>
@@ -223,7 +223,7 @@ exports[`BigNumbers should render the standard component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi fiRWob"
+        class="sc-htoDjs sc-gZMcBi gJkCHi"
       >
         Show all
       </button>
@@ -241,7 +241,7 @@ exports[`BigNumbers should render the wide component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         President Race
       </div>
@@ -333,7 +333,7 @@ exports[`BigNumbers should render the wide component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi fiRWob"
+        class="sc-htoDjs sc-gZMcBi gJkCHi"
       >
         Show all
       </button>

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

@@ -35,7 +35,7 @@ export const ContentContainer = styled.div`
 export const StyledShowAllButton = styled(ShowAllButton)`
   font-size: 12px;
   margin: 15px 0;
-  padding: 10px 12px 5px;
+  padding: 8px 12px 7px;
 `;
 
 export const ListItem = styled.li<{

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

@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/in-article-info-card';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 storiesOf('Typescript Component/In Article/Info Card', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Standard with Copy & Subtitle', () => (
     <TrackingContextProvider
       analyticsStream={analyticsStream}
       context={{
@@ -21,26 +21,64 @@ storiesOf('Typescript Component/In Article/Info Card', module)
         }
       }}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43606]}>
+          <InfoCard sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
   ))
-  .add('Standard with Copy & Subtitle', () => (
-    <FetchProvider previewData={previewData[43606]}>
-      <InfoCard sectionColour="#636C17" />
-    </FetchProvider>
-  ))
   .add('Standard with Image', () => (
-    <FetchProvider previewData={previewData[43961]}>
-      <InfoCard sectionColour="#636C17" />
-    </FetchProvider>
+    <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'Headline',
+          section_details: 'Section'
+        }
+      }}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43961]}>
+          <InfoCard sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ))
   .add('Wide with Copy', () => (
-    <FetchProvider previewData={previewData[43603]}>
-      <InfoCard sectionColour="#636C17" />
-    </FetchProvider>
+    <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'Headline',
+          section_details: 'Section'
+        }
+      }}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43603]}>
+          <InfoCard sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ))
   .add('Wide with Image', () => (
-    <FetchProvider previewData={previewData[43614]}>
-      <InfoCard sectionColour="#636C17" />
-    </FetchProvider>
+    <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'Headline',
+          section_details: 'Section'
+        }
+      }}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[43614]}>
+          <InfoCard sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ));

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

@@ -198,7 +198,7 @@ exports[`InfoCard renders 1`] = `
             class="sc-chPdSV cxUg"
           >
             <div
-              class="sc-dxgOiQ gNDmzV"
+              class="sc-dxgOiQ khSkYd"
             >
               Best places to stay
             </div>
@@ -468,7 +468,7 @@ exports[`InfoCard renders no image 1`] = `
             class="sc-chPdSV cxUg"
           >
             <div
-              class="sc-dxgOiQ gNDmzV"
+              class="sc-dxgOiQ khSkYd"
             >
               Best places to stay
             </div>
@@ -746,7 +746,7 @@ exports[`InfoCard should render the standard component 1`] = `
           class="sc-chPdSV cxUg"
         >
           <div
-            class="sc-dxgOiQ gNDmzV"
+            class="sc-dxgOiQ khSkYd"
           >
             Best places to stay
           </div>
@@ -1009,7 +1009,7 @@ exports[`InfoCard should render the wide component 1`] = `
           class="sc-chPdSV cxUg"
         >
           <div
-            class="sc-dxgOiQ gNDmzV"
+            class="sc-dxgOiQ khSkYd"
           >
             Best places to stay
           </div>

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

@@ -6,8 +6,9 @@ import { InfoCardBulletPoints } from './InfoCardBulletPoints';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
-storiesOf('Typescript Component/In Article/Info Card', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+storiesOf('Typescript Component/In Article/Info Card', module).add(
+  'Bullet Points',
+  () => (
     <TrackingContextProvider
       context={{
         component: 'ArticleSkeleton',
@@ -18,12 +19,11 @@ storiesOf('Typescript Component/In Article/Info Card', module)
       }}
       analyticsStream={analyticsStream}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/43978">
+          <InfoCardBulletPoints sectionColour="#636C17" />
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
-  ))
-
-  .add('Bullet Points', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/43978">
-      <InfoCardBulletPoints sectionColour="#636C17" />
-    </FetchProvider>
-  ));
+  )
+);

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 cjsHty"
+        class="sc-dnqmqq gzKSHu"
       >
         Venezuelan Politics
       </div>
@@ -56,7 +56,7 @@ exports[`InfoCardBulletPoints should render the component 1`] = `
       class="sc-bxivhb hAzEyl"
     >
       <button
-        class="sc-ifAKCX kpjxlo"
+        class="sc-ifAKCX QXRPc"
       >
         Read more
       </button>
@@ -88,7 +88,7 @@ exports[`InfoCardBulletPoints tracking click read more 1`] = `
       class="sc-bwzfXH blmhpN"
     >
       <div
-        class="sc-dnqmqq cjsHty"
+        class="sc-dnqmqq gzKSHu"
       >
         Venezuelan Politics
       </div>
@@ -135,7 +135,7 @@ exports[`InfoCardBulletPoints tracking click read more 1`] = `
       class="sc-bxivhb hpabOq"
     >
       <button
-        class="sc-ifAKCX kpjxlo"
+        class="sc-ifAKCX QXRPc"
       >
         Collapse
       </button>

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

@@ -19,5 +19,5 @@ export const LinkText = styled.div`
   margin-top: 1px;
   margin-right: 12px;
   font-family: ${fonts.supporting};
-  font-size: 16px;
+  font-size: 15px;
 `;

package/src/components/in-article-puff/InArticlePuff.stories.tsx

@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/in-article-puff';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 storiesOf('Typescript Component/In Article/In Article Puff', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Image', () => (
     <TrackingContextProvider
       context={{
         component: 'ArticleSkeleton',
@@ -21,25 +21,50 @@ storiesOf('Typescript Component/In Article/In Article Puff', module)
       }}
       analyticsStream={analyticsStream}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[41548]}>
+          <InArticlePuff sectionColour="#13354e" />
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
   ))
-  .add('Image', () => (
-    <FetchProvider previewData={previewData[41548]}>
-      <InArticlePuff sectionColour="#13354e" />
-    </FetchProvider>
-  ))
   .add('Image 3:2', () => (
-    <FetchProvider previewData={previewData[41548]}>
-      <InArticlePuff
-        sectionColour="#13354e"
-        forceImageAspectRatio="3:2"
-        isLiveOrBreaking="breaking"
-      />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[41548]}>
+          <InArticlePuff
+            sectionColour="#13354e"
+            forceImageAspectRatio="3:2"
+            isLiveOrBreaking="breaking"
+          />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ))
   .add('No Image', () => (
-    <FetchProvider previewData={previewData[41547]}>
-      <InArticlePuff sectionColour="#184e13" isLiveOrBreaking="live" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>
+        <FetchProvider previewData={previewData[41547]}>
+          <InArticlePuff sectionColour="#184e13" isLiveOrBreaking="live" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ));

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

@@ -25,7 +25,7 @@ exports[`InArticlePuff should render optional fields correctly 1`] = `
     >
       <div>
         <div
-          class="sc-fjdhpX bCDTJX"
+          class="sc-fjdhpX ixGEuo"
         >
           interactive
         </div>
@@ -49,7 +49,7 @@ exports[`InArticlePuff should render optional fields correctly 1`] = `
         href="https://www.thetimes.co.uk"
       >
         <div
-          class="sc-htpNat irNLqr"
+          class="sc-htpNat fyASJZ"
         >
           Read the full article
         </div>
@@ -76,7 +76,7 @@ exports[`InArticlePuff should render required fields correctly 1`] = `
     >
       <div>
         <div
-          class="sc-fjdhpX gKXrO"
+          class="sc-fjdhpX cWEcCh"
         >
           interactive
         </div>
@@ -95,7 +95,7 @@ exports[`InArticlePuff should render required fields correctly 1`] = `
         href="https://www.thetimes.co.uk"
       >
         <div
-          class="sc-htpNat irNLqr"
+          class="sc-htpNat fyASJZ"
         >
           Read more
         </div>