@ably/ui 14.0.4 → 14.0.6

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

@@ -1,103 +0,0 @@
-import hljs from "highlight.js/lib/core";
-
-// Map certain frameworks, protocols etc to available langauage packs
-const languageToHighlightKey = (lang) => {
-  let id;
-
-  if (!lang) {
-    lang = "text";
-  }
-
-  switch (lang.toLowerCase()) {
-    case "android":
-      id = "java";
-      break;
-
-    case ".net":
-    case "net":
-    case "dotnet":
-    case "csharp":
-    case "c#":
-      id = "cs";
-      break;
-
-    case "objc":
-    case "objective c":
-      id = "objectivec";
-      break;
-
-    case "laravel":
-      id = "php";
-      break;
-
-    case "flutter":
-      id = "dart";
-      break;
-
-    case "node.js":
-    case "js":
-      id = "javascript";
-      break;
-
-    case "ts":
-      id = "typescript";
-      break;
-
-    case "kotlin":
-    case "kt":
-      id = "kotlin";
-      break;
-
-    case "shell":
-    case "fh":
-    case "sh":
-      id = "bash";
-      break;
-
-    case "https":
-    case "http":
-    case "txt":
-    case "plaintext":
-      id = "text";
-      break;
-
-    case "cmd":
-    case "bat":
-      id = "dos";
-      break;
-
-    case "yml":
-      id = "yaml";
-      break;
-
-    case "erl":
-      id = "erlang";
-      break;
-
-    case "patch":
-      id = "diff";
-      break;
-
-    case "svg":
-      id = "xml";
-      break;
-
-    default:
-      break;
-  }
-
-  return id || lang;
-};
-
-const registerDefaultLanguages = (register) => {
-  register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
-};
-
-const highlightSnippet = (languageKeyword, snippet) => {
-  const language = languageToHighlightKey(languageKeyword);
-  if (typeof snippet !== "string" || !snippet || !language) return;
-
-  return hljs.highlight(snippet, { language }).value;
-};
-
-export { highlightSnippet, languageToHighlightKey, registerDefaultLanguages };

package/src/pages/Buttons.mdx

@@ -1,121 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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>