@times-components/ts-components 1.22.3 → 1.25.0

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

@@ -1,25 +1,61 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { fonts } from '@times-components/styleguide';
 import { FlagType } from './ArticleFlag';
 import { gqlRgbaToStyle } from '@times-components/utils';
 
-export const ArticleFlagContainer = styled.div`
+export const LiveArticleFlagContainer = styled.div`
+  background-color: #9f0000;
+  height: 24px;
+  padding: 7px 7px 7px 9px;
   display: flex;
-  align-items: center;
   flex-direction: row;
+  width: fit-content;
 `;
 
-export const LiveFlagAndTimestampContainer = styled.div`
+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% {
+    background-color: #ffffff;
+  }
+
+  50% {
+   background-color: #9f0000;
+  }
+
+  100% {
+    background-color: #ffffff;
+  }`;
+
+export const LiveArticleFlagIconContainer = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 7px;
+`;
+
+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;
-  padding: 2px 6px;
-  background-color: #9f0000;
-  align-items: baseline;
+  align-items: center;
+  flex-direction: row;
 `;
 
 export const ArticleFlagBullet = styled.div`
@@ -29,12 +65,6 @@ export const ArticleFlagBullet = styled.div`
   background-color: ${({ color }) => gqlRgbaToStyle(color) || color};
 `;
 
-export const LiveIconContainer = styled.div`
-  margin-right: 8px;
-  color: #ffffff;
-  align-self: self-start;
-`;
-
 export const ArticleFlagTextContainer = styled.div`
   font-family: TimesDigitalW04-RegularSC;
   font-size: 12px;
@@ -45,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 fwGLTx"
+                class="sc-iwsKbI fqYeBv"
               >
                 <div
-                  class="sc-jTzLTM bTqqzd"
+                  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/helpers/fetch/__tests__/FetchProvider.test.tsx

@@ -53,14 +53,12 @@ describe('<FetchProvider>', () => {
   it('loading', async () => {
     fetchMock.mockResponse(async () => ({ body: '{ "value" : "boo" }' }));
 
-    const { asFragment, findByText } = render(
+    const { findByText } = render(
       <FetchProvider url="http://thetimes.co.uk">
         <TestComponent />
       </FetchProvider>
     );
     await findByText('Loading');
-
-    expect(asFragment()).toMatchSnapshot();
   });
 
   it('error', async () => {

package/src/helpers/fetch/__tests__/__snapshots__/FetchProvider.test.tsx.snap

@@ -24,14 +24,6 @@ exports[`<FetchProvider> fetch 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<FetchProvider> loading 1`] = `
-<DocumentFragment>
-  <div>
-    boo
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<FetchProvider> preview 1`] = `
 <DocumentFragment>
   <div>