@ably/ui 8.6.0 → 8.7.0-dev.06c4734

package/core/styles.css

@@ -47,6 +47,8 @@
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
     --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,
@@ -345,7 +347,7 @@
 
   .ui-text-h4 {
     @apply font-sans font-medium text-cool-black;
-    @apply text-h4 uppercase;
+    @apply text-h4;
     @apply tracking-widen-0.1;
   }
 
@@ -467,16 +469,15 @@
   }
 
   .ui-link {
-    @apply visited:text-gui-visited;
+    @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply visited:text-dark-grey;
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
 }
@@ -544,12 +545,6 @@
     color: #76767c;
   }
 
-  .ui-textarea:-ms-input-placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
-
   .ui-textarea::placeholder {
     /* CSS vars don't work in ::placeholder in Webkit :( */
     /* color: var(--text-dark-grey); */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.6.0",
+  "version": "8.7.0-dev.06c4734",
   "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",
@@ -34,6 +34,7 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
     "extra-watch-webpack-plugin": "^1.0.3",
+    "find-imports": "^1.1.0",
     "mini-css-extract-plugin": "^1.2.1",
     "null-loader": "^4.0.1",
     "postcss": "^8.1.10",
@@ -42,7 +43,6 @@
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
-    "prop-types": "^15.7.2",
     "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^2.0.1",
     "tailwindcss-filters": "^3.0.0",
@@ -67,13 +67,13 @@
   "dependencies": {
     "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
-    "deepmerge": "^4.2.2",
     "dompurify": "^2.2.9",
     "highlight.js": "^10.7.2",
+    "highlightjs-curl": "^1.3.0",
     "js-cookie": "^2.2.1",
-    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "redux": "^4.0.5",

package/reset/scripts.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()));

package/reset/styles.css

@@ -86,8 +86,7 @@
   abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
