@times-components/ts-components 1.18.3 → 1.19.2

package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap

@@ -7,14 +7,16 @@ exports[`LiveArticleFlag should render the base live article flag 1`] = `
       class="sc-bwzfXH WFEid"
     >
       <div
-        class="sc-bxivhb hmIbmT"
+        class="sc-bxivhb fnsGfe"
       >
-        ◆
+        ■
       </div>
-      <div
-        class="sc-EHOje jboioV"
-      >
-        BASE
+      <div>
+        <span
+          class="sc-EHOje jboioV"
+        >
+          BASE
+        </span>
       </div>
     </div>
   </div>
@@ -28,14 +30,16 @@ exports[`LiveArticleFlag should render the breaking article flag 1`] = `
       class="sc-bwzfXH WFEid"
     >
       <div
-        class="sc-bxivhb hmIbmT"
+        class="sc-bxivhb fnsGfe"
       >
-        ◆
+        ■
       </div>
-      <div
-        class="sc-EHOje jboioV"
-      >
-        BREAKING
+      <div>
+        <span
+          class="sc-EHOje jboioV"
+        >
+          BREAKING
+        </span>
       </div>
     </div>
   </div>
@@ -49,14 +53,16 @@ exports[`LiveArticleFlag should render the live article flag 1`] = `
       class="sc-bwzfXH WFEid"
     >
       <div
-        class="sc-bxivhb hmIbmT"
+        class="sc-bxivhb fnsGfe"
       >
-        ◆
+        ■
       </div>
-      <div
-        class="sc-EHOje jboioV"
-      >
-        LIVE
+      <div>
+        <span
+          class="sc-EHOje jboioV"
+        >
+          LIVE
+        </span>
       </div>
     </div>
   </div>

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

@@ -23,10 +23,10 @@ export const ArticleFlagBullet = styled.div`
   background-color: ${({ color }) => gqlRgbaToStyle(color) || color};
 `;
 
-export const LiveDiamondContainer = styled.div`
-  margin-right: 4px;
+export const LiveIconContainer = styled.div`
+  margin-right: 8px;
   color: #ffffff;
-  line-height: 16px;
+  align-self: self-start;
 `;
 
 export const ArticleFlagTextContainer = styled.div`
@@ -38,7 +38,8 @@ export const ArticleFlagTextContainer = styled.div`
   margin-left: 5px;
   color: ${({ color }) => gqlRgbaToStyle(color) || color};
 `;
-export const LiveArticleFlagTextContainer = styled.div`
+
+export const LiveArticleFlagText = styled.span`
   font-family: ${fonts.supporting};
   color: #ffffff;
   font-weight: 500;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { date, select, text } from '@storybook/addon-knobs';
+
+import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
+import ArticleHeader from './ArticleHeader';
+
+storiesOf('Typescript Component/Article Header', module)
+  .addDecorator((storyFn: () => React.ReactNode) => (
+    <ArticleHarness>{storyFn()}</ArticleHarness>
+  ))
+  .add('Article Header with headline', () => {
+    const label = 'Updated Date/Time';
+    const defaultValue = new Date();
+    const groupId = 'Options';
+    const value = date(label, defaultValue, groupId);
+    const breakingOptions = {
+      True: 'true',
+      False: undefined
+    };
+    const updated = new Date(value).toISOString();
+
+    const headline = text('Headline', 'This is the headline', groupId);
+
+    return (
+      <ArticleHeader
+        updated={updated}
+        breaking={select('Breaking', breakingOptions, undefined, groupId)}
+        headline={encodeURIComponent(headline)}
+      />
+    );
+  })
+  .add('Article Header without headline', () => {
+    const label = 'Updated Date/Time';
+    const defaultValue = new Date();
+    const groupId = 'Options';
+    const value = date(label, defaultValue, groupId);
+    const breakingOptions = {
+      True: 'true',
+      False: undefined
+    };
+    const updated = new Date(value).toISOString();
+
+    return (
+      <ArticleHeader
+        updated={updated}
+        breaking={select('Breaking', breakingOptions, undefined, groupId)}
+      />
+    );
+  });

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  format,
+  differenceInSeconds,
+  differenceInCalendarDays,
+  formatDistanceStrict
+} from 'date-fns';
+
+import {
+  Container,
+  Divider,
+  Headline,
+  TimeSincePublishing,
+  TimeSincePublishingContainer,
+  UpdatedDate,
+  UpdatedTime,
+  UpdatedTimeItems,
+  UpdatesContainer,
+  FlagContainer
+} from './styles';
+import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
+
+const ArticleHeader: React.FC<{
+  updated: string;
+  breaking?: string;
+  headline?: string;
+}> = ({ updated, breaking, headline }) => {
+  const currentDateTime = new Date();
+  const updatedDate = new Date(updated);
+  const timeSincePublishing =
+    formatDistanceStrict(updatedDate, currentDateTime, {
+      roundingMethod: 'floor'
+    }) + ' ago';
+  const diffInSeconds = differenceInSeconds(currentDateTime, updatedDate);
+
+  const isLessThan1Minute = diffInSeconds < 60;
+  const isLessThan1Hour = diffInSeconds < 60 * 60;
+  const isLessThan13Hours = diffInSeconds < 60 * 60 * 13;
+  const isDaysAgo = differenceInCalendarDays(currentDateTime, updatedDate) >= 1;
+
+  const isBreaking = breaking
+    ? Boolean(breaking.toLowerCase() === 'true')
+    : false;
+
+  return (
+    <Container isBreaking={isBreaking && isLessThan1Hour}>
+      <UpdatesContainer>
+        <UpdatedTimeItems>
+          {isBreaking && isLessThan1Hour ? (
+            <FlagContainer>
+              <BreakingArticleFlag />
+            </FlagContainer>
+          ) : null}
+          {!isLessThan1Minute && isLessThan13Hours ? (
+            <TimeSincePublishingContainer>
+              <TimeSincePublishing
+                isBreaking={isBreaking}
+                data-testId="TimeSincePublishing"
+              >
+                {timeSincePublishing}
+              </TimeSincePublishing>
+              <Divider />
+            </TimeSincePublishingContainer>
+          ) : null}
+          <UpdatedTime
+            isLessThan13Hours={!isLessThan1Minute && isLessThan13Hours}
+            data-testId="UpdatedTime"
+          >
+            {format(updatedDate, 'h.mmaaa')}
+          </UpdatedTime>
+        </UpdatedTimeItems>
+        {isDaysAgo ? (
+          <UpdatedDate data-testid="UpdatedDate">
+            {format(updatedDate, 'MMMM d yyyy')}
+          </UpdatedDate>
+        ) : null}
+      </UpdatesContainer>
+      {headline && <Headline>{decodeURI(headline)}</Headline>}
+    </Container>
+  );
+};
+
+export default ArticleHeader;

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

@@ -0,0 +1,183 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import ArticleHeader from '../ArticleHeader';
+import MockDate from 'mockdate';
+
+describe('ArticleHeader', () => {
+  describe('In one calendar day', () => {
+    const updated = '2021-12-31T06:30:00Z';
+    afterEach(() => MockDate.reset());
+    it('Within the first minute of update - Breaking', () => {
+      MockDate.set('2021-12-31T06:30:00Z');
+      const { baseElement, getByText, queryByTestId } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(baseElement).toMatchSnapshot();
+      expect(getByText('BREAKING')).toBeVisible();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('Within the first minute of update - Not Breaking', () => {
+      MockDate.set('2021-12-31T06:30:00Z');
+      const { baseElement, getByText, queryByTestId, queryByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="false"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(baseElement).toMatchSnapshot();
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('Within the first minute of update - No headline not breaking', () => {
+      MockDate.set('2021-12-31T06:30:00Z');
+      const { baseElement, getByText, queryByTestId, queryByText } = render(
+        <ArticleHeader updated={updated} />
+      );
+      expect(baseElement).toMatchSnapshot();
+      expect(queryByText('This is the headline')).toBeFalsy();
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+    });
+    it('within an hour of updating', () => {
+      MockDate.set('2021-12-31T07:00:00Z');
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(getByText('BREAKING')).toBeVisible();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeTruthy();
+      expect(getByText('30 minutes ago')).toBeVisible();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('between 1 and 12 hours after update time', () => {
+      MockDate.set('2021-12-31T08:30:00Z');
+      const { getByText, queryByTestId, queryByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeTruthy();
+      expect(getByText('2 hours ago')).toBeVisible();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('after 12 hours but on the same calendar day', () => {
+      MockDate.set('2021-12-31T19:30:00Z');
+      const { getByText, queryByTestId, queryByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+  });
+  describe('Across calendar days', () => {
+    const updated = '2021-12-31T23:30:00Z';
+    afterEach(() => MockDate.reset());
+    it('within an hour of updating but on a different calendar day', () => {
+      MockDate.set('2022-01-01T00:29:00Z');
+      const { getByTestId, queryByTestId, getByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(getByText('BREAKING')).toBeVisible();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('11.30pm')).toBeVisible();
+      expect(getByTestId('TimeSincePublishing')).toBeTruthy();
+      expect(getByTestId('UpdatedDate')).toBeVisible();
+      expect(getByText('December 31 2021')).toBeVisible();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('between 1-12 hours of updating but on a different calendar day', () => {
+      MockDate.set('2022-01-01T02:00:00Z');
+      const { getByTestId, queryByText, queryByTestId, getByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('11.30pm')).toBeVisible();
+      expect(getByTestId('TimeSincePublishing')).toBeTruthy();
+      expect(getByText('2 hours ago')).toBeVisible();
+      expect(getByTestId('UpdatedDate')).toBeVisible();
+      expect(getByText('December 31 2021')).toBeVisible();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('after 12 hours but on a different calendar day', () => {
+      MockDate.set('2022-01-01T14:30:00Z');
+      const { getByTestId, queryByText, queryByTestId, getByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('11.30pm')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(getByTestId('UpdatedDate')).toBeVisible();
+      expect(getByText('December 31 2021')).toBeVisible();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+    it('after multiple calendar days', () => {
+      MockDate.set('2022-01-03T14:30:00Z');
+      const { getByTestId, queryByText, queryByTestId, getByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+      expect(queryByText('BREAKING')).toBeFalsy();
+      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+      expect(getByText('11.30pm')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+      expect(getByTestId('UpdatedDate')).toBeVisible();
+      expect(getByText('December 31 2021')).toBeVisible();
+      expect(getByText('This is the headline')).toBeVisible();
+    });
+  });
+});

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

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArticleHeader In one calendar day Within the first minute of update - Breaking 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa cQBRMp"
+    >
+      <div
+        class="sc-bwzfXH htoLMg"
+      >
+        <div
+          class="sc-ifAKCX iDsMnF"
+        >
+          <div
+            class="sc-dnqmqq bGasAc"
+          >
+            <div
+              class="sc-gZMcBi bcfOTp"
+            >
+              <div
+                class="sc-VigVT bvOrBW"
+              >
+                ■
+              </div>
+              <div>
+                <span
+                  class="sc-fjdhpX cvtGYv"
+                >
+                  BREAKING
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="sc-EHOje cDoFHw"
+            data-testid="UpdatedTime"
+          >
+            6.30am
+          </div>
+        </div>
+      </div>
+      <h2
+        class="sc-htoDjs ccbbfo"
+      >
+        This is the headline
+      </h2>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleHeader In one calendar day Within the first minute of update - No headline not breaking 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fLcQHz"
+    >
+      <div
+        class="sc-bwzfXH htoLMg"
+      >
+        <div
+          class="sc-ifAKCX iDsMnF"
+        >
+          <div
+            class="sc-EHOje cDoFHw"
+            data-testid="UpdatedTime"
+          >
+            6.30am
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleHeader In one calendar day Within the first minute of update - Not Breaking 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fLcQHz"
+    >
+      <div
+        class="sc-bwzfXH htoLMg"
+      >
+        <div
+          class="sc-ifAKCX iDsMnF"
+        >
+          <div
+            class="sc-EHOje cDoFHw"
+            data-testid="UpdatedTime"
+          >
+            6.30am
+          </div>
+        </div>
+      </div>
+      <h2
+        class="sc-htoDjs ccbbfo"
+      >
+        This is the headline
+      </h2>
+    </div>
+  </div>
+</body>
+`;

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

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/styleguide';
+
+export const Container = styled.div<{ isBreaking: boolean }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 48px 10px 24px 10px;
+  padding-top: ${({ isBreaking }) => (isBreaking ? '8px' : '5px')};
+  border-top: 2px solid #9f0000;
+
+  @media (min-width: ${breakpoints.medium}px) {
+    width: 80.8%;
+    margin: 64px 0 24px 10%;
+  }
+
+  @media (min-width: ${breakpoints.wide}px) {
+    width: 56.2%;
+    margin: 64px 0 24px 22%;
+  }
+`;
+
+export const UpdatesContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const TimeSincePublishingContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const TimeSincePublishing = styled.div<{ isBreaking?: boolean }>`
+  color: ${colours.functional.brandColour};
+  font-family: ${fonts.supporting};
+  font-size: 14px;
+  line-height: 18px;
+`;
+
+const updatedStyle = css`
+  color: ${colours.functional.secondary};
+  font-family: ${fonts.supporting};
+  font-size: 14px;
+  line-height: 18px;
+`;
+
+export const UpdatedTimeItems = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+
+export const UpdatedTime = styled.div<{ isLessThan13Hours?: boolean }>`
+  ${updatedStyle};
+`;
+
+export const UpdatedDate = styled.div`
+  ${updatedStyle} justify-content: end;
+  padding: 0 4px 0 0;
+`;
+
+export const Divider = styled.div`
+  background-color: ${colours.functional.greyLabel};
+  width: 1px;
+  margin: 2px 8px 6px 12px;
+`;
+
+export const Headline = styled.h2`
+  color: ${colours.functional.brandColour};
+  font-family: ${fonts.headline};
+  font-size: 28px;
+  line-height: 28px;
+  margin-top: 22px;
+  margin-bottom: 0px;
+  font-weight: 400;
+
+  @media (min-width: ${breakpoints.medium}px) {
+    font-size: 36px;
+    line-height: 36px;
+    margin-top: 20px;
+    margin-bottom: 0px;
+  }
+`;
+
+export const FlagContainer = styled.div`
+  margin-right: 8px;
+`;

package/src/index.ts

@@ -83,3 +83,7 @@ export { HiddenDiv } from './components/common-styles';
 export { InlineMessage } from './components/inline-message/InlineMessage';
 
 export { InlineDialog } from './components/inline-dialog/InlineDialog';
+
+export {
+  default as ArticleHeader
+} from './components/article-header/ArticleHeader';