@comicrelief/component-library 8.44.3 → 8.45.0

package/src/components/Atoms/SocialIcons/Utils/Icons.js

@@ -1,11 +1,30 @@
-import facebook from '../assets/facebook.svg';
-import twitter from '../assets/X-white-Subtract.svg';
-import youtube from '../assets/youtube.svg';
-import instagram from '../assets/instagram.svg';
-
-export default {
-  facebook,
-  instagram,
-  twitter,
-  youtube
+// Icons with drawn circular border (old style)
+import facebookCircled from '../assets/circled/facebook.svg';
+import twitterCircled from '../assets/circled/X-white-Subtract.svg';
+import youtubeCircled from '../assets/circled/youtube.svg';
+import instagramCircled from '../assets/circled/instagram.svg';
+
+// Standard icons without drawn border (new style)
+import facebookStandard from '../assets/standard/facebook.svg';
+import xStandard from '../assets/standard/x.svg';
+import youtubeStandard from '../assets/standard/youtube.svg';
+import instagramStandard from '../assets/standard/instagram.svg';
+import tiktokStandard from '../assets/standard/tiktok.svg';
+
+export const circledIcons = {
+  facebook: facebookCircled,
+  instagram: instagramCircled,
+  twitter: twitterCircled,
+  youtube: youtubeCircled
 };
+
+export const standardIcons = {
+  facebook: facebookStandard,
+  instagram: instagramStandard,
+  x: xStandard,
+  youtube: youtubeStandard,
+  tiktok: tiktokStandard
+};
+
+// Default export for backward compatibility (circled icons)
+export default circledIcons;

package/src/components/Atoms/SocialIcons/Utils/Links.js

@@ -14,6 +14,11 @@ export default campaign => ({
     title: 'Check out our Twitter account',
     id: 'twitter'
   },
+  x: {
+    url: `https://x.com/${campaign}`,
+    title: 'Check out our X account',
+    id: 'x'
+  },
   youtube: {
     url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
     title: 'Check out our YouTube channel',
@@ -23,5 +28,10 @@ export default campaign => ({
     url: `https://www.instagram.com/${campaign}`,
     title: 'Check out our Instagram account',
     id: 'instagram'
+  },
+  tiktok: {
+    url: `https://www.tiktok.com/@${campaign}`,
+    title: 'Check out our TikTok account',
+    id: 'tiktok'
   }
 });

package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -16,7 +16,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -26,11 +26,11 @@ exports[`renders correctly with Comic Relief links 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -39,22 +39,27 @@ exports[`renders correctly with Comic Relief links 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -65,7 +70,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/comicrelief"
       rel="noopener noreferrer"
@@ -74,7 +79,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -83,7 +88,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/comicrelief"
       rel="noopener noreferrer"
@@ -92,7 +97,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -101,7 +106,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/comicrelief"
       rel="noopener noreferrer"
@@ -110,7 +115,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -119,7 +124,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -128,7 +133,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -152,7 +157,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -162,11 +167,11 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -175,22 +180,27 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -201,7 +211,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/rednoseday"
       rel="noopener noreferrer"
@@ -210,7 +220,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -219,7 +229,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/rednoseday"
       rel="noopener noreferrer"
@@ -228,7 +238,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -237,7 +247,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/rednoseday"
       rel="noopener noreferrer"
@@ -246,7 +256,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -255,7 +265,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -264,7 +274,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -288,7 +298,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   opacity: 0.6;
 }
 
-.c3 {
+.c4 {
   width: 100%;
 }
 
@@ -298,11 +308,11 @@ exports[`renders correctly with Sport Relief links 1`] = `
   display: -ms-flexbox;
   display: flex;
   list-style-type: none;
-  margin: 0 auto;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -311,22 +321,27 @@ exports[`renders correctly with Sport Relief links 1`] = `
 }
 
 .c1 {
-  width: 32px;
+  width: 48px;
   margin-right: 1.5rem;
 }
 
+.c3 {
+  width: auto;
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
     justify-content: start;
+    margin: 0 auto 0 0;
   }
 }
 
 @media (min-width:740px) {
   .c1 {
-    width: 48px;
+    margin-right: 1.5rem;
   }
 }
 
@@ -337,7 +352,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-facebook"
       href="https://www.facebook.com/sportrelief"
       rel="noopener noreferrer"
@@ -346,7 +361,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="facebook"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -355,7 +370,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-instagram"
       href="https://www.instagram.com/sportrelief"
       rel="noopener noreferrer"
@@ -364,7 +379,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="instagram"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -373,7 +388,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-twitter"
       href="https://twitter.com/sportrelief"
       rel="noopener noreferrer"
@@ -382,7 +397,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="twitter"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>
@@ -391,7 +406,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     className="c1"
   >
     <a
-      className="c2"
+      className="c2 c3"
       data-test="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
@@ -400,7 +415,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
     >
       <img
         alt="youtube"
-        className="c3"
+        className="c4"
         src="mock.asset"
       />
     </a>

package/{dist/components/Atoms/SocialIcons/assets → src/components/Atoms/SocialIcons/assets/circled}/facebook.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512C1024 229.23 794.77 0 512 0S0 229.23 0 512c0 255.554 187.231 467.37 432 505.778V660H302V512h130V399.2C432 270.88 508.439 200 625.389 200 681.408 200 740 210 740 210v126h-64.563C611.835 336 592 375.467 592 415.957V512h142l-22.7 148H592v357.778C836.769 979.37 1024 767.554 1024 512z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512C1024 229.23 794.77 0 512 0S0 229.23 0 512c0 255.554 187.231 467.37 432 505.778V660H302V512h130V399.2C432 270.88 508.439 200 625.389 200 681.408 200 740 210 740 210v126h-64.563C611.835 336 592 375.467 592 415.957V512h142l-22.7 148H592v357.778C836.769 979.37 1024 767.554 1024 512z" fill="#fff"/></svg>

package/{dist/components/Atoms/SocialIcons/assets → src/components/Atoms/SocialIcons/assets/circled}/twitter.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M400 200c0 110.5-89.5 200-200 200S0 310.5 0 200 89.5 0 200 0s200 89.5 200 200zM163.4 305.5c88.7 0 137.2-73.5 137.2-137.2 0-2.1 0-4.2-.1-6.2 9.4-6.8 17.6-15.3 24.1-25-8.6 3.8-17.9 6.4-27.7 7.6 10-6 17.6-15.4 21.2-26.7-9.3 5.5-19.6 9.5-30.6 11.7-8.8-9.4-21.3-15.2-35.2-15.2-26.6 0-48.2 21.6-48.2 48.2 0 3.8.4 7.5 1.3 11-40.1-2-75.6-21.2-99.4-50.4-4.1 7.1-6.5 15.4-6.5 24.2 0 16.7 8.5 31.5 21.5 40.1-7.9-.2-15.3-2.4-21.8-6v.6c0 23.4 16.6 42.8 38.7 47.3-4 1.1-8.3 1.7-12.7 1.7-3.1 0-6.1-.3-9.1-.9 6.1 19.2 23.9 33.1 45 33.5-16.5 12.9-37.3 20.6-59.9 20.6-3.9 0-7.7-.2-11.5-.7 21.1 13.8 46.5 21.8 73.7 21.8" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M400 200c0 110.5-89.5 200-200 200S0 310.5 0 200 89.5 0 200 0s200 89.5 200 200zM163.4 305.5c88.7 0 137.2-73.5 137.2-137.2 0-2.1 0-4.2-.1-6.2 9.4-6.8 17.6-15.3 24.1-25-8.6 3.8-17.9 6.4-27.7 7.6 10-6 17.6-15.4 21.2-26.7-9.3 5.5-19.6 9.5-30.6 11.7-8.8-9.4-21.3-15.2-35.2-15.2-26.6 0-48.2 21.6-48.2 48.2 0 3.8.4 7.5 1.3 11-40.1-2-75.6-21.2-99.4-50.4-4.1 7.1-6.5 15.4-6.5 24.2 0 16.7 8.5 31.5 21.5 40.1-7.9-.2-15.3-2.4-21.8-6v.6c0 23.4 16.6 42.8 38.7 47.3-4 1.1-8.3 1.7-12.7 1.7-3.1 0-6.1-.3-9.1-.9 6.1 19.2 23.9 33.1 45 33.5-16.5 12.9-37.3 20.6-59.9 20.6-3.9 0-7.7-.2-11.5-.7 21.1 13.8 46.5 21.8 73.7 21.8" fill="#fff"/></svg>

package/src/components/Atoms/SocialIcons/assets/{youtube.svg → circled/youtube.svg}

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M259.307 240.84L363.3 300.002 259.307 359.16V240.84zM600 300c0 165.685-134.315 300-300 300S0 465.685 0 300 134.315 0 300 0s300 134.315 300 300zm-101.056 0s0-65.16-8.314-96.391c-4.576-17.23-18.058-30.8-35.177-35.406-31.03-8.368-155.453-8.368-155.453-8.368s-124.423 0-155.452 8.368c-17.119 4.606-30.601 18.175-35.177 35.406-8.315 31.231-8.315 96.391-8.315 96.391s0 65.16 8.314 96.391c4.576 17.23 18.058 30.8 35.177 35.405 31.03 8.369 155.453 8.369 155.453 8.369s124.423 0 155.452-8.368c17.119-4.605 30.601-18.175 35.177-35.405 8.315-31.232 8.315-96.392 8.315-96.392z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M259.307 240.84L363.3 300.002 259.307 359.16V240.84zM600 300c0 165.685-134.315 300-300 300S0 465.685 0 300 134.315 0 300 0s300 134.315 300 300zm-101.056 0s0-65.16-8.314-96.391c-4.576-17.23-18.058-30.8-35.177-35.406-31.03-8.368-155.453-8.368-155.453-8.368s-124.423 0-155.452 8.368c-17.119 4.606-30.601 18.175-35.177 35.406-8.315 31.231-8.315 96.391-8.315 96.391s0 65.16 8.314 96.391c4.576 17.23 18.058 30.8 35.177 35.405 31.03 8.369 155.453 8.369 155.453 8.369s124.423 0 155.452-8.368c17.119-4.605 30.601-18.175 35.177-35.405 8.315-31.232 8.315-96.392 8.315-96.392z" fill="#fff"/></svg>

package/src/components/Atoms/SocialIcons/assets/standard/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 18.0623C35 8.67343 27.3888 1.06225 18 1.06225C8.61117 1.06225 1 8.67343 1 18.0623C1 26.0349 6.48862 32.7245 13.8932 34.5616V23.2572H10.3877V18.0623H13.8932V15.8238C13.8932 10.0375 16.5117 7.35559 22.1925 7.35559C23.2695 7.35559 25.1278 7.56673 25.8881 7.77793V12.4872C25.4868 12.445 24.7899 12.4238 23.9241 12.4238C21.1366 12.4238 20.0595 13.4797 20.0595 16.225V18.0623H25.6123L24.6584 23.2572H20.0595V34.9377C28.477 33.9211 35 26.7539 35 18.0623Z" fill="black"/>
+</svg>

package/src/components/Atoms/SocialIcons/assets/standard/instagram.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9594 1.11877C9.15059 1.20411 7.91536 1.49278 6.83551 1.9171C5.71792 2.35265 4.77067 2.93711 3.82818 3.883C2.88569 4.82889 2.3053 5.77682 1.87282 6.89611C1.45427 7.97834 1.17071 9.2146 1.09081 11.0244C1.01091 12.8343 0.993227 13.416 1.00207 18.0326C1.01091 22.6492 1.03131 23.2278 1.11903 25.0414C1.20539 26.8499 1.49303 28.0848 1.91736 29.165C2.35358 30.2826 2.93737 31.2295 3.8836 32.1723C4.82983 33.1151 5.77708 33.6942 6.89909 34.1273C7.9803 34.5452 9.21689 34.8301 11.0264 34.9093C12.8359 34.9886 13.4183 35.0069 18.0335 34.9981C22.6487 34.9892 23.2298 34.9688 25.043 34.8828C26.8563 34.7968 28.0847 34.5071 29.1652 34.0848C30.2828 33.6476 31.2304 33.0648 32.1726 32.1183C33.1147 31.1717 33.6948 30.2231 34.1269 29.1031C34.5458 28.0219 34.8304 26.7853 34.9089 24.9772C34.9881 23.1626 35.0068 22.5832 34.998 17.9673C34.9892 13.3514 34.9684 12.7727 34.8824 10.9598C34.7964 9.14694 34.5084 7.91578 34.0844 6.83491C33.6475 5.71732 33.0644 4.77109 32.1185 3.82758C31.1726 2.88407 30.2233 2.30437 29.1037 1.87324C28.0218 1.4547 26.7859 1.16943 24.9764 1.09123C23.1669 1.01303 22.5845 0.992972 17.9676 1.00181C13.3507 1.01065 12.7726 1.03037 10.9594 1.11877ZM11.158 31.851C9.50045 31.7789 8.60046 31.5035 8.0007 31.273C7.20645 30.967 6.64068 30.5971 6.04296 30.0051C5.44523 29.4132 5.07803 28.8454 4.76795 28.0528C4.53504 27.4531 4.25454 26.5541 4.17702 24.8966C4.0927 23.1051 4.07502 22.5672 4.06516 18.0285C4.0553 13.4898 4.07264 12.9526 4.15118 11.1604C4.2219 9.50428 4.499 8.60327 4.72919 8.00384C5.03519 7.20858 5.40375 6.64383 5.99706 6.04644C6.59036 5.44906 7.15647 5.08117 7.9497 4.77109C8.54878 4.53717 9.44775 4.25905 11.1046 4.18016C12.8974 4.09516 13.4346 4.07816 17.9727 4.0683C22.5107 4.05844 23.0493 4.07544 24.8428 4.15432C26.4989 4.2264 27.4003 4.50079 27.999 4.73233C28.7936 5.03833 29.359 5.40588 29.9564 6.0002C30.5538 6.59453 30.922 7.1586 31.2321 7.95352C31.4664 8.55091 31.7445 9.44954 31.8227 11.1074C31.908 12.9002 31.9274 13.4378 31.9356 17.9755C31.9437 22.5132 31.9278 23.0521 31.8492 24.8435C31.7768 26.5011 31.5021 27.4014 31.2712 28.0018C30.9652 28.7957 30.5963 29.3618 30.0027 29.9589C29.409 30.5559 28.8436 30.9238 28.05 31.2339C27.4516 31.4675 26.5516 31.7463 24.8961 31.8252C23.1033 31.9095 22.5661 31.9272 18.0264 31.937C13.4867 31.9469 12.9511 31.9285 11.1583 31.851M25.0169 8.91403C25.0175 9.31754 25.1378 9.71178 25.3626 10.0469C25.5873 10.382 25.9064 10.643 26.2795 10.7967C26.6525 10.9505 27.0628 10.9902 27.4584 10.9107C27.8541 10.8313 28.2172 10.6363 28.502 10.3505C28.7868 10.0646 28.9805 9.70077 29.0584 9.30487C29.1364 8.90897 29.0952 8.49883 28.9401 8.12634C28.785 7.75384 28.5229 7.43572 28.1869 7.2122C27.851 6.98868 27.4563 6.86981 27.0528 6.87061C26.5119 6.87169 25.9935 7.08757 25.6117 7.47076C25.2299 7.85396 25.0159 8.3731 25.0169 8.91403ZM9.27129 18.0169C9.28081 22.8382 13.1963 26.7377 18.0165 26.7285C22.8367 26.7193 26.739 22.8042 26.7298 17.9829C26.7206 13.1617 22.8041 9.26118 17.9832 9.2707C13.1623 9.28022 9.26211 13.1964 9.27129 18.0169ZM12.3334 18.0108C12.3311 16.89 12.6613 15.7938 13.2822 14.8606C13.903 13.9275 14.7866 13.1994 15.8212 12.7684C16.8559 12.3375 17.995 12.223 19.0947 12.4395C20.1944 12.656 21.2052 13.1937 21.9993 13.9846C22.7934 14.7756 23.3351 15.7842 23.5559 16.8831C23.7768 17.9819 23.6668 19.1215 23.2399 20.1578C22.8131 21.1942 22.0885 22.0806 21.1578 22.7052C20.2272 23.3297 19.1322 23.6642 18.0114 23.6664C17.2672 23.668 16.53 23.523 15.8419 23.2396C15.1537 22.9562 14.5281 22.54 14.0009 22.0148C13.4736 21.4896 13.0549 20.8657 12.7688 20.1787C12.4827 19.4917 12.3347 18.755 12.3334 18.0108Z" fill="black"/>
+</svg>

package/src/components/Atoms/SocialIcons/assets/standard/tiktok.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.1735 9.01362C25.5578 7.9603 24.3908 6.27396 24.0273 4.30864C23.9487 3.88396 23.9057 3.44689 23.9057 2.99963H18.7483L18.7403 23.6698C18.6536 25.9848 16.7488 27.8423 14.4134 27.8423C13.6879 27.8423 13.0039 27.6609 12.4022 27.344C11.0225 26.6178 10.0777 25.1711 10.0777 23.5066C10.0777 21.1159 12.0227 19.171 14.4134 19.171C14.8599 19.171 15.2875 19.2445 15.6925 19.3713V14.1061C15.2737 14.0493 14.8476 14.0136 14.4134 14.0136C9.1774 14.0143 4.91895 18.2728 4.91895 23.5074C4.91895 26.719 6.52369 29.5614 8.97198 31.2798C10.5141 32.3622 12.3898 33.0004 14.4127 33.0004C19.6472 33.0004 23.9057 28.7419 23.9057 23.5074V13.0259C25.9286 14.4776 28.4067 15.3335 31.0815 15.3335V10.1762C29.6407 10.1762 28.2989 9.74788 27.1742 9.01435L27.1735 9.01362Z" fill="black"/>
+</svg>

package/src/components/Atoms/SocialIcons/assets/standard/x.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.607 15.8559L30.8073 3.99893H28.3901L19.5333 14.2942L12.4593 3.99893H4.30029L14.9975 19.5672L4.30029 32.001H6.71757L16.0707 21.1289L23.5413 32.001H31.7003L20.6064 15.8559H20.607ZM17.2962 19.7043L16.2124 18.1541L7.58854 5.81862H11.3013L18.2609 15.7737L19.3447 17.324L28.3913 30.2641H24.6785L17.2962 19.7049V19.7043Z" fill="black"/>
+</svg>

package/src/components/Atoms/SocialIcons/assets/standard/youtube.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2374 9.33522C34.8161 7.78366 33.6332 6.57437 32.0553 6.15312C29.2681 5.3905 17.9868 5.3905 17.9868 5.3905C17.9868 5.3905 6.7319 5.3905 3.94472 6.15312C2.39316 6.57347 1.18296 7.78366 0.736287 9.33522C0 12.1224 0 17.9864 0 17.9864C0 17.9864 0 23.8503 0.736287 26.6648C1.18296 28.19 2.39316 29.4256 3.94472 29.8469C6.7319 30.6095 17.9868 30.6095 17.9868 30.6095C17.9868 30.6095 29.2681 30.6095 32.0553 29.8469C33.6332 29.4265 34.8161 28.19 35.2374 26.6648C36 23.8513 36 17.9864 36 17.9864C36 17.9864 36 12.1224 35.2374 9.33522ZM14.4107 23.4037V12.5954L23.7464 17.9864L14.4107 23.4037Z" fill="black"/>
+</svg>

package/src/components/Atoms/Text/Text.js

@@ -19,19 +19,19 @@ export const BaseText = styled.span`
       // all tags will use the new standardised styles set in fontHelper), but, in order to ensure
       // things don't break/look bad accidentally, it'll require intentional, in-situ prop removal.
 
-      ${({ size }) => (size && `font-size: ${theme.fontSize(size)}`)};
-      ${({ size }) => (size && 'line-height: normal')};
+      ${({ $size }) => ($size && `font-size: ${theme.fontSize($size)}`)};
+      ${({ $size }) => ($size && 'line-height: normal')};
 
-      ${({ family }) => (family && `font-family: ${theme.fontFamilies(family)}`)};
-      ${({ weight }) => (weight && `font-weight: ${weight}`)};
-      ${({ height }) => (height && `line-height: ${height}`)};
-      ${({ uppercase }) => (uppercase && 'text-transform: uppercase')};
+      ${({ $family }) => ($family && `font-family: ${theme.fontFamilies($family)}`)};
+      ${({ $weight }) => ($weight && `font-weight: ${$weight}`)};
+      ${({ $height }) => ($height && `line-height: ${$height}`)};
+      ${({ $uppercase }) => ($uppercase && 'text-transform: uppercase')};
 
-      color: ${({ color }) => (color ? theme.color(color) : 'inherit')};
+      color: ${({ $color }) => ($color ? theme.color($color) : 'inherit')};
 
-      ${({ textAlign }) => textAlign && `text-align: ${textAlign}`};
+      ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
 
-      ${({ size }) => (size === 'super' && css`
+      ${({ $size }) => ($size === 'super' && css`
         font-size: ${theme.fontSize('xxl')};
         line-height: 3rem;
 
@@ -48,9 +48,9 @@ export const BaseText = styled.span`
         }
       `)};
 
-      ${({ mobileColor }) => mobileColor && css`
+      ${({ $mobileColor }) => $mobileColor && css`
         @media (max-width: ${breakpointValues2026.L - 1}px) {
-          color: ${theme.color(mobileColor)};
+          color: ${theme.color($mobileColor)};
         }
       `};
       
@@ -82,14 +82,14 @@ const Text = ({
   <BaseText
     {...rest}
     as={tag}
-    color={color}
-    size={size}
-    uppercase={uppercase}
-    height={height}
-    weight={weight}
-    family={family}
-    mobileColor={mobileColor}
-    textAlign={textAlign}
+    $color={color}
+    $size={size}
+    $uppercase={uppercase}
+    $height={height}
+    $weight={weight}
+    $family={family}
+    $mobileColor={mobileColor}
+    $textAlign={textAlign}
   >
     {children}
   </BaseText>

package/src/components/Atoms/Text/Text.md

@@ -8,7 +8,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     // To be phased out: tags to use the prescribed family always
     family="Anton"
   >
-    <span style={{ width: "55px", display: "inline-block" }}>H1 </span>
+    <span style={{ width: "55px"}}>H1 </span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['h1'].family} -  
@@ -25,7 +25,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     mobileColor="green"
     family="Anton"
   >
-    <span style={{ width: "55px", display: "inline-block" }}>H2 </span>
+    <span style={{ width: "55px"}}>H2 </span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['h2'].family} - 
@@ -41,7 +41,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     mobileColor="red"
     family="Montserrat"
   >
-    <span style={{ width: "55px", display: "inline-block" }}>H3 </span>
+    <span style={{ width: "55px"}}>H3 </span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['h3'].family} -  
@@ -58,7 +58,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     weight="normal"
     // To be phased out: text to always be rendered as typed
     uppercase>
-    <span style={{ width: "55px", display: "inline-block" }}>H4 </span>
+    <span style={{ width: "55px"}}>H4 </span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['span'].family} -  
@@ -70,8 +70,8 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
 
 
 
