newskit 0.0.0-e00e1f6 → 0.0.0-e02a96ba5

package/site/components/logo/index.tsx

@@ -0,0 +1,2 @@
+export {default as NewsKitLogo} from './newskit-logo';
+export {default as NewsKitMobileLogo} from './newskit-mobile-logo';

package/site/components/logo/newskit-logo.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {
+  withTheme,
+  styled,
+  getSizingFromTheme,
+  getColorFromTheme,
+  getSpacingCssFromTheme,
+} from 'newskit';
+
+const LogoWrapper = styled.div`
+  overflow: hidden;
+  ${getSpacingCssFromTheme('marginLeft', {lg: '24px'})};
+`;
+
+interface StyledLogoProps {
+  viewBox?: string;
+}
+
+const LogoSvg = styled.svg<StyledLogoProps>`
+  display: inline-block;
+  ${getSpacingCssFromTheme('width', {xs: '125px', lg: '183px'})};
+  height: ${getSizingFromTheme('sizing080')};
+`;
+
+const StyledText = styled.g`
+  fill: ${getColorFromTheme('interface060')};
+  color: ${getColorFromTheme('interface060')};
+`;
+
+const NewsKitLogo = React.forwardRef<HTMLDivElement, StyledLogoProps>(
+  ({...props}, ref) => (
+    <LogoWrapper ref={ref}>
+      <LogoSvg viewBox="0 0 1587 347" {...props}>
+        <title>Newskit Logo</title>
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g transform="translate(-5.000000, 47.000000)">
+            <StyledText transform="translate(508.073657, 26.125170)">
+              <path d="M49.6701967,183.5 L49.6701967,88.2085714 L126.078764,185.96333 C126.836849,186.933201 127.99928,187.5 129.230272,187.5 L167,187.5 C169.209139,187.5 171,185.709139 171,183.5 L171,10.5 C171,8.290861 169.209139,6.5 167,6.5 L125.329803,6.5 C123.120664,6.5 121.329803,8.290861 121.329803,10.5 L121.329803,102.171429 L48.025595,8.04230221 C47.2677022,7.06910032 46.1031929,6.5 44.8696924,6.5 L4,6.5 C1.790861,6.5 0,8.290861 0,10.5 L0,183.5 C0,185.709139 1.790861,187.5 4,187.5 L45.6701967,187.5 C47.8793357,187.5 49.6701967,185.709139 49.6701967,183.5 Z M903,55 C918.187831,55 930.5,42.6878306 930.5,27.5 C930.5,12.3121694 918.187831,0 903,0 C887.812169,0 875.5,12.3121694 875.5,27.5 C875.5,42.6878306 887.812169,55 903,55 Z M263.027523,190.5 C289.304083,190.5 308.121364,180.273822 321.470735,164.67486 C322.185034,163.840189 322.721045,161.426603 321.327744,160.275568 L299.153134,141.956652 C297.457714,140.556029 294.757606,141.251542 293.943758,141.981606 C284.811066,150.174114 276.283121,153.871025 265.355963,153.871025 C250.091743,153.871025 238.966972,146.132509 235.086239,130.913428 L323.782339,130.913428 C325.435321,130.913428 329,129.596531 329,126.880598 L329,120.853357 C329,79.8392226 306.750459,44.5 258.629358,44.5 C217.234862,44.5 188,76.7438163 188,117.5 L188,118.015901 C188,161.09364 219.045872,190.5 263.027523,190.5 Z M284,105.5 L235,105.5 C237.592593,90.1938776 246.407407,80.5 259.37037,80.5 C272.851852,80.5 282.185185,90.1938776 284,105.5 Z M414.377751,184.718744 L435.778461,117.819827 C435.946735,117.293802 436.509575,117.003787 437.0356,117.17206 C437.345716,117.271265 437.588117,117.515238 437.685316,117.825988 L458.600819,184.6941 C459.122984,186.363495 460.669273,187.5 462.418426,187.5 L498.895815,187.5 C500.65258,187.5 502.203732,186.353753 502.719524,184.674412 L543.410734,52.1899515 C544.059344,50.078175 542.873213,47.8404396 540.761436,47.1918296 C540.380918,47.0749574 539.985086,47.0155393 539.587024,47.0155393 L500.789687,47.0155393 C498.978012,47.0155393 497.392536,48.2331786 496.925114,49.9835159 L479.758709,114.265808 C479.616217,114.799394 479.068146,115.116438 478.53456,114.973946 C478.200911,114.884846 477.936847,114.629901 477.836082,114.299588 L458.017303,49.3328585 C457.503885,47.6498526 455.950944,46.5 454.191368,46.5 L419.802333,46.5 C418.045766,46.5 416.494742,47.6459914 415.978782,49.3250718 L396.176619,113.766952 C396.014396,114.294874 395.454922,114.591331 394.927,114.429108 C394.595866,114.327355 394.340981,114.061474 394.253297,113.72634 L377.580699,50.0030584 C377.120225,48.2431076 375.530153,47.0155393 373.71096,47.0155393 L334.393967,47.0155393 C332.184828,47.0155393 330.393967,48.8064003 330.393967,51.0155393 C330.393967,51.4090901 330.452046,51.8004866 330.566327,52.1770793 L370.770217,184.66154 C371.2818,186.347367 372.836116,187.5 374.597856,187.5 L410.56794,187.5 C412.307555,187.5 413.847715,186.375646 414.377751,184.718744 Z M609.892857,190.5 C644.002101,190.5 667,174.450355 667,143.64539 L667,143.12766 C667,118.664894 649.208929,108.460426 625.494477,101.002777 L623.904868,100.509543 C623.37216,100.346404 622.836658,100.184495 622.29849,100.02369 L620.676125,99.5444603 L619.038552,99.0710951 L617.386555,98.6028369 L613.001051,97.2603787 L611.189694,96.694176 L609.88794,96.27927 L608.635445,95.8713519 L607.432756,95.4691926 L606.280417,95.0715629 L605.540433,94.808386 L604.823231,94.5463117 L604.128973,94.2849759 L603.45782,94.0240145 L602.809933,93.7630631 L602.185475,93.5017577 L601.584607,93.239734 C601.486437,93.1959833 601.389256,93.1521875 601.293069,93.108339 L600.727889,92.844555 C600.543485,92.7563758 600.36308,92.6679252 600.186702,92.5791423 L599.66967,92.3117367 C599.58552,92.2669828 599.502384,92.2221307 599.420263,92.1771727 L598.939768,91.9060948 C598.783687,91.8152718 598.631699,91.723965 598.483832,91.6321135 L598.052617,91.3548645 C595.819012,89.8668424 594.647059,88.2238632 594.647059,86.177305 L594.647059,85.6595745 C594.647059,81.5177305 598.523109,78.6702128 606.016807,78.6702128 C616.381853,78.6702128 630.794334,82.9501422 644.429889,90.2492222 L645.170746,90.6470084 L645.278629,90.6877084 L645.428516,90.7318551 L645.61432,90.7746621 C645.681564,90.788176 645.75378,90.8006688 645.829952,90.8113428 L646.069325,90.8371103 C646.858502,90.8963762 647.913206,90.7194935 648.363501,89.6224742 L649.482426,86.2332564 L650.41522,83.3635462 L652.066003,78.2026376 L653.805034,72.6715009 L655.229292,68.0824946 L657.906292,59.3602096 C658.332293,57.9717378 657.777631,57.2285724 657.347441,56.8859969 L657.223223,56.7949973 L657.113105,56.7265648 L657.065405,56.7003523 C642.103147,48.8120377 624.172333,44.5 606.533613,44.5 C574.233193,44.5 550.460084,61.0673759 550.460084,90.8368794 L550.460084,91.3546099 C550.460084,115.11844 566.32928,125.416099 588.07008,132.422028 L589.614346,132.91123 L591.177336,133.390292 C591.701366,133.548378 592.228386,133.704907 592.758266,133.86001 L594.356357,134.32118 L595.970827,134.774596 L597.600894,135.221053 L599.245776,135.661348 C599.521115,135.734261 599.797038,135.80695 600.073529,135.879433 L603.575041,136.868735 L605.906341,137.539846 L607.668301,138.06027 L608.929112,138.443108 L609.740577,138.69553 L610.913911,139.070971 L611.666742,139.319726 L612.395944,139.567722 L613.101414,139.815365 L613.783052,140.063058 L614.440756,140.311206 C614.548374,140.352624 614.65499,140.394078 614.760602,140.435577 L615.382218,140.685167 C615.483808,140.726876 615.58439,140.768646 615.683962,140.810486 L616.269261,141.062428 L616.830223,141.316444 L617.366747,141.572938 L617.878732,141.832315 C621.126662,143.528516 622.813025,145.433083 622.813025,148.046099 L622.813025,148.56383 C622.813025,153.48227 618.678571,156.070922 610.151261,156.070922 C596.440715,156.070922 580.178478,151.190806 564.881159,141.650754 L564.141733,141.185503 C564.093732,141.155032 564.040729,141.123143 563.983488,141.090874 L563.79981,140.993962 L563.595278,140.900988 C562.919404,140.619369 561.998701,140.490551 561.487311,141.403508 L551.779214,170.769329 L551.450065,171.738253 C550.79398,173.603357 552.142953,174.923294 552.801936,175.310151 C570.051776,185.436717 589.878719,190.5 609.892857,190.5 Z M740.083086,182.5 L740.083086,139.826518 C740.083086,139.577805 740.175768,139.338018 740.343042,139.15396 L757.55884,120.210705 C757.930284,119.80199 758.562728,119.771776 758.971443,120.143219 C759.02977,120.196228 759.081626,120.255946 759.125931,120.32113 L802.916375,184.748531 C803.661045,185.844139 804.899841,186.5 806.224563,186.5 L856.418355,186.5 C858.627494,186.5 860.418355,184.709139 860.418355,182.5 C860.418355,181.694156 860.174957,180.907101 859.720045,180.241939 L793.703389,83.7137554 C793.445031,83.3359897 793.476098,82.831043 793.778816,82.4877974 L855.815462,12.1457707 C857.276681,10.488926 857.118095,7.96123597 855.46125,6.50001714 C854.730545,5.8555868 853.78976,5.5 852.81548,5.5 L804.406558,5.5 C803.233698,5.5 802.119934,6.01475249 801.35994,6.90806657 L741.844741,76.8635966 C741.486869,77.2842468 740.855753,77.3351391 740.435103,76.9772678 C740.211774,76.7872693 740.083086,76.5088283 740.083086,76.2156133 L740.083086,9.5 C740.083086,7.290861 738.292225,5.5 736.083086,5.5 L694,5.5 C691.790861,5.5 690,7.290861 690,9.5 L690,182.5 C690,184.709139 691.790861,186.5 694,186.5 L736.083086,186.5 C738.292225,186.5 740.083086,184.709139 740.083086,182.5 Z M928,182.5 L928,75.0824946 C928,72.8733556 926.209139,71.0824946 924,71.0824946 L883,71.0824946 C880.790861,71.0824946 879,72.8733556 879,75.0824946 L879,182.5 C879,184.709139 880.790861,186.5 883,186.5 L924,186.5 C926.209139,186.5 928,184.709139 928,182.5 Z M1013.35092,189.5 C1025.71919,189.5 1036.40257,186.764504 1044.83085,182.622854 L1045.44285,182.317168 L1045.60937,182.227026 L1045.78895,182.119754 C1046.52796,181.653073 1047.48285,180.715298 1047.48285,178.586712 L1047.48285,145.854246 C1047.48285,144.165121 1046.13184,143.992466 1045.13243,144.162007 L1044.90881,144.206672 C1044.87284,144.21495 1044.83758,144.223601 1044.80314,144.232558 L1044.60696,144.289433 C1044.54533,144.309258 1044.48771,144.329772 1044.43489,144.35044 L1044.35935,144.38149 C1039.37124,146.413468 1034.2066,147.648041 1028.86544,147.648041 C1019.8153,147.648041 1015.41953,143.514514 1015.41953,133.697388 L1015.41953,87.1618287 C1015.41953,86.609544 1015.86724,86.1618287 1016.41953,86.1618287 L1044,86.1618287 C1046.20914,86.1618287 1048,84.3709677 1048,82.1618287 L1048,50.8933237 C1048,48.6841847 1046.20914,46.8933237 1044,46.8933237 L1016.41953,46.8933237 C1015.86724,46.8933237 1015.41953,46.4456084 1015.41953,45.8933237 L1015.41953,15.5 C1015.41953,13.290861 1013.62866,11.5 1011.41953,11.5 L970.548813,11.5 C968.339674,11.5 966.548813,13.290861 966.548813,15.5 L966.548813,45.8933237 C966.548813,46.4456084 966.101097,46.8933237 965.548813,46.8933237 L954,46.8933237 C951.790861,46.8933237 950,48.6841847 950,50.8933237 L950,82.1618287 C950,84.3709677 951.790861,86.1618287 954,86.1618287 L965.548813,86.1618287 C966.101097,86.1618287 966.548813,86.609544 966.548813,87.1618287 L966.548813,143.256168 C966.548813,176.582729 983.873351,189.5 1013.35092,189.5 Z" />
+            </StyledText>
+            <g transform="translate(0.000000, 0.116667)">
+              <g transform="translate(207.496510, 125.867994) rotate(2.000000) translate(-207.496510, -125.867994) translate(4.492344, 7.592994)">
+                <path
+                  d="M375.877049,0.215696421 C396.323202,2.72616833 406.051387,24.5382319 405.906977,53.3345184 L406.008536,53.2533299 C372.459299,80.3556122 306.390178,98.8959782 241.480649,63.6383437 L241.54818,63.541494 C251.115204,68.597871 261.22583,72.497547 273.113127,73.9571235 C287.676144,75.7452372 299.377666,67.7418812 309.994197,56.407445 L310.7507,55.5922645 C310.876484,55.4554859 311.002121,55.3182571 311.127612,55.1805889 L311.878849,54.3493941 L311.878849,54.3493941 L312.626754,53.508177 L312.626754,53.508177 L313.371473,52.657461 L313.371473,52.657461 L314.113149,51.7977691 C314.236516,51.6537682 314.359762,51.5094151 314.482891,51.3647207 L315.220272,50.492546 L315.220272,50.492546 L315.95497,49.6127035 L315.95497,49.6127035 L316.84752,48.5301073 C316.995978,48.3488419 317.14429,48.1671732 317.29246,47.9851212 L318.40118,46.6128503 L318.40118,46.6128503 L319.50512,45.2280542 L320.385172,44.1124446 L321.262753,42.9909538 L322.138122,41.8645309 L323.447601,40.1677244 L325.69509,37.2337517 L328.406356,33.6851504 L330.104566,31.4737425 L331.379227,29.8266632 L332.655668,28.1927616 L333.508026,27.1122995 L334.361787,26.0399213 L335.217197,24.9765177 L336.074499,23.9229795 L336.93394,22.8801977 L337.623197,22.0543153 L337.623197,22.0543153 L338.314104,21.2363432 L338.314104,21.2363432 L339.006787,20.4267375 L339.006787,20.4267375 L339.701372,19.6259542 C339.817302,19.4932508 339.933316,19.3609341 340.049417,19.2290135 L340.747089,18.442319 C340.863549,18.3120208 340.980101,18.1821378 341.096748,18.0526793 L341.79779,17.2810999 C342.148901,16.897934 342.500914,16.5187606 342.853898,16.1438363 L343.561183,15.3997292 C343.915494,15.0305844 344.270824,14.6658598 344.627243,14.305812 L345.341555,13.5920278 C354.408432,4.63167253 364.204592,-1.21750098 375.877049,0.215696421 Z"
+                  fill="#AEBFFF"
+                />
+                <path
+                  d="M161.770583,170.547738 L161.84041,170.624548 C153.212104,166.551895 144.24466,163.480101 134.263015,162.254509 C123.659479,160.952559 114.466007,165.368171 105.981333,172.605536 L105.312951,173.182717 C104.979483,173.474186 104.64709,173.769932 104.315731,174.069779 L103.654375,174.674886 L103.654375,174.674886 L102.995697,175.29061 C102.447892,175.808048 101.902795,176.336216 101.360208,176.874288 L100.710294,177.524675 L100.710294,177.524675 L100.062712,178.184255 L100.062712,178.184255 L99.4173845,178.852709 C99.3100136,178.96484 99.2027335,179.077327 99.0955426,179.190165 L98.4534543,179.871338 C98.3466136,179.985549 98.2398589,180.100097 98.1331886,180.214975 L97.3726713,181.041061 C97.1196294,181.318236 96.8670443,181.597193 96.6148944,181.877844 L95.8597287,182.72479 C95.7340782,182.866765 95.608531,183.009141 95.4830846,183.151907 L94.731593,184.013097 L93.9823892,184.883113 L93.2353436,185.761423 L92.490327,186.647492 L92.1185391,187.093269 L92.1185391,187.093269 L91.2024752,188.201264 L90.7454158,188.758923 L89.8330904,189.88094 L89.3777634,190.445045 L88.4686288,191.578821 L87.5613172,192.719182 L86.2032351,194.439867 L84.3965671,196.747775 L80.3024344,202.005615 L78.949396,203.735743 L77.5946857,205.456843 L76.6902108,206.597551 L75.330888,208.296064 L74.4225774,209.418574 L73.5123064,210.532044 L72.5998317,211.63547 L71.6849099,212.727847 L70.9694154,213.571583 L70.2521684,214.407509 L69.5330533,215.235146 L68.8119548,216.054019 L68.0887571,216.863649 L67.3633448,217.663559 L66.6356025,218.453273 L66.2708214,218.844158 L66.2708214,218.844158 L65.5393672,219.617683 L64.9302762,220.25108 L64.9302762,220.25108 L64.3193151,220.876359 L64.3193151,220.876359 L63.7064176,221.493246 C63.3994738,221.799546 63.0917791,222.102597 62.7832963,222.402246 L62.1652691,222.996961 L62.1652691,222.996961 L61.5450744,223.58233 C61.4415243,223.679098 61.3378812,223.775465 61.2341436,223.871425 L60.6105738,224.442264 C60.1940904,224.81951 59.776052,225.190072 59.3563703,225.553584 L58.7256045,226.09352 C58.6202678,226.182613 58.5148256,226.271254 58.4092767,226.359438 L57.7746899,226.883002 C49.826056,233.357779 41.2610451,237.194553 31.4990938,235.995936 C11.228267,233.506992 1.10292483,212.127979 0.591081538,183.756083 L1.73976389e-12,184.300757 C38.7599925,148.081061 104.696743,143.264562 161.770583,170.547738 Z"
+                  fill="#3358CC"
+                />
+                <path
+                  d="M256.074321,212.727064 C238.613411,210.309671 224.262278,204.984739 211.508193,198.646571 L210.353089,198.067635 C209.969492,197.873761 209.58732,197.67901 209.206531,197.483433 L208.068267,196.894281 L206.656715,196.151362 L206.656715,196.151362 L205.257235,195.401821 L204.146011,194.797834 L202.767017,194.037929 L202.767017,194.037929 L201.398713,193.27313 L200.311436,192.658184 L199.230432,192.040818 L197.620136,191.110923 L195.492675,189.865545 L195.492675,189.865545 L193.794915,188.859895 L192.109418,187.85298 L189.601863,186.343128 L183.828996,182.845666 L182.194942,181.858897 L180.15912,180.636809 L178.128868,179.429767 C172.720463,176.23334 167.349519,173.224902 161.840312,170.624502 L161.770583,170.547738 C105.267481,143.537393 40.0778412,147.987941 1.17091676,183.223588 L0.591068889,183.755382 C-0.61981987,116.613766 52.0067573,10.3111735 151.420544,22.5176516 C168.836212,24.6560268 182.794248,29.6614615 194.993697,35.7655587 L196.081529,36.3150842 C196.442603,36.499207 196.802155,36.6842617 197.160231,36.8702014 L198.230072,37.4306279 L198.761755,37.7127441 L198.761755,37.7127441 L199.818815,38.2806057 L200.867694,38.8530711 L200.867694,38.8530711 L201.908661,39.4298582 L202.426263,39.7197842 L202.426263,39.7197842 L203.712135,40.4487857 L203.712135,40.4487857 L204.986811,41.1833272 L205.998847,41.7745786 L207.004328,42.3687406 L208.003526,42.9655309 L208.996711,43.5646672 L209.984154,44.1658674 L210.966127,44.7688492 L211.942901,45.3733304 L213.533633,46.3667862 L214.324406,46.8643523 L215.897513,47.8603834 L217.460363,48.8565771 L224.398284,53.3081228 L225.926073,54.2829853 L227.45137,55.2499283 L229.356307,56.4455762 L231.261549,57.6244787 C234.424385,59.565348 237.59812,61.4270346 240.830719,63.1596166 L242.045797,63.8031855 C306.164051,98.3871368 371.221738,80.6570654 404.994721,54.0619123 L405.906976,53.3346033 C405.571936,120.134827 352.110084,224.518773 256.074321,212.727064 Z"
+                  fill="#577FFB"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </LogoSvg>
+    </LogoWrapper>
+  ),
+);
+
+export default withTheme(NewsKitLogo);

