@ably/ui 8.7.0-dev.5f7f2f9 → 8.7.0-dev.6053fb4

package/core/Footer.jsx

@@ -203,11 +203,11 @@ function Footer(_ref) {
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
   }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "grid grid-cols-4 md:col-span-2"
+    className: "md:col-span-4 md:w-3/4 xs:w-3/5 w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p3 py-16 font-medium p-menu-row-snug col-span-3"
+    className: "text-p3 py-16 font-medium p-menu-row-snug"
   }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    className: "grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 sm:grid-cols-1"
+    className: "grid grid-cols-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -492,7 +492,7 @@ function Footer(_ref) {
     href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
     className: "ui-footer-link"
   }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto"
+    className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 w-96 h-96",
     src: paths.highestUserAdoption,
@@ -510,7 +510,7 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
     className: "border-t border-mid-grey my-0"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px "
+    className: "max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -528,7 +528,7 @@ function Footer(_ref) {
     href: absUrl("/privacy"),
     className: "ui-footer-link"
   }, "Privacy"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 "
+    className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 "
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex mr-24"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.5f7f2f9",
+  "version": "8.7.0-dev.6053fb4",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/Footer/component.html.erb

@@ -5,12 +5,12 @@
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
         <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
       </div>
-      <div class="grid grid-cols-4 md:col-span-2">
-        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+      <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
-      <ul class="grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 sm:grid-cols-1">
+      <ul class="grid grid-cols-1">
         <li class="p-menu-row-snug">
           <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
         </li>
@@ -216,9 +216,9 @@
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey  my-0"/>
+    <hr class="border-t border-mid-grey my-0"/>
   </div>
-  <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
+  <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
     <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
       <div class="flex">
         <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>

package/src/core/Footer/component.jsx

@@ -15,13 +15,13 @@ export default function Footer({ paths, urlBase }) {
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
             <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
           </div>
-          <div className="grid grid-cols-4 md:col-span-2">
-            <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
+            <p className="text-p3 py-16 font-medium p-menu-row-snug">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
 
-          <ul className="grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 sm:grid-cols-1">
+          <ul className="grid grid-cols-1">
             <li className="p-menu-row-snug">
               <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
@@ -304,7 +304,7 @@ export default function Footer({ paths, urlBase }) {
           </div>
         </div>
 
-        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
+        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
           <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
           <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
           <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
@@ -314,7 +314,7 @@ export default function Footer({ paths, urlBase }) {
       <div className="max-w-screen-xl ui-grid-px mx-auto">
         <hr className="border-t border-mid-grey my-0" />
       </div>
-      <div className="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
+      <div className="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
         <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
           <div className="flex">
             <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
@@ -331,7 +331,7 @@ export default function Footer({ paths, urlBase }) {
             </a>
           </div>
         </div>
-        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
           <div className="flex mr-24">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>