@times-components/ts-components 1.54.2 → 1.54.4

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

@@ -25,5 +25,5 @@ type AutoNewsletterPuffProps = {
   code: string;
   copy: string;
   headline: string;
-  section?: string;
+  section: string;
 };

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

@@ -4,18 +4,18 @@ import { Mutation } from 'react-apollo';
 import { GetNewsletter } from '@times-components/provider';
 import { subscribeNewsletter as subscribeNewsletterMutation } from '@times-components/provider-queries';
 import { Placeholder } from '@times-components/image';
+import { capitalise } from '@times-components/utils';
 
 import { Newsletter } from './newsletter/Newsletter';
 
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
-import { capitaliseFirstCharacter } from '../../helpers/text-formatting/CapitaliseFirstCharacter';
 
 import { InpContainer } from './styles';
 
 type InlineNewsletterPuffProps = {
   copy: string;
   headline: string;
-  section?: string;
+  section: string;
   code: string;
 };
 
@@ -78,7 +78,7 @@ export const InlineNewsletterPuff = ({
                 {({ intersectObserverRef }) => (
                   <Newsletter
                     intersectObserverRef={intersectObserverRef}
-                    section={capitaliseFirstCharacter(section)}
+                    section={capitalise(section)}
                     justSubscribed={justSubscribed}
                     headline={headline}
                     updatingSubscription={updatingSubscription}

package/src/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.tsx

@@ -13,7 +13,8 @@ import {
 const defaultProps = {
   code: '123',
   copy: 'abc',
-  headline: 'headline'
+  headline: 'headline',
+  section: 'sport'
 };
 
 const mocks = [

package/src/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.tsx

@@ -97,13 +97,13 @@ describe('Inline Newsletter Puff', () => {
 
   it('renders signup state', async () => {
     const component = renderComponent();
-    await component.findAllByText('One click sign up');
+    await component.findAllByText('One-click sign-up');
     expect(component.baseElement).toMatchSnapshot();
   });
 
   it('renders loading state state', async () => {
     const component = renderComponent();
-    const oneClickSignUp = await component.findAllByText('One click sign up');
+    const oneClickSignUp = await component.findAllByText('One-click sign-up');
 
     fireEvent.click(oneClickSignUp[0]);
     expect(component.baseElement).toMatchSnapshot();
@@ -155,11 +155,11 @@ describe('Inline Newsletter Puff', () => {
       window.IntersectionObserver = oldIntersectionObserver;
     });
 
-    it('One click sign up : displayed', async () => {
+    it('One-click sign-up : displayed', async () => {
       const analyticsStream = jest.fn();
       const component = renderComponent(analyticsStream);
 
-      await component.findAllByText('One click sign up');
+      await component.findAllByText('One-click sign-up');
 
       FakeIntersectionObserver.intersect();
 

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

@@ -6,7 +6,7 @@ exports[`<AutoNewsletterPuff> display function always renders 1`] = `
   style="display: block;"
 >
   <div
-    class="sc-bwzfXH sc-bxivhb isparC"
+    class="sc-htpNat sc-ifAKCX kVAWuv"
     style="height: 257px;"
   >
     <div
@@ -45,7 +45,7 @@ exports[`<AutoNewsletterPuff> display function doesnt render without consent 1`]
   style="display: none;"
 >
   <div
-    class="sc-bwzfXH sc-bxivhb isparC"
+    class="sc-htpNat sc-ifAKCX kVAWuv"
     style="height: 257px;"
   >
     <div
@@ -84,7 +84,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 1 1`] = `
   style="display: block;"
 >
   <div
-    class="sc-bwzfXH sc-bxivhb isparC"
+    class="sc-htpNat sc-ifAKCX kVAWuv"
     style="height: 257px;"
   >
     <div
@@ -123,7 +123,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 2 1`] = `
   style="display: none;"
 >
   <div
-    class="sc-bwzfXH sc-bxivhb isparC"
+    class="sc-htpNat sc-ifAKCX kVAWuv"
     style="height: 257px;"
   >
     <div

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

@@ -4,56 +4,55 @@ exports[`Inline Newsletter Puff renders loading state state 1`] = `
 <body>
   <div>
     <div
-      class="sc-bwzfXH sc-bxivhb gBLWdB"
+      class="sc-htpNat sc-ifAKCX iWYiTB"
     >
       <div
-        class="sc-bwzfXH sc-EHOje jfKrZk"
+        class="sc-htpNat sc-bZQynM fcQclH"
       >
         <div
-          class="sc-bwzfXH sc-gzVnrw dolbke"
+          class="sc-htpNat sc-htoDjs bnLiNW"
         >
           <div
-            class="sc-bZQynM gfhMRw"
+            class="sc-gzVnrw TDlzj"
           />
           <div
-            class="sc-bZQynM gfhMRw"
+            class="sc-gzVnrw TDlzj"
           />
           <div
-            class="sc-bZQynM gfhMRw"
+            class="sc-gzVnrw TDlzj"
           />
         </div>
       </div>
       <div
-        class="sc-bwzfXH sc-dnqmqq dLVcgB"
+        class="sc-htpNat sc-iwsKbI cuimXU"
       >
         <div
-          class="sc-htpNat sc-gZMcBi kiYplO"
+          class="sc-bxivhb sc-gqjmRU imXojB"
         >
           <div
-            class="sc-htpNat sc-iwsKbI eLieBX"
+            class="sc-bxivhb sc-gZMcBi kRYdQT"
           >
             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-bwzfXH sc-gqjmRU hGzDOp"
+            class="sc-htpNat sc-VigVT cSaWjg"
           >
             <button
-              class="sc-bdVaJa bXCphr"
+              class="sc-bwzfXH gHDjoa"
             >
-              One click sign up
+              One-click sign-up
             </button>
           </div>
         </div>
         <div
-          class="sc-bwzfXH sc-gqjmRU hhmUDh"
+          class="sc-htpNat sc-VigVT iWOUWL"
         >
           <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"
+            class="sc-bdVaJa qlAqK"
           >
-            One click sign up
+            One-click sign-up
           </button>
         </div>
       </div>
@@ -72,7 +71,7 @@ exports[`Inline Newsletter Puff renders placeholder when loading 1`] = `
 <body>
   <div>
     <div
-      class="sc-bwzfXH sc-bxivhb isparC"
+      class="sc-htpNat sc-ifAKCX kVAWuv"
       style="height: 257px;"
     >
       <div
@@ -110,39 +109,38 @@ exports[`Inline Newsletter Puff renders signup state 1`] = `
 <body>
   <div>
     <div
-      class="sc-bwzfXH sc-bxivhb gBLWdB"
+      class="sc-htpNat sc-ifAKCX iWYiTB"
     >
       <div
-        class="sc-bwzfXH sc-dnqmqq dLVcgB"
+        class="sc-htpNat sc-iwsKbI cuimXU"
       >
         <div
-          class="sc-htpNat sc-gZMcBi kiYplO"
+          class="sc-bxivhb sc-gqjmRU imXojB"
         >
           <div
-            class="sc-htpNat sc-iwsKbI eLieBX"
+            class="sc-bxivhb sc-gZMcBi kRYdQT"
           >
             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-bwzfXH sc-gqjmRU hGzDOp"
+            class="sc-htpNat sc-VigVT cSaWjg"
           >
             <button
-              class="sc-bdVaJa bXCphr"
+              class="sc-bwzfXH gHDjoa"
             >
-              One click sign up
+              One-click sign-up
             </button>
           </div>
         </div>
         <div
-          class="sc-bwzfXH sc-gqjmRU hhmUDh"
+          class="sc-htpNat sc-VigVT iWOUWL"
         >
           <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"
+            class="sc-bdVaJa qlAqK"
           >
-            One click sign up
+            One-click sign-up
           </button>
         </div>
       </div>
@@ -155,39 +153,38 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
 <body>
   <div>
     <div
-      class="sc-bwzfXH sc-bxivhb gBLWdB"
+      class="sc-htpNat sc-ifAKCX iWYiTB"
     >
       <div
-        class="sc-bwzfXH sc-dnqmqq dLVcgB"
+        class="sc-htpNat sc-iwsKbI cuimXU"
       >
         <div
-          class="sc-htpNat sc-gZMcBi kiYplO"
+          class="sc-bxivhb sc-gqjmRU imXojB"
         >
           <div
-            class="sc-htpNat sc-iwsKbI eLieBX"
+            class="sc-bxivhb sc-gZMcBi kRYdQT"
           >
             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-bwzfXH sc-gqjmRU hGzDOp"
+            class="sc-htpNat sc-VigVT cSaWjg"
           >
             <button
-              class="sc-bdVaJa bXCphr"
+              class="sc-bwzfXH gHDjoa"
             >
-              One click sign up
+              One-click sign-up
             </button>
           </div>
         </div>
         <div
-          class="sc-bwzfXH sc-gqjmRU hhmUDh"
+          class="sc-htpNat sc-VigVT iWOUWL"
         >
           <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"
+            class="sc-bdVaJa qlAqK"
           >
-            One click sign up
+            One-click sign-up
           </button>
         </div>
       </div>

package/src/components/newsletter-puff/newsletter-puff-button/NewsletterPuffButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Button from '@times-components/button';
-import { buttonStyles, LinkButton } from './styles';
+import { PuffButton, PuffLinkButton } from './styles';
 import { useTrackingContext } from '../../../helpers/tracking/TrackingContextProvider';
 
 type NewsletterPuffProps = {
@@ -30,15 +29,11 @@ export const NewsletterPuffButton = ({
         });
     }
   };
+  const buttonText = 'One-click sign-up';
 
   return style === 'button' ? (
-    <Button
-      title="One click sign up"
-      onPress={() => handlePress()}
-      style={buttonStyles}
-      underlayColor="transparent"
-    />
+    <PuffButton onClick={() => handlePress()}>{buttonText}</PuffButton>
   ) : (
-    <LinkButton onClick={() => handlePress()}>One click sign up</LinkButton>
+    <PuffLinkButton onClick={() => handlePress()}>{buttonText}</PuffLinkButton>
   );
 };

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

@@ -26,7 +26,7 @@ describe('NewsletterPuffButton', () => {
       />
     );
 
-    expect(component.getByText('One click sign up'));
+    expect(component.getByText('One-click sign-up'));
   });
 
   it('should track button viewed and clicked in analytics', () => {
@@ -46,7 +46,7 @@ describe('NewsletterPuffButton', () => {
       </TrackingContextProvider>
     );
 
-    const oneClickSignUp = component.getByText('One click sign up');
+    const oneClickSignUp = component.getByText('One-click sign-up');
 
     fireEvent.click(oneClickSignUp);
 

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

@@ -2,22 +2,34 @@ 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 PuffButton = styled.button`
+  font-family: GillSansMTStd-Medium;
+  font-size: 16px;
+  line-height: 0;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 0px;
+  color: rgb(29, 29, 27);
+  cursor: pointer;
+  height: 48px;
+  justify-content: center;
+  min-width: 100px;
+  padding-top: 4px;
+  width: 100%;
+  border-color: rgb(29, 29, 27);
+  border-width: 1px;
+  letter-spacing: 0.2px;
 
-export const LinkButton = styled.button`
+  &:hover {
+    background-color: #e4e4e4;
+  }
+
+  &:active {
+    background-color: #cccccc;
+  }
+`;
+
+export const PuffLinkButton = styled.button`
   color: ${colours.functional.action};
   font-family: ${fonts.body};
   font-size: 18px;
@@ -25,4 +37,9 @@ export const LinkButton = styled.button`
   letter-spacing: -0.4px;
   border: none;
   background-color: white;
+  text-decoration-line: underline;
+
+  &:hover {
+    text-decoration-line: none;
+  }
 `;

package/src/components/newsletter-puff/newsletter-puff-link/NewsletterPuffLink.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from '@times-components/link';
+import { HoverIcon } from '@times-components/utils';
 
 import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
 
@@ -36,9 +37,11 @@ export const NewsletterPuffLink = ({ onPress }: any) => {
             url="https://home.thetimes.co.uk/myNews"
             onPress={() => handlePress()}
           >
-            <InpPreferencesText ref={intersectObserverRef}>
-              Manage preferences here
-            </InpPreferencesText>
+            <HoverIcon underline={true} colour="#006699">
+              <InpPreferencesText ref={intersectObserverRef}>
+                Explore our newsletters
+              </InpPreferencesText>
+            </HoverIcon>
           </Link>
         );
       }}

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

@@ -36,7 +36,7 @@ describe('NewsletterPuffLink', () => {
     );
     FakeIntersectionObserver.intersect();
 
-    expect(component.getByText('Manage preferences here')!);
+    expect(component.getByText('Explore our newsletters')!);
 
     expect(mockedAnalyticsStream).toHaveBeenCalledWith({
       object: 'NewsletterPuffLink',

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

@@ -23,9 +23,9 @@ exports[`Preview Newsletter Puff renders 1`] = `
             class="sc-bdVaJa sc-htoDjs lnzLgr"
           >
             <button
-              class="sc-iwsKbI gJJUIY"
+              class="sc-gZMcBi jWMqgP"
             >
-              One click sign up
+              One-click sign-up
             </button>
           </div>
         </div>
@@ -33,10 +33,9 @@ exports[`Preview Newsletter Puff renders 1`] = `
           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"
+            class="sc-iwsKbI beYQWx"
           >
-            One click sign up
+            One-click sign-up
           </button>
         </div>
       </div>

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

@@ -60,4 +60,8 @@ export const InpPreferencesText = styled(Text)`
   text-align: left;
   letter-spacing: -0.4px;
   margin-bottom: ${spacing(3)};
+
+  @media (min-width: ${breakpoints.wide}px) {
+    display: block;
+  }
 `;

package/src/types/externs.d.ts

@@ -134,6 +134,11 @@ declare module '@times-components/utils' {
     value: string | number
   ) => string;
 
+  export const HoverIcon: React.FC<{
+    colour?: string;
+    hoverColour?: string;
+    underline?: boolean;
+  }>;
   export const TcView: React.FC<{ style?: React.CSSProperties }>;
   export const TcText: React.FC<{ style?: React.CSSProperties }>;
   export const TcScrollView: React.FC<{ style?: React.CSSProperties }>;

package/dist/helpers/text-formatting/CapitaliseFirstCharacter.d.ts

@@ -1 +0,0 @@
-export declare const capitaliseFirstCharacter: (stringToCapitalise?: string | undefined) => string | undefined;

package/dist/helpers/text-formatting/CapitaliseFirstCharacter.js

@@ -1,9 +0,0 @@
-export const capitaliseFirstCharacter = (stringToCapitalise) => {
-    if (!stringToCapitalise) {
-        return;
-    }
-    const firstCharacter = stringToCapitalise.charAt(0);
-    const restOfString = stringToCapitalise.split(firstCharacter);
-    return `${firstCharacter.toUpperCase()}${restOfString[1]}`;
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FwaXRhbGlzZUZpcnN0Q2hhcmFjdGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2hlbHBlcnMvdGV4dC1mb3JtYXR0aW5nL0NhcGl0YWxpc2VGaXJzdENoYXJhY3Rlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxDQUFDLGtCQUEyQixFQUFFLEVBQUU7SUFDdEUsSUFBSSxDQUFDLGtCQUFrQixFQUFFO1FBQ3ZCLE9BQU87S0FDUjtJQUVELE1BQU0sY0FBYyxHQUFHLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNwRCxNQUFNLFlBQVksR0FBRyxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDOUQsT0FBTyxHQUFHLGNBQWMsQ0FBQyxXQUFXLEVBQUUsR0FBRyxZQUFZLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztBQUM3RCxDQUFDLENBQUMifQ==

package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.d.ts

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

package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.js

@@ -1,12 +0,0 @@
-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);
-    });
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FwaXRhbGlzZUZpcnN0Q2hhcmFjdGVyLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvaGVscGVycy90ZXh0LWZvcm1hdHRpbmcvX190ZXN0c19fL0NhcGl0YWxpc2VGaXJzdENoYXJhY3Rlci50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV2RSxRQUFRLENBQUMsNEJBQTRCLEVBQUUsR0FBRyxFQUFFO0lBQzFDLEVBQUUsQ0FBQyw2Q0FBNkMsRUFBRSxLQUFLLElBQUksRUFBRTtRQUMzRCxNQUFNLElBQUksR0FBRyx3QkFBd0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUMvQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdCLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDBEQUEwRCxFQUFFLEtBQUssSUFBSSxFQUFFO1FBQ3hFLE1BQU0sSUFBSSxHQUFHLHdCQUF3QixFQUFFLENBQUM7UUFDeEMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUMvQixDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=

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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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);
-  });
-});