@ably/ui 14.0.0-dev.99c9769 → 14.0.0-dev.ae75f49

package/core/styles/text.css

@@ -1,166 +1,168 @@
-.ui-text-title {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-title-xs xs:text-title xl:text-title-xl;
-  @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
-}
-
-.ui-text-h1 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-  @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
-}
-
-.ui-text-h2 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-  @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
-}
-
-.ui-text-h3 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h3;
-  @apply tracking-tighten-0.005;
-}
-
-.ui-text-h4 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h4;
-  @apply tracking-tighten-0.0015;
-}
-
-.ui-text-h5 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h5;
-  @apply tracking-tighten-0.0025;
-}
-
-.ui-text-p1 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p1;
-}
-
-.ui-text-p2 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p2;
-}
-
-.ui-text-p3 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p3;
-}
-
-.ui-text-standfirst {
-  @apply font-sans font-light text-active-orange;
-  @apply text-standfirst xl:text-standfirst-xl;
-  @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
-}
-
-.ui-text-quote {
-  @apply font-sans font-normal text-cool-black;
-  @apply text-quote leading-normal;
-  @apply tracking-tighten-0.0015;
-}
-
-.ui-text-sub-header {
-  @apply font-sans font-semibold text-neutral-800;
-  @apply text-sub-header-xs xs:text-sub-header leading-normal;
-}
-
-.ui-text-overline1 {
-  @apply font-mono font-medium text-active-orange uppercase;
-  @apply text-overline1 leading-normal;
-  @apply tracking-widen-0.16;
-}
-
-.ui-text-overline2 {
-  @apply font-mono font-medium text-active-orange uppercase;
-  @apply text-overline2 leading-normal;
-  @apply tracking-widen-0.16;
-}
-
-.ui-text-menu1 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu1 leading-snug;
-}
-
-.ui-text-menu2 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu2 leading-snug;
-}
-
-.ui-text-menu3 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu3 leading-snug;
-}
-
-.ui-text-code {
-  @apply font-mono font-normal text-code;
-}
-
-.ui-text-code2 {
-  @apply font-mono font-normal text-code2;
-}
-
-.ui-text-code-inline {
-  @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
-}
-
-.ui-unordered-list {
-  @apply text-p1 font-medium text-charcoal-grey;
-  @apply ml-32 my-16;
-  @apply list-disc;
-}
-
-.ui-ordered-list {
-  @apply text-p1 font-medium text-charcoal-grey;
-  @apply ml-32 my-16;
-  @apply list-decimal;
-}
-
-.ui-ordered-list li,
-.ui-unordered-list li {
-  @apply mb-8;
-}
-
-.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
-.ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
-  margin-bottom: 0;
-}
-
-.ui-unordered-list ul {
-  @apply ml-24 my-8 list-circle;
-}
-
-.ui-ordered-list ol {
-  @apply ml-24 my-16 list-decimal;
-}
-
-.ui-unordered-list ul ul {
-  @apply list-square my-8;
-}
-
-.ui-unordered-list ul ul {
-  @apply my-8;
-}
-
-.ui-link {
-  @apply text-gui-default;
-  @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-  @apply focus:text-gui-default focus:outline-gui-focus;
-  @apply no-underline;
-}
-
-.ui-link-neutral {
-  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-  @apply focus:text-charcoal-grey;
-  @apply underline;
-}
-
-/* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
-.ui-link-neutral:focus {
-  outline: 2px solid var(--color-neutral-000);
-}
-
-.ui-figcaption {
-  @apply font-mono text-p3 text-neutral-800;
+@layer components {
+  .ui-text-title {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-title-xs xs:text-title xl:text-title-xl;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+  }
+
+  .ui-text-h1 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+  }
+
+  .ui-text-h2 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+  }
+
+  .ui-text-h3 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h3;
+    @apply tracking-tighten-0.005;
+  }
+
+  .ui-text-h4 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h4;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h5;
+    @apply tracking-tighten-0.0025;
+  }
+
+  .ui-text-p1 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p1;
+  }
+
+  .ui-text-p2 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p2;
+  }
+
+  .ui-text-p3 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p3;
+  }
+
+  .ui-text-standfirst {
+    @apply font-sans font-light text-active-orange;
+    @apply text-standfirst xl:text-standfirst-xl;
+    @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
+  }
+
+  .ui-text-quote {
+    @apply font-sans font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-sub-header {
+    @apply font-sans font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+  }
+
+  .ui-text-overline1 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
+  }
+
+  .ui-text-overline2 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-widen-0.16;
+  }
+
+  .ui-text-menu1 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
+  }
+
+  .ui-text-menu2 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
+  }
+
+  .ui-text-menu3 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
+  }
+
+  .ui-text-code {
+    @apply font-mono font-normal text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-text-code-inline {
+    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
+  }
+
+  .ui-ordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-8;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 my-8 list-circle;
+  }
+
+  .ui-ordered-list ol {
+    @apply ml-24 my-16 list-decimal;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square my-8;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply my-8;
+  }
+
+  .ui-link {
+    @apply text-gui-default;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
+  }
+
+  .ui-link-neutral {
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-charcoal-grey;
+    @apply underline;
+  }
+
+  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+  .ui-link-neutral:focus {
+    outline: 2px solid var(--color-neutral-000);
+  }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
 }

package/core/styles.components.css

@@ -3,31 +3,33 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-.ui-input {
-  @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-  @apply hover:bg-white hover:shadow-input hover:border-transparent;
-  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  @apply max-w-screen-sm;
-}
+@layer components {
+  .ui-input {
+    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
 
-/* Basis for icon component */
-.ui-icon-cool-black {
-  stroke: var(--color-cool-black);
-}
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
 
-.ui-icon-white {
-  stroke: var(--color-white);
-}
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
 
-.ui-icon-dark-grey {
-  stroke: var(--color-dark-grey);
-}
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
 
-.ui-version-tag {
-  @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 
-  position: relative;
-  vertical-align: super;
-  margin-left: 3px;
-  font-size: 8px;
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
 }

package/core/utils/syntax-highlighter.css

@@ -1,67 +1,71 @@
-@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");
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-
-.hljs {
-  background: var(--syntax-black);
-  color: var(--syntax-light-grey);
+@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");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 }
 
-.hljs-emphasis {
-  @apply italic;
-}
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
 
-.hljs-strong {
-  @apply font-bold;
-}
+  .hljs-emphasis {
+    @apply italic;
+  }
 
-.hljs-comment,
-.hljs-quote {
-  color: var(--syntax-dark-grey);
-}
+  .hljs-strong {
+    @apply font-bold;
+  }
 
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: var(--syntax-red);
-}
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
 
-.hljs-number,
-.hljs-built_in,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: var(--syntax-orange);
-}
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
 
-.hljs-attribute {
-  color: var(--syntax-yellow);
-}
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
 
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: var(--syntax-green);
-}
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
 
-.hljs-title,
-.hljs-section {
-  color: var(--syntax-blue);
-}
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
 
-.hljs-keyword,
-.hljs-selector-tag {
-  color: var(--syntax-lilac);
-}
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
 
-.hljs-subst {
-  color: var(--syntax-mid-grey);
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.99c9769",
+  "version": "14.0.0-dev.ae75f49",
   "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",
@@ -15,6 +15,7 @@
     "tailwind.extend.js"
   ],
   "devDependencies": {
+    "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -36,8 +37,6 @@
     "eslint-plugin-storybook": "^0.6.15",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
-    "postcss": "^8.4.35",
-    "postcss-import": "^13.0.0",
     "prettier": "^2.3.0",
     "storybook": "^7.6.4",
     "svg-sprite": "^2.0.4",
@@ -65,7 +64,6 @@
     "build-storybook": "storybook build -o preview"
   },
   "dependencies": {
-    "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
     "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
     "dompurify": "^2.2.9",

package/src/core/Accordion.tsx

@@ -7,14 +7,14 @@ type AccordionData = {
 };
 
 type AccordionRowProps = {
-  bottomBorder: boolean;
-  topBorder: boolean;
+  bottomBorder?: boolean;
+  topBorder?: boolean;
   active: boolean;
   last: boolean;
   name: string;
   index;
   children: ReactNode;
-  arrowIcon: boolean;
+  arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;
 };
 
@@ -25,6 +25,7 @@ export type AccordionProps = {
   bottomBorder?: boolean;
   id?: string;
   autoClose?: boolean;
+  className?: string;
 };
 
 const AccordionRow = ({
@@ -104,8 +105,9 @@ const Accordion = ({
   bottomBorder,
   arrowIcon,
   autoClose,
+  className,
 }: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState([]);
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
   const handleSetIndex = (index: number) => {
     const currentIndexIsActive = activeIndexes.includes(index);
@@ -122,7 +124,7 @@ const Accordion = ({
   };
 
   return (
-    <div className="ui-grid-mx max-w-screen-sm sm:mx-auto" id={id}>
+    <div className={className} id={id}>
       {data.map((item, currentIndex) => {
         return (
           <AccordionRow

package/src/core/Code.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import "./utils/syntax-highlighter.css";
 import {
   highlightSnippet,
   registerDefaultLanguages,

package/src/core/ContactFooter/component.css

@@ -1,9 +1,11 @@
-.ui-contact-footer {
-  background-size: 100% 100%;
-  background-position: right center;
-  @apply w-full bg-gradient-active-orange;
-}
+@layer components {
+  .ui-contact-footer {
+    background-size: 100% 100%;
+    background-position: right center;
+    @apply w-full bg-gradient-active-orange;
+  }
 
-.ui-contact-footer-box {
-  @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  .ui-contact-footer-box {
+    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  }
 }

package/src/core/ContactFooter.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
 import toggleChatWidget from "./hubspot-chat-toggle";
-import "./ContactFooter/component.css";
 
 type ContactFooterProps = {
   urlBase: string;

package/src/core/CookieMessage/component.css

@@ -1,11 +1,13 @@
-.ui-cookie-message {
-  @apply rounded-lg bg-white font-sans;
-  @apply justify-between items-center;
-  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-  @apply p-16 mb-16 ml-16;
-  max-width: 70vw;
-  box-shadow: 0px 24px 32px 0px #0000000d;
-  border: 1px solid var(--color-mid-grey);
-  border-left: 0.5rem solid var(--color-electric-cyan);
-  transition: bottom 250ms ease-out, opacity 150ms ease-out;
+@layer components {
+  .ui-cookie-message {
+    @apply rounded-lg bg-white font-sans;
+    @apply justify-between items-center;
+    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+    @apply p-16 mb-16 ml-16;
+    max-width: 70vw;
+    box-shadow: 0px 24px 32px 0px #0000000d;
+    border: 1px solid var(--color-mid-grey);
+    border-left: 0.5rem solid var(--color-electric-cyan);
+    transition: bottom 250ms ease-out, opacity 150ms ease-out;
+  }
 }