@times-components/ts-components 1.52.4 → 1.54.0

package/dist/components/newsletter-puff/__tests__/NewsletterPuffLink.test.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
-import mockDate from 'mockdate';
-import { NewsletterPuffLink } from '../NewsletterPuffLink';
-import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
-import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
-describe('NewsletterPuffLink', () => {
-    let oldIntersectionObserver;
-    beforeEach(() => {
-        mockDate.set(1620000000000);
-        oldIntersectionObserver = window.IntersectionObserver;
-        // @ts-ignore
-        window.IntersectionObserver = FakeIntersectionObserver;
-    });
-    afterEach(() => {
-        mockDate.reset();
-        window.IntersectionObserver = oldIntersectionObserver;
-        jest.clearAllMocks();
-        cleanup();
-    });
-    it('renders the link with the text `Manage preferences here`', () => {
-        const mockedOnPress = jest.fn();
-        const mockedAnalyticsStream = jest.fn();
-        const component = render(React.createElement(TrackingContextProvider, { context: { attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
-            React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
-        expect(component.baseElement).toMatchSnapshot();
-    });
-    it('should track link viewed in analytics', () => {
-        const mockedAnalyticsStream = jest.fn();
-        const mockedOnPress = jest.fn();
-        render(React.createElement(TrackingContextProvider, { context: { attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
-            React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
-        FakeIntersectionObserver.intersect();
-        expect(mockedAnalyticsStream).toHaveBeenCalledWith({
-            object: 'NewsletterPuffLink',
-            action: 'Scrolled',
-            attrs: {
-                context: 'value',
-                eventTime: '2021-05-03T00:00:00.000Z',
-                event_navigation_browsing_method: 'automated',
-                event_navigation_name: 'widget : puff : manage preferences here : displayed'
-            }
-        });
-    });
-    it('should track link viewed and clicked in analytics', async () => {
-        const mockedAnalyticsStream = jest.fn();
-        const mockedOnPress = jest.fn();
-        const component = render(React.createElement(TrackingContextProvider, { context: { component: 'ArticleSkeleton', attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
-            React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
-        fireEvent.click(await component.queryByRole('link'));
-        expect(mockedAnalyticsStream).toHaveBeenCalledWith({
-            action: 'Clicked',
-            component: 'ArticleSkeleton',
-            object: 'NewsletterPuffLink',
-            attrs: {
-                context: 'value',
-                eventTime: '2021-05-03T00:00:00.000Z',
-                event_navigation_browsing_method: 'click',
-                event_navigation_name: 'widget : puff : manage preferences here'
-            }
-        });
-    });
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZMaW5rLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvX190ZXN0c19fL05ld3NsZXR0ZXJQdWZmTGluay50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDcEUsT0FBTyxRQUFRLE1BQU0sVUFBVSxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzNELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLG1EQUFtRCxDQUFDO0FBQzVGLE9BQU8sd0JBQXdCLE1BQU0sOENBQThDLENBQUM7QUFFcEYsUUFBUSxDQUFDLG9CQUFvQixFQUFFLEdBQUcsRUFBRTtJQUNsQyxJQUFJLHVCQUFvRCxDQUFDO0lBQ3pELFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzVCLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztRQUV0RCxhQUFhO1FBQ2IsTUFBTSxDQUFDLG9CQUFvQixHQUFHLHdCQUF3QixDQUFDO0lBQ3pELENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixNQUFNLENBQUMsb0JBQW9CLEdBQUcsdUJBQXVCLENBQUM7UUFDdEQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLE9BQU8sRUFBRSxDQUFDO0lBQ1osQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsMERBQTBELEVBQUUsR0FBRyxFQUFFO1FBQ2xFLE1BQU0sYUFBYSxHQUFHLElBQUks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

package/dist/components/newsletter-puff/__tests__/PreviewNewsletterPuff.test.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { PreviewNewsletterPuff } from '../PreviewNewsletterPuff';
-const renderComponent = () => render(React.createElement(PreviewNewsletterPuff, Object.assign({}, {
-    code: 'TNL-119',
-    label: 'STRAIGHT IN YOUR INBOX',
-    headline: 'Politics. Explained.',
-    copy: 'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.',
-    imageUri: 'https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg'
-})));
-describe('Preview Newsletter Puff', () => {
-    it('renders', () => {
-        const component = renderComponent();
-        expect(component.baseElement).toMatchSnapshot();
-    });
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJldmlld05ld3NsZXR0ZXJQdWZmLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvX190ZXN0c19fL1ByZXZpZXdOZXdzbGV0dGVyUHVmZi50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2hELE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFakUsTUFBTSxlQUFlLEdBQUcsR0FBRyxFQUFFLENBQzNCLE1BQU0sQ0FDSixvQkFBQyxxQkFBcUIsb0JBQ2hCO0lBQ0YsSUFBSSxFQUFFLFNBQVM7SUFFZixLQUFLLEVBQUUsd0JBQXdCO0lBQy9CLFFBQVEsRUFBRSxzQkFBc0I7SUFDaEMsSUFBSSxFQUNGLDhIQUE4SDtJQUNoSSxRQUFRLEVBQ04sMEdBQTBHO0NBQzdHLEVBQ0QsQ0FDSCxDQUFDO0FBRUosUUFBUSxDQUFDLHlCQUF5QixFQUFFLEdBQUcsRUFBRTtJQUN2QyxFQUFFLENBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRTtRQUNqQixNQUFNLFNBQVMsR0FBRyxlQUFlLEVBQUUsQ0FBQztRQUNwQyxNQUFNLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ2xELENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/src/components/newsletter-puff/PreviewNewsletterPuff.tsx

@@ -1,40 +0,0 @@
-import {
-  InpContainer,
-  InpCopy,
-  InpImageContainer,
-  InpSignupContainer,
-  InpSignupCTAContainer,
-  InpSignupHeadline,
-  InpSignupLabel
-} from './styles';
-import Image from '@times-components/image';
-import { NewsletterPuffButton } from './NewsletterPuffButton';
-import React from 'react';
-
-type PreviewNewsletterPuffProps = {
-  copy: string;
-  headline: string;
-  imageUri: string;
-  label?: string;
-};
-
-export const PreviewNewsletterPuff = ({
-  copy,
-  headline,
-  imageUri,
-  label
-}: PreviewNewsletterPuffProps) => (
-  <InpContainer>
-    <InpImageContainer>
-      <Image aspectRatio={1.42} uri={imageUri} />
-    </InpImageContainer>
-    <InpSignupContainer>
-      <InpSignupLabel>{label}</InpSignupLabel>
-      <InpSignupHeadline>{headline}</InpSignupHeadline>
-      <InpCopy>{copy}</InpCopy>
-      <InpSignupCTAContainer>
-        <NewsletterPuffButton />
-      </InpSignupCTAContainer>
-    </InpSignupContainer>
-  </InpContainer>
-);

package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffButton.test.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewsletterPuffButton renders the button with the text \`Saving...\` 1`] = `
-<body>
-  <div>
-    <button
-      style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 45px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-style: solid; border-width: 2px; elevation: 0; letter-spacing: 0.2px;"
-      type="button"
-    >
-      Saving…
-    </button>
-  </div>
-</body>
-`;
-
-exports[`NewsletterPuffButton renders the button with the text \`Sign up to newsletter\` 1`] = `
-<body>
-  <div>
-    <button
-      style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 45px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-style: solid; border-width: 2px; elevation: 0; letter-spacing: 0.2px;"
-      type="button"
-    >
-      Sign up now
-    </button>
-  </div>
-</body>
-`;

package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffLink.test.tsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewsletterPuffLink renders the link with the text \`Manage preferences here\` 1`] = `
-<body>
-  <div>
-    <a
-      class="link__RespLink-sc-1ocvixa-0 dfMuic"
-      href="https://home.thetimes.co.uk/myNews"
-    >
-      <div
-        class="sc-bdVaJa sc-jTzLTM kuRCjI"
-      >
-        <div
-          class="sc-bwzfXH sc-gqjmRU jvmtty"
-        >
-          Manage preferences here
-        </div>
-        <div
-          class="sc-bdVaJa sc-VigVT fqkICi"
-        >
-          <svg
-            aria-label="icon-forward-arrow"
-            height="12"
-            viewBox="42 12 60 120"
-            width="7"
-          >
-            <g
-              fill="#006699"
-            >
-              <path
-                d="M45.8,132L42,128.2,74.8,72,42,15.8,45.8,12,102,72Z"
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </a>
-  </div>
-</body>
-`;

package/src/components/newsletter-puff/__tests__/__snapshots__/PreviewNewsletterPuff.test.tsx.snap

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Preview Newsletter Puff renders 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-bdVaJa sc-htpNat bSdOkq"
-    >
-      <div
-        class="sc-bdVaJa sc-bxivhb fstdFq"
-      >
-        <div
-          class="tc-view__TcView-nuazoi-0 fPjBcr"
-        >
-          <div
-            style="padding-bottom: 70.42253521126761%;"
-          >
-            <img
-              class="responsive-sc-1nnon4d-0 iJeVQt"
-              src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
-            />
-            <div
-              class="tc-view__TcView-nuazoi-0 fPjBcr"
-              height="100%"
-              style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
-              width="100%"
-            >
-              <svg
-                height="auto"
-                style="max-width: 25%; max-height: 50%;"
-                version="1.1"
-                viewBox="145 50 108 120"
-                width="100%"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <path
-                    d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
-                    fill="#FFFFFF"
-                  />
-                </g>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="sc-bdVaJa sc-bZQynM dZCUeH"
-      >
-        <div
-          class="sc-bwzfXH sc-gzVnrw fwTOvg"
-        >
-          STRAIGHT IN YOUR INBOX
-        </div>
-        <div
-          class="sc-bwzfXH sc-htoDjs epVajn"
-        >
-          Politics. Explained.
-        </div>
-        <div
-          class="sc-bwzfXH sc-dnqmqq icKJfC"
-        >
-          Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
-        </div>
-        <div
-          class="sc-bdVaJa sc-iwsKbI beJMRD"
-        >
-          <button
-            style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 45px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-style: solid; border-width: 2px; elevation: 0; letter-spacing: 0.2px;"
-            type="button"
-          >
-            Sign up now
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;