@times-components/ts-components 1.53.0 → 1.54.1

package/src/components/newsletter-puff/{__tests__ → newsletter-puff-button/__tests__}/NewsletterPuffButton.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import mockDate from 'mockdate';
 import { NewsletterPuffButton } from '../NewsletterPuffButton';
-import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
+import { TrackingContextProvider } from '../../../../helpers/tracking/TrackingContextProvider';
 
 describe('NewsletterPuffButton', () => {
   beforeEach(() => {
@@ -21,26 +20,13 @@ describe('NewsletterPuffButton', () => {
 
     const component = render(
       <NewsletterPuffButton
+        style="button"
         updatingSubscription={false}
         onPress={mockedOnPress}
       />
     );
 
-    expect(component.baseElement).toMatchSnapshot();
-
-    fireEvent.click(component.getByText('Sign up now'));
-
-    expect(mockedOnPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders the button with the text `Saving...`', () => {
-    const mockedOnPress = jest.fn();
-
-    const component = render(
-      <NewsletterPuffButton updatingSubscription onPress={mockedOnPress} />
-    );
-
-    expect(component.baseElement).toMatchSnapshot();
+    expect(component.getByText('One click sign up'));
   });
 
   it('should track button viewed and clicked in analytics', () => {
@@ -52,13 +38,19 @@ describe('NewsletterPuffButton', () => {
         analyticsStream={mockedAnalyticsStream}
         context={{ component: 'ArticleSkeleton' }}
       >
-        <NewsletterPuffButton updatingSubscription={false} onPress={onPress} />
+        <NewsletterPuffButton
+          updatingSubscription={false}
+          onPress={onPress}
+          style="button"
+        />
       </TrackingContextProvider>
     );
 
-    fireEvent.click(component.getByText('Sign up now'));
+    const oneClickSignUp = component.getByText('One click sign up');
+
+    fireEvent.click(oneClickSignUp);
 
-    expect(onPress).toHaveBeenCalled();
+    expect(onPress).toHaveBeenCalledTimes(1);
 
     expect(mockedAnalyticsStream).toHaveBeenCalledWith({
       action: 'Clicked',

package/src/components/newsletter-puff/newsletter-puff-button/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+import { colours, fonts } from '@times-components/ts-styleguide';
+
+export const buttonStyles = {
+  alignItems: 'center',
+  backgroundColor: 'transparent',
+  borderColor: colours.functional.brandColour,
+  borderStyle: 'thin',
+  borderWidth: 1,
+  color: colours.functional.brandColour,
+  elevation: 0,
+  fontFamily: fonts.supporting,
+  height: 48,
+  justifyContent: 'center',
+  letterSpacing: 0.2,
+  width: '100%'
+};
+
+export const LinkButton = styled.button`
+  color: ${colours.functional.action};
+  font-family: ${fonts.body};
+  font-size: 18px;
+  text-align: left;
+  letter-spacing: -0.4px;
+  border: none;
+  background-color: white;
+`;

package/src/components/newsletter-puff/{NewsletterPuffLink.tsx → newsletter-puff-link/NewsletterPuffLink.tsx}

@@ -1,15 +1,9 @@
 import React from 'react';
 import Link from '@times-components/link';
-import { IconForwardArrow } from '@times-components/icons';
-import { colours } from '@times-components/ts-styleguide';
 
-import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
 
-import {
-  InpPreferencesView,
-  InpPreferencesText,
-  InpIconContainer
-} from './styles';
+import { InpPreferencesText } from '../styles';
 
 export const NewsletterPuffLink = ({ onPress }: any) => {
   return (
@@ -42,12 +36,9 @@ export const NewsletterPuffLink = ({ onPress }: any) => {
             url="https://home.thetimes.co.uk/myNews"
             onPress={() => handlePress()}
           >
-            <InpPreferencesView ref={intersectObserverRef}>
-              <InpPreferencesText>Manage preferences here</InpPreferencesText>
-              <InpIconContainer>
-                <IconForwardArrow fillColour={colours.functional.action} />
-              </InpIconContainer>
-            </InpPreferencesView>
+            <InpPreferencesText ref={intersectObserverRef}>
+              Manage preferences here
+            </InpPreferencesText>
           </Link>
         );
       }}

package/src/components/newsletter-puff/{__tests__ → newsletter-puff-link/__tests__}/NewsletterPuffLink.test.tsx

@@ -2,8 +2,8 @@ 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';
+import { TrackingContextProvider } from '../../../../helpers/tracking/TrackingContextProvider';
+import FakeIntersectionObserver from '../../../../test-utils/FakeIntersectionObserver';
 
 describe('NewsletterPuffLink', () => {
   let oldIntersectionObserver: typeof IntersectionObserver;
@@ -22,27 +22,11 @@ describe('NewsletterPuffLink', () => {
     cleanup();
   });
 
-  it('renders the link with the text `Manage preferences here`', () => {
-    const mockedOnPress = jest.fn();
-    const mockedAnalyticsStream = jest.fn();
-
-    const component = render(
-      <TrackingContextProvider
-        context={{ attrs: { context: 'value' } }}
-        analyticsStream={mockedAnalyticsStream}
-      >
-        <NewsletterPuffLink onPress={mockedOnPress} />
-      </TrackingContextProvider>
-    );
-
-    expect(component.baseElement).toMatchSnapshot();
-  });
-
   it('should track link viewed in analytics', () => {
     const mockedAnalyticsStream = jest.fn();
     const mockedOnPress = jest.fn();
 
-    render(
+    const component = render(
       <TrackingContextProvider
         context={{ attrs: { context: 'value' } }}
         analyticsStream={mockedAnalyticsStream}
@@ -52,6 +36,8 @@ describe('NewsletterPuffLink', () => {
     );
     FakeIntersectionObserver.intersect();
 
+    expect(component.getByText('Manage preferences here')!);
+
     expect(mockedAnalyticsStream).toHaveBeenCalledWith({
       object: 'NewsletterPuffLink',
       action: 'Scrolled',

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

@@ -0,0 +1,38 @@
+import { InpContainer } from '../styles';
+
+import {
+  InpCopy,
+  InpSignupContainer,
+  InpSignupHeadline,
+  InpSignupCTAContainer
+} from '../newsletter/styles';
+
+import { NewsletterPuffButton } from '../newsletter-puff-button/NewsletterPuffButton';
+import React from 'react';
+
+type PreviewNewsletterPuffProps = {
+  copy: string;
+  headline: string;
+  section: string;
+};
+
+export const PreviewNewsletterPuff = ({
+  copy,
+  headline,
+  section
+}: PreviewNewsletterPuffProps) => (
+  <InpContainer section={section}>
+    <InpSignupContainer>
+      <InpCopy>
+        <InpSignupHeadline>{headline}: </InpSignupHeadline>
+        {copy}
+        <InpSignupCTAContainer childStyle="link">
+          <NewsletterPuffButton style="link" />
+        </InpSignupCTAContainer>
+      </InpCopy>
+      <InpSignupCTAContainer childStyle="button">
+        <NewsletterPuffButton style="button" />
+      </InpSignupCTAContainer>
+    </InpSignupContainer>
+  </InpContainer>
+);

package/src/components/newsletter-puff/{__tests__ → preview-newsletter-puff/__tests__}/PreviewNewsletterPuff.test.tsx

@@ -10,13 +10,10 @@ const renderComponent = () =>
     <PreviewNewsletterPuff
       {...{
         code: 'TNL-119',
-
-        label: 'STRAIGHT IN YOUR INBOX',
+        section: 'news',
         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'
+          'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.'
       }}
     />
   );

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

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preview Newsletter Puff renders 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa sc-htpNat ljXtVU"
+    >
+      <div
+        class="sc-bdVaJa sc-EHOje hmOAGx"
+      >
+        <div
+          class="sc-bwzfXH sc-gzVnrw keqsZo"
+        >
+          <div
+            class="sc-bwzfXH sc-bZQynM khoGuQ"
+          >
+            Politics. Explained.
+            : 
+          </div>
+          Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
+          <div
+            class="sc-bdVaJa sc-htoDjs lnzLgr"
+          >
+            <button
+              class="sc-iwsKbI gJJUIY"
+            >
+              One click sign up
+            </button>
+          </div>
+        </div>
+        <div
+          class="sc-bdVaJa sc-htoDjs fqXCoz"
+        >
+          <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: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
+            type="button"
+          >
+            One click sign up
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/src/components/newsletter-puff/styles.ts

@@ -4,13 +4,11 @@ import {
   breakpoints,
   colours,
   fonts,
-  fontSizes,
   spacing
 } from '@times-components/ts-styleguide';
 
-const View = styled.div`
+export const View = styled.div`
   align-items: stretch;
-  border: 0 solid black;
   box-sizing: border-box;
   display: flex;
   flex-basis: auto;
@@ -24,7 +22,7 @@ const View = styled.div`
   z-index: 0;
 `;
 
-const Text = styled.div`
+export const Text = styled.div`
   border: 0 solid black;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 1);
@@ -37,8 +35,9 @@ const Text = styled.div`
   word-wrap: break-word;
 `;
 
-export const InpContainer = styled(View)`
-  background-color: ${colours.functional.newsletterPuffBackground};
+export const InpContainer = styled(View)<{ section?: string }>`
+  border-top: 2px solid
+    ${({ section }) => (section ? colours.section[section] : 'black')};
   display: flex;
   flex-direction: column;
   margin-right: ${spacing(2)};
@@ -46,7 +45,6 @@ export const InpContainer = styled(View)`
   margin-left: ${spacing(2)};
 
   @media (min-width: ${breakpoints.medium}px) {
-    flex-direction: row;
     margin: 0 auto ${spacing(4)};
     width: 80.8%;
   }
@@ -55,107 +53,11 @@ export const InpContainer = styled(View)`
   }
 `;
 
-export const InpImageContainer = styled(View)`
-  @media (min-width: ${breakpoints.medium}px) {
-    width: 45%;
-  }
-`;
-
-export const InpSubscribedContainer = styled(View)`
-  justify-content: center;
-  padding: ${spacing(9)}px ${spacing(8)}px;
-  @media (min-width: ${breakpoints.small}px) {
-    padding: ${spacing(0)} ${spacing(1)};
-    flex: 1;
-  }
-`;
-
-export const InpSubscribedHeadline = styled(Text)`
-  color: ${colours.functional.brandColour};
-  font-family: ${fonts.headline};
-  text-align: center;
-  font-size: ${fontSizes.newsletterPuffHeadline}px;
-  text-decoration: none;
-  margin-bottom: ${spacing(2)};
-`;
-
-export const InpSignupContainer = styled(View)`
-  justify-content: center;
-  padding: ${spacing(4)}px;
-  @media (min-width: ${breakpoints.small}px) {
-    padding: ${spacing(0)} ${spacing(4)};
-    flex: 1;
-  }
-`;
-
-export const InpSignupLabel = styled(Text)`
-  font-family: ${fonts.supporting};
-  font-size: ${fontSizes.newsletterPuffLabel}px;
-  letter-spacing: 1px;
-  color: ${colours.functional.brandColour};
-  text-align: center;
-  text-transform: uppercase;
-  margin-bottom: ${spacing(1)};
-`;
-
-export const InpSignupHeadline = styled(Text)`
-  color: ${colours.functional.brandColour};
-  font-family: ${fonts.headline};
-  text-align: center;
-  font-size: ${fontSizes.newsletterPuffHeadline}px;
-  text-decoration: none;
-  margin-bottom: ${spacing(1)};
-`;
-
-export const InpCopy = styled(Text)`
-  font-family: ${fonts.body};
-  font-size: ${fontSizes.newsletterPuffCopy}px;
-  text-align: center;
-  color: ${colours.functional.primary};
-  margin-bottom: ${spacing(3)};
-`;
-
-export const InpSignupCTAContainer = styled(View)`
-  @media (min-width: ${breakpoints.medium}px) {
-    width: 220px;
-    margin: 0px auto;
-  }
-`;
-
-export const InpPreferencesContainer = styled(View)`
-  flex-direction: row;
-  justify-content: center;
-`;
-
 export const InpPreferencesText = styled(Text)`
   color: ${colours.functional.action};
+  font-family: ${fonts.body};
+  font-size: 18px;
+  text-align: left;
+  letter-spacing: -0.4px;
+  margin-bottom: ${spacing(3)};
 `;
-
-export const InpIconContainer = styled(View)`
-  padding-left: 8px;
-  margin: auto;
-`;
-
-export const InpPreferencesView = styled(View)`
-  display: flex;
-  flex-direction: row;
-`;
-
-export const buttonStyles = {
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  borderColor: colours.functional.brandColour,
-  borderStyle: 'solid',
-  borderWidth: 2,
-  color: colours.functional.brandColour,
-  elevation: 0,
-  fontFamily: fonts.supporting,
-  height: 45,
-  justifyContent: 'center',
-  letterSpacing: 0.2,
-  width: '100%'
-};
-
-export const textStyle = {
-  color: colours.functional.brandColour
-};

package/src/helpers/text-formatting/CapitaliseFirstCharacter.ts

@@ -0,0 +1,9 @@
+export const capitaliseFirstCharacter = (stringToCapitalise?: string) => {
+  if (!stringToCapitalise) {
+    return;
+  }
+
+  const firstCharacter = stringToCapitalise.charAt(0);
+  const restOfString = stringToCapitalise.split(firstCharacter);
+  return `${firstCharacter.toUpperCase()}${restOfString[1]}`;
+};

package/src/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.tsx

@@ -0,0 +1,13 @@
+import { capitaliseFirstCharacter } from '../CapitaliseFirstCharacter';
+
+describe('capitaliseFirstCharacter()', () => {
+  it('capitalizes the first character of a string', async () => {
+    const copy = capitaliseFirstCharacter('sport');
+    expect(copy).toBe('Sport');
+  });
+
+  it('returns early when a string is not passed as a parameter', async () => {
+    const copy = capitaliseFirstCharacter();
+    expect(copy).toBe(undefined);
+  });
+});

package/src/index.ts

@@ -30,7 +30,7 @@ export {
 } from './components/newsletter-puff/InlineNewsletterPuff';
 export {
   PreviewNewsletterPuff
-} from './components/newsletter-puff/PreviewNewsletterPuff';
+} from './components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff';
 
 // Sport Components
 export {

package/dist/components/newsletter-puff/NewsletterPuffButton.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import Button from '@times-components/button';
-import { buttonStyles, textStyle } from './styles';
-import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
-export const NewsletterPuffButton = ({ updatingSubscription = false, onPress }) => {
-    const { fireAnalyticsEvent } = useTrackingContext();
-    const handlePress = () => {
-        if (!updatingSubscription) {
-            onPress && onPress();
-            fireAnalyticsEvent &&
-                fireAnalyticsEvent({
-                    action: 'Clicked',
-                    object: 'NewsletterPuffButton',
-                    attrs: {
-                        event_navigation_name: 'widget : puff : sign up now',
-                        event_navigation_browsing_method: 'click',
-                        event_navigation_action: 'navigation'
-                    }
-                });
-        }
-    };
-    return (React.createElement(Button, { title: updatingSubscription ? 'Saving…' : 'Sign up now', onPress: () => handlePress(), style: buttonStyles, underlayColor: "transparent", textStyle: textStyle }));
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZCdXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvTmV3c2xldHRlclB1ZmZCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLE1BQU0sTUFBTSwwQkFBMEIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNuRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQU9wRixNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxDQUFDLEVBQ25DLG9CQUFvQixHQUFHLEtBQUssRUFDNUIsT0FBTyxFQUNhLEVBQUUsRUFBRTtJQUN4QixNQUFNLEVBQUUsa0JBQWtCLEVBQUUsR0FBRyxrQkFBa0IsRUFBRSxDQUFDO0lBQ3BELE1BQU0sV0FBVyxHQUFHLEdBQUcsRUFBRTtRQUN2QixJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDekIsT0FBTyxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ3JCLGtCQUFrQjtnQkFDaEIsa0JBQWtCLENBQUM7b0JBQ2pCLE1BQU0sRUFBRSxTQUFTO29CQUNqQixNQUFNLEVBQUUsc0JBQXNCO29CQUM5QixLQUFLLEVBQUU7d0JBQ0wscUJBQXFCLEVBQUUsNkJBQTZCO3dCQUNwRCxnQ0FBZ0MsRUFBRSxPQUFPO3dCQUN6Qyx1QkFBdUIsRUFBRSxZQUFZO3FCQUN0QztpQkFDRixDQUFDLENBQUM7U0FDTjtJQUNILENBQUMsQ0FBQztJQUNGLE9BQU8sQ0FDTCxvQkFBQyxNQUFNLElBQ0wsS0FBSyxFQUFFLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLGFBQWEsRUFDdkQsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLFdBQVcsRUFBRSxFQUM1QixLQUFLLEVBQUUsWUFBWSxFQUNuQixhQUFhLEVBQUMsYUFBYSxFQUMzQixTQUFTLEVBQUUsU0FBUyxHQUNwQixDQUNILENBQUM7QUFDSixDQUFDLENBQUMifQ==

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import Link from '@times-components/link';
-import { IconForwardArrow } from '@times-components/icons';
-import { colours } from '@times-components/ts-styleguide';
-import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
-import { InpPreferencesView, InpPreferencesText, InpIconContainer } from './styles';
-export const NewsletterPuffLink = ({ onPress }) => {
-    return (React.createElement(TrackingContextProvider, { scrolledEvent: {
-            object: 'NewsletterPuffLink',
-            attrs: {
-                event_navigation_name: 'widget : puff : manage preferences here : displayed',
-                event_navigation_browsing_method: 'automated'
-            }
-        } }, ({ fireAnalyticsEvent, intersectObserverRef }) => {
-        const handlePress = () => {
-            onPress && onPress();
-            fireAnalyticsEvent &&
-                fireAnalyticsEvent({
-                    action: 'Clicked',
-                    object: 'NewsletterPuffLink',
-                    attrs: {
-                        event_navigation_name: 'widget : puff : manage preferences here',
-                        event_navigation_browsing_method: 'click'
-                    }
-                });
-        };
-        return (React.createElement(Link, { url: "https://home.thetimes.co.uk/myNews", onPress: () => handlePress() },
-            React.createElement(InpPreferencesView, { ref: intersectObserverRef },
-                React.createElement(InpPreferencesText, null, "Manage preferences here"),
-                React.createElement(InpIconContainer, null,
-                    React.createElement(IconForwardArrow, { fillColour: colours.functional.action })))));
-    }));
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZMaW5rLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3c2xldHRlci1wdWZmL05ld3NsZXR0ZXJQdWZmTGluay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sSUFBSSxNQUFNLHdCQUF3QixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUxRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUV6RixPQUFPLEVBQ0wsa0JBQWtCLEVBQ2xCLGtCQUFrQixFQUNsQixnQkFBZ0IsRUFDakIsTUFBTSxVQUFVLENBQUM7QUFFbEIsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxFQUFFLE9BQU8sRUFBTyxFQUFFLEVBQUU7SUFDckQsT0FBTyxDQUNMLG9CQUFDLHVCQUF1QixJQUN0QixhQUFhLEVBQUU7WUFDYixNQUFNLEVBQUUsb0JBQW9CO1lBQzVCLEtBQUssRUFBRTtnQkFDTCxxQkFBcUIsRUFDbkIscURBQXFEO2dCQUN2RCxnQ0FBZ0MsRUFBRSxXQUFXO2FBQzlDO1NBQ0YsSUFFQSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsb0JBQW9CLEVBQUUsRUFBRSxFQUFFO1FBQ2hELE1BQU0sV0FBVyxHQUFHLEdBQUcsRUFBRTtZQUN2QixPQUFPLElBQUksT0FBTyxFQUFFLENBQUM7WUFDckIsa0JBQWtCO2dCQUNoQixrQkFBa0IsQ0FBQztvQkFDakIsTUFBTSxFQUFFLFNBQVM7b0JBQ2pCLE1BQU0sRUFBRSxvQkFBb0I7b0JBQzVCLEtBQUssRUFBRTt3QkFDTCxxQkFBcUIsRUFDbkIseUNBQXlDO3dCQUMzQyxnQ0FBZ0MsRUFBRSxPQUFPO3FCQUMxQztpQkFDRixDQUFDLENBQUM7UUFDUCxDQUFDLENBQUM7UUFDRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUNILEdBQUcsRUFBQyxvQ0FBb0MsRUFDeEMsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLFdBQVcsRUFBRTtZQUU1QixvQkFBQyxrQkFBa0IsSUFBQyxHQUFHLEVBQUUsb0JBQW9CO2dCQUMzQyxvQkFBQyxrQkFBa0Isa0NBQTZDO2dCQUNoRSxvQkFBQyxnQkFBZ0I7b0JBQ2Ysb0JBQUMsZ0JBQWdCLElBQUMsVUFBVSxFQUFFLE9BQU8sQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFJLENBQzFDLENBQ0EsQ0FDaEIsQ0FDUixDQUFDO0lBQ0osQ0FBQyxDQUN1QixDQUMzQixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/components/newsletter-puff/PreviewNewsletterPuff.d.ts

@@ -1,8 +0,0 @@
-declare type PreviewNewsletterPuffProps = {
-    copy: string;
-    headline: string;
-    imageUri: string;
-    label?: string;
-};
-export declare const PreviewNewsletterPuff: ({ copy, headline, imageUri, label }: PreviewNewsletterPuffProps) => JSX.Element;
-export {};

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

@@ -1,14 +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';
-export const PreviewNewsletterPuff = ({ copy, headline, imageUri, label }) => (React.createElement(InpContainer, null,
-    React.createElement(InpImageContainer, null,
-        React.createElement(Image, { aspectRatio: 1.42, uri: imageUri })),
-    React.createElement(InpSignupContainer, null,
-        React.createElement(InpSignupLabel, null, label),
-        React.createElement(InpSignupHeadline, null, headline),
-        React.createElement(InpCopy, null, copy),
-        React.createElement(InpSignupCTAContainer, null,
-            React.createElement(NewsletterPuffButton, null)))));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJldmlld05ld3NsZXR0ZXJQdWZmLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3c2xldHRlci1wdWZmL1ByZXZpZXdOZXdzbGV0dGVyUHVmZi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFlBQVksRUFDWixPQUFPLEVBQ1AsaUJBQWlCLEVBQ2pCLGtCQUFrQixFQUNsQixxQkFBcUIsRUFDckIsaUJBQWlCLEVBQ2pCLGNBQWMsRUFDZixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLEtBQUssTUFBTSx5QkFBeUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM5RCxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFTMUIsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsQ0FBQyxFQUNwQyxJQUFJLEVBQ0osUUFBUSxFQUNSLFFBQVEsRUFDUixLQUFLLEVBQ3NCLEVBQUUsRUFBRSxDQUFDLENBQ2hDLG9CQUFDLFlBQVk7SUFDWCxvQkFBQyxpQkFBaUI7UUFDaEIsb0JBQUMsS0FBSyxJQUFDLFdBQVcsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsR0FBSSxDQUN6QjtJQUNwQixvQkFBQyxrQkFBa0I7UUFDakIsb0JBQUMsY0FBYyxRQUFFLEtBQUssQ0FBa0I7UUFDeEMsb0JBQUMsaUJBQWlCLFFBQUUsUUFBUSxDQUFxQjtRQUNqRCxvQkFBQyxPQUFPLFFBQUUsSUFBSSxDQUFXO1FBQ3pCLG9CQUFDLHFCQUFxQjtZQUNwQixvQkFBQyxvQkFBb0IsT0FBRyxDQUNGLENBQ0wsQ0FDUixDQUNoQixDQUFDIn0=

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
-import mockDate from 'mockdate';
-import { NewsletterPuffButton } from '../NewsletterPuffButton';
-import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
-describe('NewsletterPuffButton', () => {
-    beforeEach(() => {
-        mockDate.set(1620000000000);
-    });
-    afterEach(() => {
-        mockDate.reset();
-        jest.clearAllMocks();
-        cleanup();
-    });
-    it('renders the button with the text `Sign up to newsletter`', () => {
-        const mockedOnPress = jest.fn();
-        const component = render(React.createElement(NewsletterPuffButton, { updatingSubscription: false, onPress: mockedOnPress }));
-        expect(component.baseElement).toMatchSnapshot();
-        fireEvent.click(component.getByText('Sign up now'));
-        expect(mockedOnPress).toHaveBeenCalledTimes(1);
-    });
-    it('renders the button with the text `Saving...`', () => {
-        const mockedOnPress = jest.fn();
-        const component = render(React.createElement(NewsletterPuffButton, { updatingSubscription: true, onPress: mockedOnPress }));
-        expect(component.baseElement).toMatchSnapshot();
-    });
-    it('should track button viewed and clicked in analytics', () => {
-        const mockedAnalyticsStream = jest.fn();
-        const onPress = jest.fn();
-        const component = render(React.createElement(TrackingContextProvider, { analyticsStream: mockedAnalyticsStream, context: { component: 'ArticleSkeleton' } },
-            React.createElement(NewsletterPuffButton, { updatingSubscription: false, onPress: onPress })));
-        fireEvent.click(component.getByText('Sign up now'));
-        expect(onPress).toHaveBeenCalled();
-        expect(mockedAnalyticsStream).toHaveBeenCalledWith({
-            action: 'Clicked',
-            component: 'ArticleSkeleton',
-            object: 'NewsletterPuffButton',
-            attrs: {
-                eventTime: '2021-05-03T00:00:00.000Z',
-                event_navigation_action: 'navigation',
-                event_navigation_browsing_method: 'click',
-                event_navigation_name: 'widget : puff : sign up now'
-            }
-        });
-    });
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZCdXR0b24udGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25ld3NsZXR0ZXItcHVmZi9fX3Rlc3RzX18vTmV3c2xldHRlclB1ZmZCdXR0b24udGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3BFLE9BQU8sUUFBUSxNQUFNLFVBQVUsQ0FBQztBQUNoQyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUU1RixRQUFRLENBQUMsc0JBQXNCLEVBQUUsR0FBRyxFQUFFO0lBQ3BDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzlCLENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDckIsT0FBTyxFQUFFLENBQUM7SUFDWixDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQywwREFBMEQsRUFBRSxHQUFHLEVBQUU7UUFDbEUsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBRWhDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FDdEIsb0JBQUMsb0JBQW9CLElBQ25CLG9CQUFvQixFQUFFLEtBQUssRUFDM0IsT0FBTyxFQUFFLGFBQWEsR0FDdEIsQ0FDSCxDQUFDO1FBRUYsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUVoRCxTQUFTLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVwRCxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakQsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsOENBQThDLEVBQUUsR0FBRyxFQUFFO1FBQ3RELE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUVoQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLG9CQUFvQixJQUFDLG9CQUFvQixRQUFDLE9BQU8sRUFBRSxhQUFhLEdBQUksQ0FDdEUsQ0FBQztRQUVGLE1BQU0sQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDbEQsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMscURBQXFELEVBQUUsR0FBRyxFQUFFO1FBQzdELE1BQU0scUJBQXFCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBQ3hDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUUxQixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLHVCQUF1QixJQUN0QixlQUFlLEVBQUUscUJBQXFCLEVBQ3RDLE9BQU8sRUFBRSxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRTtZQUV6QyxvQkFBQyxvQkFBb0IsSUFBQyxvQkFBb0IsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUMvQyxDQUMzQixDQUFDO1FBRUYsU0FBUyxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7UUFFcEQsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFFbkMsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUMsb0JBQW9CLENBQUM7WUFDakQsTUFBTSxFQUFFLFNBQVM7WUFDakIsU0FBUyxFQUFFLGlCQUFpQjtZQUM1QixNQUFNLEVBQUUsc0JBQXNCO1lBQzlCLEtBQUssRUFBRTtnQkFDTCxTQUFTLEVBQUUsMEJBQTBCO2dCQUNyQyx1QkFBdUIsRUFBRSxZQUFZO2dCQUNyQyxnQ0FBZ0MsRUFBRSxPQUFPO2dCQUN6QyxxQkFBcUIsRUFBRSw2QkFBNkI7YUFDckQ7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=