@times-components/ts-components 1.64.3 → 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/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/__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/__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/__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/__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/__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>

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

@@ -54,9 +54,8 @@ export const Label = styled.div<{ hasImage?: boolean; sectionColour: string }>`
   font-family: ${fonts.supporting};
   font-size: 12px;
 
-  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
 `;
 
 export const Headline = styled.h4<{ hasImage?: boolean }>`

package/src/components/in-article-related-articles/__tests__/__snapshots__/RelatedArticle.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`<RelatedArticle> renders 1`] = `
           </a>
         </div>
         <div
-          class="sc-bxivhb kUXZco"
+          class="sc-bxivhb hpRUtX"
         >
           VIDEO
         </div>
@@ -40,7 +40,7 @@ exports[`<RelatedArticle> renders 1`] = `
         href="https://www.thetimes.co.uk/article/china-yunnan-mobilises-as-herd-of-15-marauding-elephants-approaches-capital-qvgttzz2w"
       >
         <div
-          class="sc-EHOje cjnDfc"
+          class="sc-EHOje dHnNJM"
         >
           Read Full Story
         </div>

package/src/components/in-article-related-articles/__tests__/__snapshots__/SingleRelatedArticle.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<SingleRelatedArticle> renders 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa cHawYV"
+      class="sc-bdVaJa jfCTOX"
     >
       <div
         class="sc-bwzfXH dFUiIq"
@@ -59,7 +59,7 @@ exports[`<SingleRelatedArticle> renders no image 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa cHawYV"
+      class="sc-bdVaJa jfCTOX"
     >
       <section>
         <a

package/src/components/in-article-timelines/__tests__/__snapshots__/Timelines.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Timelines click show all 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -38,7 +38,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -68,7 +68,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -98,7 +98,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -128,7 +128,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -158,7 +158,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -184,7 +184,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -214,7 +214,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -237,7 +237,7 @@ exports[`Timelines click show all 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Collapse
       </button>
@@ -255,7 +255,7 @@ exports[`Timelines should render the bullet points component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -280,7 +280,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -306,7 +306,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -332,7 +332,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -358,7 +358,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -384,7 +384,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -410,7 +410,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -436,7 +436,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -459,7 +459,7 @@ exports[`Timelines should render the bullet points component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Show all
       </button>
@@ -477,7 +477,7 @@ exports[`Timelines should render the circle images component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -506,7 +506,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -536,7 +536,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -566,7 +566,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -596,7 +596,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -626,7 +626,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -652,7 +652,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -682,7 +682,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -705,7 +705,7 @@ exports[`Timelines should render the circle images component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Show all
       </button>

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

@@ -32,7 +32,7 @@ export const ContentContainer = styled.div`
 `;
 
 export const StyledShowAllButton = styled(ShowAllButton)`
-  font-size: 14px;
+  font-size: 13px;
   margin: 11px 0;
   padding: 12px 15px 10px;
 `;

package/src/components/inline-dialog/__tests__/__snapshots__/InlineDialog.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<InlineDialog> should render the component 1`] = `
         class="sc-htpNat dBfnu"
       />
       <a
-        class="sc-bxivhb buzDgg"
+        class="sc-bxivhb cjyLTn"
         href="#"
       >
         Button

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

@@ -41,7 +41,7 @@ export const Button = styled.a`
   width: 127px;
   height: 48px;
 
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;

package/src/components/inline-message/__tests__/__snapshots__/InlineMessage.test.tsx.snap

@@ -27,12 +27,12 @@ exports[`<InlineMessage> should render the component 1`] = `
         class="sc-htpNat fMAJrN"
       >
         <div
-          class="sc-bxivhb dnEdgn"
+          class="sc-bxivhb eweiWX"
         >
           Title
         </div>
         <div
-          class="sc-ifAKCX kbJgci"
+          class="sc-ifAKCX jCXJed"
         />
       </div>
     </div>

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

@@ -45,7 +45,7 @@ export const ContentContainer = styled.div`
 export const Title = styled.div`
   font-family: ${fonts.supporting};
   font-weight: 700;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 16px;
 
   margin-bottom: 6px;
@@ -53,7 +53,7 @@ export const Title = styled.div`
 export const Description = styled.div`
   font-family: ${fonts.supporting};
   font-weight: 500;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
   & a {
     color: #333333;