@times-components/ts-slices 1.4.4 → 1.5.1

package/src/components/slices/RelatedArticle3/RelatedArticle3.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { SliceData, SliceSlot } from '../../../types/slice';
+import { SliceStyle } from '../../../types/styles';
+import { ClickHandlerType } from '../../../types/event';
+import { setDisplaySchema } from '../../../utils/getArticleStyles';
+
+import { ArticleStandard } from '../../article/ArticleStandard/ArticleStandard';
+
+import { SliceContainer } from '../shared-styles';
+import { SlotContainer } from './styles';
+
+const RelatedArticle3: React.FC<{
+  slice: SliceData;
+  styles?: SliceStyle;
+  clickHandler?: ClickHandlerType;
+}> = React.memo(({ slice, styles, clickHandler }) => (
+  <SliceContainer styles={styles}>
+    {slice.children.map((slot: SliceSlot, i: number) => (
+      <SlotContainer key={i} styles={styles}>
+        <ArticleStandard
+          article={slot.article}
+          displaySchema={setDisplaySchema({
+            sm: {
+              isImageHidden: true,
+              imageRatio: '16:9',
+              headlineFontSize: 22
+            },
+            md: { isImageHidden: false }
+          })}
+          clickHandler={clickHandler}
+        />
+      </SlotContainer>
+    ))}
+  </SliceContainer>
+));
+
+export default RelatedArticle3;

package/src/components/slices/RelatedArticle3/__tests__/RelatedArticle3.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { getSlice } from '../../../../fixtures/getSlice';
+
+import RelatedArticle3 from '../RelatedArticle3';
+
+jest.mock('../../../article/ArticleStandard/ArticleStandard', () => ({
+  ArticleStandard: () => <div>ArticleStandard</div>
+}));
+
+describe('<RelatedArticle3 />', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render an RELATED_ARTICLE_3 slice correctly', () => {
+    const slice = getSlice('RELATED_ARTICLE_3');
+
+    const { asFragment, getAllByText } = render(
+      <RelatedArticle3 slice={slice} />
+    );
+
+    const article = getAllByText('ArticleStandard');
+    expect(article.length).toBe(3);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/slices/RelatedArticle3/__tests__/__snapshots__/RelatedArticle3.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RelatedArticle3 /> should render an RELATED_ARTICLE_3 slice correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa gMdRRW"
+  >
+    <div
+      class="sc-bwzfXH sc-htpNat kmrygX"
+    >
+      <div>
+        ArticleStandard
+      </div>
+    </div>
+    <div
+      class="sc-bwzfXH sc-htpNat kmrygX"
+    >
+      <div>
+        ArticleStandard
+      </div>
+    </div>
+    <div
+      class="sc-bwzfXH sc-htpNat kmrygX"
+    >
+      <div>
+        ArticleStandard
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/slices/RelatedArticle3/styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { breakpoints } from '@times-components/ts-styleguide';
+
+import { calculateSlotWidth } from '../../../utils/getArticleStyles';
+
+import { SlotContainer as SlotContainerBase } from '../shared-styles';
+
+export const SlotContainer = styled(SlotContainerBase)`
+  @media (min-width: ${breakpoints.medium}px) {
+    width: ${calculateSlotWidth(33.33, 3)};
+    margin-bottom: 24px;
+    padding: 0 12px 24px 12px;
+
+    :before {
+      display: block;
+      bottom: 24px;
+    }
+
+    :after {
+      display: block;
+    }
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+
+    &:last-of-type {
+      padding-right: 0;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+`;

package/src/components/slices/Slice.stories.tsx

@@ -134,6 +134,20 @@ const showcase = {
       ),
       name: 'RELATED_ARTICLE_1',
       type: 'story'
+    },
+    {
+      component: () => (
+        <Slice slice={getSlice('RELATED_ARTICLE_2')} clickHandler={onClick} />
+      ),
+      name: 'RELATED_ARTICLE_2',
+      type: 'story'
+    },
+    {
+      component: () => (
+        <Slice slice={getSlice('RELATED_ARTICLE_3')} clickHandler={onClick} />
+      ),
+      name: 'RELATED_ARTICLE_3',
+      type: 'story'
     }
   ],
   name: 'Typescript Slices/Slices'

