@times-components/ts-components 1.24.0 → 1.26.0

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

@@ -3,37 +3,59 @@ import { fonts } from '@times-components/styleguide';
 import { FlagType } from './ArticleFlag';
 import { gqlRgbaToStyle } from '@times-components/utils';
 
+export const LiveArticleFlagContainer = styled.div`
+  background-color: #9f0000;
+  height: 24px;
+  padding: 7px 7px 7px 9px;
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+`;
+
+export const LiveArticleFlagText = styled.span`
+  font-family: ${fonts.supporting};
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+`;
+
 const flashing = keyframes`
   0% {
-    color: #ffffff;
+    background-color: #ffffff;
   }
 
   50% {
-    color: #9f0000;
+   background-color: #9f0000;
   }
 
   100% {
-    color: #ffffff;
+    background-color: #ffffff;
   }`;
 
-export const ArticleFlagContainer = styled.div`
+export const LiveArticleFlagIconContainer = styled.div`
+  height: 100%;
   display: flex;
   align-items: center;
-  flex-direction: row;
+  margin-right: 7px;
 `;
 
-export const LiveFlagAndTimestampContainer = styled.div`
+export const LiveArticleFlagIcon = styled.div`
+  height: 6px;
+  width: 6px;
+  animation: ${flashing} 2000ms infinite;
+`;
+
+export const ArticleFlagContainer = styled.div`
   display: flex;
   align-items: center;
   flex-direction: row;
 `;
 
-export const LiveArticleFlagContainer = styled.div`
+export const LiveFlagAndTimestampContainer = styled.div`
   display: flex;
-  height: 24px;
-  padding: 2px 7px 1px 9px;
-  background-color: #9f0000;
   align-items: center;
+  flex-direction: row;
 `;
 
 export const ArticleFlagBullet = styled.div`
@@ -43,14 +65,6 @@ export const ArticleFlagBullet = styled.div`
   background-color: ${({ color }) => gqlRgbaToStyle(color) || color};
 `;
 
-export const LiveIconContainer = styled.div`
-  margin-right: 7px;
-  color: #ffffff;
-  font-size: 18px;
-  align-self: self-end;
-  animation: ${flashing} 2000ms infinite;
-`;
-
 export const ArticleFlagTextContainer = styled.div`
   font-family: TimesDigitalW04-RegularSC;
   font-size: 12px;
@@ -61,15 +75,6 @@ export const ArticleFlagTextContainer = styled.div`
   color: ${({ color }) => gqlRgbaToStyle(color) || color};
 `;
 
-export const LiveArticleFlagText = styled.span`
-  font-family: ${fonts.supporting};
-  color: #ffffff;
-  font-weight: 500;
-  font-size: 12px;
-  letter-spacing: 0.1em;
-  line-height: 16px;
-`;
-
 export const FlagPadding = styled.div<{ allFlags: FlagType }>`
   margin-right: ${({ allFlags }) => (allFlags.length > 1 ? '15px' : 0)};
 `;

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

@@ -33,18 +33,26 @@ const ArticleHeader: React.FC<{
       roundingMethod: 'floor'
     }) + ' ago';
   const diffInSeconds = differenceInSeconds(currentDateTime, updatedDate);
+  const anchorString = (updateTxt = '', headlineTxt = '') => {
+    const onlyNumbersReg = /\D+/g;
+    const onlyNumbers = updateTxt.replace(onlyNumbersReg, '');
+    const acronymReg = /\b(\w)/g;
+    const acronymMatch = headlineTxt.match(acronymReg);
+    const acronym = acronymMatch === null ? '' : acronymMatch.join('');
+    return `u_${onlyNumbers}${acronym}`;
+  };
 
   const isLessThan1Minute = diffInSeconds < 60;
   const isLessThan1Hour = diffInSeconds < 60 * 60;
   const isLessThan13Hours = diffInSeconds < 60 * 60 * 13;
   const isDaysAgo = differenceInCalendarDays(currentDateTime, updatedDate) >= 1;
-
+  const anchorPoint = anchorString(updated, headline);
   const isBreaking = breaking
     ? Boolean(breaking.toLowerCase() === 'true')
     : false;
 
   return (
-    <Container isBreaking={isBreaking && isLessThan1Hour}>
+    <Container isBreaking={isBreaking && isLessThan1Hour} id={anchorPoint}>
       <UpdatesContainer>
         <UpdatedTimeItems>
           {isBreaking && isLessThan1Hour ? (

package/src/components/article-header/__tests__/__snapshots__/ArticleHeader.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - B
   <div>
     <div
       class="sc-bdVaJa cQBRMp"
+      id="u_20211231063000T222"
     >
       <div
         class="sc-bwzfXH htoLMg"
@@ -16,23 +17,23 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - B
             class="sc-dnqmqq bGasAc"
           >
             <div
-              class="sc-gZMcBi erfHmy"
+              class="sc-fjdhpX Vdnui"
             >
               <div
-                class="sc-gqjmRU jPDmNQ"
+                class="sc-iwsKbI fqYeBv"
               >
                 <div
-                  class="sc-jTzLTM jqFvSm"
+                  class="sc-gqjmRU cTMoEm"
                 >
-                  ■
-                </div>
-                <div>
-                  <span
-                    class="sc-jzJRlG erbwEj"
-                  >
-                    BREAKING
-                  </span>
+                  <div
+                    class="sc-VigVT rGeCL"
+                  />
                 </div>
+                <span
+                  class="sc-gZMcBi iBeFrd"
+                >
+                  BREAKING
+                </span>
               </div>
             </div>
           </div>
@@ -59,6 +60,7 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - N
   <div>
     <div
       class="sc-bdVaJa fLcQHz"
+      id="u_20211231063000"
     >
       <div
         class="sc-bwzfXH htoLMg"
@@ -84,6 +86,7 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - N
   <div>
     <div
       class="sc-bdVaJa fLcQHz"
+      id="u_20211231063000T222"
     >
       <div
         class="sc-bwzfXH htoLMg"

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

@@ -36,7 +36,7 @@ exports[`GalleryCarousel should render the component 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="sc-eNQAEJ hpchfZ"
+                      class="sc-eHgmQL cjLcJm"
                     >
                       <img
                         src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F46cebe30-c82d-11eb-b6f5-fed739e7c1ca.jpg?crop=6676%2C3755%2C65%2C707&resize=1180"
