@newskit-render/core 1.44.0 → 1.48.1

package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap

@@ -1,103 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Lead 1`] = `
+exports[`Lead should render Lead 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.emotion-1 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  -webkit-column-gap: 24px;
+  column-gap: 24px;
 }
 
-@media screen {
-  .emotion-1 {
-    margin: -40px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-1 {
-    margin: -40px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-1 {
-    margin: -32px 8px 0 8px;
+@media screen and (max-width: 767px) {
+  .emotion-0 {
+    row-gap: 40px;
   }
 }
 
-@media screen and (min-width: 1024px) {
-  .emotion-1 {
-    margin: -32px 12px 0 12px;
+@media screen and (min-width: 768px) and (max-width: 1439px) {
+  .emotion-0 {
+    row-gap: 32px;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-1 {
-    margin: -0px 12px 0 12px;
-  }
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-@media screen {
-  .emotion-2 {
-    padding: 0 8px;
-    margin-top: 40px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-2 {
-    margin-top: 32px;
+  .emotion-0 {
+    row-gap: 0;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-2 {
-    padding: 0 12px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-2 {
-    margin-top: 0;
-    -webkit-flex-basis: 66.66666666666667%;
-    -ms-flex-preferred-size: 66.66666666666667%;
-    flex-basis: 66.66666666666667%;
-    max-width: 66.66666666666667%;
+  .emotion-0 {
+    grid-template-columns: 2fr 1fr;
   }
 }
 
-.emotion-3 {
+.emotion-2 {
   box-sizing: border-box;
   overflow: hidden;
   color: #2E2E2E;
@@ -112,25 +47,25 @@ exports[`Lead 1`] = `
   flex-direction: column;
 }
 