-    -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted; /* 2 */
+    text-decoration: underline dotted; /* 2 */
   }
 
   /**
@@ -444,19 +443,10 @@
     resize: vertical;
   }
 
-  input:-ms-input-placeholder,
-  textarea:-ms-input-placeholder {
-    color: #a0aec0;
-  }
-
   input::-moz-placeholder, textarea::-moz-placeholder {
     color: #a0aec0;
   }
 
-  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-    color: #a0aec0;
-  }
-
   input::placeholder,
   textarea::placeholder {
     color: #a0aec0;

package/src/core/Code/component.css

@@ -1,67 +1 @@
-@import "../fonts/source-code-pro.css";
-
-@layer components {
-  .hljs {
-    background: var(--syntax-black);
-    color: var(--syntax-light-grey);
-  }
-
-  .hljs-emphasis {
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    font-weight: bold;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: var(--syntax-dark-grey);
-  }
-
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag,
-  .hljs-name,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-regexp,
-  .hljs-deletion {
-    color: var(--syntax-red);
-  }
-
-  .hljs-number,
-  .hljs-built_in,
-  .hljs-literal,
-  .hljs-type,
-  .hljs-params,
-  .hljs-meta,
-  .hljs-link {
-    color: var(--syntax-orange);
-  }
-
-  .hljs-attribute {
-    color: var(--syntax-yellow);
-  }
-
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition {
-    color: var(--syntax-green);
-  }
-
-  .hljs-title,
-  .hljs-section {
-    color: var(--syntax-blue);
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag {
-    color: var(--syntax-lilac);
-  }
-
-  .hljs-subst {
-    color: var(--syntax-mid-grey);
-  }
-}
+@import "../utils/syntax-highlighter.css";

package/src/core/Code/component.js

@@ -1,47 +1,17 @@
 import "./component.css";
-import hljs from "highlight.js/lib/core";
 
-import bash from "highlight.js/lib/languages/bash";
-import cpp from "highlight.js/lib/languages/cpp";
-import csharp from "highlight.js/lib/languages/csharp";
-import dart from "highlight.js/lib/languages/dart";
-import plaintext from "highlight.js/lib/languages/plaintext";
-import go from "highlight.js/lib/languages/go";
-import java from "highlight.js/lib/languages/java";
-import javascript from "highlight.js/lib/languages/javascript";
-import json from "highlight.js/lib/languages/json";
-import objectivec from "highlight.js/lib/languages/objectivec";
-import php from "highlight.js/lib/languages/php";
-import python from "highlight.js/lib/languages/python";
-import ruby from "highlight.js/lib/languages/ruby";
-import swift from "highlight.js/lib/languages/swift";
-import xml from "highlight.js/lib/languages/xml";
+// Note: importing syntax-highlighter here means the component.js file will include
+// all the language dependecies, creating a large a bundle. Prefer using the highlighter serverside.
+import {
+  highlightSnippet,
+  registerDefaultLanguages,
+} from "../utils/syntax-highlighter";
 
-// Supported languages need to be imported here
-// https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md
-const register = [
-  { label: "", key: "plaintext", module: plaintext },
-  { label: "JS", key: "javascript", module: javascript },
-  { label: "Java", key: "java", module: java },
-  { label: "Ruby", key: "ruby", module: ruby },
-  { label: "Python", key: "python", module: python },
-  { label: "PHP", key: "php", module: php },
-  { label: "Shell", key: "bash", module: bash },
-  { label: "C#", key: "cs", module: csharp },
-  { label: "Go", key: "go", module: go },
-  { label: "HTML", key: "xml", module: xml },
-  { label: "C++", key: "cpp", module: cpp },
-  { label: "Dart", key: "dart", module: dart },
-  { label: "Swift", key: "swift", module: swift },
-  { label: "Objective C", key: "objectivec", module: objectivec },
-  { label: "Node.js", key: "javascript", module: javascript },
-  { label: "JSON", key: "json", module: json },
-];
+import languagesRegistry from "../utils/syntax-highlighter-registry";
 
-// Initialize a sub-set of languages as used
-register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
+registerDefaultLanguages(languagesRegistry);
 
-function convertCodeToHTML(el) {
+function highlightEl(el) {
   if (!el) throw "Missing code element";
 
   const pre = el.querySelector("pre");
@@ -51,14 +21,9 @@ function convertCodeToHTML(el) {
   if (!code || !pre || !language) throw "Malformed code element";
 
   const { innerHTML } = code;
-  const html = hljs.highlight(innerHTML, { language }).value;
+  const html = highlightSnippet(language, innerHTML);
 
   code.innerHTML = html;
 }
 
-function highlight(language, snippet) {
-  return hljs.highlight(snippet, { language }).value;
-}
-
-export { highlight };
-export default convertCodeToHTML;
+export default highlightEl;

package/src/core/Code/component.jsx

@@ -1,12 +1,16 @@
 import React from "react";
 import T from "prop-types";
 
-import "./component.css";
-import { highlight } from "./component.js";
+import "../utils/syntax-highlighter.css";
+import { highlightSnippet, registerDefaultLanguages } from "../utils/syntax-highlighter";
+import languagesRegistry from "../utils/syntax-highlighter-registry";
+
+registerDefaultLanguages(languagesRegistry);
 
 const Code = ({ language, snippet, textSize = "ui-text-code", padding = "p-32", additionalCSS = "" }) => {
-  const HTMLraw = highlight(language, `${snippet}`.trim());
+  const HTMLraw = highlightSnippet(language, `${snippet}`.trim());
   const className = `language-${language} ${textSize}`;
+
   return (
     <div className={`hljs overflow-auto ${padding} ${additionalCSS}`} data-id="code">
       <pre lang={language}>

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

@@ -1,9 +1,9 @@
 <section class="w-full bg-white">
-  <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+  <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
     <% companies.each do |company| %>
 	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
 	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
 	    </li>
     <% end %>
-  </ul>
+  <% end %>
 </section>

package/src/core/CustomerLogos/component.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import T from "prop-types";
 
-const CustomerLogos = ({ companies }) => {
+const CustomerLogos = ({ companies, additionalCss = "" }) => {
   return (
     <section className="w-full bg-white">
-      <ul className="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+      <ul className={`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`}>
         {companies.map((company) => (
           <li key={company.label} className="flex-auto text-center sm:w-1/3 w-1/2">
             <img alt={company.label} src={company.logo} className="mx-auto" />
@@ -22,6 +22,7 @@ CustomerLogos.propTypes = {
       logo: T.string,
     })
   ),
+  additionalCss: T.string,
 };
 
 export default CustomerLogos;

package/src/core/CustomerLogos/component.rb

@@ -5,8 +5,9 @@ module AblyUi
     class CustomerLogos < ViewComponent::Base
       attr_reader :companies
 
-      def initialize(companies:)
+      def initialize(companies:, additional_css: '')
         @companies = companies
+        @additional_css = additional_css
       end
     end
   end

package/src/core/DropdownMenu/component.jsx

@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import T from "prop-types";
+import Icon from "../Icon/component.jsx";
+
+const DropdownMenuContext = createContext();
+
+const DropdownMenu = ({ children }) => {
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const clickHandler = (e) => {
+      if (ref?.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("click", clickHandler);
+
+    return () => {
+      document.removeEventListener("click", clickHandler);
+    };
+  }, []);
+
+  return (
+    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>
+      <div id="dropdown-menu" className="relative" ref={ref}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+};
+
+DropdownMenu.propTypes = {
+  children: T.node,
+};
+
+const Trigger = ({ children, additionalTriggerCSS = "" }) => {
+  const { isOpen, setOpen } = useContext(DropdownMenuContext);
+
+  return (
+    <button
+      id="menu-trigger"
+      onClick={() => setOpen(!isOpen)}
+      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}
+    >
+      <span className="leading-normal">{children}</span>
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-cool-black"
+        size="1.25rem"
+        additionalCSS="transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+      />
+    </button>
+  );
+};
+
+Trigger.propTypes = {
+  children: T.node,
+  additionalTriggerCSS: T.string,
+};
+
+const Content = ({ children, anchorPosition = "right", additionalContentCSS }) => {
+  const { isOpen } = useContext(DropdownMenuContext);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const anchorPositionClasses = anchorPosition === "right" ? "right-0" : "left-0";
+
+  return (
+    <div
+      id="menu-content"
+      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}
+      style={{ minWidth: 275, top: 44 }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Content.propTypes = {
+  children: T.node,
+  anchorPosition: T.string,
+  additionalContentCSS: T.string,
+};
+
+const Link = ({ url, title, subtitle, iconName, children }) => {
+  return (
+    <a href={url} className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded">
+      <p className="mb-4">
+        {title}
+        {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
+      </p>
+      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {children}
+    </a>
+  );
+};
+
+Link.propTypes = {
+  url: T.string,
+  title: T.string,
+  subtitle: T.string,
+  iconName: T.string,
+  children: T.node,
+};
+
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Link = Link;
+export default DropdownMenu;

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

@@ -29,15 +29,15 @@
           <ul class="relative ml-24 text-p1 font-light leading-8">
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              3m messages per month
+              6m messages per month
             </li>
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              100 peak connections
+              200 peak connections
             </li>
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              100 peak channels
+              200 peak channels
             </li>
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
@@ -46,7 +46,7 @@
           </ul>
         </span>
         <span class="flex-0">
-          <%= link_to 'Start with a free account', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
+          <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
         </span>
       </div>
     </div>

package/src/core/Flash/component.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
 import T from "prop-types";
+import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
@@ -50,30 +51,45 @@ const FLASH_TEXT_COLOR = {
 const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
-const Flash = ({ type, content }) => {
-  const ref = useRef(null);
-  const [closed, setClosed] = useState(false);
-  const [flashHeight, setFlashHeight] = useState(0);
-  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
+const useAutoHide = (type, closeFlash) => {
+  const timeoutId = useRef(null);
 
-  useEffect(() => setTriggerEntryAnimation(true), []);
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
-      setTimeout(() => {
-        // closeFlash is idempotent, we can call it even if the flash has been already closed
+      timeoutId.current = setTimeout(() => {
         closeFlash();
       }, AUTO_HIDE_TIME);
     }
-  }, [closed]);
+
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+};
+
+const Flash = ({ id, type, content, removeFlash }) => {
+  const ref = useRef(null);
+  const [closed, setClosed] = useState(false);
+  const [flashHeight, setFlashHeight] = useState(0);
+  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
 
   const closeFlash = () => {
     if (ref.current) {
       setFlashHeight(ref.current.getBoundingClientRect().height);
     }
 
-    setTimeout(() => setClosed(true), 0);
+    setClosed(true);
+
+    setTimeout(() => {
+      removeFlash(id);
+    }, 100);
   };
 
+  useEffect(() => setTriggerEntryAnimation(true), []);
+  useAutoHide(type, closeFlash);
+
   const animateEntry = triggerEntryAnimation && !closed;
 
   let style;
@@ -110,10 +126,8 @@ const Flash = ({ type, content }) => {
       <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
         {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
         <p className={`ui-flash-text ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
-        <button type="button" className="p-0 ml-auto self-start" onClick={closeFlash}>
-          <svg className="h-24 w-24 transition-colors ui-icon-cool-black">
-            <use xlinkHref="#sprite-close"></use>
-          </svg>
+        <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
+          <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
         </button>
       </div>
     </div>
@@ -125,13 +139,23 @@ Flash.propTypes = {
 };
 
 const Flashes = ({ flashes }) => {
-  const items = flashes?.items || [];
+  const [flashesWithIds, setFlashesWithIds] = useState([]);
+
+  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+
+  useEffect(() => {
+    setFlashesWithIds((state) => {
+      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+    });
+  }, [flashes]);
 
   return (
     <div className="ui-flash" data-id={FLASH_DATA_ID}>
-      {items.map((flash) => (
-        <Flash key={flash.type} {...flash} />
-      ))}
+      {flashesWithIds
+        .filter((item) => !item.removed)
+        .map((flash) => (
+          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+        ))}
     </div>
   );
 };

package/src/core/Footer/component.css

@@ -8,6 +8,26 @@
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
+  }
+
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
+
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
+
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
+  }
+
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }