@times-components/ts-components 1.27.0 → 1.29.0

package/src/components/article-flag/ArticleFlag.tsx

@@ -54,10 +54,11 @@ const flagsMapping = (override = '') => {
       color: override
     };
   }
+
   return new Map([
     ['NEW', <NewArticleFlag {...colourProp} />],
-    ['LIVE', <LiveArticleFlag />],
-    ['BREAKING', <BreakingArticleFlag />],
+    ['LIVE', <LiveArticleFlag {...colourProp} />],
+    ['BREAKING', <BreakingArticleFlag {...colourProp} />],
     ['UPDATED', <UpdatedArticleFlag {...colourProp} />],
     ['EXCLUSIVE', <ExclusiveArticleFlag {...colourProp} />],
     ['SPONSORED', <SponsoredArticleFlag {...colourProp} />],

package/src/components/article-flag/LiveArticleFlag.tsx

@@ -9,7 +9,10 @@ import {
 import { UpdatedTimestamp } from '../updated-timestamp/UpdatedTimestamp';
 import { useUpdatedTime } from '../../helpers/time/UpdatedTimeProvider';
 
-export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => {
+export const BaseLiveArticleFlag: React.FC<{
+  title: string;
+  timeStampTextColor?: string;
+}> = ({ title, timeStampTextColor }) => {
   const updatedTime = useUpdatedTime();
 
   return (
@@ -20,15 +23,15 @@ export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => {
         </LiveArticleFlagIconContainer>
         <LiveArticleFlagText>{title}</LiveArticleFlagText>
       </LiveArticleFlagContainer>
-      <UpdatedTimestamp updatedTime={updatedTime} />
+      <UpdatedTimestamp updatedTime={updatedTime} color={timeStampTextColor} />
     </LiveFlagAndTimestampContainer>
   );
 };
 
-export const LiveArticleFlag: React.FC = () => (
-  <BaseLiveArticleFlag title="LIVE" />
+export const LiveArticleFlag: React.FC<{ color?: string }> = ({ color }) => (
+  <BaseLiveArticleFlag timeStampTextColor={color} title="LIVE" />
 );
 
-export const BreakingArticleFlag: React.FC = () => (
-  <BaseLiveArticleFlag title="BREAKING" />
-);
+export const BreakingArticleFlag: React.FC<{ color?: string }> = ({
+  color
+}) => <BaseLiveArticleFlag timeStampTextColor={color} title="BREAKING" />;

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

@@ -43,12 +43,12 @@ const scrollEvent = {
   }
 };
 
-const clickEvent = (buttonLabel: string, isLiveOrBreaking?: string) => ({
+const clickEvent = (buttonLabel: string, flag?: string) => ({
   action: 'Clicked',
   attrs: {
     event_navigation_name: `button : ${buttonLabel}`,
     event_navigation_browsing_method: 'click',
-    other_details: isLiveOrBreaking
+    article_flag: flag
   }
 });
 
@@ -57,12 +57,13 @@ export const InArticlePuff: React.FC<{
   forceImageAspectRatio?: AspectRatios;
   isLiveOrBreaking?: string;
 }> = ({ sectionColour, forceImageAspectRatio, isLiveOrBreaking }) => {
+  const articleFlag = isLiveOrBreaking || 'no flag';
   const handleClick = (
     fireAnalyticsEvent: (evt: TrackingContext) => void,
     buttonLabel: string
   ) => {
     fireAnalyticsEvent &&
-      fireAnalyticsEvent(clickEvent(buttonLabel, isLiveOrBreaking));
+      fireAnalyticsEvent(clickEvent(buttonLabel, articleFlag));
   };
 
   const { loading, error, data } = useFetch<InArticlePuffDeckData>();
@@ -98,7 +99,7 @@ export const InArticlePuff: React.FC<{
           component_type: 'in-article component : puff : interactive',
           event_navigation_action: 'navigation',
           component_name: `${headline}`,
-          other_details: isLiveOrBreaking
+          article_flag: articleFlag
         }
       }}
       scrolledEvent={scrollEvent}

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

@@ -169,13 +169,13 @@ describe('InArticlePuff', () => {
           event_navigation_action: 'navigation',
           event_navigation_browsing_method: 'scroll',
           event_navigation_name: 'in-article component displayed : puff',
-          section: 'section'
+          section: 'section',
+          article_flag: 'no flag'
         }
       });
     });
 
     it('fires click event when Read more clicked', () => {
-      mockIsLiveOrBreakingFlag = 'live';
       (useFetch as jest.Mock).mockReturnValue(
         deckApiPayloadWrapper(optionalFields)
       );
@@ -187,12 +187,12 @@ describe('InArticlePuff', () => {
             attrs: {
               articleHeadline: 'articleHeadline',
               section: 'section',
-              other_details: 'live'
+              article_flag: 'live'
             }
           }}
           analyticsStream={analyticsStream}
         >
-          <InArticlePuff {...requiredProps} />
+          <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'live'} />
         </TrackingContextProvider>
       );
 
@@ -213,13 +213,12 @@ describe('InArticlePuff', () => {
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : Read the full article',
           section: 'section',
-          other_details: 'live'
+          article_flag: 'live'
         }
       });
     });
 
     it('fires click event when headline clicked', () => {
-      mockIsLiveOrBreakingFlag = 'breaking';
       (useFetch as jest.Mock).mockReturnValue(
         deckApiPayloadWrapper(optionalFields)
       );
@@ -231,12 +230,12 @@ describe('InArticlePuff', () => {
             attrs: {
               articleHeadline: 'articleHeadline',
               section: 'section',
-              other_details: 'breaking'
+              article_flag: 'breaking'
             }
           }}
           analyticsStream={analyticsStream}
         >
-          <InArticlePuff {...requiredProps} />
+          <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'breaking'} />
         </TrackingContextProvider>
       );
 
