npm - @times-components/ts-components - Versions diffs - 1.64.2 → 1.65.0 - Mend

@times-components/ts-components 1.64.2 → 1.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/src/components/in-article-puff/styles.ts CHANGED Viewed

@@ -54,9 +54,8 @@ export const Label = styled.div<{ hasImage?: boolean; sectionColour: string }>`
   font-family: ${fonts.supporting};
   font-size: 12px;
-  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
 `;
 export const Headline = styled.h4<{ hasImage?: boolean }>`

package/src/components/in-article-related-articles/InArticleRelatedArticles.stories.tsx CHANGED Viewed

@@ -41,23 +41,9 @@ const article3 = {
     'https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ff1a0847a-c3ea-11eb-a26e-4c086490cfe1.jpg?crop=4418%2C2945%2C0%2C0&resize=685'
 };
-storiesOf('Typescript Component/In Article/Related Articles', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
-    <TrackingContextProvider
-      context={{
-        component: 'ArticleSkeleton',
-        attrs: {
-          article_name: 'articleHeadline',
-          section_details: 'section'
-        }
-      }}
-      analyticsStream={analyticsStream}
-    >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
-    </TrackingContextProvider>
-  ))
-  .add('Related Articles', () => {
+storiesOf('Typescript Component/In Article/Related Articles', module).add(
+  'Related Articles',
+  () => {
     const numberOfArticles = select(
       'Number of Articles',
       { Three: 3, Two: 2, One: 1 },
@@ -66,13 +52,27 @@ storiesOf('Typescript Component/In Article/Related Articles', module)
     // @ts-ignore
     const sectionColor = select('Section', colours.section, '#636C17');
     return (
-      <InArticleRelatedArticles
-        sectionColour={sectionColor}
-        heading="Related Articles"
-        relatedArticles={[article1, article2, article3].filter(
-          ({}, index) => index < numberOfArticles
-        )}
-        showImages={boolean('Show Images', true)}
-      />
+      <TrackingContextProvider
+        context={{
+          component: 'ArticleSkeleton',
+          attrs: {
+            article_name: 'articleHeadline',
+            section_details: 'section'
+          }
+        }}
+        analyticsStream={analyticsStream}
+      >
+        <ArticleHarness>
+          <InArticleRelatedArticles
+            sectionColour={sectionColor}
+            heading="Related Articles"
+            relatedArticles={[article1, article2, article3].filter(
+              ({}, index) => index < numberOfArticles
+            )}
+            showImages={boolean('Show Images', true)}
+          />
+        </ArticleHarness>
+      </TrackingContextProvider>
     );
-  });
+  }
+);

package/src/components/in-article-related-articles/__tests__/__snapshots__/RelatedArticle.test.tsx.snap CHANGED Viewed

@@ -23,7 +23,7 @@ exports[`<RelatedArticle> renders 1`] = `
           </a>
         </div>
         <div
-          class="sc-bxivhb kUXZco"
+          class="sc-bxivhb hpRUtX"
         >
           VIDEO
         </div>
@@ -40,7 +40,7 @@ exports[`<RelatedArticle> renders 1`] = `
         href="https://www.thetimes.co.uk/article/china-yunnan-mobilises-as-herd-of-15-marauding-elephants-approaches-capital-qvgttzz2w"
       >
         <div
-          class="sc-EHOje cjnDfc"
+          class="sc-EHOje dHnNJM"
         >
           Read Full Story
         </div>

package/src/components/in-article-related-articles/__tests__/__snapshots__/SingleRelatedArticle.test.tsx.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`<SingleRelatedArticle> renders 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa cHawYV"
+      class="sc-bdVaJa jfCTOX"
     >
       <div
         class="sc-bwzfXH dFUiIq"
