@ably/ui 13.3.0 → 14.0.0-dev.1939f45

package/src/core/{react-renderer.js → react-renderer.tsx}

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
-const renderComponent = (Component, props, node) =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(<Component {...props} />, node);
+const renderComponent = (Component, props, node) => {
+  const root = createRoot(node);
+  root.render(<Component {...props} />);
+};
 
 export { renderComponent };
 
@@ -11,15 +12,16 @@ export default function reactRenderer(components) {
   const reactComponents = document.querySelectorAll("[data-react]");
 
   Array.from(reactComponents).forEach((node) => {
-    const className = node.getAttribute("data-react");
+    const className = node.getAttribute("data-react") ?? "";
     const Constructor = components[className];
 
     if (!Constructor) return;
 
     const propsJson = node.getAttribute("data-react-props");
-    const props = propsJson && JSON.parse(propsJson || {});
+    const props = propsJson && JSON.parse(propsJson || "");
 
-    ReactDOM.render(<Constructor {...props} />, node);
+    const root = createRoot(node);
+    root.render(<Constructor {...props} />);
 
     node.removeAttribute("data-react");
     node.removeAttribute("data-react-props");

package/src/core/scripts.js

@@ -1,7 +1,5 @@
 import "array-flat-polyfill";
 
-import "./styles.css";
-
 export { default as reactRenderer, renderComponent } from "./react-renderer";
 export { default as loadSprites } from "./load-sprites";
 export { default as toggleChatWidget } from "./hubspot-chat-toggle";

package/src/core/styles/properties.css

@@ -134,11 +134,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* uptime status colors */
-    --uptime-color-up: #39b54a;
-    --uptime-color-trouble: #e87623;
-    --uptime-color-down: #e6242c;
-
     /* flat colors for social icons */
     --icon-color-linkedin: #1269bf;
     --icon-color-twitter: #2caae1;
@@ -279,7 +274,5 @@
 
     /* Expose component values for cross-component usage */
     --ui-meganav-height: 4rem;
-    --ui-showcase-client-logo-min-width: 8.75rem; /* 140px at 16px base*/
-    --ui-showcase-client-logo-max-width: 15rem; /* 240px at 16px base*/
   }
 }

package/src/core/utils/syntax-highlighter.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+
 @layer base {
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
   @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");

package/src/pages/Buttons.mdx

@@ -0,0 +1,121 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import Icon from "../core/Icon";
+
+<Meta title="Brand/Buttons" />
+
+<Unstyled>
+  <h2 className="ui-text-h1 mb-32">Buttons</h2>
+  <div className="flex flex-wrap">
+    <p className="ui-text-p1 mb-32">Different size buttons can be achieved by using padding and text utilities, see
+      examples below.</p>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Standard</h3>
+      <button type="button" className="ui-btn">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-alt">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        Unavailable primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16 bg-cool-black">
+      <h3 className="ui-text-h3 text-white">Inverted</h3>
+      <button type="button" className="ui-btn-invert">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn-invert" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">With icons</h3>
+      <button type="button" className="ui-btn">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Secondary button with icon
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable secondary button with icon
+      </button>
+    </div>
+
+  </div>
+
+  <div className="flex flex-wrap">
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Extra small</h3>
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">Primary button</button>
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon-xsmall" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-xsmall text-btn4">Primary button alternative</button>
+      <button type="button" className="ui-btn-secondary p-btn-xsmall text-btn4">Secondary button</button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Small</h3>
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon-small" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-small text-btn3">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary p-btn-small text-btn3">
+        Secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Large</h3>
+      <button type="button" className="ui-btn p-btn-large text-btn1">Primary button</button>
+      <button type="button" className="ui-btn p-btn-large text-btn1">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-large text-btn1">Primary button alternative</button>
+      <button type="button" className="ui-btn-secondary p-btn-large text-btn1">Secondary button</button>
+    </div>
+
+  </div>
+</Unstyled>

package/src/pages/Chips.mdx

@@ -0,0 +1,136 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import Icon from "../core/Icon";
+
+<Meta title="Brand/Chips" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Chips</h1>
+  <p className="ui-text-p1 mb-32">
+    Different size chips can be achieved by using padding and text utilities,
+    see examples below.
+  </p>
+  <div>
+    <div className="inline-block mr-16">
+      <h3 className="ui-text-h3 mb-24">On light background</h3>
+      <div className="mb-40 p-12 border rounded inline-block">
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-xsmall">
+            Default
+          </button>
+          <button type="button" className="ui-chip p-chip-xsmall" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip p-chip-xsmall" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-small">
+            Default
+          </button>
+          <button type="button" className="ui-chip p-chip-small" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip p-chip-small" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip">
+            Default
+          </button>
+          <button type="button" className="ui-chip" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-large text-btn-2">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip p-chip-large text-btn-2"
+            data-selected
+          >
+            Selected
+          </button>
+          <button
+            type="button"
+            className="ui-chip p-chip-large text-btn-2"
+            disabled
+          >
+            Unavailable
+          </button>
+        </div>
+      </div>
+    </div>
+    <div className="inline-block">
+      <h3 className="ui-text-h3 mb-24">On dark background</h3>
+      <div className="bg-cool-black mb-40 p-12 border rounded inline-block">
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-xsmall">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-xsmall"
+            data-selected
+          >
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt p-chip-xsmall" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-small">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-small"
+            data-selected
+          >
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt p-chip-small" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt">
+            Default
+          </button>
+          <button type="button" className="ui-chip-alt" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-large text-btn-2">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-large text-btn-2"
+            data-selected
+          >
+            Selected
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-large text-btn-2"
+            disabled
+          >
+            Unavailable
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Unstyled>

package/src/pages/Colour.mdx

@@ -0,0 +1,23 @@
+import { Fragment } from "react";
+import { Meta, Unstyled } from "@storybook/blocks";
+import { colours } from "./utils";
+
+<Meta title="Brand/Colour" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Colour</h1>
+  {colours.map((category) => (
+    <Fragment key={category.name}>
+      <h3 className="ui-text-h2 mb-16">{category.name}</h3>
+      <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-32 mb-40">
+        {category.colours.map(({ hex, name, bg }) => (
+          <li key={`${category.name}-${bg}`}>
+            <div className={`w-full h-64 mb-16 ${bg}`}></div>
+            <p className="ui-text-p1">{name}</p>
+            <p className="ui-text-p2">hex {hex}</p>
+          </li>
+        ))}
+      </ul>
+    </Fragment>
+  ))}
+</Unstyled>

package/src/pages/Forms.mdx

@@ -0,0 +1,173 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import { formsHtml } from "./utils";
+import Code from "../core/Code";
+import Icon from "../core/Icon";
+
+<Meta title="Brand/Forms" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Forms</h1>
+  <h3 className="ui-text-h2 mb-24">Checkboxes</h3>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">Checkboxes with P1 size text</h4>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-1"
+        name="checkbox-example-1"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-1" className="ui-checkbox-label-p1">
+        Welcome to the Ably privacy policy. Ably respects your privacy, is
+        committed to protecting your personal data, and is compliant with
+        applicable data protection law. This privacy policy will inform you as
+        to how we look after certain of your personal data and tell you about
+        your privacy rights and how the law protects you. Please refer to the
+        Glossary below to understand the meaning of some of the terms used in
+        this privacy policy.
+      </label>
+    </div>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-2"
+        name="checkbox-example-2"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-2" className="ui-checkbox-label-p1">
+        Subscribe to the Ably Newsletter
+      </label>
+    </div>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        disabled=""
+        type="checkbox"
+        id="checkbox-example-3"
+        name="checkbox-example-3"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-3" className="ui-checkbox-label-p1">
+        This option is not available
+      </label>
+    </div>
+  </div>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">
+      Checkboxes with P2 size text and tighter spacing
+    </h4>
+    <div className="flex items-start mb-12">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-4"
+        name="checkbox-example-4"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-4" className="ui-checkbox-label-p2">
+        Welcome to the Ably privacy policy. Ably respects your privacy, is
+        committed to protecting your personal data, and is compliant with
+        applicable data protection law. This privacy policy will inform you as
+        to how we look after certain of your personal data and tell you about
+        your privacy rights and how the law protects you. Please refer to the
+        Glossary below to understand the meaning of some of the terms used in
+        this privacy policy.
+      </label>
+    </div>
+    <div className="flex items-start mb-12">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-5"
+        name="checkbox-example-5"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-5" className="ui-checkbox-label-p2">
+        Subscribe to the Ably Newsletter
+      </label>
+    </div>
+    <div className="ui-checkbox-p2">
+      <input
+        data-ui-checkbox-native=""
+        disabled=""
+        type="checkbox"
+        id="checkbox-example-6"
+        name="checkbox-example-6"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-6" className="ui-checkbox-label-p2">
+        This option is not available
+      </label>
+    </div>
+  </div>
+  <h3 className="ui-text-h2 mb-24">Textarea</h3>
+  <div className="mb-40">
+    <label className="ui-text-p1 block mb-24" htmlFor="example-text-area">
+      This is how a label for the textarea looks like. Control the size of the
+      area with the <code className="ui-inline-code">rows</code> attribute.
+    </label>
+    <textarea
+      id="example-text-area"
+      className="ui-textarea"
+      rows="2"
+      placeholder="The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."
+    ></textarea>
+    <p className="ui-text-p3 text-dark-grey">
+      Example of additional text beneath the textarea.
+    </p>
+  </div>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">Example HTML</h4>
+    <Code language="html" snippet={formsHtml} />
+  </div>
+</Unstyled>

package/src/pages/Layout.mdx

@@ -0,0 +1,58 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+
+<Meta title="Brand/Layout" />
+
+<Unstyled>
+<h1 className="ui-text-h1 mb-32">Layout</h1>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-standard-container</p>
+    <p class="ui-text-p1 ">
+      Container that does not grow beyond the xl breakpoint (1440px), centers
+      and contains the correct outside padding across viewport changes.
+    </p>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-gap</p>
+    <p class="ui-text-p1 mb-32">Add correct gaps across viewport changes.</p>
+    <div class="grid grid-cols-4 ui-grid-gap">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">1</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">2</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">3</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">4</div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-px</p>
+    <p class="ui-text-p1 mb-32">
+      Add padding on the x axis, with correct values across viewport changes.
+    </p>
+    <div class="ui-grid-px">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">
+        Text
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-mx</p>
+    <p class="ui-text-p1 mb-32">
+      Add margin on the x axis, with correct values across viewport changes.
+    </p>
+    <div class="ui-grid-mx">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">
+        Text
+      </div>
+    </div>
+  </div>
+</div>
+</Unstyled>