package/site/components/logo/newskit-mobile-logo.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {
+  withTheme,
+  Theme,
+  styled,
+  getSizingFromTheme,
+  getColorFromTheme,
+} from 'newskit';
+
+const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: ${getSizingFromTheme('sizing090')};
+  height: ${getSizingFromTheme('sizing070')};
+  overflow: hidden;
+`;
+
+interface StyledNewsKitMobileLogo {
+  viewBox?: string;
+  $color: string;
+}
+
+type NewsKitMobileLogoProps = Omit<StyledNewsKitMobileLogo, '$color'> & {
+  color: string;
+};
+
+const LogoSvg = styled.svg<StyledNewsKitMobileLogo>`
+  display: inline-block;
+  fill: ${getColorFromTheme('inkBase', '$color')};
+  color: ${getColorFromTheme('inkBase', '$color')};
+  width: ${getSizingFromTheme('sizing080')};
+  height: ${getSizingFromTheme('sizing060')};
+`;
+
+type LogoWithTheme = NewsKitMobileLogoProps & {theme: Theme};
+
+const NewsKitMobileLogo = React.forwardRef<HTMLDivElement, LogoWithTheme>(
+  ({color, ...props}, ref) => (
+    <LogoWrapper ref={ref}>
+      <LogoSvg viewBox="0 0 587 400" $color={color} {...props}>
+        <title>Newskit Logo</title>
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <path
+            d="M542.931651,29.2896728 C572.492354,32.9192707 586.5572,64.4547843 586.348415,106.08797 L586.495247,105.970589 C537.990326,145.154611 442.468706,171.95996 348.623603,120.985066 L348.721238,120.845043 C362.553081,128.155467 377.170854,133.793553 394.357307,135.903784 C415.412272,138.489009 432.330134,126.917892 447.679336,110.530755 L448.773075,109.352181 C448.954931,109.154429 449.136575,108.956026 449.318008,108.756987 L450.404133,107.55526 L450.404133,107.55526 L451.485443,106.339042 L451.485443,106.339042 L452.562145,105.109091 L452.562145,105.109091 L453.634447,103.866163 C453.812809,103.657969 453.990997,103.449266 454.169014,103.240069 L455.235107,101.979094 L455.235107,101.979094 L456.29732,100.707032 L456.29732,100.707032 L457.587754,99.1418332 C457.802393,98.8797626 458.016819,98.6171092 458.231042,98.3539014 L459.83401,96.3698952 L459.83401,96.3698952 L461.430067,94.3677804 L462.702432,92.7548508 L463.971223,91.1334185 L465.236818,89.5048552 L467.13004,87.0516409 L470.379422,82.8097527 L474.299324,77.6792448 L476.754567,74.4820285 L478.597452,72.100709 L480.442909,69.7384417 L481.675233,68.1763279 L482.909587,66.6259015 L484.146323,65.0884505 L485.385797,63.5652628 L486.628361,62.0576264 L487.624877,60.8635796 L487.624877,60.8635796 L488.623779,59.6809694 L488.623779,59.6809694 L489.625249,58.510455 L489.625249,58.510455 L490.629468,57.3526961 C490.797077,57.1608358 490.964809,56.9695345 491.132666,56.7788059 L492.141348,55.6414163 C492.309724,55.4530334 492.478233,55.2652506 492.646879,55.0780818 L493.660434,53.9625454 C494.168065,53.4085705 494.676998,52.8603679 495.187337,52.3183087 L496.209917,51.2424913 C496.722174,50.708788 497.235905,50.1814753 497.751209,49.6609242 L498.783949,48.6289471 C511.892687,35.6742166 526.055811,27.2175802 542.931651,29.2896728 Z"
+            fill="#AEBFFF"
+          />
+          <path
+            d="M233.380135,275.552866 L233.481089,275.663916 C221.00643,269.775743 208.041451,265.334595 193.610157,263.562655 C178.279744,261.680317 164.987976,268.064335 152.720979,278.527996 L151.754642,279.362473 C151.27252,279.783874 150.791953,280.21146 150.312878,280.644973 L149.356702,281.519826 L149.356702,281.519826 L148.404395,282.410029 C147.612388,283.158133 146.824297,283.921749 146.039833,284.699684 L145.100198,285.640004 L145.100198,285.640004 L144.163935,286.593612 L144.163935,286.593612 L143.230932,287.560052 C143.075697,287.722169 142.920593,287.884802 142.765618,288.047941 L141.837298,289.032769 C141.68283,289.197894 141.528485,289.363505 141.374263,289.529594 L140.27472,290.723935 C139.908877,291.124669 139.543693,291.527981 139.179139,291.933742 L138.087333,293.158242 C137.90567,293.363507 137.724156,293.569352 137.542788,293.775761 L136.456294,295.020854 L135.373107,296.278709 L134.293042,297.548555 L133.215909,298.829619 L132.678385,299.474116 L132.678385,299.474116 L131.353955,301.076035 L130.693146,301.88229 L129.374121,303.504482 L128.715817,304.320056 L127.401406,305.959251 L126.08963,307.607965 L124.126138,310.095703 L121.514088,313.432437 L115.59486,321.034134 L113.63866,323.535524 L111.680042,326.02386 L110.372368,327.673078 L108.407082,330.128759 L107.093862,331.751664 L105.777807,333.3615 L104.458567,334.956815 L103.135788,336.536155 L102.101338,337.756016 L101.064355,338.964583 L100.02467,340.161167 L98.982118,341.345078 L97.936531,342.515628 L96.8877422,343.672125 L95.8355846,344.813881 L95.3081902,345.379015 L95.3081902,345.379015 L94.2506661,346.497364 L93.3700527,347.413119 L93.3700527,347.413119 L92.4867353,348.317137 L92.4867353,348.317137 L91.6006185,349.209022 C91.1568443,349.651865 90.7119845,350.090012 90.2659853,350.523239 L89.372452,351.383068 L89.372452,351.383068 L88.475785,352.229385 C88.326074,352.36929 88.1762285,352.508615 88.0262465,352.647353 L87.1246998,353.472662 C86.5225551,354.018078 85.9181622,354.55383 85.3113935,355.07939 L84.3994429,355.86002 C84.2471489,355.98883 84.0947024,356.116986 83.9421015,356.24448 L83.0246266,357.00144 C71.5326258,366.362564 59.1494776,371.909706 45.035813,370.176766 C15.7285936,366.578292 1.08954462,335.668876 0.349530223,294.649268 L-0.505045496,295.436748 C55.5334979,243.070922 150.863739,236.107309 233.380135,275.552866 Z"
+            fill="#3358CC"
+          />
+          <path
+            d="M369.722888,336.535023 C344.478199,333.039998 323.729573,325.3413 305.289933,316.177684 L303.619902,315.340669 C303.065305,315.060369 302.512767,314.778801 301.962228,314.496039 L300.316545,313.644253 L298.275747,312.570154 L298.275747,312.570154 L296.252403,311.486479 L294.645814,310.613246 L292.652088,309.514587 L292.652088,309.514587 L290.673817,308.408855 L289.101849,307.519775 L287.538952,306.627197 L285.210813,305.282771 L282.134966,303.482225 L282.134966,303.482225 L279.680373,302.028273 L277.243511,300.572493 L273.61813,298.389574 L265.271816,293.333002 L262.909329,291.906348 L259.965971,290.139474 L257.030668,288.394353 C249.211286,283.773014 241.446067,279.423464 233.480948,275.66385 L233.380135,275.552866 C151.688903,236.501765 57.4388213,242.936291 1.18784621,293.879395 L0.349511934,294.648254 C-1.40117061,197.576039 74.685447,43.8855432 218.416223,61.5334634 C243.595502,64.6250902 263.775794,71.8618633 281.413553,80.6870641 L282.986322,81.4815588 C283.508357,81.7477604 284.028191,82.0153094 284.54589,82.2841378 L286.092649,83.0943931 L286.861347,83.5022718 L286.861347,83.5022718 L288.389627,84.3232765 L289.906078,85.1509374 L289.906078,85.1509374 L291.411091,85.9848465 L292.159431,86.4040166 L292.159431,86.4040166 L294.018523,87.4579947 L294.018523,87.4579947 L295.861428,88.5199823 L297.324613,89.3748037 L298.778321,90.233833 L300.222943,91.0966623 L301.658873,91.9628835 L303.086502,92.8320886 L304.506222,93.7038695 L305.918425,94.5778183 L308.21828,96.01414 L309.361566,96.7335126 L311.635937,98.1735576 L313.895479,99.6138377 L323.926209,106.049807 L326.13506,107.459247 L328.340309,108.857237 L331.094434,110.585885 L333.849002,112.290322 C338.421777,115.096398 343.010309,117.787993 347.683946,120.292931 L349.440685,121.223392 C442.141776,171.224285 536.201082,145.590447 585.029491,107.139624 L586.348414,106.088092 C585.864018,202.666729 508.569775,353.583277 369.722888,336.535023 Z"
+            fill="#577FFB"
+          />
+        </g>
+      </LogoSvg>
+    </LogoWrapper>
+  ),
+);
+
+export default withTheme(NewsKitMobileLogo);

package/site/components/markdown-elements.tsx

@@ -0,0 +1,278 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* istanbul ignore file */
+import * as React from 'react';
+import {
+  styled,
+  css,
+  getTypographyPresetFromTheme,
+  getSizingFromTheme,
+  getColorFromTheme,
+} from 'newskit';
+import {LegacyBlock} from './legacy-block';
+import slugify from '../helpers/slugify';
+import {Link} from './link';
+
+export interface TextProps {
+  children: React.ReactNode;
+}
+
+interface DocLinkProps {
+  children: React.ReactNode;
+  href: string;
+}
+
+export interface TableProps {
+  children: React.ReactNode;
+}
+
+const getText = (children: any) => {
+  let label = '';
+  React.Children.forEach(children, child => {
+    if (typeof child === 'string') {
+      label += child;
+    }
+    if (child.props && child.props.children) {
+      label += getText(child.props.children);
+    }
+  });
+  return label;
+};
+
+export const cleanAnchor = (anchor: any) => slugify(getText(anchor));
+
+const Code: React.FC<TextProps> = ({children}) => (
+  <LegacyBlock>{children}</LegacyBlock>
+);
+
+interface HeadingContainerProps {
+  as: React.ElementType;
+  font: string;
+  weight?: number;
+  lineHeight?: number;
+  size?: string;
+  border?: boolean;
+  marginBottom?: string;
+  marginTop?: string;
+  paddingTop?: string;
+  wrapText?: boolean;
+  color?: string;
+}
+
+const TextElement = styled.span<HeadingContainerProps>`
+  ${getTypographyPresetFromTheme(undefined, 'font')};
+  color: ${getColorFromTheme('inkContrast', 'color')};
+  margin-bottom: ${getSizingFromTheme('sizing050')};
+  font-weight: ${({weight}) => weight || null};
+  line-height: ${({lineHeight}) => lineHeight || null};
+  font-size: ${({size}) => size || null};
+  margin-top: ${({marginTop}) => marginTop || null};
+  margin-bottom: ${({marginBottom}) => marginBottom || null};
+  padding-top: ${({paddingTop}) => paddingTop || null};
+  border-bottom: ${({theme, border}) =>
+    border ? `solid 1px ${theme.colors.interface040}` : null};
+  padding-bottom: ${({theme, border}) =>
+    border ? theme.sizing.sizing030 : null};
+  ${({wrapText}) =>
+    wrapText &&
+    css`
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
+    `};
+`;
+
+export const Heading = ({
+  element,
+  fontType,
+  children,
+  weight,
+  size,
+  border,
+  id,
+  wrapText,
+}: {
+  element: React.ElementType;
+  fontType: string;
+  children?: React.ReactNode;
+  weight?: number;
+  size?: string;
+  border?: boolean;
+  id?: string;
+  wrapText?: boolean;
+}) => (
+  <TextElement
+    id={id}
+    as={element}
+    marginBottom="8px"
+    marginTop="-50px"
+    paddingTop="70px"
+    font={fontType}
+    weight={weight}
+    size={size}
+    border={border}
+    wrapText={wrapText}
+  >
+    {children}
+  </TextElement>
+);
+
+const ListItem: React.FC<TextProps> = ({children}) => (
+  <TextElement as="li" font="utilityBody020" marginBottom="0">
+    {children}
+  </TextElement>
+);
+
+const Paragraph: React.FC<TextProps> = ({children}) => (
+  <TextElement as="p" font="utilityBody020" color="inkBase">
+    {children}
+  </TextElement>
+);
+
+const UnorderedList = ({children}: TextProps) => <ul>{children}</ul>;
+
+export const InlineCode = styled.code`
+  background-color: rgba(27, 31, 35, 0.05);
+  color: ${getColorFromTheme('inkSubtle')};
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+  font-family: monospace;
+`;
+
+InlineCode.displayName = 'InlineCode';
+
+const Blockquote = styled.blockquote`
+  background-color: ${getColorFromTheme('inkSubtle')};
+  border-radius: 3px;
+  margin: 0;
+  padding: 1em 3em;
+`;
+
+export const Table = styled.table`
+  ${getTypographyPresetFromTheme('utilityBody020')}
+  background-color: ${getColorFromTheme('interface010')};
+  box-shadow: 0 3px 4px 2px ${getColorFromTheme('interface010')};
+
+  &,
+  td,
+  th {
+    color: ${getColorFromTheme('inkContrast')};
+    border-spacing: 0;
+    border: solid 1px ${getColorFromTheme('interface040')};
+  }
+
+  td,
+  th {
+    padding: ${getSizingFromTheme('sizing020')}
+      ${getSizingFromTheme('sizing030')};
+    border-top: none;
+  }
+
+  th {
+    text-align: left;
+  }
+`;
+
+const TableWrapper = styled.div`
+  overflow-x: auto;
+  width: 100%;
+  margin-bottom: 40px;
+`;
+
+const SectionLink = styled.a<{offset?: number}>`
+  display: block;
+  position: relative;
+  top: ${({offset = 0}) => `${-offset}px`};
+  visibility: hidden;
+`;
+
+export const DocLink: React.FC<DocLinkProps> = ({children, href, ...rest}) => {
+  const parts = href.split('#');
+  const internal =
+    (parts[0] === '' && parts[1] !== '') || !href.includes('http');
+  return (
+    <Link {...(internal ? {} : {target: '_blank'})} href={href} {...rest}>
+      {children}
+    </Link>
+  );
+};
+
+export const H1 = ({children}: TextProps) => (
+  <>
+    <Heading
+      id={
+        (children &&
+          typeof children === 'string' &&
+          children.toLowerCase().replace(/\s+/g, '-')) as string | undefined
+      }
+      element="h1"
+      fontType="utilityHeading050"
+      wrapText
+    >
+      {children as string}
+    </Heading>
+  </>
+);
+
+export const H2 = ({children, offset}: TextProps & {offset?: number}) => {
+  const id = (children &&
+    typeof children === 'string' &&
+    children.toLowerCase().replace(/\s+/g, '-')) as string | undefined;
+  return (
+    <>
+      <SectionLink id={id} offset={offset} />
+      <Heading element="h2" fontType="utilitySubheading040" border>
+        {children as string}
+      </Heading>
+    </>
+  );
+};
+
+export const H3 = ({children}: TextProps) => (
+  <Heading element="h3" fontType="utilitySubheading020" border>
+    {children as string}
+  </Heading>
+);
+
+export const ScrollableTable = ({children}: TableProps) => (
+  <TableWrapper>
+    <Table>{children}</Table>
+  </TableWrapper>
+);
+
+const MarkdownElements = {
+  code: ({children, ...props}: TextProps) => (
+    <Code {...props}>{children as string}</Code>
+  ),
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: ({children}: TextProps) => (
+    <Heading element="h4" fontType="utilitySubheading010">
+      {children as string}
+    </Heading>
+  ),
+  h5: ({children}: TextProps) => (
+    <Heading element="h5" fontType="utilityBody020">
+      {children as string}
+    </Heading>
+  ),
+  h6: ({children}: TextProps) => (
+    <Heading element="h6" fontType="utilityBody010">
+      {children as string}
+    </Heading>
+  ),
+  li: ListItem,
+  p: Paragraph,
+  ul: UnorderedList,
+  inlineCode: ({children}: TextProps) => <InlineCode>{children}</InlineCode>,
+  blockquote: ({children}: TextProps) => <Blockquote>{children}</Blockquote>,
+  a: ({children, href, ...props}: any) => (
+    <DocLink {...props} href={href}>
+      {children as string}
+    </DocLink>
+  ),
+  table: ScrollableTable,
+};
+export default MarkdownElements;

package/site/components/media-list/__mocks__/media-list.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const MediaList: React.FC = props => (
+  <div>
+    MediaList Component with props:
+    {JSON.stringify(props, null, 2)}
+  </div>
+);

package/site/components/media-list/index.ts

@@ -0,0 +1,2 @@
+export * from './media-list';
+export * from './types';

package/site/components/media-list/media-list.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {StyledComponent} from '@emotion/styled';
+import {Cell, Grid, Block, Visible, BreakpointKeys, styled} from 'newskit';
+import NextLink from 'next/link';
+import {UsageCard, UsageCardProps} from '../usage-card';
+import {BaseCard, BaseCardProps} from '../base-card';
+import {MediaListProps} from './types';
+import {spanListConfig} from './span-list-config';
+import {FeatureCard, FeatureCardProps} from '../feature-card';
+
+const CardTypes = {
+  usage: UsageCard,
+  base: BaseCard,
+  feature: FeatureCard,
+};
+
+export const MediaList: React.FC<MediaListProps> = ({
+  spaceStack,
+  cardsLayout,
+  layout = '3-span',
+  cards,
+  cardType = 'base',
+  gridProps,
+  horizontalRatio,
+}) => {
+  const renderCards = (cardListOrientation?: 'vertical' | 'horizontal') => {
+    const cardListToRender = [];
+    const CardComponent = CardTypes[cardType];
+    const StyledCardComponent = styled(
+      CardComponent as StyledComponent<
+        BaseCardProps | UsageCardProps | FeatureCardProps | MediaListProps
+      >,
+    )`
+      height: 100%;
+      svg {
+        display: block;
+      }
+    `;
+
+    const cardListColumns = {
+      heroCard: {xs: 12},
+      notHeroCardGroup: spanListConfig[layout],
+    };
+
+    if (cards.length === 0) return null;
+
+    cardListToRender.push(
+      cards.map((cardProps, index) => {
+        let cellColumnList;
+        if (layout.includes('hero') && index === 0) {
+          cellColumnList = cardListColumns.heroCard;
+        } else {
+          cellColumnList = cardListColumns.notHeroCardGroup;
+        }
+
+        const styledCardComponentWithProps = (
+          <StyledCardComponent
+            layout={cardListOrientation}
+            overrides={{horizontalRatio} as {}}
+            {...cardProps}
+          />
+        );
+
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <Cell {...cellColumnList} key={`index-${index}`}>
+            {cardProps.href ? (
+              <NextLink legacyBehavior href={cardProps.href} passHref>
+                {styledCardComponentWithProps}
+              </NextLink>
+            ) : (
+              styledCardComponentWithProps
+            )}
+          </Cell>
+        );
+      }),
+    );
+
+    return cardListToRender;
+  };
+
+  const renderBreakpointCards = () => {
+    if (!cardsLayout || typeof cardsLayout === 'string') {
+      return renderCards(cardsLayout);
+    }
+    const keys = Object.keys(cardsLayout) as BreakpointKeys[];
+
+    const verticalBreakpoints = keys.reduce((acc, key) => {
+      // by looking for non-horizontal rather than vertical, it means we default to vertical cards if not specified.
+      acc[key] = cardsLayout[key] !== 'horizontal';
+      return acc;
+    }, {} as Record<string, boolean>);
+
+    const horizontalBreakpoints = keys.reduce((acc, key) => {
+      acc[key] = cardsLayout[key] === 'horizontal';
+      return acc;
+    }, {} as Record<string, boolean>);
+
+    return (
+      <>
+        <Visible {...verticalBreakpoints}>{renderCards('vertical')}</Visible>
+
+        <Visible {...horizontalBreakpoints}>
+          {renderCards('horizontal')}
+        </Visible>
+      </>
+    );
+  };
+
+  return (
+    <Block spaceStack={spaceStack}>
+      <Grid xsRowGutter="space080" xsMargin="space000" {...gridProps}>
+        {renderBreakpointCards()}
+      </Grid>
+    </Block>
+  );
+};

package/site/components/media-list/span-list-config.tsx

@@ -0,0 +1,8 @@
+export const spanListConfig = {
+  '1-span': {xs: 12},
+  '2-span': {xs: 12, md: 6},
+  '2-span-hero': {xs: 12, md: 6},
+  '3-span': {xs: 12, md: 4},
+  '3-span-hero': {xs: 12, md: 4},
+  '4-span': {xs: 12, md: 6, xl: 3},
+};

package/site/components/media-list/types.ts

@@ -0,0 +1,22 @@
+import {GridProps, MQ} from 'newskit';
+import {FeatureCardProps} from '../feature-card';
+import {UsageCardProps} from '../usage-card';
+import {BaseCardProps} from '../base-card';
+
+export interface MediaListProps {
+  cards: Array<MediaItem>;
+  cardType?: 'base' | 'usage' | 'feature';
+  cardsLayout?: MQ<'horizontal' | 'vertical'>;
+  layout?:
+    | '1-span'
+    | '2-span'
+    | '2-span-hero'
+    | '3-span'
+    | '3-span-hero'
+    | '4-span';
+  spaceStack?: string;
+  gridProps?: GridProps;
+  horizontalRatio?: string;
+  notice?: string | React.ReactNode;
+}
+export type MediaItem = BaseCardProps | UsageCardProps | FeatureCardProps;