@times-components/ts-components 1.84.3 → 1.85.1

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.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.85.0...@times-components/ts-components@1.85.1) (2024-05-17)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
+# [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

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: false, fullWidth: full_width },
+        React.createElement(WidgetContainer, { ref: ref }),
+        !isReady && (React.createElement(PlaceholderContainer, null,
+            React.createElement(Placeholder, null)))));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0YUZvb3RiYWxsRml4dHVyZXNUaWNrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9vcHRhL2Zvb3RiYWxsL2ZpeHR1cmVzLXRpY2tlci9PcHRhRm9vdGJhbGxGaXh0dXJlc1RpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRW5ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGNBQWMsRUFDZCxVQUFVLEVBQ1YsV0FBVyxFQUNYLGFBQWEsRUFDZCxNQUFNLG9CQUFvQixDQUFDO0FBRTVCLE9BQU8sRUFBRSxTQUFTLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRTNDLE1BQU0sQ0FBQyxNQUFNLDBCQUEwQixHQU1sQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRTtJQUMxRSxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsU0FBUyxFQUFrQixDQUFDO0lBRTlDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRXZELFNBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDYixNQUFNLEtBQUssR0FBRyxVQUFVLENBQUM7UUFFekIsWUFBWSxFQUFFLENBQUM7UUFDZixjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdEIsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNyQixJQUFJLEdBQUcsQ0FBQyxPQUFPLEVBQUU7Z0JBQ2YsR0FBRyxDQUFDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsV0FBVyxDQUFDLGFBQWEsRUFBRTtvQkFDakQsS0FBSztvQkFDTCxNQUFNLEVBQUUsVUFBVTtvQkFDbEIsTUFBTTtvQkFDTixXQUFXO29CQUNYLFNBQVM7b0JBQ1QsT0FBTztvQkFDUCxJQUFJLEVBQUUsSUFBSTtvQkFDVixnQkFBZ0IsRUFBRSxJQUFJO29CQUN0QixRQUFRLEVBQUUsT0FBTztvQkFDakIsV0FBVyxFQUFFLE9BQU87b0JBQ3BCLFlBQVksRUFBRSxLQUFLO29CQUNuQixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixhQUFhLEVBQUUsSUFBSTtvQkFDbkIsV0FBVyxFQUFFLElBQUk7b0JBQ2pCLFNBQVMsRUFBRSxJQUFJO29CQUNmLFdBQVcsRUFBRSxZQUFZO2lCQUMxQixDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUViLGFBQWEsRUFBRSxDQUFDO2dCQUNoQixVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDbEI7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sQ0FDTCxvQkFBQyxTQUFTLElBQUMsTUFBTSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsVUFBVTtRQUM3QyxvQkFBQyxlQUFlLElBQUMsR0FBRyxFQUFFLEdBQUcsR0FBSTtRQUU1QixDQUFDLE9BQU8sSUFBSSxDQUNYLG9CQUFDLG9CQUFvQjtZQUNuQixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUNTLENBQ2IsQ0FBQztBQUNKLENBQUMsQ0FBQyxDQUFDIn0=

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,331 @@
+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) `
+  @media (max-width: ${breakpoints.small}px) {
+    .Opta-Window {
+      left: 20px !important;
+      right: 0 !important;
+    }
+  }
+
+  .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);
+    }
+
+    @media (max-width: ${breakpoints.small}px) {
+      opacity: 0 !important;
+      transition-duration: 0.2s;
+
+      &:hover {
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9maXh0dXJlcy10aWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTlFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRXZELE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7NkJBZXJDLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozs7bUNBU1IsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Q0FVcEQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTt1QkFDbkMsV0FBVyxDQUFDLEtBQUs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7eUJBa0NmLFdBQVcsQ0FBQyxLQUFLOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Z0NBbURWLE9BQU8sQ0FBQyxVQUFVLENBQUMsbUJBQW1COzs7Ozt1QkFLL0MsT0FBTyxDQUFDLFVBQVUsQ0FBQyxXQUFXOzZCQUN4QixLQUFLLENBQUMsVUFBVTs7Ozs7Ozs7Ozs7OzttQ0FhVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7aUNBV3BCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7O3VCQU81QixPQUFPLENBQUMsVUFBVSxDQUFDLFdBQVc7NkJBQ3hCLEtBQUssQ0FBQyxRQUFROzs7Ozs7Ozt5QkFRbEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOytCQUNmLEtBQUssQ0FBQyxVQUFVOzs7Ozs7OztxQ0FRVixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FDQWtCbEIsV0FBVyxDQUFDLE1BQU07Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUNBeUJsQixXQUFXLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztxQ0ErQmxCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7bUNBTXBCLFdBQVcsQ0FBQyxNQUFNOzs7Ozs7Ozs7Ozs7dUJBWTlCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs2QkFDcEIsS0FBSyxDQUFDLFVBQVU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lDQWdDWixPQUFPLENBQUMsVUFBVSxDQUFDLE9BQU87dUNBQ3BCLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7OzttQ0FXcEIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLOzs7Ozs7Ozs7Ozs7O0NBYXZELENBQUMifQ==

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { AutoNewsletterPuff } from './components/newsletter-puff/AutoNewsletterP
 export { InlineNewsletterPuff } from './components/newsletter-puff/InlineNewsletterPuff';
 export { PreviewNewsletterPuff } from './components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff';
 export { OptaCricketScorecard } from './components/opta/cricket/scorecard/OptaCricketScorecard';
+export { OptaFootballFixturesTicker } from './components/opta/football/fixtures-ticker/OptaFootballFixturesTicker';
 export { OptaFootballFixtures } from './components/opta/football/fixtures/OptaFootballFixtures';
 export { OptaFootballStandings } from './components/opta/football/standings/OptaFootballStandings';
 export { OptaFootballSummary } from './components/opta/football/summary/OptaFootballSummary';

package/dist/index.js

@@ -14,6 +14,7 @@ export { InlineNewsletterPuff } from './components/newsletter-puff/InlineNewslet
 export { PreviewNewsletterPuff } from './components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff';
 // Sport Components
 export { OptaCricketScorecard } from './components/opta/cricket/scorecard/OptaCricketScorecard';
+export { OptaFootballFixturesTicker } from './components/opta/football/fixtures-ticker/OptaFootballFixturesTicker';
 export { OptaFootballFixtures } from './components/opta/football/fixtures/OptaFootballFixtures';
 export { OptaFootballStandings } from './components/opta/football/standings/OptaFootballStandings';
 export { OptaFootballSummary } from './components/opta/football/summary/OptaFootballSummary';
@@ -36,4 +37,4 @@ export { UpdatedTimestamp } from './components/updated-timestamp/UpdatedTimestam
 export { UpdatedTimeProvider } from './helpers/time/UpdatedTimeProvider';
 export { WelcomeBanner } from './components/welcome-banner/WelcomeBanner';
 export { default as safeDecodeURIComponent } from './utils/safeDecodeURIComponent';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXFCO0FBQ3JCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSxxRUFBcUUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDNUUsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixlQUFlLEVBQ2hCLE1BQU0sMkNBQTJDLENBQUM7QUFDbkQsT0FBTyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osY0FBYyxFQUNkLGtCQUFrQixFQUNsQixvQkFBb0IsRUFDcEIsb0JBQW9CLEVBQ3BCLG1CQUFtQixFQUNwQixNQUFNLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUN4RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFM0Qsd0JBQXdCO0FBQ3hCLE9BQU8sRUFDTCxrQkFBa0IsRUFDbkIsTUFBTSxpREFBaUQsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sbURBQW1ELENBQUM7QUFDM0QsT0FBTyxFQUNMLHFCQUFxQixFQUN0QixNQUFNLDRFQUE0RSxDQUFDO0FBRXBGLG1CQUFtQjtBQUNuQixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sMERBQTBELENBQUM7QUFFbEUsT0FBTyxFQUNMLG9CQUFvQixFQUNyQixNQUFNLDBEQUEwRCxDQUFDO0FBQ2xFLE9BQU8sRUFDTCxxQkFBcUIsRUFDdEIsTUFBTSw0REFBNEQsQ0FBQztBQUNwRSxPQUFPLEVBQ0wsbUJBQW1CLEVBQ3BCLE1BQU0sd0RBQXdELENBQUM7QUFDaEUsT0FBTyxFQUNMLHNCQUFzQixFQUN2QixNQUFNLCtEQUErRCxDQUFDO0FBRXZFLE9BQU8sRUFDTCxpQkFBaUIsRUFDbEIsTUFBTSxvREFBb0QsQ0FBQztBQUM1RCxPQUFPLEVBQ0wsa0JBQWtCLEVBQ25CLE1BQU0sc0RBQXNELENBQUM7QUFDOUQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLGtEQUFrRCxDQUFDO0FBQzFELE9BQU8sRUFDTCxtQkFBbUIsRUFDcEIsTUFBTSx5REFBeUQsQ0FBQztBQUVqRSw2QkFBNkI7QUFDN0IsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLG9EQUFvRCxDQUFDO0FBRTVELFVBQVU7QUFDVixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDOUQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLCtDQUErQyxDQUFDO0FBQ3ZELE9BQU8sRUFDTCx1QkFBdUIsRUFDeEIsTUFBTSw0Q0FBNEMsQ0FBQztBQUVwRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQzFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUV2RSxPQUFPLEVBQ0wsT0FBTyxJQUFJLGFBQWEsRUFDekIsTUFBTSwyQ0FBMkMsQ0FBQztBQUVuRCxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2pCLE1BQU0saURBQWlELENBQUM7QUFFekQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFekUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQzFFLE9BQU8sRUFDTCxPQUFPLElBQUksc0JBQXNCLEVBQ2xDLE1BQU0sZ0NBQWdDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXFCO0FBQ3JCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSxxRUFBcUUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDNUUsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixlQUFlLEVBQ2hCLE1BQU0sMkNBQTJDLENBQUM7QUFDbkQsT0FBTyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osY0FBYyxFQUNkLGtCQUFrQixFQUNsQixvQkFBb0IsRUFDcEIsb0JBQW9CLEVBQ3BCLG1CQUFtQixFQUNwQixNQUFNLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUN4RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFM0Qsd0JBQXdCO0FBQ3hCLE9BQU8sRUFDTCxrQkFBa0IsRUFDbkIsTUFBTSxpREFBaUQsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sbURBQW1ELENBQUM7QUFDM0QsT0FBTyxFQUNMLHFCQUFxQixFQUN0QixNQUFNLDRFQUE0RSxDQUFDO0FBRXBGLG1CQUFtQjtBQUNuQixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sMERBQTBELENBQUM7QUFFbEUsT0FBTyxFQUNMLDBCQUEwQixFQUMzQixNQUFNLHVFQUF1RSxDQUFDO0FBQy9FLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSwwREFBMEQsQ0FBQztBQUNsRSxPQUFPLEVBQ0wscUJBQXFCLEVBQ3RCLE1BQU0sNERBQTRELENBQUM7QUFDcEUsT0FBTyxFQUNMLG1CQUFtQixFQUNwQixNQUFNLHdEQUF3RCxDQUFDO0FBQ2hFLE9BQU8sRUFDTCxzQkFBc0IsRUFDdkIsTUFBTSwrREFBK0QsQ0FBQztBQUV2RSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2xCLE1BQU0sb0RBQW9ELENBQUM7QUFDNUQsT0FBTyxFQUNMLGtCQUFrQixFQUNuQixNQUFNLHNEQUFzRCxDQUFDO0FBQzlELE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSxrREFBa0QsQ0FBQztBQUMxRCxPQUFPLEVBQ0wsbUJBQW1CLEVBQ3BCLE1BQU0seURBQXlELENBQUM7QUFFakUsNkJBQTZCO0FBQzdCLE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSxvREFBb0QsQ0FBQztBQUU1RCxVQUFVO0FBQ1YsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzlELE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSwrQ0FBK0MsQ0FBQztBQUN2RCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3hCLE1BQU0sNENBQTRDLENBQUM7QUFFcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFdkUsT0FBTyxFQUNMLE9BQU8sSUFBSSxhQUFhLEVBQ3pCLE1BQU0sMkNBQTJDLENBQUM7QUFFbkQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLGlEQUFpRCxDQUFDO0FBRXpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBRXpFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUMxRSxPQUFPLEVBQ0wsT0FBTyxJQUFJLHNCQUFzQixFQUNsQyxNQUFNLGdDQUFnQyxDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/ts-components",
-  "version": "1.84.3",
+  "version": "1.85.1",
   "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.42",
-    "@times-components/date-publication": "0.30.15",
-    "@times-components/icons": "2.21.21",
-    "@times-components/image": "6.17.2",
-    "@times-components/link": "3.17.15",
-    "@times-components/provider": "1.40.16",
+    "@times-components/button": "2.10.44",
+    "@times-components/date-publication": "0.30.17",
+    "@times-components/icons": "2.21.23",
+    "@times-components/image": "6.17.4",
+    "@times-components/link": "3.17.17",
+    "@times-components/provider": "1.40.18",
     "@times-components/provider-queries": "2.21.1",
-    "@times-components/related-articles": "6.17.55",
-    "@times-components/ts-slices": "1.9.3",
-    "@times-components/ts-styleguide": "1.50.15",
-    "@times-components/utils": "6.20.3",
+    "@times-components/related-articles": "6.17.57",
+    "@times-components/ts-slices": "1.9.5",
+    "@times-components/ts-styleguide": "1.50.17",
+    "@times-components/utils": "6.20.4",
     "algoliasearch": "4.9.0",
     "date-fns": "2.28.0",
     "date-fns-tz": "1.3.3",
@@ -83,7 +83,7 @@
     "@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.15",
+    "@times-components/storybook": "4.12.17",
     "@times-components/test-utils": "2.4.2",
     "@types/lodash.get": "4.4.6",
     "@types/lodash.keyby": "4.6.6",
@@ -115,5 +115,5 @@
       "@testing-library/jest-dom/extend-expect"
     ]
   },
-  "gitHead": "ce6a8c56a1008dc8d6a0b3e32c399df3198fd14b"
+  "gitHead": "d20872318f850293f6c0a1d479307488215ab3f0"
 }