@@ -59,7 +59,7 @@ exports[`<SingleRelatedArticle> renders no image 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa cHawYV"
+      class="sc-bdVaJa jfCTOX"
     >
       <section>
         <a

package/src/components/in-article-timelines/Timelines.stories.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextP
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 storiesOf('Typescript Component/In Article/Timelines', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Timelines with Bullet Point', () => (
     <TrackingContextProvider
       context={{
         component: 'ArticleSkeleton',
@@ -18,16 +18,28 @@ storiesOf('Typescript Component/In Article/Timelines', module)
       }}
       analyticsStream={analyticsStream}
     >
-      <ArticleHarness>{storyFn()}</ArticleHarness>
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
+          <Timelines sectionColour="#008347" />
+        </FetchProvider>
+      </ArticleHarness>
     </TrackingContextProvider>
   ))
-  .add('Timelines with Bullet Point', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
-      <Timelines sectionColour="#008347" />
-    </FetchProvider>
-  ))
   .add('Timelines with Circular Image', () => (
-    <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
-      <Timelines sectionColour="#008347" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        attrs: {
+          article_name: 'articleHeadline',
+          section_details: 'section'
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <ArticleHarness>
+        <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
+          <Timelines sectionColour="#008347" />
+        </FetchProvider>
+      </ArticleHarness>
+    </TrackingContextProvider>
   ));

package/src/components/in-article-timelines/__tests__/__snapshots__/Timelines.test.tsx.snap CHANGED Viewed

@@ -9,7 +9,7 @@ exports[`Timelines click show all 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -38,7 +38,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -68,7 +68,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -98,7 +98,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -128,7 +128,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -158,7 +158,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -184,7 +184,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -214,7 +214,7 @@ exports[`Timelines click show all 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -237,7 +237,7 @@ exports[`Timelines click show all 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Collapse
       </button>
@@ -255,7 +255,7 @@ exports[`Timelines should render the bullet points component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -280,7 +280,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -306,7 +306,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -332,7 +332,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -358,7 +358,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -384,7 +384,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -410,7 +410,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -436,7 +436,7 @@ exports[`Timelines should render the bullet points component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -459,7 +459,7 @@ exports[`Timelines should render the bullet points component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Show all
       </button>
@@ -477,7 +477,7 @@ exports[`Timelines should render the circle images component 1`] = `
       class="sc-iwsKbI fMDvHO"
     >
       <div
-        class="sc-bwzfXH gzPkze"
+        class="sc-bwzfXH gePxOS"
       >
         Venezuelan Politics
       </div>
@@ -506,7 +506,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 9 June 2018
               </div>
@@ -536,7 +536,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 10 June 2018
               </div>
@@ -566,7 +566,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 11 June 2018
               </div>
@@ -596,7 +596,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 12 June 2018
               </div>
@@ -626,7 +626,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 13 June 2018
               </div>
@@ -652,7 +652,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 14 June 2018
               </div>
@@ -682,7 +682,7 @@ exports[`Timelines should render the circle images component 1`] = `
               class="sc-jTzLTM ctjnzC"
             >
               <div
-                class="sc-fjdhpX hMbKXG"
+                class="sc-fjdhpX kLAoaR"
               >
                 15 June 2018
               </div>
@@ -705,7 +705,7 @@ exports[`Timelines should render the circle images component 1`] = `
       class="sc-bZQynM iNwlGF"
     >
       <button
-        class="sc-htoDjs sc-gZMcBi cztRUZ"
+        class="sc-htoDjs sc-gZMcBi UMlcG"
       >
         Show all
       </button>

package/src/components/in-article-timelines/styles.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export const ContentContainer = styled.div`
 `;
 export const StyledShowAllButton = styled(ShowAllButton)`
-  font-size: 14px;
+  font-size: 13px;
   margin: 11px 0;
   padding: 12px 15px 10px;
 `;

package/src/components/inline-dialog/__tests__/__snapshots__/InlineDialog.test.tsx.snap CHANGED Viewed

@@ -15,7 +15,7 @@ exports[`<InlineDialog> should render the component 1`] = `
         class="sc-htpNat dBfnu"
       />
       <a
-        class="sc-bxivhb buzDgg"
+        class="sc-bxivhb cjyLTn"
         href="#"
       >
         Button

package/src/components/inline-dialog/styles.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export const Button = styled.a`
   width: 127px;
   height: 48px;
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;

package/src/components/inline-message/__tests__/__snapshots__/InlineMessage.test.tsx.snap CHANGED Viewed

@@ -27,12 +27,12 @@ exports[`<InlineMessage> should render the component 1`] = `
         class="sc-htpNat fMAJrN"
       >
         <div
-          class="sc-bxivhb dnEdgn"
+          class="sc-bxivhb eweiWX"
         >
           Title
         </div>
         <div
-          class="sc-ifAKCX kbJgci"
+          class="sc-ifAKCX jCXJed"
         />
       </div>
     </div>

package/src/components/inline-message/styles.ts CHANGED Viewed

@@ -45,7 +45,7 @@ export const ContentContainer = styled.div`
 export const Title = styled.div`
   font-family: ${fonts.supporting};
   font-weight: 700;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 16px;
   margin-bottom: 6px;
@@ -53,7 +53,7 @@ export const Title = styled.div`
 export const Description = styled.div`
   font-family: ${fonts.supporting};
   font-weight: 500;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
   & a {
     color: #333333;

package/src/components/latest-from-section/__tests__/__snapshots__/LatestFromSection.test.tsx.snap CHANGED Viewed

@@ -119,7 +119,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         >
                           <div
                             class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                            style="font-family: GillSansMTStd-Medium; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 1px; color: rgb(0, 131, 71);"
+                            style="font-family: Roboto-Regular; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
                           >
                             CYCLING | DAVID WALSH
                           </div>
@@ -134,7 +134,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         </div>
                         <div
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                          style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
+                          style="color: rgb(105, 105, 105); font-family: Roboto-Regular; font-size: 12px; line-height: 15px; margin-bottom: 5px;"
                         >
                           <time
                             datetime="2021-06-29T23:01:00Z"
@@ -146,7 +146,7 @@ exports[`<LatestFromSection> renders  1`] = `
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
                         >
                           <div
-                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
+                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 dNlbuS"
                           >
                             David Walsh
                           </div>
@@ -233,7 +233,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         >
                           <div
                             class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                            style="font-family: GillSansMTStd-Medium; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 1px; color: rgb(0, 131, 71);"
+                            style="font-family: Roboto-Regular; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
                           >
                             EURO 2020 | MATT LAWTON
                           </div>
@@ -248,7 +248,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         </div>
                         <div
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                          style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
+                          style="color: rgb(105, 105, 105); font-family: Roboto-Regular; font-size: 12px; line-height: 15px; margin-bottom: 5px;"
                         >
                           <time
                             datetime="2021-06-30T11:00:00Z"
@@ -260,7 +260,7 @@ exports[`<LatestFromSection> renders  1`] = `
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
                         >
                           <div
-                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
+                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 dNlbuS"
                           >
                             Matt Lawton
                           </div>
@@ -347,7 +347,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         >
                           <div
                             class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                            style="font-family: GillSansMTStd-Medium; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 1px; color: rgb(0, 131, 71);"
+                            style="font-family: Roboto-Regular; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
                           >
                             EURO 2020 | JONATHAN NORTHCROFT
                           </div>
@@ -362,7 +362,7 @@ exports[`<LatestFromSection> renders  1`] = `
                         </div>
                         <div
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
-                          style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
+                          style="color: rgb(105, 105, 105); font-family: Roboto-Regular; font-size: 12px; line-height: 15px; margin-bottom: 5px;"
                         >
                           <time
                             datetime="2021-06-29T23:01:00Z"
@@ -374,7 +374,7 @@ exports[`<LatestFromSection> renders  1`] = `
                           class="tc-text__TcText-sc-15igzev-0 lhcAkf"
                         >
                           <div
-                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
+                            class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 dNlbuS"
                           >
                             Jonathan Northcroft
                           </div>

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

@@ -50,7 +50,7 @@ exports[`Inline Newsletter Puff renders loading state state 1`] = `
           class="sc-htpNat sc-VigVT iWOUWL"
         >
           <button
-            class="sc-bdVaJa qlAqK"
+            class="sc-bdVaJa knKdEu"
           >
             Sign up with one click
           </button>
@@ -138,7 +138,7 @@ exports[`Inline Newsletter Puff renders signup state 1`] = `
           class="sc-htpNat sc-VigVT iWOUWL"
         >
           <button
-            class="sc-bdVaJa qlAqK"
+            class="sc-bdVaJa knKdEu"
           >
             Sign up with one click
           </button>
@@ -182,7 +182,7 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
           class="sc-htpNat sc-VigVT iWOUWL"
         >
           <button
-            class="sc-bdVaJa qlAqK"
+            class="sc-bdVaJa knKdEu"
           >
             Sign up with one click
           </button>

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

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { colours, fonts } from '@times-components/ts-styleguide';
 export const PuffButton = styled.button`
-  font-family: GillSansMTStd-Medium;
-  font-size: 16px;
+  font-family: ${fonts.supporting};
+  font-size: 15px;
   line-height: 0;
   align-items: center;
   background-color: transparent;
@@ -14,7 +14,7 @@ export const PuffButton = styled.button`
   height: 48px;
   justify-content: center;
   min-width: 100px;
-  padding-top: 4px;
+  padding-top: 2px;
   width: 100%;
   border-color: rgb(29, 29, 27);
   border-width: 1px;

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

@@ -33,7 +33,7 @@ exports[`Preview Newsletter Puff renders 1`] = `
           class="sc-bdVaJa sc-htoDjs fqXCoz"
         >
           <button
-            class="sc-iwsKbI beYQWx"
+            class="sc-iwsKbI bmNDTm"
           >
             Sign up with one click
           </button>