@newskit-render/core 1.42.3 → 1.45.0

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,8 @@
 exports[`Article should render tile and sub title 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  height: 64px;
+  height: 80px;
+  background-color: #3358CC;
 }
 
 .emotion-0 a,
@@ -15,8 +16,8 @@ exports[`Article should render tile and sub title 1`] = `
 
 @media screen {
   .emotion-0 {
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 16px;
+    padding-bottom: 16px;
     padding-left: 0;
     padding-right: 0;
   }
@@ -24,8 +25,8 @@ exports[`Article should render tile and sub title 1`] = `
 
 @media screen and (min-width: 1024px) {
   .emotion-0 {
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 16px;
+    padding-bottom: 16px;
     padding-left: 64px;
     padding-right: 64px;
   }
@@ -279,16 +280,19 @@ exports[`Article should render tile and sub title 1`] = `
   overflow: auto;
   width: 100%;
   min-height: 100vh;
-  background-color: #0A0A0A;
+  background-color: #3358CC;
   left: 0;
-  top: 64px;
-  z-index: 1;
+  top: 80px;
+  z-index: 2;
   display: none;
 }
 
 @media screen and (min-width: 768px) {
   .emotion-12 {
-    display: block;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
     position: relative;
     overflow: hidden;
     width: initial;
@@ -297,6 +301,7 @@ exports[`Article should render tile and sub title 1`] = `
     left: initial;
     top: initial;
     z-index: 1;
+    height: 48px;
   }
 }
 
@@ -341,7 +346,19 @@ exports[`Article should render tile and sub title 1`] = `
 
 @media screen and (min-width: 768px) {
   .emotion-14 {
-    margin-right: 24px;
+    margin-right: 16px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .emotion-14 {
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .emotion-14 {
+    margin-bottom: 0;
   }
 }
 
@@ -432,15 +449,17 @@ exports[`Article should render tile and sub title 1`] = `
                     />
                     <path
                       d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                      fill="#aebfff"
+                      fill="white"
                     />
                     <path
                       d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                      fill="#3358cc"
+                      fill="white"
+                      fill-opacity="0.4"
                     />
                     <path
                       d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                      fill="#577ffb"
+                      fill="white"
+                      fill-opacity="0.701961"
                     />
                   </svg>
                 </div>
@@ -449,7 +468,7 @@ exports[`Article should render tile and sub title 1`] = `
                 >
                   <svg
                     class="emotion-8"
-                    height="40px"
+                    height="48px"
                     viewBox="0 0 244 40"
                   >
                     <title>
@@ -457,15 +476,17 @@ exports[`Article should render tile and sub title 1`] = `
                     </title>
                     <path
                       d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                      fill="#aebfff"
+                      fill="white"
                     />
                     <path
                       d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                      fill="#3358cc"
+                      fill="white"
+                      fill-opacity="0.4"
                     />
                     <path
                       d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                      fill="#577ffb"
+                      fill="white"
+                      fill-opacity="0.701961"
                     />
                   </svg>
                 </div>
@@ -476,9 +497,11 @@ exports[`Article should render tile and sub title 1`] = `
             >
               <div
                 class="emotion-12"
+                data-testid="NavigationContainer"
               >
                 <div
                   class="emotion-13"
+                  data-testid="Navigation"
                 >
                   <span
                     class="emotion-14"
@@ -2724,7 +2747,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 22.5px;
@@ -2733,13 +2756,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -2747,7 +2770,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 24.75px;
@@ -2756,13 +2779,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -2770,7 +2793,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 27px;
@@ -2779,30 +2802,30 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
   }
 }
 
-.emotion-224 {
+.emotion-225 {
   margin: 0;
   color: #0A0A0A;
 }
 
-.emotion-224 svg {
+.emotion-225 svg {
   fill: #0A0A0A;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-224 {
+  .emotion-225 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 21px;
@@ -2811,13 +2834,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-224::before {
+  .emotion-225::before {
     content: '';
     margin-bottom: -0.391em;
     display: block;
   }
 
-  .emotion-224::after {
+  .emotion-225::after {
     content: '';
     margin-top: -0.409em;
     display: block;
@@ -2825,7 +2848,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-224 {
+  .emotion-225 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 24px;
@@ -2834,13 +2857,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-224::before {
+  .emotion-225::before {
     content: '';
     margin-bottom: -0.391em;
     display: block;
   }
 
-  .emotion-224::after {
+  .emotion-225::after {
     content: '';
     margin-top: -0.409em;
     display: block;
@@ -2848,37 +2871,37 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen {
-  .emotion-240 {
+  .emotion-242 {
     display: block;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-240 {
+  .emotion-242 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen {
-  .emotion-253 {
+  .emotion-255 {
     margin-bottom: 64px;
   }
 }
@@ -3717,7 +3740,7 @@ exports[`Article should render tile and sub title 1`] = `
                           >
                             <a
                               class="nk-card-link emotion-166"
-                              href="https://newskit.co.uk/"
+                              href="undefined"
                             >
                               <section
                                 class="emotion-167"
@@ -3768,7 +3791,7 @@ exports[`Article should render tile and sub title 1`] = `
                           >
                             <a
                               class="nk-card-link emotion-166"
-                              href="https://newskit.co.uk/"
+                              href="undefined"
                             >
                               <section
                                 class="emotion-167"
@@ -3968,21 +3991,26 @@ exports[`Article should render tile and sub title 1`] = `
                           <div
                             class="emotion-220"
                           >
-                            <section
-                              class="emotion-221"
+                            <a
+                              class="nk-card-link emotion-166"
+                              href="undefined"
                             >
-                              <h6
-                                class="nk-headline-heading emotion-8"
+                              <section
+                                class="emotion-222"
                               >
-                                Prince Harry
-                              </h6>
-                            </section>
+                                <h6
+                                  class="nk-headline-heading emotion-168"
+                                >
+                                  Prince Harry
+                                </h6>
+                              </section>
+                            </a>
                           </div>
                           <div
                             class="emotion-220"
                           >
                             <p
-                              class="emotion-224"
+                              class="emotion-225"
                             >
                               news
                             </p>
@@ -4027,21 +4055,26 @@ exports[`Article should render tile and sub title 1`] = `
                           <div
                             class="emotion-220"
                           >
-                            <section
-                              class="emotion-221"
+                            <a
+                              class="nk-card-link emotion-166"
+                              href="undefined"
                             >
-                              <h6
-                                class="nk-headline-heading emotion-8"
+                              <section
+                                class="emotion-222"
                               >
-                                Meghan Markle
-                              </h6>
-                            </section>
+                                <h6
+                                  class="nk-headline-heading emotion-168"
+                                >
+                                  Meghan Markle
+                                </h6>
+                              </section>
+                            </a>
                           </div>
                           <div
                             class="emotion-220"
                           >
                             <p
-                              class="emotion-224"
+                              class="emotion-225"
                             >
                               news
                             </p>
@@ -4055,7 +4088,7 @@ exports[`Article should render tile and sub title 1`] = `
                   class="emotion-181"
                 >
                   <div
-                    class="emotion-240"
+                    class="emotion-242"
                   >
                     <hr
                       aria-hidden="true"
@@ -4125,7 +4158,7 @@ exports[`Article should render tile and sub title 1`] = `
           data-testid="PageLayout"
         >
           <div
-            class="emotion-253"
+            class="emotion-255"
           />
         </div>
       </div>
@@ -4384,7 +4417,7 @@ exports[`Article should render tile and sub title 1`] = `
           >
             <svg
               class="emotion-5"
-              height="40px"
+              height="48px"
               viewBox="0 0 244 40"
             >
               <title>
@@ -4392,15 +4425,17 @@ exports[`Article should render tile and sub title 1`] = `
               </title>
               <path
                 d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                fill="#aebfff"
+                fill="white"
               />
               <path
                 d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                fill="#3358cc"
+                fill="white"
+                fill-opacity="0.4"
               />
               <path
                 d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                fill="#577ffb"
+                fill="white"
+                fill-opacity="0.701961"
               />
             </svg>
           </div>

package/components/common/NewskitLogo.tsx

@@ -33,15 +33,17 @@ const NewsKitLogoFull = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
       />
       <path
         d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-        fill="#aebfff"
+        fill="white"
       />
       <path
         d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-        fill="#3358cc"
+        fill="white"
+        fillOpacity="0.4"
       />
       <path
         d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-        fill="#577ffb"
+        fill="white"
+        fillOpacity="0.701961"
       />
     </LogoSvg>
   )

package/components/common/NewskitLogoShort.tsx

@@ -25,19 +25,21 @@ const LogoSvg = styled.svg<StyledLogoPorps>`
 
 const NewsKitLogoShort = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
   ({ color, ...props }, ref) => (
-    <LogoSvg viewBox="0 0 244 40" height="40px" $color={color} {...props}>
+    <LogoSvg viewBox="0 0 244 40" height="48px" $color={color} {...props}>
       <title>NewsKit Logo</title>
       <path
         d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-        fill="#aebfff"
+        fill="white"
       />
       <path
         d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-        fill="#3358cc"
+        fill="white"
+        fillOpacity="0.4"
       />
       <path
         d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-        fill="#577ffb"
+        fill="white"
+        fillOpacity="0.701961"
       />
     </LogoSvg>
   )

package/components/common/iconNavLink/IconNavLink.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { NextLink } from '@newskit-render/shared-components'
+import { Divider, TextBlock, Block, Visible, styled } from 'newskit'
+import { IconNavLinkProps } from './types'
+
+const StylesVerticalVisible = styled(Visible)`
+  height: 100%;
+`
+
+const StylesHorizontalVisible = styled(Visible)`
+  width: 100%;
+`
+
+const IconBlock = styled(Block)<{ top?: string }>`
+  position: relative;
+  top: ${({ top }) => top || '3'}px;
+`
+
+const IconNavLink: React.FC<IconNavLinkProps> = ({
+  icon,
+  href,
+  text,
+  showVerticalDivider = { md: true, lg: true, xl: true },
+  showHorizontalDivider = { xs: true, sm: true },
+  spaceInline,
+  typographyPreset,
+  stylePreset,
+  iconTop,
+}) => (
+  <>
+    {showVerticalDivider && (
+      <StylesVerticalVisible {...showVerticalDivider}>
+        <Divider vertical />
+      </StylesVerticalVisible>
+    )}
+    <Block spaceInline={spaceInline} />
+    <Block as="span">
+      {showHorizontalDivider && (
+        <>
+          <StylesHorizontalVisible {...showHorizontalDivider}>
+            <Divider />
+            <Block
+              data-testid="myBlock"
+              spaceStack={{
+                xs: 'space040',
+                md: 'space000',
+              }}
+            />
+          </StylesHorizontalVisible>
+        </>
+      )}
+      <NextLink
+        type="standalone"
+        overrides={{
+          typographyPreset,
+          stylePreset,
+        }}
+        href={href}
+      >
+        <IconBlock top={iconTop}>{icon}</IconBlock>
+        <TextBlock as="span" typographyPreset={typographyPreset}>
+          {text}
+        </TextBlock>
+      </NextLink>
+      <Block spaceInline={spaceInline} />
+    </Block>
+  </>
+)
+
+export default IconNavLink

package/components/common/iconNavLink/__tests__/IconNavLink.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import IconNavLink from '../IconNavLink'
+import { IconAccount } from '../../icons/IconAccount'
+import { renderWithTheme } from '../../../../helpers/test-utils'
+
+describe('IconNavLink', () => {
+  test('should render with devider', () => {
+    const { getByTestId, getByText, getAllByTestId } = renderWithTheme(
+      IconNavLink,
+      {
+        icon: <IconAccount data-testid="test-icon" />,
+        href: '/account',
+        text: 'Account',
+      }
+    )
+    expect(getAllByTestId('divider')[0]).toBeInTheDocument()
+    expect(getByTestId('test-icon')).toBeInTheDocument()
+    expect(getByText('Account')).toBeInTheDocument()
+    expect(getByText('Account').closest('a')).toHaveAttribute(
+      'href',
+      '/account'
+    )
+  })
+
+  test('should render without divider', () => {
+    const { queryByTestId } = renderWithTheme(IconNavLink, {
+      icon: <IconAccount data-testid="test-icon" />,
+      href: '/account',
+      text: 'Account',
+      showVerticalDivider: false,
+      showHorizontalDivider: false,
+    })
+    expect(queryByTestId('divider')).not.toBeInTheDocument()
+  })
+})

package/components/common/iconNavLink/index.ts

@@ -0,0 +1,3 @@
+import IconNavLink from './IconNavLink'
+
+export default IconNavLink

package/components/common/iconNavLink/types.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react'
+import { NewsKitIcon, MQ } from 'newskit'
+
+type ShowDivider =
+  | {
+      xs?: boolean
+      sm?: boolean
+      md?: boolean
+      lg?: boolean
+      xl?: boolean
+    }
+  | false
+
+export interface IconNavLinkProps {
+  icon: ReactElement<NewsKitIcon>
+  href: string
+  text: string
+  showVerticalDivider?: ShowDivider
+  showHorizontalDivider?: ShowDivider
+  spaceInline?: MQ<string>
+  typographyPreset?: MQ<string>
+  stylePreset?: MQ<string>
+  iconTop?: string
+}

package/components/common/icons/IconAccount.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { customToNewsKitIcon, Svg } from 'newskit'
+
+export const IconAccount = customToNewsKitIcon('IconAccount', (props) => (
+  <Svg {...props} height="24px" width="24px" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+))