@times-components/ts-components 1.91.0 → 1.91.1-alpha.2

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

@@ -26,6 +26,7 @@ export const InlineNewsletterPuff = ({
   section
 }: InlineNewsletterPuffProps) => {
   const [justSubscribed, setJustSubscribed] = useState(false);
+  const [justSubscribedError, setJustSubscribedError] = useState(false);
 
   return (
     <GetNewsletter code={code} ssr={false} debounceTimeMs={0}>
@@ -52,6 +53,9 @@ export const InlineNewsletterPuff = ({
             onCompleted={({ subscribeNewsletter = {} }: any) => {
               setJustSubscribed(subscribeNewsletter.isSubscribed);
             }}
+            onError={() => {
+              setJustSubscribedError(true);
+            }}
           >
             {(
               subscribeNewsletter: any,
@@ -80,6 +84,7 @@ export const InlineNewsletterPuff = ({
                     intersectObserverRef={intersectObserverRef}
                     section={capitalise(section)}
                     justSubscribed={justSubscribed}
+                    justSubscribedError={justSubscribedError}
                     headline={headline}
                     updatingSubscription={updatingSubscription}
                     copy={copy}

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

@@ -19,6 +19,7 @@ type NewsletterProps = {
   intersectObserverRef: (ref: HTMLElement | null) => void;
   section?: string;
   justSubscribed: boolean;
+  justSubscribedError: boolean;
   headline: string;
   updatingSubscription: boolean;
   copy: string;
@@ -30,6 +31,7 @@ export const Newsletter = ({
   intersectObserverRef,
   section,
   justSubscribed,
+  justSubscribedError,
   headline,
   updatingSubscription,
   copy,
@@ -54,7 +56,7 @@ export const Newsletter = ({
     <React.Fragment>
       <InpContainer section={section}>
         {updatingSubscription && <LoadingOverlay />}
-        {justSubscribed ? (
+        {justSubscribed && (
           <InpSubscribedContainer>
             <InpCopy>
               You've succesfully signed up to{' '}
@@ -63,16 +65,26 @@ export const Newsletter = ({
             </InpCopy>
             <InpPreferencesContainer />
           </InpSubscribedContainer>
-        ) : (
-          <InpSignupContainer>
+        )}
+        {justSubscribedError && (
+          <InpSubscribedContainer>
             <InpCopy>
-              <InpSignupHeadline>{headline} </InpSignupHeadline>
-              {`${copy} `}
-              {PuffButton('link')}
+              An error occurred! Please sign up using - <NewsletterPuffLink />
             </InpCopy>
-            {PuffButton('button')}
-          </InpSignupContainer>
+            <InpPreferencesContainer />
+          </InpSubscribedContainer>
         )}
+        {!justSubscribed &&
+          !justSubscribedError && (
+            <InpSignupContainer>
+              <InpCopy>
+                <InpSignupHeadline>{headline} </InpSignupHeadline>
+                {`${copy} `}
+                {PuffButton('link')}
+              </InpCopy>
+              {PuffButton('button')}
+            </InpSignupContainer>
+          )}
       </InpContainer>
     </React.Fragment>
   );

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

@@ -72,7 +72,8 @@ export const OptaFootballFixturesTicker: React.FC<{
               show_crests: !isNationalComp,
               show_date: true,
               show_live: true,
-              date_format: 'ddd Do MMM'
+              date_format: 'ddd Do MMM',
+              fixture_width: 160
             }).outerHTML;
 
             initComponent();

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -17,7 +17,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   >
     <div>
       Widget
@@ -29,7 +29,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 exports[`OptaFootballFixturesTicker without flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -43,7 +43,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 1`] =
 exports[`OptaFootballFixturesTicker without flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   >
     <div>
       Widget
@@ -55,7 +55,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 2`] =
 exports[`OptaFootballFixturesTicker without flags should render correctly with fixturesPageUrl 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -69,7 +69,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
 exports[`OptaFootballFixturesTicker without flags should render correctly with fixturesPageUrl 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ejNhWM"
+    class="sc-htpNat sc-ifAKCX kbwAVa"
   >
     <div>
       Widget
@@ -81,7 +81,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
 exports[`OptaFootballFixturesTicker without flags should render correctly with isApp property 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX jYRHnt"
+    class="sc-htpNat sc-ifAKCX ftpdln"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -95,7 +95,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with i
 exports[`OptaFootballFixturesTicker without flags should render correctly with isApp property 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX jYRHnt"
+    class="sc-htpNat sc-ifAKCX ftpdln"
   >
     <div>
       Widget

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

@@ -51,55 +51,6 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     height: 80px !important;
   }
 
-  @media (max-width: ${breakpoints.small}px) {
-    .Opta-Scroll {
-      &::before,
-      &::after {
-        content: '';
-        pointer-events: none;
-        position: absolute;
-        z-index: 15;
-        transition: all 0.3s linear 0s;
-        background-image: linear-gradient(
-          -90deg,
-          rgba(255, 255, 255, 0) 0%,
-          rgb(255, 255, 255) 100%
-        );
-        width: 64px;
-        height: 100%;
-        bottom: 0px;
-        left: 0;
-        visibility: hidden;
-
-        ${({ isApp }) =>
-          isApp &&
-          `
-          @media (prefers-color-scheme: dark) {
-            background-image: linear-gradient(
-              -90deg,
-              rgba(0, 0, 0, 0) 0%,
-              rgb(0, 0, 0) 100%
-            );
-          }
-        `};
-      }
-      &::after {
-        left: unset;
-        right: 0px;
-        transform: rotate(180deg);
-      }
-    }
-    .Opta-Scroll:has(.Opta-Previous.Opta-Active) {
-      &::before {
-        visibility: visible;
-      }
-    }
-    .Opta-Scroll:has(.Opta-Next.Opta-Active) {
-      &::after {
-        visibility: visible;
-      }
-    }
-  }
   @media (max-width: ${breakpoints.small}px) {
     .Opta-Scroller {
       display: ${({ isApp }) => (isApp ? 'block' : 'none')} !important;
@@ -244,7 +195,6 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     border-radius: 4px;
     box-sizing: border-box;
     height: 80px;
-    width: 160px !important;
     margin-inline: 4px;
     display: flex;
     flex-direction: column;