@times-components/ts-components 1.73.0 → 1.75.0

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.stories.tsx

@@ -18,6 +18,13 @@ const showcase = {
       ),
       name: 'Scorecard',
       type: 'story'
+    },
+    {
+      component: () => (
+        <OptaCricketScorecard competition="3071" match="55391" />
+      ),
+      name: 'Scorecard (1st inns)',
+      type: 'story'
     }
   ],
   name: 'Typescript Component/In Article/Cricket/Scorecard'

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.tsx

@@ -50,7 +50,7 @@ export const OptaCricketScorecard: React.FC<{
           show_state_of_play: true,
           navigation: 'tabs',
           show_batting: true,
-          show_mins_batted: true,
+          show_mins_batted: false,
           show_fours: true,
           show_sixes: true,
           show_strike_rate: true,

package/src/components/opta/cricket/scorecard/__tests__/__snapshots__/OptaCricketScorecard.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaCricketScorecard should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb bDwkbs"
+      class="sc-htpNat sc-bxivhb FnNeB"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaCricketScorecard should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb bDwkbs"
+      class="sc-htpNat sc-bxivhb FnNeB"
     >
       <div>
         Widget

package/src/components/opta/cricket/scorecard/styles.ts

@@ -129,101 +129,155 @@ export const WidgetContainer = styled(WidgetContainerBase)`
           }
         }
 
-        .Opta-TabbedContent {
-          table.Opta-batting {
-            margin-bottom: 10px;
+        table.Opta-batting {
+          margin-bottom: 10px;
 
-            thead {
-              th {
-                padding: 0;
-                color: ${colours.functional.primary};
-                font-family: ${fonts.supporting};
-                font-size: 12px;
-                line-height: 14px;
-                font-weight: normal;
-                text-align: center;
-                background-color: #ededed;
-
-                &:first-of-type {
-                  padding-left: 5px;
-                  text-align: left;
-                }
+          thead {
+            th {
+              width: 8%;
+              padding: 0;
+              color: ${colours.functional.primary};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: normal;
+              background-color: #ededed;
+
+              &:first-of-type {
+                width: 64%;
+                padding-left: 5px;
+              }
 
-                &:nth-of-type(2) {
-                  text-align: left;
-                }
+              &:nth-of-type(4),
+              &:nth-of-type(5) {
+                width: 6%;
               }
             }
+          }
 
-            tfoot {
-              th {
-                color: ${colours.functional.brandColour};
-                font-family: ${fonts.supporting};
-                font-size: 12px;
-                line-height: 14px;
-                font-weight: bold;
-                background-color: #dbdbdb;
-
-                &:first-of-type {
-                  padding-left: 5px;
-                }
+          tfoot {
+            th {
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 14px;
+              line-height: 14px;
+              font-weight: bold;
+              background-color: #dbdbdb;
+
+              &:first-of-type {
+                padding-left: 5px;
+              }
 
-                &:last-of-type {
-                  padding-left: 0;
-                }
+              &:last-of-type {
+                padding-left: 0;
               }
             }
+          }
 
-            tbody {
-              tr:nth-child(2n) th,
-              tr:nth-child(2n) td {
-                background-color: #ededed;
-              }
+          tbody {
+            tr:nth-child(2n) th,
+            tr:nth-child(2n) td {
+              background-color: #ededed;
+            }
+
+            tr:last-of-type td {
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: normal;
+            }
+
+            th {
+              padding: 0;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: bold;
+            }
 
-              tr:last-of-type td {
+            td {
+              padding: 0;
+              color: ${colours.section.sport};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: normal;
+
+              &:first-of-type,
+              &:nth-of-type(2) {
+                padding-left: 5px;
                 color: ${colours.functional.brandColour};
-                font-family: ${fonts.supporting};
-                font-size: 12px;
-                line-height: 14px;
+                font-family: ${fonts.headline};
+                font-size: 16px;
                 font-weight: normal;
+                line-height: 16px;
               }
+            }
+          }
+        }
 
-              th {
-                padding: 0;
-                color: ${colours.functional.brandColour};
-                font-family: ${fonts.supporting};
-                font-size: 12px;
-                line-height: 14px;
-                font-weight: bold;
+        table.Opta-bowling {
+          width: calc(60% - 10px);
+          float: left;
+
+          thead {
+            th {
+              width: 12%;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: normal;
+              text-align: center;
+              background-color: #ededed;
+
+              &:first-of-type {
+                width: 40%;
+                padding-left: 5px;
                 text-align: left;
               }
+            }
+          }
 
-              td {
-                padding: 0;
-                color: ${colours.section.sport};
-                font-family: ${fonts.supporting};
-                font-size: 12px;
-                line-height: 14px;
-                font-weight: normal;
-                text-align: center;
+          tbody {
+            th {
+              padding: 0;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: bold;
+              text-align: center;
+            }
 
-                &:first-of-type,
-                &:nth-of-type(2) {
-                  padding-left: 5px;
-                  color: ${colours.functional.brandColour};
-                  font-family: ${fonts.headline};
-                  font-size: 16px;
-                  font-weight: normal;
-                  line-height: 16px;
-                  text-align: left;
-                }
+            td {
+              padding: 0;
+              color: ${colours.section.sport};
+              font-family: ${fonts.supporting};
+              font-size: 12px;
+              line-height: 14px;
+              font-weight: normal;
+              text-align: center;
+
+              &:first-of-type {
+                padding-left: 5px;
+                color: ${colours.functional.brandColour};
+                font-family: ${fonts.headline};
+                font-size: 16px;
+                font-weight: normal;
+                line-height: 16px;
+                text-align: left;
               }
             }
           }
+        }
 
-          table.Opta-bowling {
-            width: calc(70% - 10px);
-            float: left;
+        .Opta-Ranking {
+          table {
+            width: calc(40%);
+            float: right;
 
             thead {
               th {
@@ -274,62 +328,6 @@ export const WidgetContainer = styled(WidgetContainerBase)`
               }
             }
           }
-
-          .Opta-Ranking {
-            table {
-              width: calc(30%);
-              float: right;
-
-              thead {
-                th {
-                  color: ${colours.functional.brandColour};
-                  font-family: ${fonts.supporting};
-                  font-size: 12px;
-                  line-height: 14px;
-                  font-weight: normal;
-                  text-align: center;
-                  background-color: #ededed;
-
-                  &:first-of-type {
-                    padding-left: 5px;
-                    text-align: left;
-                  }
-                }
-              }
-
-              tbody {
-                th {
-                  padding: 0;
-                  color: ${colours.functional.brandColour};
-                  font-family: ${fonts.supporting};
-                  font-size: 12px;
-                  line-height: 14px;
-                  font-weight: bold;
-                  text-align: center;
-                }
-
-                td {
-                  padding: 0;
-                  color: ${colours.section.sport};
-                  font-family: ${fonts.supporting};
-                  font-size: 12px;
-                  line-height: 14px;
-                  font-weight: normal;
-                  text-align: center;
-
-                  &:first-of-type {
-                    padding-left: 5px;
-                    color: ${colours.functional.brandColour};
-                    font-family: ${fonts.headline};
-                    font-size: 16px;
-                    font-weight: normal;
-                    line-height: 16px;
-                    text-align: left;
-                  }
-                }
-              }
-            }
-          }
         }
       }
     }

package/src/components/welcome-banner/WelcomeBanner.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { WelcomeBanner } from './WelcomeBanner';
+
+storiesOf('Typescript Component/Welcome Banner', module).add(
+  'Welcome Banner',
+  () => {
+    window.sessionStorage.setItem('showWelcomeBanner', 'true');
+    return <WelcomeBanner />;
+  }
+);

package/src/components/welcome-banner/WelcomeBanner.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+
+import { Container, Text, Title } from './styles';
+
+export const WelcomeBanner: React.FC = () => {
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (window.sessionStorage.getItem('showWelcomeBanner')) {
+      window.sessionStorage.removeItem('showWelcomeBanner');
+      setIsEnabled(true);
+    }
+  }, []);
+
+  return isEnabled ? (
+    <Container>
+      <Title data-testId="title">
+        Welcome to The Times and The Sunday Times
+      </Title>
+      <Text data-testId="text">We hope you enjoy your free article</Text>
+    </Container>
+  ) : null;
+};

package/src/components/welcome-banner/__tests__/WelcomeBanner.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { WelcomeBanner } from '../WelcomeBanner';
+
+describe('WelcomeBanner', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the component if session storage token showWelcomeBanner is set to true', () => {
+    window.sessionStorage.setItem('showWelcomeBanner', 'true');
+    const { getByText } = render(<WelcomeBanner />);
+    expect(getByText('Welcome to The Times and The Sunday Times'));
+    expect(getByText('We hope you enjoy your free article'));
+  });
+
+  it('should not render the component if the session storage token showWelcomeBanner does not exist', () => {
+    const { queryByTestId } = render(<WelcomeBanner />);
+    expect(queryByTestId('title')).toBeFalsy();
+    expect(queryByTestId('text')).toBeFalsy();
+  });
+
+  it('should remove the showWelcomeBanner session storage token when the component is displayed', () => {
+    window.sessionStorage.setItem('showWelcomeBanner', 'true');
+    render(<WelcomeBanner />);
+    expect(window.sessionStorage.getItem('showWelcomeBanner')).toBeFalsy();
+  });
+});

package/src/components/welcome-banner/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { colours, fonts } from '@times-components/ts-styleguide';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: 38px 33px 34px;
+  border: 1px solid ${colours.functional.primary};
+`;
+
+export const Title = styled.div`
+  font-family: ${fonts.headline};
+  font-size: 28px;
+  color: ${colours.functional.greyText};
+  text-align: center;
+`;
+
+export const Text = styled.div`
+  font-family: ${fonts.supporting};
+  font-size: 18px;
+  color: ${colours.functional.primary};
+  padding-top: 9px;
+  text-align: center;
+`;

package/src/index.ts

@@ -92,6 +92,7 @@ export {
 
 export { UpdatedTimeProvider } from './helpers/time/UpdatedTimeProvider';
 
+export { WelcomeBanner } from './components/welcome-banner/WelcomeBanner';
 export {
   default as safeDecodeURIComponent
 } from './utils/safeDecodeURIComponent';