@times-components/ts-components 1.20.0 → 1.22.1

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

@@ -11,7 +11,7 @@ import {
 } from './styles';
 import getActiveFlags from './getActiveFlags';
 
-const ArticleFlag: React.FC<{ color: string; title: string }> = ({
+const ArticleFlag: React.FC<{ color?: string; title: string }> = ({
   color = colours.functional.primary,
   title
 }) => (
@@ -27,51 +27,58 @@ const ArticleFlag: React.FC<{ color: string; title: string }> = ({
   </ArticleFlagContainer>
 );
 
-const NewArticleFlag: React.FC = () => (
-  <ArticleFlag color={colours.functional.articleFlagNew} title="new" />
-);
+const NewArticleFlag: React.FC<{ color?: string }> = ({
+  color = colours.functional.articleFlagNew
+}) => <ArticleFlag color={color} title="new" />;
 
-const UpdatedArticleFlag: React.FC = () => (
-  <ArticleFlag color={colours.functional.articleFlagUpdated} title="updated" />
-);
+const UpdatedArticleFlag: React.FC<{ color?: string }> = ({
+  color = colours.functional.articleFlagUpdated
+}) => <ArticleFlag color={color} title="updated" />;
 
-const ExclusiveArticleFlag: React.FC = () => (
-  <ArticleFlag
-    color={colours.functional.articleFlagExclusive}
-    title="exclusive"
-  />
-);
+const ExclusiveArticleFlag: React.FC<{ color?: string }> = ({
+  color = colours.functional.articleFlagExclusive
+}) => <ArticleFlag color={color} title="exclusive" />;
 
-const SponsoredArticleFlag: React.FC = () => (
-  <ArticleFlag color={colours.functional.tertiary} title="sponsored" />
-);
+const SponsoredArticleFlag: React.FC<{ color?: string }> = ({
+  color = colours.functional.tertiary
+}) => <ArticleFlag color={color} title="sponsored" />;
 
-const LongReadArticleFlag: React.FC = () => (
-  <ArticleFlag color={colours.functional.secondary} title="long read" />
-);
+const LongReadArticleFlag: React.FC<{ color?: string }> = ({
+  color = colours.functional.secondary
+}) => <ArticleFlag color={color} title="long read" />;
 
-const flagsMapping = () =>
-  new Map([
-    ['NEW', <NewArticleFlag />],
+const flagsMapping = (override = '') => {
+  let colourProp;
+  if (override !== '') {
+    colourProp = {
+      color: override
+    };
+  }
+  return new Map([
+    ['NEW', <NewArticleFlag {...colourProp} />],
     ['LIVE', <LiveArticleFlag />],
     ['BREAKING', <BreakingArticleFlag />],
-    ['UPDATED', <UpdatedArticleFlag />],
-    ['EXCLUSIVE', <ExclusiveArticleFlag />],
-    ['SPONSORED', <SponsoredArticleFlag />],
-    ['LONGREAD', <LongReadArticleFlag />]
+    ['UPDATED', <UpdatedArticleFlag {...colourProp} />],
+    ['EXCLUSIVE', <ExclusiveArticleFlag {...colourProp} />],
+    ['SPONSORED', <SponsoredArticleFlag {...colourProp} />],
+    ['LONGREAD', <LongReadArticleFlag {...colourProp} />]
   ]);
+};
 
 export type FlagType = Array<{
   expiryTime: string | null;
   type: string;
 }>;
 
-const FlagsView: React.FC<{ allFlags: FlagType }> = ({ allFlags }) => {
+const FlagsView: React.FC<{ allFlags: FlagType; overrideColor?: string }> = ({
+  allFlags,
+  overrideColor = ''
+}) => {
   return (
     <Flags>
       {allFlags.map(flag => (
         <FlagPadding key={flag.type} allFlags={allFlags}>
-          {flagsMapping().get(flag.type)}
+          {flagsMapping(overrideColor).get(flag.type)}
         </FlagPadding>
       ))}
     </Flags>
@@ -82,7 +89,8 @@ const ArticleFlags: React.FC<{
   flags: FlagType;
   longRead: boolean;
   withContainer: boolean;
-}> = ({ flags = [], longRead = false, withContainer = false }) => {
+  color?: string;
+}> = ({ flags = [], longRead = false, withContainer = false, color = '' }) => {
   const activeFlags = getActiveFlags(flags);
   const allFlags = [
     ...activeFlags,
@@ -94,12 +102,12 @@ const ArticleFlags: React.FC<{
   }
 
   if (!withContainer) {
-    return <FlagsView allFlags={allFlags} />;
+    return <FlagsView allFlags={allFlags} overrideColor={color} />;
   }
 
   return (
     <FlagsContainer>
-      <FlagsView allFlags={allFlags} />
+      <FlagsView allFlags={allFlags} overrideColor={color} />
     </FlagsContainer>
   );
 };

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

@@ -2,17 +2,27 @@ import React from 'react';
 import {
   LiveArticleFlagContainer,
   LiveIconContainer,
-  LiveArticleFlagText
+  LiveArticleFlagText,
+  LiveFlagAndTimestampContainer
 } from './styles';
+import { UpdatedTimestamp } from '../updated-timestamp/UpdatedTimestamp';
+import { useUpdatedTime } from '../../helpers/time/UpdatedTimeProvider';
 
-export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => (
-  <LiveArticleFlagContainer>
-    <LiveIconContainer>{'\u25a0'}</LiveIconContainer>
-    <div>
-      <LiveArticleFlagText>{title}</LiveArticleFlagText>
-    </div>
-  </LiveArticleFlagContainer>
-);
+export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => {
+  const updatedTime = useUpdatedTime();
+
+  return (
+    <LiveFlagAndTimestampContainer>
+      <LiveArticleFlagContainer>
+        <LiveIconContainer>{'\u25a0'}</LiveIconContainer>
+        <div>
+          <LiveArticleFlagText>{title}</LiveArticleFlagText>
+        </div>
+      </LiveArticleFlagContainer>
+      <UpdatedTimestamp updatedTime={updatedTime} />
+    </LiveFlagAndTimestampContainer>
+  );
+};
 
 export const LiveArticleFlag: React.FC = () => (
   <BaseLiveArticleFlag title="LIVE" />

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

@@ -71,6 +71,46 @@ describe('ArticleFlag', () => {
     expect(baseElement).toMatchSnapshot();
   });
 
+  it('renders the new article flag with an override colour', () => {
+    const { baseElement, getByText } = render(
+      <NewArticleFlag color="#FFFFFF" />
+    );
+    expect(getByText('new')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the updated article flag with an override colour', () => {
+    const { baseElement, getByText } = render(
+      <UpdatedArticleFlag color="#FFFFFF" />
+    );
+    expect(getByText('updated')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the exclusive article flag with an override colour', () => {
+    const { baseElement, getByText } = render(
+      <ExclusiveArticleFlag color="#FFFFFF" />
+    );
+    expect(getByText('exclusive')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the sponsored article flag with an override colour', () => {
+    const { baseElement, getByText } = render(
+      <SponsoredArticleFlag color="#FFFFFF" />
+    );
+    expect(getByText('sponsored')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the long read article flag with an override colour', () => {
+    const { baseElement, getByText } = render(
+      <LongReadArticleFlag color="#FFFFFF" />
+    );
+    expect(getByText('long read')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
   it('renders multiple article flags', () => {
     const { baseElement } = render(
       <ArticleFlags
@@ -86,6 +126,22 @@ describe('ArticleFlag', () => {
     );
     expect(baseElement).toMatchSnapshot();
   });
+  it('renders multiple article flags with override colours', () => {
+    const { baseElement } = render(
+      <ArticleFlags
+        flags={[
+          { expiryTime: '2030-03-13T12:00:00.000Z', type: 'UPDATED' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'EXCLUSIVE' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'NEW' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'SPONSORED' }
+        ]}
+        longRead
+        withContainer={false}
+        color="#FFFFFF"
+      />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
   it('renders multiple article flags in a container', () => {
     const { baseElement } = render(
       <ArticleFlags