-  <Text tag="p" size="m" style={{ marginTop: "2rem"}}>
-    <span style={{ width: "55px", display: "inline-block" }}>Body</span>
+  <Text tag="p" size="m" style={{ marginTop: "2rem"}} height="100px" weight="500">
+    <span style={{ width: "55px"}}>P (body)</span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['p'].family} -  
@@ -91,7 +91,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     uppercase
     // To be phased-out
     weight="normal">
-    <span style={{ width: "55px", display: "inline-block" }}>H5 </span>
+    <span style={{ width: "55px"}}>H5 </span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['h5'].family} -  
@@ -105,7 +105,7 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     family="Anton" 
     uppercase
     weight="normal">
-    <span style={{ width: "55px", display: "inline-block" }}>H6</span>
+    <span style={{ width: "55px"}}>H6</span>
   </Text>
   <Text style={{ textTransform: "none" }} tag="span" size="s">
     <b>family:</b> {fontConfig['h6'].family}

package/src/components/Atoms/Text/__snapshots__/Text.test.js.snap

@@ -38,7 +38,6 @@ exports[`renders heavy heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
 >
   Heading 3 heavy
 </h3>
@@ -82,8 +81,6 @@ exports[`renders high heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  height="5"
 >
   Heading 3 high
 </h3>
@@ -128,8 +125,6 @@ exports[`renders large heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  size="l"
 >
   Heading 3 large
 </h3>
@@ -175,8 +170,6 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
 
 <p
   className="c0"
-  color="inherit"
-  size="xl"
 >
   My paragraph xl and font Anton
 </p>
@@ -222,8 +215,6 @@ exports[`renders xl yellow paragraph correctly 1`] = `
 
 <p
   className="c0"
-  color="yellow"
-  size="xl"
 >
   My paragraph xl and yellow
 </p>

package/src/components/Atoms/TextArea/TextArea.test.js

@@ -132,7 +132,6 @@ it('renders correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Label",