-.emotion-4 {
+.emotion-3 {
   box-sizing: border-box;
   display: block;
   position: relative;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-4 {
+  .emotion-3 {
     margin-bottom: 20px;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-4 {
+  .emotion-3 {
     margin-bottom: 24px;
   }
 }
 
-.emotion-5 {
+.emotion-4 {
   position: relative;
   width: 100%;
   display: block;
@@ -140,7 +75,7 @@ exports[`Lead 1`] = `
   border-radius: 0;
 }
 
-.emotion-6 {
+.emotion-5 {
   opacity: 1;
   display: block;
   border-radius: inherit;
@@ -150,20 +85,32 @@ exports[`Lead 1`] = `
   animation: fadeIn 300ms;
 }
 
-.emotion-7 {
+.emotion-6 {
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-7 {
   box-sizing: border-box;
   padding: 0;
 }
 
-.emotion-8 a:not(.nk-card-link) {
+.emotion-7 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
 
+@media screen and (max-width: 767px) {
+  .emotion-8 {
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .emotion-8 {
+    margin-bottom: 24px;
+  }
+}
+
 .emotion-9 {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -223,27 +170,6 @@ exports[`Lead 1`] = `
 
 @media screen and (max-width: 767px) {
   .emotion-10 {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-10 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-11 {
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-11 svg {
-  fill: #0A0A0A;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-11 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 27px;
@@ -252,13 +178,13 @@ exports[`Lead 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-11::before {
+  .emotion-10::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-11::after {
+  .emotion-10::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -266,7 +192,7 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-11 {
+  .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 36px;
     line-height: 40.5px;
@@ -275,13 +201,13 @@ exports[`Lead 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-11::before {
+  .emotion-10::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-11::after {
+  .emotion-10::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -289,7 +215,7 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-11 {
+  .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 40px;
     line-height: 45px;
@@ -298,237 +224,272 @@ exports[`Lead 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-11::before {
+  .emotion-10::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-11::after {
+  .emotion-10::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
   }
 }
 
+.emotion-11 {
+  display: inline;
+  font: inherit;
+  margin: 0;
+  color: #2E2E2E;
+}
+
+.emotion-11:hover:not(:disabled) {
+  color: #2B4AAB;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-11:active:not(:disabled) {
+  color: #213A82;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-11:visited:not(:disabled) {
+  color: #5E44E4;
+}
+
 .emotion-12 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  display: grid;
+  height: 100%;
 }
 
-@media screen {
+@media screen and (max-width: 767px) {
   .emotion-12 {
-    padding: 0 8px;
-    margin-top: 40px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
+    row-gap: 40px;
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px) and (max-width: 1439px) {
   .emotion-12 {
-    margin-top: 32px;
+    row-gap: 32px;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1440px) {
   .emotion-12 {
-    padding: 0 12px;
+    row-gap: 24px;
   }
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 768px) {
   .emotion-12 {
-    margin-top: 0;
-    -webkit-flex-basis: 33.333333333333336%;
-    -ms-flex-preferred-size: 33.333333333333336%;
-    flex-basis: 33.333333333333336%;
-    max-width: 33.333333333333336%;
+    -webkit-column-gap: 20px;
+    column-gap: 20px;
   }
 }
 
-.emotion-14 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+@media screen and (max-width: 767px) {
+  .emotion-12 {
+    grid-template-columns: 1fr;
+  }
 }
 
-@media screen {
-  .emotion-14 {
-    margin: -40px -8px 0 -8px;
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .emotion-12 {
+    grid-template-columns: 1fr 1fr;
   }
 }
 
-@media screen and (min-width: 480px) {
-  .emotion-14 {
-    margin: -40px -8px 0 -8px;
+@media screen and (min-width: 1024px) {
+  .emotion-12 {
+    grid-template-columns: 1fr;
   }
 }
 
-@media screen and (min-width: 768px) {
-  .emotion-14 {
-    margin: -32px -8px 0 -8px;
+@media screen and (min-width: 1024px) {
+  .emotion-12 {
+    -webkit-box-pack: stretch;
+    -ms-flex-pack: stretch;
+    -webkit-justify-content: stretch;
+    justify-content: stretch;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-14 {
-    margin: -32px -12px 0 -12px;
+  .emotion-12 {
+    -webkit-align-content: space-between;
+    -ms-flex-line-pack: space-between;
+    align-content: space-between;
   }
 }
 
-@media screen and (min-width: 1440px) {
-  .emotion-14 {
-    margin: -24px -12px 0 -12px;
-  }
+.emotion-14 {
+  box-sizing: border-box;
+  overflow: hidden;
+  color: #2E2E2E;
+  background-color: #FFFFFF;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: rowfalse;
+  -ms-flex-direction: rowfalse;
+  flex-direction: rowfalse;
 }
 
 .emotion-15 {
   box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  display: block;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-@media screen {
+@media screen and (max-width: 479px) {
   .emotion-15 {
-    padding: 0 8px;
-    margin-top: 40px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
+    margin-right: 16px;
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 480px) and (max-width: 767px) {
   .emotion-15 {
-    margin-top: 32px;
-    -webkit-flex-basis: 50%;
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
+    margin-right: 16px;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 768px) and (max-width: 1023px) {
   .emotion-15 {
-    padding: 0 12px;
+    margin-right: 24px;
   }
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 1024px) {
   .emotion-15 {
-    margin-top: 24px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
+    margin-right: 24px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   box-sizing: border-box;
-  display: block;
-  position: relative;
-  margin-bottom: 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-23 {
-  margin-bottom: 16px;
+.emotion-19 {
+  box-sizing: border-box;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 0;
 }
 
-.emotion-24 {
-  margin: 0;
-  color: #0A0A0A;
+.emotion-19 a:not(.nk-card-link) {
+  z-index: 2;
+  position: relative;
 }
 
-.emotion-24 svg {
-  fill: #0A0A0A;
+.emotion-20 {
+  margin-bottom: 8px;
 }
 
-@media screen and (max-width: 767px) {
-  .emotion-24 {
+@media screen and (max-width: 479px) {
+  .emotion-22 {
     font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
+    font-size: 20px;
+    line-height: 22.5px;
     font-weight: 500;
     letter-spacing: 0;
     padding: 0.5px 0px;
   }
 
-  .emotion-24::before {
+  .emotion-22::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-24::after {
+  .emotion-22::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
   }
 }
 
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-24 {
+@media screen and (min-width: 480px) and (max-width: 767px) {
+  .emotion-22 {
     font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
+    font-size: 20px;
+    line-height: 22.5px;
     font-weight: 500;
     letter-spacing: 0;
     padding: 0.5px 0px;
   }
 
-  .emotion-24::before {
+  .emotion-22::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-24::after {
+  .emotion-22::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
   }
 }
 
-@media screen and (min-width: 1440px) {
-  .emotion-24 {
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .emotion-22 {
     font-family: "Bitter",serif;
-    font-size: 32px;
-    line-height: 36px;
+    font-size: 22px;
+    line-height: 24.75px;
     font-weight: 500;
     letter-spacing: 0;
     padding: 0.5px 0px;
   }
 
-  .emotion-24::before {
+  .emotion-22::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-24::after {
+  .emotion-22::after {
+    content: '';
+    margin-top: -0.2275em;
+    display: block;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .emotion-22 {
+    font-family: "Bitter",serif;
+    font-size: 28px;
+    line-height: 31.5px;
+    font-weight: 500;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
+  }
+
+  .emotion-22::before {
+    content: '';
+    margin-bottom: -0.2055em;
+    display: block;
+  }
+
+  .emotion-22::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -537,31 +498,31 @@ exports[`Lead 1`] = `
 
 <div
     class="emotion-0"
+    data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
   >
     <div
       class="emotion-1"
-      data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
+      data-testid="featureVerticalCell"
     >
       <div
         class="emotion-2"
-        data-testid="featureVerticalCell"
       >
         <div
           class="emotion-3"
         >
-          <div
+          <picture
             class="emotion-4"
           >
-            <picture
+            <img
+              alt=""
               class="emotion-5"
-            >
-              <img
-                alt=""
-                class="emotion-6"
-                src=""
-              />
-            </picture>
-          </div>
+              src=""
+            />
+          </picture>
+        </div>
+        <div
+          class="emotion-6"
+        >
           <div
             class="emotion-7"
           >
@@ -572,117 +533,115 @@ exports[`Lead 1`] = `
                 class="nk-card-link emotion-9"
                 href="catagory-one/demo-1/test-headline"
               >
-                <div
+                <section
                   class="emotion-10"
                 >
                   <h3
-                    class="emotion-11"
+                    class="nk-headline-heading emotion-11"
                   >
                     test headline
                   </h3>
-                </div>
+                </section>
               </a>
             </div>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="emotion-12"
+    >
       <div
-        class="emotion-12"
-        data-testid="titleTeaserVerticalsCell"
+        class="emotion-1"
+        data-testid="titleVerticalCell-0"
       >
         <div
-          class="emotion-0"
+          class="emotion-14"
         >
           <div
-            class="emotion-14"
-            data-testid="SUPPLEMENT_LEAD_AND_4_STACK-InnerGrid"
+            class="emotion-15"
+          >
+            <picture
+              class="emotion-4"
+            >
+              <img
+                alt=""
+                class="emotion-5"
+                src=""
+              />
+            </picture>
+          </div>
+          <div
+            class="emotion-18"
           >
             <div
-              class="emotion-15"
-              data-testid="titleVerticalCell-1"
+              class="emotion-19"
             >
               <div
-                class="emotion-3"
+                class="emotion-20"
               >
-                <div
-                  class="emotion-17"
-                >
-                  <picture
-                    class="emotion-5"
-                  >
-                    <img
-                      alt=""
-                      class="emotion-6"
-                      src=""
-                    />
-                  </picture>
-                </div>
-                <div
-                  class="emotion-7"
+                <a
+                  class="nk-card-link emotion-9"
+                  href="catagory-two/demo-2/test-headline-2"
                 >
-                  <div
-                    class="emotion-8"
+                  <section
+                    class="emotion-22"
                   >
-                    <a
-                      class="nk-card-link emotion-9"
-                      href="catagory-two/demo-2/test-headline-2"
+                    <h3
+                      class="nk-headline-heading emotion-11"
                     >
-                      <div
-                        class="emotion-23"
-                      >
-                        <h3
-                          class="emotion-24"
-                        >
-                          test headline 2
-                        </h3>
-                      </div>
-                    </a>
-                  </div>
-                </div>
+                      test headline 2
+                    </h3>
+                  </section>
+                </a>
               </div>
             </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="emotion-1"
+        data-testid="titleVerticalCell-1"
+      >
+        <div
+          class="emotion-14"
+        >
+          <div
+            class="emotion-15"
+          >
+            <picture
+              class="emotion-4"
+            >
+              <img
+                alt=""
+                class="emotion-5"
+                src=""
+              />
+            </picture>
+          </div>
+          <div
+            class="emotion-18"
+          >
             <div
-              class="emotion-15"
-              data-testid="titleVerticalCell-2"
+              class="emotion-19"
             >
               <div
-                class="emotion-3"
+                class="emotion-20"
               >
-                <div
-                  class="emotion-17"
-                >
-                  <picture
-                    class="emotion-5"
-                  >
-                    <img
-                      alt=""
-                      class="emotion-6"
-                      src=""
-                    />
-                  </picture>
-                </div>
-                <div
-                  class="emotion-7"
+                <a
+                  class="nk-card-link emotion-9"
+                  href="catagory-three/demo-3/test-headline-3"
                 >
-                  <div
-                    class="emotion-8"
+                  <section
+                    class="emotion-22"
                   >
-                    <a
-                      class="nk-card-link emotion-9"
-                      href="catagory-three/demo-3/test-headline-3"
+                    <h3
+                      class="nk-headline-heading emotion-11"
                     >
-                      <div
-                        class="emotion-23"
-                      >
-                        <h3
-                          class="emotion-24"
-                        >
-                          test headline 3
-                        </h3>
-                      </div>
-                    </a>
-                  </div>
-                </div>
+                      test headline 3
+                    </h3>
+                  </section>
+                </a>
               </div>
             </div>
           </div>