@ably/ui 7.1.0-dev.02abc5e → 7.1.0-dev.97a5585

package/core/Footer.jsx

@@ -405,12 +405,12 @@ function Footer(_ref) {
   }, "Developers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/documentation/quick-start-guide"),
+    href: absUrl("/docs/quick-start-guide"),
     className: "ui-footer-menu-row-link"
   }, "Start in 5 minutes")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/documentation/"),
+    href: absUrl("/docs/"),
     className: "ui-footer-menu-row-link"
   }, "Documentation")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"

package/core/Loader.jsx

@@ -232,7 +232,7 @@ var Loader = function Loader(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("style", {
     dangerouslySetInnerHTML: {
-      "__html": "\n      @keyframes chunk-animation {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      .chunk {\n        transform: rotate(0deg);\n        transform-origin: center;\n        animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;\n      }\n    "
+      __html: "\n      @keyframes chunk-animation {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      .chunk {\n        transform: rotate(0deg);\n        transform-origin: center;\n        animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;\n      }\n    "
     }
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
     fill: "currentColor",

package/core/Meganav.jsx

@@ -657,7 +657,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "text-p1 font-medium text-cool-black mb-20"
   }, "Docs, quick start guides, tutorials, and API reference to help you start building with Ably\u2019s platform and APIs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/documentation")
+    url: absUrl("/docs")
   }, "Visit Documentation")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-explore"

package/core/MeganavContentDevelopers.jsx

@@ -345,7 +345,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "text-p1 font-medium text-cool-black mb-20"
   }, "Docs, quick start guides, tutorials, and API reference to help you start building with Ably\u2019s platform and APIs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/documentation")
+    url: absUrl("/docs")
   }, "Visit Documentation")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-explore"

package/core/styles.css

@@ -19,13 +19,13 @@
     --color-gui-viewed: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
+    --color-gui-success: #11cb24;
 
     /* code syntax: theme */
     --syntax-black: var(--color-cool-black);
     --syntax-dark-grey: var(--color-dark-grey);
     --syntax-mid-grey: var(--color-mid-grey);
     --syntax-light-grey: var(--color-light-grey);
-
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -154,7 +154,7 @@
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
     --bp-xs: 375px; /* gutters 8px, side-margin 24px */
-    --bp-sm: 600px; /* gutters 16px, side-margin 32px */
+    --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
     --bp-xl: 1440px; /* gutters 32px, side-margin 64px */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "7.1.0-dev.02abc5e",
+  "version": "7.1.0-dev.97a5585",
   "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

@@ -74,10 +74,10 @@
       <h2 class="ui-footer-col-title">Developers</h2>
       <ul>
         <li class="p-menu-row-snug">
-          <%= link_to 'Start in 5 minutes', abs_url("/documentation/quick-start-guide"), class: "ui-footer-menu-row-link" %>
+          <%= link_to 'Start in 5 minutes', abs_url("/docs/quick-start-guide"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-          <%= link_to 'Documentation', abs_url("/documentation"), class: "ui-footer-menu-row-link" %>
+          <%= link_to 'Documentation', abs_url("/docs"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Tutorials', abs_url("/tutorials"), class: "ui-footer-menu-row-link" %>

package/src/core/Footer/component.jsx

@@ -116,12 +116,12 @@ export default function Footer({ paths, urlBase }) {
           <h2 className="ui-footer-col-title">Developers</h2>
           <ul>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/documentation/quick-start-guide")} className="ui-footer-menu-row-link">
+              <a href={absUrl("/docs/quick-start-guide")} className="ui-footer-menu-row-link">
                 Start in 5 minutes
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/documentation/")} className="ui-footer-menu-row-link">
+              <a href={absUrl("/docs/")} className="ui-footer-menu-row-link">
                 Documentation
               </a>
             </li>

package/src/core/Loader/component.jsx

@@ -1,9 +1,18 @@
 import React from "react";
 import T from "prop-types";
 
-const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS = "" }) =>
-  <svg className={`${ringColor} ${additionalCSS}`} style={{ width: size, height: size }}  height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <style dangerouslySetInnerHTML={{"__html": `
+const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS = "" }) => (
+  <svg
+    className={`${ringColor} ${additionalCSS}`}
+    style={{ width: size, height: size }}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
       @keyframes chunk-animation {
         to {
           transform: rotate(360deg);
@@ -15,11 +24,21 @@ const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS =
         transform-origin: center;
         animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
       }
-    `}}>
-    </style>
-    <path fill="currentColor" d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z" opacity=".5"/>
-    <path className="chunk" d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z" fill="#ff5416"/>
-  </svg>;
+    `,
+      }}
+    ></style>
+    <path
+      fill="currentColor"
+      d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z"
+      opacity=".5"
+    />
+    <path
+      className="chunk"
+      d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z"
+      fill="#ff5416"
+    />
+  </svg>
+);
 
 Loader.propTypes = {
   size: T.string,

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

@@ -11,7 +11,7 @@
       Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
     </p>
 
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/documentation"))) do %>Visit Documentation<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/docs"))) do %>Visit Documentation<% end %>
   </div>
 
   <div>

package/src/core/MeganavContentDevelopers/component.jsx

@@ -18,7 +18,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
         Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
       </p>
 
-      <FeaturedLink url={absUrl("/documentation")}>Visit Documentation</FeaturedLink>
+      <FeaturedLink url={absUrl("/docs")}>Visit Documentation</FeaturedLink>
     </div>
 
     <div>

package/src/core/styles/properties.css

@@ -19,13 +19,13 @@
     --color-gui-viewed: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
+    --color-gui-success: #11cb24;
 
     /* code syntax: theme */
     --syntax-black: var(--color-cool-black);
     --syntax-dark-grey: var(--color-dark-grey);
     --syntax-mid-grey: var(--color-mid-grey);
     --syntax-light-grey: var(--color-light-grey);
-
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -154,7 +154,7 @@
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
     --bp-xs: 375px; /* gutters 8px, side-margin 24px */
-    --bp-sm: 600px; /* gutters 16px, side-margin 32px */
+    --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
     --bp-xl: 1440px; /* gutters 32px, side-margin 64px */

package/tailwind.config.js

@@ -76,6 +76,7 @@ module.exports = {
       "gui-viewed": "var(--color-gui-viewed)",
       "gui-unavailable": "var(--color-gui-unavailable)",
       "gui-error": "var(--color-gui-error)",
+      "gui-success": "var(--color-gui-success)",
       "icon-linkedin": "var(--icon-color-linkedin)",
       "icon-twitter": "var(--icon-color-twitter)",
       "icon-glassdoor": "var(--icon-color-glassdoor)",