package/src/fixtures/getSlice.ts

@@ -11,10 +11,6 @@ const slices: SliceData[] = [
     name: 'LEAD_1',
     children: [{ article: getArticleWithSummary() }]
   },
-  {
-    name: 'RELATED_ARTICLE_1',
-    children: [{ article: getArticleWithSummary() }]
-  },
   {
     name: 'LEAD_1_AND_1',
     children: [{ article: getArticle() }, { article: getArticleWithSummary() }]
@@ -126,6 +122,25 @@ const slices: SliceData[] = [
       { article: getArticle() },
       { article: getArticle() }
     ]
+  },
+  {
+    name: 'RELATED_ARTICLE_1',
+    children: [{ article: getArticleWithSummary() }]
+  },
+  {
+    name: 'RELATED_ARTICLE_2',
+    children: [
+      { article: getArticleWithSummary() },
+      { article: getArticleWithSummary() }
+    ]
+  },
+  {
+    name: 'RELATED_ARTICLE_3',
+    children: [
+      { article: getArticleWithSummary() },
+      { article: getArticleWithSummary() },
+      { article: getArticleWithSummary() }
+    ]
   }
 ];
 

package/src/utils/getDate.ts

@@ -0,0 +1,39 @@
+import { format, addMinutes } from 'date-fns';
+
+const lastSunday = (month: number, year: number) => {
+  const lastDayOfMonth = new Date(Date.UTC(year, month + 1, 0));
+  const day = lastDayOfMonth.getDay();
+  const dateOfSunday = lastDayOfMonth.getDate() - day;
+  const sunday = new Date(Date.UTC(year, month, dateOfSunday));
+  sunday.setHours(1);
+  return sunday;
+};
+
+const isBST = (date: Date) => {
+  const startOfBST = lastSunday(2, date.getFullYear());
+  const endOfBST = lastSunday(9, date.getFullYear());
+  const isAfterStartOfBST = date.getTime() >= startOfBST.getTime();
+  const isBeforeEndOfBST = date.getTime() < endOfBST.getTime();
+  return isAfterStartOfBST && isBeforeEndOfBST;
+};
+
+const getUTCTime = (date: string) => {
+  const localDate = new Date(date);
+  return new Date(
+    localDate.getUTCFullYear(),
+    localDate.getUTCMonth(),
+    localDate.getUTCDate(),
+    localDate.getUTCHours(),
+    localDate.getUTCMinutes()
+  );
+};
+
+export const getDate = (iso?: string) => {
+  if (iso) {
+    const utc = getUTCTime(iso);
+    const date = addMinutes(utc, isBST(utc) ? 60 : 0);
+    return format(date, 'MMMM dd yyyy, h.mmaaa');
+  }
+
+  return null;
+};

package/src/utils/getSlice.ts

@@ -17,6 +17,8 @@ import Secondary4 from '../components/slices/Secondary4/Secondary4';
 import Secondary4Odd from '../components/slices/Secondary4Odd/Secondary4Odd';
 import Secondary10 from '../components/slices/Secondary10/Secondary10';
 import RelatedArticle1 from '../components/slices/RelatedArticle1/RelatedArticle1';
+import RelatedArticle2 from '../components/slices/RelatedArticle2/RelatedArticle2';
+import RelatedArticle3 from '../components/slices/RelatedArticle3/RelatedArticle3';
 
 export const getSliceComponent = (
   name: string
@@ -59,6 +61,10 @@ export const getSliceComponent = (
       return Secondary10;
     case 'RELATED_ARTICLE_1':
       return RelatedArticle1;
+    case 'RELATED_ARTICLE_2':
+      return RelatedArticle2;
+    case 'RELATED_ARTICLE_3':
+      return RelatedArticle3;
 
     default:
       return () => null;