@times-components/ts-components 1.84.3-alpha.20 → 1.85.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.85.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.84.3...@times-components/ts-components@1.85.0) (2024-05-16)
+
+
+### Features
+
+* **TMRS-170:** add opta football fixtures ticker component ([#3849](https://github.com/newsuk/times-components/issues/3849)) ([e8524a9](https://github.com/newsuk/times-components/commit/e8524a97bd58a8ab134f61f1394d061da5fe55d5))
+
+
+
+
+
+## [1.84.3](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.84.2...@times-components/ts-components@1.84.3) (2024-05-08)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
 ## [1.84.2](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.84.1...@times-components/ts-components@1.84.2) (2024-04-19)
 
 **Note:** Version bump only for package @times-components/ts-components

package/dist/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const OptaFootballFixturesTicker: React.FC<{
+    season: string;
+    competition: string;
+    date_from?: string;
+    date_to?: string;
+    full_width?: boolean;
+}>;

package/dist/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import { initSettings, initStyleSheet, initScript, initElement, initComponent } from '../../utils/config';
+import { Container, PlaceholderContainer } from '../shared-styles';
+import { WidgetContainer } from './styles';
+export const OptaFootballFixturesTicker = React.memo(({ season, competition, date_from, date_to, full_width }) => {
+    const ref = React.createRef();
+    const [isReady, setIsReady] = useState(false);
+    useEffect(() => {
+        const sport = 'football';
+        initSettings();
+        initStyleSheet(sport);
+        initScript().then(() => {
+            if (ref.current) {
+                ref.current.innerHTML = initElement('opta-widget', {
+                    sport,
+                    widget: 'fixtures',
+                    season,
+                    competition,
+                    date_from,
+                    date_to,
+                    live: true,
+                    start_on_current: true,
+                    template: 'strip',
+                    team_naming: 'brief',
+                    match_status: 'all',
+                    order_by: 'date_ascending',
+                    show_grouping: true,
+                    show_crests: true,
+                    show_date: true,
+                    date_format: 'ddd Do MMM'
+                }).outerHTML;
+                initComponent();
+                setIsReady(true);
+            }
+        });
+    }, []);
+    return (React.createElement(Container, { border: isReady, fullWidth: full_width },
+        React.createElement(WidgetContainer, { ref: ref }),
+        !isReady && (React.createElement(PlaceholderContainer, null,
+            React.createElement(Placeholder, null)))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL2ZpeHR1cmVzLXRpY2tlci9PcHRhRm9vdGJhbGxGaXh0dXJlc1RpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxTQUFTLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRTNDLE1BQU0sQ0FBQyxNQUFNLDBCQUEwQixHQU1sQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRTtJQUMxRSxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsU0FBUyxFQUFrQixDQUFDO0lBRTlDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRXZELFNBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDYixNQUFNLEtBQUssR0FBRyxVQUFVLENBQUM7UUFFekIsWUFBWSxFQUFFLENBQUM7UUFDZixjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdEIsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNyQixJQUFJLEdBQUcsQ0FBQyxPQUFPLEVBQUU7Z0JBQ2YsR0FBRyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsV0FBVyxDQUFDLGFBQWEsRUFBRTtvQkFDakQsS0FBSztvQkFDTCxNQUFNLEVBQUUsVUFBVTtvQkFDbEIsTUFBTTtvQkFDTixXQUFXO29CQUNYLFNBQVM7b0JBQ1QsT0FBTztvQkFDUCxJQUFJLEVBQUUsSUFBSTtvQkFDVixnQkFBZ0IsRUFBRSxJQUFJO29CQUN0QixRQUFRLEVBQUUsT0FBTztvQkFDakIsV0FBVyxFQUFFLE9BQU87b0JBQ3BCLFlBQVksRUFBRSxLQUFLO29CQUNuQixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixhQUFhLEVBQUUsSUFBSTtvQkFDbkIsV0FBVyxFQUFFLElBQUk7b0JBQ2pCLFNBQVMsRUFBRSxJQUFJO29CQUNmLFdBQVcsRUFBRSxZQUFZO2lCQUMxQixDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUViLGFBQWEsRUFBRSxDQUFDO2dCQUNoQixVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDbEI7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sQ0FDTCxvQkFBQyxTQUFTLElBQUMsTUFBTSxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVTtRQUMvQyxvQkFBQyxlQUFlLElBQUMsR0FBRyxFQUFFLEdBQUcsR0FBSTtRQUU1QixDQUFDLE9BQU8sSUFBSSxDQUNYLG9CQUFDLG9CQUFvQjtZQUNuQixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUNTLENBQ2IsQ0FBQztBQUNKLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
+import { OptaFootballFixturesTicker } from './OptaFootballFixturesTicker';
+const showcase = {
+    children: [
+        {
+            decorator: (storyFn) => (React.createElement(ArticleHarness, null, storyFn())),
+            type: 'decorator'
+        },
+        {
+            component: () => (React.createElement(OptaFootballFixturesTicker, { season: "2023", competition: "8", date_from: "", date_to: "" })),
+            name: 'Fixtures Ticker',
+            type: 'story'
+        }
+    ],
+    name: 'Typescript Component/In Article/Football/Fixtures'
+};
+// @ts-ignore
+showcaseConverter(module, showcase);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIuc3Rvcmllcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL29wdGEvZm9vdGJhbGwvZml4dHVyZXMtdGlja2VyL09wdGFGb290YmFsbEZpeHR1cmVzVGlja2VyLnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0scURBQXFELENBQUM7QUFDckYsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFMUUsTUFBTSxRQUFRLEdBQUc7SUFDZixRQUFRLEVBQUU7UUFDUjtZQUNFLFNBQVMsRUFBRSxDQUFDLE9BQThCLEVBQUUsRUFBRSxDQUFDLENBQzdDLG9CQUFDLGNBQWMsUUFBRSxPQUFPLEVBQUUsQ0FBa0IsQ0FDN0M7WUFDRCxJQUFJLEVBQUUsV0FBVztTQUNsQjtRQUNEO1lBQ0UsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQ2Ysb0JBQUMsMEJBQTBCLElBQ3pCLE1BQU0sRUFBQyxNQUFNLEVBQ2IsV0FBVyxFQUFDLEdBQUcsRUFDZixTQUFTLEVBQUMsRUFBRSxFQUNaLE9BQU8sRUFBQyxFQUFFLEdBQ1YsQ0FDSDtZQUNELElBQUksRUFBRSxpQkFBaUI7WUFDdkIsSUFBSSxFQUFFLE9BQU87U0FDZDtLQUNGO0lBQ0QsSUFBSSxFQUFFLG1EQUFtRDtDQUMxRCxDQUFDO0FBRUYsYUFBYTtBQUNiLGlCQUFpQixDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsQ0FBQyJ9

package/dist/components/opta/football/fixtures-ticker/__tests__/OptaFootballFixturesTicker.test.d.ts

@@ -0,0 +1,2 @@
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';

package/dist/components/opta/football/fixtures-ticker/__tests__/OptaFootballFixturesTicker.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';
+jest.mock('@times-components/image', () => ({
+    Placeholder: () => React.createElement(React.Fragment, null, "Placeholder")
+}));
+const mockInitSettings = jest.fn();
+const mockInitStyleSheet = jest.fn();
+const mockInitComponent = jest.fn();
+const mockInitElement = () => {
+    const element = document.createElement('div');
+    element.appendChild(document.createTextNode('Widget'));
+    return element;
+};
+jest.mock('../../../utils/config', () => ({
+    initSettings: mockInitSettings,
+    initStyleSheet: mockInitStyleSheet,
+    initScript: () => new Promise(resolve => resolve({})),
+    initElement: mockInitElement,
+    initComponent: mockInitComponent
+}));
+import { OptaFootballFixturesTicker } from '../OptaFootballFixturesTicker';
+const requiredProps = {
+    season: '2020',
+    competition: '3',
+    date_from: '2021-06-20',
+    date_to: '2021-07-11'
+};
+describe('OptaFootballFixturesTicker', () => {
+    it('should render correctly', async () => {
+        const { asFragment, getByText } = render(React.createElement(OptaFootballFixturesTicker, Object.assign({}, requiredProps)));
+        expect(asFragment()).toMatchSnapshot();
+        await waitForElementToBeRemoved(getByText('Placeholder'));
+        expect(mockInitSettings).toHaveBeenCalledTimes(1);
+        expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+        expect(mockInitComponent).toHaveBeenCalledTimes(1);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL29wdGEvZm9vdGJhbGwvZml4dHVyZXMtdGlja2VyL19fdGVzdHNfXy9PcHRhRm9vdGJhbGxGaXh0dXJlc1RpY2tlci50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRTNFLE9BQU8scUJBQXFCLENBQUM7QUFDN0IsT0FBTywyQkFBMkIsQ0FBQztBQUVuQyxJQUFJLENBQUMsSUFBSSxDQUFDLHlCQUF5QixFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFDMUMsV0FBVyxFQUFFLEdBQUcsRUFBRSxDQUFDLHdEQUFnQjtDQUNwQyxDQUFDLENBQUMsQ0FBQztBQUVKLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBQ25DLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBQ3JDLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBRXBDLE1BQU0sZUFBZSxHQUFHLEdBQUcsRUFBRTtJQUMzQixNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlDLE9BQU8sQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQ3ZELE9BQU8sT0FBTyxDQUFDO0FBQ2pCLENBQUMsQ0FBQztBQUVGLElBQUksQ0FBQyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQztJQUN4QyxZQUFZLEVBQUUsZ0JBQWdCO0lBQzlCLGNBQWMsRUFBRSxrQkFBa0I7SUFDbEMsVUFBVSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3JELFdBQVcsRUFBRSxlQUFlO0lBQzVCLGFBQWEsRUFBRSxpQkFBaUI7Q0FDakMsQ0FBQyxDQUFDLENBQUM7QUFFSixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUUzRSxNQUFNLGFBQWEsR0FBRztJQUNwQixNQUFNLEVBQUUsTUFBTTtJQUNkLFdBQVcsRUFBRSxHQUFHO0lBQ2hCLFNBQVMsRUFBRSxZQUFZO0lBQ3ZCLE9BQU8sRUFBRSxZQUFZO0NBQ3RCLENBQUM7QUFFRixRQUFRLENBQUMsNEJBQTRCLEVBQUUsR0FBRyxFQUFFO0lBQzFDLEVBQUUsQ0FBQyx5QkFBeUIsRUFBRSxLQUFLLElBQUksRUFBRTtRQUN2QyxNQUFNLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxHQUFHLE1BQU0sQ0FDdEMsb0JBQUMsMEJBQTBCLG9CQUFLLGFBQWEsRUFBSSxDQUNsRCxDQUFDO1FBQ0YsTUFBTSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7UUFFdkMsTUFBTSx5QkFBeUIsQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUUxRCxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNsRCxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNwRCxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUVuRCxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN6QyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/opta/football/fixtures-ticker/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const WidgetContainerOverride: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WidgetContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/opta/football/fixtures-ticker/styles.js

@@ -0,0 +1,315 @@
+import styled from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
+import { WidgetContainerBase } from '../shared-styles';
+export const WidgetContainerOverride = styled(WidgetContainerBase) `
+  .Opta {
+    h2 {
+      margin: 20px 0 0 0 !important;
+    }
+
+    .Opta-js-main {
+      table {
+        tbody {
+          td.Opta-title {
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+
+            h3 {
+              margin: 20px 0 0 0 !important;
+              font-family: ${fonts.headline} !important;
+              font-size: 16px !important;
+              line-height: 30px !important;
+              text-align: center;
+
+              span {
+                font-size: inherit;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 18px !important;
+                line-height: 40px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export const WidgetContainer = styled(WidgetContainerBase) `
+  .Opta-Scroller {
+    background-color: white !important;
+
+    border: 1px solid #999999 !important;
+    border-radius: 2px;
+    padding: 39px 0 !important;
+
+    &::after {
+      background: rgba(0, 0, 0, 0)
+        url(https://secure.widget.cloud.opta.net/v3/assets/images/sprites/controls.svg)
+        no-repeat !important;
+      background-size: 210px 186px !important;
+      background-position-x: -180px !important;
+      background-position-y: -19px !important;
+      height: 16px !important;
+      width: 16px !important;
+      top: calc(50% - 8px) !important;
+      left: calc(50% - 8px) !important;
+    }
+
+    &.Opta-Next::after {
+      transform: rotate(-90deg) translateX(2px);
+    }
+    &.Opta-Previous::after {
+      transform: rotate(90deg) translateX(2px);
+    }
+  }
+
+  .Opta-fixture {
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    height: 80px;
+    width: 160px !important;
+    margin-inline: 4px;
+    display: flex;
+    flex-direction: column;
+
+    .Opta-Team,
+    .Opta-timings {
+      background-color: transparent !important;
+      border-right: 0 !important;
+    }
+    .Opta-Team {
+      height: 24px !important;
+    }
+    .Opta-timings {
+      height: 24px !important;
+      order: -1;
+    }
+
+    .Opta-TeamName,
+    .Opta-Team-Score {
+      color: black !important;
+      font-weight: bold !important;
+    }
+    &.Opta-prematch .Opta-Team-Score::after {
+      content: '-';
+    }
+  }
+
+  .Opta {
+    .Opta-js-main {
+      padding: 0;
+      background-color: transparent;
+
+      table {
+        tbody {
+          td.Opta-title {
+            height: 40px;
+            background-color: ${colours.functional.backgroundSecondary};
+
+            h3 {
+              height: auto;
+              margin: 0 0 0 10px;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 14px;
+              line-height: 14px;
+              font-weight: normal;
+              background-color: transparent;
+              border-bottom: 0;
+
+              span {
+                float: none;
+                padding: 0;
+                font-size: 13px;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                margin: 0 0 0 20px;
+              }
+            }
+          }
+
+          tr.Opta-Scoreline {
+            height: 40px;
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+
+            @media (min-width: ${breakpoints.medium}px) {
+              height: 50px;
+            }
+
+            td {
+              max-width: none !important;
+              padding: 3px 0 0 0;
+              color: ${colours.functional.brandColour} !important;
+              font-family: ${fonts.headline};
+              font-size: 14px;
+              line-height: 14px;
+              background-color: transparent;
+
+              &.Opta-Time {
+                width: 50px !important;
+                padding: 6px 0 0 10px;
+                color: ${colours.section.sport} !important;
+                font-family: ${fonts.supporting};
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 60px !important;
+                  padding: 6px 0 0 20px;
+                  font-size: 13px;
+                  line-height: 14px;
+                }
+              }
+
+              &.Opta-Team {
+                width: 30% !important;
+                padding-left: 10px;
+
+                &.Opta-Home {
+                  padding-right: 10px;
+                  padding-left: 0;
+                  text-align: right;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  padding-left: 15px;
+
+                  &.Opta-Home {
+                    padding-right: 15px;
+                    padding-left: 0;
+                  }
+                }
+              }
+
+              &.Opta-Score {
+                width: 25px !important;
+                font-size: 16px;
+                line-height: 16px;
+                text-align: left !important;
+
+                &.Opta-Home {
+                  text-align: right !important;
+                }
+
+                span {
+                  font-size: inherit;
+                  line-height: inherit;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 30px !important;
+                  font-size: 24px;
+                  line-height: 24px;
+                }
+              }
+
+              &.Opta-Crest {
+                width: 20px !important;
+                margin-top: -3px;
+
+                img {
+                  width: 20px;
+                }
+              }
+
+              &.Opta-Divider {
+                width: 20px !important;
+                text-align: center;
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+              }
+
+              &.Opta-Outer:not(.Opta-Time) {
+                width: 50px !important;
+                padding: 0 10px 0 0;
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 60px !important;
+                  padding: 0 20px 0 0;
+                }
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 16px;
+                line-height: 16px;
+              }
+            }
+          }
+
+          tr.Opta-agg {
+            background-color: transparent !important;
+
+            td {
+              padding: 10px;
+              color: ${colours.functional.primary};
+              font-family: ${fonts.supporting};
+              font-size: 13px;
+              line-height: 16px;
+              background-color: transparent;
+
+              span {
+                font-size: inherit;
+                line-height: inherit;
+              }
+
+              span.Opta-agg-text {
+                text-transform: uppercase;
+              }
+            }
+          }
+
+          tr {
+            td.Opta-Nest {
+              padding: 0;
+
+              .Opta_W {
+                > .Opta-Cf {
+                  background-color: transparent;
+                  border-bottom: 1px solid #e4e4e4;
+
+                  .Opta-Events {
+                    padding: 10px 0 2px 0;
+
+                    li {
+                      padding: 0 0 8px 0;
+
+                      .Opta-Event-Text {
+                        color: ${colours.functional.primary};
+                        font-family: ${fonts.supporting};
+                        font-size: 13px;
+                        line-height: 16px;
+
+                        .Opta-Event-Player,
+                        .Opta-Event-Time {
+                          font-size: inherit;
+                          line-height: inherit;
+                        }
+
+                        .Opta-Event-Time {
+                          color: ${colours.section.sport};
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10aWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTlFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRXZELE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7NkJBZXJDLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozs7bUNBU1IsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Q0FVcEQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztnQ0FzRTFCLE9BQU8sQ0FBQyxVQUFVLENBQUMsbUJBQW1COzs7Ozt1QkFLL0MsT0FBTyxDQUFDLFVBQVUsQ0FBQyxXQUFXOzZCQUN4QixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7Ozs7OzttQ0FhVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7aUNBV3BCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7O3VCQU81QixPQUFPLENBQUMsVUFBVSxDQUFDLFdBQVc7NkJBQ3hCLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozt5QkFRbEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOytCQUNmLEtBQUssQ0FBQyxVQUFVOzs7Ozs7OztxQ0FRVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FDQWtCbEIsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUNBeUJsQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztxQ0ErQmxCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7bUNBTXBCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7Ozs7dUJBWTlCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs2QkFDcEIsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lDQWdDWixPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU87dUNBQ3BCLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7OzttQ0FXcEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOzs7Ozs7Ozs7Ozs7O0NBYXZELENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/ts-components",
-  "version": "1.84.3-alpha.20+f3c1780fb4",
+  "version": "1.85.0",
   "description": "Reuseable Typescript React Components ",
   "main": "dist/index.js",
   "dev": "dist/index.js",
@@ -50,17 +50,17 @@
     "node": ">=8.9"
   },
   "dependencies": {
-    "@times-components/button": "^2.10.41",
-    "@times-components/date-publication": "^0.30.14",
-    "@times-components/icons": "^2.21.20",
-    "@times-components/image": "^6.17.1",
-    "@times-components/link": "^3.17.14",
-    "@times-components/provider": "^1.40.15",
-    "@times-components/provider-queries": "^2.21.1",
-    "@times-components/related-articles": "^6.17.55-alpha.20+f3c1780fb4",
-    "@times-components/ts-slices": "^1.9.2",
-    "@times-components/ts-styleguide": "^1.50.14",
-    "@times-components/utils": "^6.20.2",
+    "@times-components/button": "2.10.43",
+    "@times-components/date-publication": "0.30.16",
+    "@times-components/icons": "2.21.22",
+    "@times-components/image": "6.17.3",
+    "@times-components/link": "3.17.16",
+    "@times-components/provider": "1.40.17",
+    "@times-components/provider-queries": "2.21.1",
+    "@times-components/related-articles": "6.17.56",
+    "@times-components/ts-slices": "1.9.4",
+    "@times-components/ts-styleguide": "1.50.16",
+    "@times-components/utils": "6.20.3",
     "algoliasearch": "4.9.0",
     "date-fns": "2.28.0",
     "date-fns-tz": "1.3.3",
@@ -82,9 +82,9 @@
     "@storybook/react": "6.5.16",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^12.1.2",
-    "@times-components/provider-test-tools": "^1.29.3",
-    "@times-components/storybook": "^4.12.14",
-    "@times-components/test-utils": "^2.4.2",
+    "@times-components/provider-test-tools": "1.29.3",
+    "@times-components/storybook": "4.12.16",
+    "@times-components/test-utils": "2.4.2",
     "@types/lodash.get": "4.4.6",
     "@types/lodash.keyby": "4.6.6",
     "@types/lodash.merge": "4.6.2",
@@ -115,5 +115,5 @@
       "@testing-library/jest-dom/extend-expect"
     ]
   },
-  "gitHead": "f3c1780fb4faa2067324bd1133204007ad63e960"
+  "gitHead": "ab2d19db05462b3948665085a45421a1efd8d8d1"
 }

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+
+import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
+import { OptaFootballFixturesTicker } from './OptaFootballFixturesTicker';
+
+const showcase = {
+  children: [
+    {
+      decorator: (storyFn: () => React.ReactNode) => (
+        <ArticleHarness>{storyFn()}</ArticleHarness>
+      ),
+      type: 'decorator'
+    },
+    {
+      component: () => (
+        <OptaFootballFixturesTicker
+          season="2023"
+          competition="8"
+          date_from=""
+          date_to=""
+        />
+      ),
+      name: 'Fixtures Ticker',
+      type: 'story'
+    }
+  ],
+  name: 'Typescript Component/In Article/Football/Fixtures'
+};
+
+// @ts-ignore
+showcaseConverter(module, showcase);

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+
+import { Placeholder } from '@times-components/image';
+
+import {
+  initSettings,
+  initStyleSheet,
+  initScript,
+  initElement,
+  initComponent
+} from '../../utils/config';
+
+import { Container, PlaceholderContainer } from '../shared-styles';
+import { WidgetContainer } from './styles';
+
+export const OptaFootballFixturesTicker: React.FC<{
+  season: string;
+  competition: string;
+  date_from?: string;
+  date_to?: string;
+  full_width?: boolean;
+}> = React.memo(({ season, competition, date_from, date_to, full_width }) => {
+  const ref = React.createRef<HTMLDivElement>();
+
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    const sport = 'football';
+
+    initSettings();
+    initStyleSheet(sport);
+
+    initScript().then(() => {
+      if (ref.current) {
+        ref.current.innerHTML = initElement('opta-widget', {
+          sport,
+          widget: 'fixtures',
+          season,
+          competition,
+          date_from,
+          date_to,
+          live: true,
+          start_on_current: true,
+          template: 'strip',
+          team_naming: 'brief',
+          match_status: 'all',
+          order_by: 'date_ascending',
+          show_grouping: true,
+          show_crests: true,
+          show_date: true,
+          date_format: 'ddd Do MMM'
+        }).outerHTML;
+
+        initComponent();
+        setIsReady(true);
+      }
+    });
+  }, []);
+
+  return (
+    <Container border={isReady} fullWidth={full_width}>
+      <WidgetContainer ref={ref} />
+
+      {!isReady && (
+        <PlaceholderContainer>
+          <Placeholder />
+        </PlaceholderContainer>
+      )}
+    </Container>
+  );
+});

package/src/components/opta/football/fixtures-ticker/__tests__/OptaFootballFixturesTicker.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';
+
+jest.mock('@times-components/image', () => ({
+  Placeholder: () => <>Placeholder</>
+}));
+
+const mockInitSettings = jest.fn();
+const mockInitStyleSheet = jest.fn();
+const mockInitComponent = jest.fn();
+
+const mockInitElement = () => {
+  const element = document.createElement('div');
+  element.appendChild(document.createTextNode('Widget'));
+  return element;
+};
+
+jest.mock('../../../utils/config', () => ({
+  initSettings: mockInitSettings,
+  initStyleSheet: mockInitStyleSheet,
+  initScript: () => new Promise(resolve => resolve({})),
+  initElement: mockInitElement,
+  initComponent: mockInitComponent
+}));
+
+import { OptaFootballFixturesTicker } from '../OptaFootballFixturesTicker';
+
+const requiredProps = {
+  season: '2020',
+  competition: '3',
+  date_from: '2021-06-20',
+  date_to: '2021-07-11'
+};
+
+describe('OptaFootballFixturesTicker', () => {
+  it('should render correctly', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballFixturesTicker {...requiredProps} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/opta/football/fixtures-ticker/__tests__/__snapshots__/OptaFootballFixturesTicker.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptaFootballFixturesTicker should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX lclCDG"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTicker should render correctly 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX lclCDG"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/opta/football/fixtures-ticker/styles.ts

@@ -0,0 +1,317 @@
+import styled from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
+
+import { WidgetContainerBase } from '../shared-styles';
+
+export const WidgetContainerOverride = styled(WidgetContainerBase)`
+  .Opta {
+    h2 {
+      margin: 20px 0 0 0 !important;
+    }
+
+    .Opta-js-main {
+      table {
+        tbody {
+          td.Opta-title {
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+
+            h3 {
+              margin: 20px 0 0 0 !important;
+              font-family: ${fonts.headline} !important;
+              font-size: 16px !important;
+              line-height: 30px !important;
+              text-align: center;
+
+              span {
+                font-size: inherit;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 18px !important;
+                line-height: 40px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const WidgetContainer = styled(WidgetContainerBase)`
+  .Opta-Scroller {
+    background-color: white !important;
+
+    border: 1px solid #999999 !important;
+    border-radius: 2px;
+    padding: 39px 0 !important;
+
+    &::after {
+      background: rgba(0, 0, 0, 0)
+        url(https://secure.widget.cloud.opta.net/v3/assets/images/sprites/controls.svg)
+        no-repeat !important;
+      background-size: 210px 186px !important;
+      background-position-x: -180px !important;
+      background-position-y: -19px !important;
+      height: 16px !important;
+      width: 16px !important;
+      top: calc(50% - 8px) !important;
+      left: calc(50% - 8px) !important;
+    }
+
+    &.Opta-Next::after {
+      transform: rotate(-90deg) translateX(2px);
+    }
+    &.Opta-Previous::after {
+      transform: rotate(90deg) translateX(2px);
+    }
+  }
+
+  .Opta-fixture {
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    height: 80px;
+    width: 160px !important;
+    margin-inline: 4px;
+    display: flex;
+    flex-direction: column;
+
+    .Opta-Team,
+    .Opta-timings {
+      background-color: transparent !important;
+      border-right: 0 !important;
+    }
+    .Opta-Team {
+      height: 24px !important;
+    }
+    .Opta-timings {
+      height: 24px !important;
+      order: -1;
+    }
+
+    .Opta-TeamName,
+    .Opta-Team-Score {
+      color: black !important;
+      font-weight: bold !important;
+    }
+    &.Opta-prematch .Opta-Team-Score::after {
+      content: '-';
+    }
+  }
+
+  .Opta {
+    .Opta-js-main {
+      padding: 0;
+      background-color: transparent;
+
+      table {
+        tbody {
+          td.Opta-title {
+            height: 40px;
+            background-color: ${colours.functional.backgroundSecondary};
+
+            h3 {
+              height: auto;
+              margin: 0 0 0 10px;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 14px;
+              line-height: 14px;
+              font-weight: normal;
+              background-color: transparent;
+              border-bottom: 0;
+
+              span {
+                float: none;
+                padding: 0;
+                font-size: 13px;
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                margin: 0 0 0 20px;
+              }
+            }
+          }
+
+          tr.Opta-Scoreline {
+            height: 40px;
+            background-color: transparent !important;
+            border-bottom: 1px solid #e4e4e4;
+
+            @media (min-width: ${breakpoints.medium}px) {
+              height: 50px;
+            }
+
+            td {
+              max-width: none !important;
+              padding: 3px 0 0 0;
+              color: ${colours.functional.brandColour} !important;
+              font-family: ${fonts.headline};
+              font-size: 14px;
+              line-height: 14px;
+              background-color: transparent;
+
+              &.Opta-Time {
+                width: 50px !important;
+                padding: 6px 0 0 10px;
+                color: ${colours.section.sport} !important;
+                font-family: ${fonts.supporting};
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 60px !important;
+                  padding: 6px 0 0 20px;
+                  font-size: 13px;
+                  line-height: 14px;
+                }
+              }
+
+              &.Opta-Team {
+                width: 30% !important;
+                padding-left: 10px;
+
+                &.Opta-Home {
+                  padding-right: 10px;
+                  padding-left: 0;
+                  text-align: right;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  padding-left: 15px;
+
+                  &.Opta-Home {
+                    padding-right: 15px;
+                    padding-left: 0;
+                  }
+                }
+              }
+
+              &.Opta-Score {
+                width: 25px !important;
+                font-size: 16px;
+                line-height: 16px;
+                text-align: left !important;
+
+                &.Opta-Home {
+                  text-align: right !important;
+                }
+
+                span {
+                  font-size: inherit;
+                  line-height: inherit;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 30px !important;
+                  font-size: 24px;
+                  line-height: 24px;
+                }
+              }
+
+              &.Opta-Crest {
+                width: 20px !important;
+                margin-top: -3px;
+
+                img {
+                  width: 20px;
+                }
+              }
+
+              &.Opta-Divider {
+                width: 20px !important;
+                text-align: center;
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+              }
+
+              &.Opta-Outer:not(.Opta-Time) {
+                width: 50px !important;
+                padding: 0 10px 0 0;
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 60px !important;
+                  padding: 0 20px 0 0;
+                }
+              }
+
+              @media (min-width: ${breakpoints.medium}px) {
+                font-size: 16px;
+                line-height: 16px;
+              }
+            }
+          }
+
+          tr.Opta-agg {
+            background-color: transparent !important;
+
+            td {
+              padding: 10px;
+              color: ${colours.functional.primary};
+              font-family: ${fonts.supporting};
+              font-size: 13px;
+              line-height: 16px;
+              background-color: transparent;
+
+              span {
+                font-size: inherit;
+                line-height: inherit;
+              }
+
+              span.Opta-agg-text {
+                text-transform: uppercase;
+              }
+            }
+          }
+
+          tr {
+            td.Opta-Nest {
+              padding: 0;
+
+              .Opta_W {
+                > .Opta-Cf {
+                  background-color: transparent;
+                  border-bottom: 1px solid #e4e4e4;
+
+                  .Opta-Events {
+                    padding: 10px 0 2px 0;
+
+                    li {
+                      padding: 0 0 8px 0;
+
+                      .Opta-Event-Text {
+                        color: ${colours.functional.primary};
+                        font-family: ${fonts.supporting};
+                        font-size: 13px;
+                        line-height: 16px;
+
+                        .Opta-Event-Player,
+                        .Opta-Event-Time {
+                          font-size: inherit;
+                          line-height: inherit;
+                        }
+
+                        .Opta-Event-Time {
+                          color: ${colours.section.sport};
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;