@@ -58,7 +58,7 @@ exports[`GalleryCarousel should render the component 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="sc-eNQAEJ hpchfZ"
+                      class="sc-eHgmQL cjLcJm"
                     >
                       <img
                         src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Fsundaytimes%2Fprod%2Fweb%2Fbin%2F0f831cea-0317-11eb-910e-49261a8ea333.jpg?crop=2250%2C1500%2C0%2C0&resize=1500"
@@ -78,7 +78,7 @@ exports[`GalleryCarousel should render the component 1`] = `
           class="sc-kAzzGY eTzlhe"
         >
           <div
-            class="sc-ckVGcZ gkcrOD"
+            class="sc-ckVGcZ pKgO"
           >
             Label 1
           </div>

package/src/components/common-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, fonts } from '@times-components/styleguide';
+import { breakpoints, fonts, colours } from '@times-components/styleguide';
 
 export const PlaceholderContainer = styled.div`
   position: relative;
@@ -21,18 +21,77 @@ export const Label = styled.div<{ sectionColour: string }>`
   line-height: 16px;
   text-transform: uppercase;
   color: ${({ sectionColour }) => `${sectionColour}`};
-  padding-bottom: 10px;
+  padding-bottom: 5px;
   letter-spacing: 1px;
+`;
+
+export const HiddenDiv = styled.div`
+  display: none;
+`;
 
+export const Copy = styled.div`
+  color: ${colours.functional.secondary};
+  font-family: ${fonts.body};
+  font-size: 16px;
+  line-height: 24px;
+`;
+
+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) {
-    padding-bottom: 6px;
   }
+`;
 
-  @media (min-width: ${breakpoints.wide}px) {
-    padding-bottom: 10px;
+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 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 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 HiddenDiv = styled.div`
-  display: none;
+export const ShowAllButton = styled.button`
+  font-family: ${fonts.supporting};
+  font-weight: 500;
+  line-height: 20px;
+  border: 1px solid ${colours.functional.primary};
+  background: transparent;
+  cursor: pointer;
+  &:active {
+    border: 1px solid ${colours.functional.action};
+    color: ${colours.functional.action};
+  }
 `;

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

@@ -9,16 +9,19 @@ import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
 import {
   Container,
   ContentContainer,
+  ListItem,
+  NumberContainer,
+  StyledShowAllButton
+} from './styles';
+import {
+  PlaceholderContainer,
+  Label,
   Headline,
   ListContainer,
   List,
-  ListItem,
-  NumberContainer,
   Copy,
-  ShowAllContainer,
-  ShowAllButton
-} from './styles';
-import { PlaceholderContainer, Label } from '../common-styles';
+  ShowAllContainer
+} from '../common-styles';
 import { isStandard, isWide } from '../../helpers/layout-size/layoutSize';
 import { DeckData } from '../../helpers/fetch/types';
 
@@ -135,7 +138,7 @@ export const BigNumbers: React.FC<{
             </ListContainer>
           </ContentContainer>
           <ShowAllContainer showAll={showAll} displayShowAll={displayShowAll}>
-            <ShowAllButton
+            <StyledShowAllButton
               onClick={() =>
                 handleShowAll(
                   fireAnalyticsEvent,
@@ -144,7 +147,7 @@ export const BigNumbers: React.FC<{
               }
             >
               {showAll ? 'Collapse' : 'Show all'}
-            </ShowAllButton>
+            </StyledShowAllButton>
           </ShowAllContainer>
         </Container>
       )}