@@ -257,7 +256,7 @@ describe('InArticlePuff', () => {
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : headline',
           section: 'section',
-          other_details: 'breaking'
+          article_flag: 'breaking'
         }
       });
     });
@@ -297,7 +296,8 @@ describe('InArticlePuff', () => {
           event_navigation_action: 'navigation',
           event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : image',
-          section: 'section'
+          section: 'section',
+          article_flag: 'no flag'
         }
       });
     });

package/src/components/updated-timestamp/UpdatedTimestamp.tsx

@@ -5,7 +5,8 @@ import { Container, TimeSinceUpdate } from './styles';
 
 export const UpdatedTimestamp: React.FC<{
   updatedTime?: string;
-}> = ({ updatedTime }) => {
+  color?: string;
+}> = ({ updatedTime, color }) => {
   if (!updatedTime) {
     return null;
   }
@@ -23,11 +24,11 @@ export const UpdatedTimestamp: React.FC<{
   return (
     <Container>
       {!isLessThan1Minute && isLessThan13Hours ? (
-        <TimeSinceUpdate data-testId="MinutesHoursSinceUpdate">
+        <TimeSinceUpdate color={color} data-testId="MinutesHoursSinceUpdate">
           {`Updated ${timeSincePublishing}`}
         </TimeSinceUpdate>
       ) : !isLessThan13Hours ? (
-        <TimeSinceUpdate data-testId="DateTimeUpdated">
+        <TimeSinceUpdate color={color} data-testId="DateTimeUpdated">
           {`Updated `}
           {format(updatedDate, 'MMMM d, ')}
           {format(updatedDate, 'h.mmaaa')}

package/src/components/updated-timestamp/__tests__/UpdatedTimestamp.test.tsx

@@ -47,4 +47,12 @@ describe('UpdatedTimestamp', () => {
       'Updated February 28, 9.00am'
     );
   });
+
+  it('shows timestamp with an overrided color', () => {
+    MockDate.set('2022-02-28T23:30:00Z');
+    const { baseElement } = render(
+      <UpdatedTimestamp updatedTime={updated} color={'yellow'} />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
 });

package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap

@@ -9,3 +9,23 @@ exports[`UpdatedTimestamp does not show the timestamp within the first minute af
   </div>
 </body>
 `;
+
+exports[`UpdatedTimestamp shows timestamp with an overrided color 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa cSmEjS"
+    >
+      <div
+        class="sc-bwzfXH gjKjda"
+        color="yellow"
+        data-testid="DateTimeUpdated"
+      >
+        Updated 
+        February 28, 
+        9.00am
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/src/components/updated-timestamp/styles.ts

@@ -7,8 +7,8 @@ export const Container = styled.div`
   padding: 3px 0 0 8px;
 `;
 
-export const TimeSinceUpdate = styled.div`
-  color: ${colours.functional.primary};
+export const TimeSinceUpdate = styled.div<{ color?: string }>`
+  color: ${({ color }) => color || colours.functional.primary};
   font-family: ${fonts.supporting};
   font-size: 12px;
   line-height: 16px;