feat(TMRS-482): add story and linting

newsuk · Nov 28, 2024 · 29db9e2 · 29db9e2
1 parent f83f693
commit 29db9e2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/packages/slice-layout/src/templates/standard/index.js b/packages/slice-layout/src/templates/standard/index.js
@@ -50,7 +50,11 @@ class StandardSlice extends Component {
 
 StandardSlice.propTypes = {
   itemCount: PropTypes.number.isRequired,
-  renderItems: PropTypes.func.isRequired
+  renderItems: PropTypes.func.isRequired,
+  hideBorder: PropTypes.bool
+};
+StandardSlice.defaultProps = {
+  hideBorder: false
 };
 
 export default StandardSlice;
diff --git a/packages/slice-layout/src/templates/styles/responsive.js b/packages/slice-layout/src/templates/styles/responsive.js
@@ -5,15 +5,14 @@ import { breakpoints, colours, spacing } from "@times-components/ts-styleguide";
 export const SliceContainer = styled(TcView)`
   align-items: center;
   border-bottom-color: ${colours.functional.keyline};
-  border-bottom-width: ${({ hideBorder }) => hideBorder ? 0 : '1px'};
+  border-bottom-width: ${({ hideBorder }) => (hideBorder ? 0 : "1px")};
   border-style: solid;
   flex: 1;
   justify-content: center;
-  ${({ hideBorder }) => hideBorder && 'margin-bottom: 12px'};
-
+  ${({ hideBorder }) => hideBorder && "margin-bottom: 12px"};
 
   @media (-webkit-min-device-pixel-ratio: 2) {
-    border-bottom-width: ${({ hideBorder }) => hideBorder ? 0 : '0.5px'};
+    border-bottom-width: ${({ hideBorder }) => (hideBorder ? 0 : "0.5px")};
   }
 `;
 

diff --git a/packages/ts-components/src/components/categorised-articles/CategorisedArticles.stories.tsx b/packages/ts-components/src/components/categorised-articles/CategorisedArticles.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import previewData from '../../fixtures/preview-data/recommended-articles';
+import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+import { CategorisedArticles } from './CategorisedArticles';
+
+storiesOf('Typescript Component/Categorised Articles', module)
+  .add('Categorised Articles - 1 Article', () => (
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        object: 'CategorisedArticles',
+        attrs: {
+          event_navigation_action: 'navigation',
+          event_navigation_name: 'widget:relevant article',
+          event_navigation_browsing_method: 'click',
+          section_details: 'section : <section>',
+          article_name: '<headline>',
+          widget_headline: '<headline>',
+          widget_section: '<section>',
+          widget_type: "today's section"
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <CategorisedArticles heading="News" articles={previewData.recommendations.articles} />
+    </TrackingContextProvider>
+  ));
+
diff --git a/packages/ts-components/src/components/categorised-articles/CategorisedArticles.tsx b/packages/ts-components/src/components/categorised-articles/CategorisedArticles.tsx
@@ -13,14 +13,13 @@ import {
 
 import { Header } from '../../utils/linkedArticles/styles';
 
-interface CategorisedArticles {
+interface CategorisedArticlesProps {
   heading: string;
   articles: Article[];
 }
-export const CategorisedArticles: React.FC<{
-  heading: string;
-  articles: any;
-}> = ({ heading, articles }) => {
+export const CategorisedArticles: React.FC<CategorisedArticlesProps> = (
+  { heading, articles }
+) => {
   const { fireAnalyticsEvent } = useTrackingContext();
 
   const onClickHandler = (__: MouseEventType, article: SliceArticle) => {

diff --git a/packages/ts-components/src/utils/linkedArticles/formatters.ts b/packages/ts-components/src/utils/linkedArticles/formatters.ts
@@ -22,10 +22,10 @@ type SummaryText = { __typename: string; text: string };
 type Summary = { __typename: string; children: SummaryText[] };
 
 export type Article = {
-  __typename: string;
+  __typename?: string;
   url: string;
   slug: string;
-  label: string;
+  label: string | null;
   headline: string;
   publishedDateTime: string;
   bylines?: Byline[];