@ably/ui 14.1.0-dev.76621d8 → 14.1.0-dev.f3a3c90

package/core/styles/forms.css

@@ -63,7 +63,7 @@
   }
 
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 leading-snug;
+    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
     background-repeat: no-repeat;
     background-position: center right 16px;
@@ -78,6 +78,19 @@
   }
 
   .ui-dropdown-small {
-    @apply ui-dropdown-base py-8;
+    @apply ui-dropdown-base py-[10px] text-[14px];
+  }
+
+  /* Special wrapper styles for overriding default Select2 functionality */
+  .ui-dropdown-select2-wrapper .select2 {
+    @apply w-full;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection {
+    @apply ui-dropdown-small;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__arrow {
+    @apply hidden;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.1.0-dev.76621d8",
+  "version": "14.1.0-dev.f3a3c90",
   "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",
@@ -8,7 +8,6 @@
   },
   "license": "Apache-2.0",
   "files": [
-    "src",
     "core",
     "reset",
     "tailwind.config.js",

package/src/core/Accordion/Accordion.stories.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import Accordion, { AccordionProps } from "../Accordion";
-
-export default {
-  title: "JS Components/Accordion",
-  component: Accordion,
-  args: {
-    data: [
-      {
-        name: "Item 1",
-        content: "Content 1",
-      },
-      {
-        name: "Item 2",
-        content: "Content 2",
-      },
-      {
-        name: "Item 3",
-        content: "Content 3",
-      },
-      {
-        name: "Item 4",
-        content: "Content 4",
-      },
-    ],
-    autoClose: false,
-    topBorder: false,
-    bottomBorder: false,
-    arrowIcon: false,
-  },
-};
-
-export const Default = {};
-
-export const AutoClose = {
-  render: (args: AccordionProps) => (
-    <Accordion data={args.data} autoClose={true} />
-  ),
-};

package/src/core/Accordion.tsx

@@ -1,149 +0,0 @@
-import React, { useState, ReactNode, JSX } from "react";
-import Icon from "./Icon";
-
-type AccordionData = {
-  name: string;
-  content: ReactNode;
-};
-
-type AccordionRowProps = {
-  bottomBorder?: boolean;
-  topBorder?: boolean;
-  active: boolean;
-  last: boolean;
-  name: string;
-  index;
-  children: ReactNode;
-  arrowIcon?: boolean;
-  setActiveIndex: (index: number) => void;
-};
-
-export type AccordionProps = {
-  data: AccordionData[];
-  arrowIcon?: boolean;
-  topBorder?: boolean;
-  bottomBorder?: boolean;
-  id?: string;
-  autoClose?: boolean;
-  className?: string;
-};
-
-const AccordionRow = ({
-  name,
-  children,
-  index,
-  setActiveIndex,
-  active,
-  topBorder,
-  bottomBorder,
-  last,
-  arrowIcon,
-}: AccordionRowProps) => {
-  let iconActive: JSX.Element, iconInactive: JSX.Element;
-  const handleSetIndex = () => {
-    setActiveIndex(index);
-  };
-
-  if (arrowIcon) {
-    iconActive = (
-      <Icon
-        name="icon-gui-disclosure-arrow"
-        color="text-dark-grey"
-        size="1.5rem"
-        additionalCSS="-rotate-90"
-      />
-    );
-    iconInactive = (
-      <Icon
-        name="icon-gui-disclosure-arrow"
-        color="text-dark-grey"
-        size="1.5rem"
-        additionalCSS="rotate-90"
-      />
-    );
-  } else {
-    iconActive = (
-      <Icon name="icon-gui-minus" color="text-dark-grey" size="1.5rem" />
-    );
-    iconInactive = (
-      <Icon name="icon-gui-plus" color="text-dark-grey" size="1.5rem" />
-    );
-  }
-
-  return (
-    <div
-      className={`border-mid-grey ${last && !bottomBorder ? "" : "border-b"} ${
-        topBorder ? "border-t" : ""
-      }`}
-    >
-      <button
-        type="button"
-        onClick={handleSetIndex}
-        className={`flex w-full px-0 focus:outline-none py-20`}
-      >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
-        <span className="ml-auto">{active ? iconActive : iconInactive}</span>
-      </button>
-
-      <section
-        className="ui-text-p2 transition-all overflow-hidden"
-        style={{
-          maxHeight: active ? "500px" : "0",
-          paddingBottom: active ? "1.5rem" : "0",
-        }}
-      >
-        {children}
-      </section>
-    </div>
-  );
-};
-
-const Accordion = ({
-  data,
-  id = "id-accordion",
-  topBorder,
-  bottomBorder,
-  arrowIcon,
-  autoClose,
-  className,
-}: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
-
-  const handleSetIndex = (index: number) => {
-    const currentIndexIsActive = activeIndexes.includes(index);
-
-    if (autoClose) {
-      setActiveIndexes(currentIndexIsActive ? [] : [index]);
-    } else {
-      setActiveIndexes(
-        currentIndexIsActive
-          ? activeIndexes.filter((i) => i !== index)
-          : [...activeIndexes, index],
-      );
-    }
-  };
-
-  return (
-    <div className={className} id={id}>
-      {data.map((item, currentIndex) => {
-        return (
-          <AccordionRow
-            key={item.name}
-            name={item.name}
-            arrowIcon={arrowIcon}
-            index={currentIndex}
-            last={data.length === currentIndex + 1}
-            topBorder={topBorder && currentIndex === 0}
-            bottomBorder={bottomBorder && data.length === currentIndex + 1}
-            active={activeIndexes.includes(currentIndex)}
-            setActiveIndex={handleSetIndex}
-          >
-            {item.content}
-          </AccordionRow>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Accordion;

package/src/core/Code/Code.stories.tsx

@@ -1,71 +0,0 @@
-import Code from "../Code";
-
-export default {
-  title: "JS Components/Code",
-  component: Code,
-  tags: ["autodocs"],
-};
-
-export const Javascript = {
-  args: {
-    language: "javascript",
-    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
-var channel = ably.channels.get('web-pal');
-    
-// Subscribe to messages on channel
-channel.subscribe('greeting', function(message) {
-  alert(message.data);
-});`,
-  },
-};
-
-export const Swift = {
-  args: {
-    language: "swift",
-    snippet: `let ably = ARTRealtime(key: "1WChTA.mc0Biw:kNfiYG4KiPgmHHgH")
-let channel = ably.channels.get("web-pal")
-
-// Subscribe to messages on channel
-channel.subscribe("greeting") { message in
-  print("\\(message.data)")
-}`,
-  },
-};
-
-export const Java = {
-  args: {
-    language: "java",
-    snippet: `AblyRealtime ably = new AblyRealtime("1WChTA.mc0Biw:kNfiYG4KiPgmHHgH");
-Channel channel = ably.channels.get("web-pal");
-
-/* Subscribe to messages on channel */
-
-MessageListener listener;
-listener = new MessageListener() {
-  @Override
-  public void onMessage(Message message) {
-    System.out.print(message.data);
-  };
-};
-channel.subscribe("greeting", listener);`,
-  },
-};
-
-export const Kotlin = {
-  args: {
-    language: "kotlin",
-    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
-val exampleConstraints = DefaultResolutionConstraints(
-  DefaultResolutionSet( // this constructor provides one Resolution for all states
-      Resolution(
-          accuracy = Accuracy.BALANCED,
-          desiredInterval = 1000L,
-          minimumDisplacement = 1.0
-      )
-  ),
-  proximityThreshold = DefaultProximity(spatial = 1.0),
-  batteryLevelThreshold = 10.0f,
-  lowBatteryMultiplier = 2.0f
-)`,
-  },
-};

package/src/core/Code/component.css

@@ -1 +0,0 @@
-@import "../utils/syntax-highlighter.css";

package/src/core/Code/component.js

@@ -1,27 +0,0 @@
-// 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";
-
-import languagesRegistry from "../utils/syntax-highlighter-registry";
-
-registerDefaultLanguages(languagesRegistry);
-
-function highlightEl(el) {
-  if (!el) throw "Missing code element";
-
-  const pre = el.querySelector("pre");
-  const code = el.querySelector("code");
-  const language = pre.getAttribute("lang");
-
-  if (!code || !pre || !language) throw "Malformed code element";
-
-  const { innerHTML } = code;
-  const html = highlightSnippet(language, innerHTML);
-
-  code.innerHTML = html;
-}
-
-export default highlightEl;

package/src/core/Code.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-
-import {
-  highlightSnippet,
-  registerDefaultLanguages,
-} from "./utils/syntax-highlighter";
-import languagesRegistry from "./utils/syntax-highlighter-registry";
-
-registerDefaultLanguages(languagesRegistry);
-
-type CodeProps = {
-  language: string;
-  snippet: string;
-  textSize?: string;
-  padding?: string;
-  additionalCSS?: string;
-};
-
-const Code = ({
-  language,
-  snippet,
-  textSize = "ui-text-code",
-  padding = "p-32",
-  additionalCSS = "",
-}: CodeProps) => {
-  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}>
-        <code
-          className={className}
-          dangerouslySetInnerHTML={{ __html: HTMLraw }}
-        />
-      </pre>
-    </div>
-  );
-};
-
-export default Code;

package/src/core/ConnectStateWrapper.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { connectState, getRemoteDataStore } from "./remote-data-store";
-
-/*
-  Connect a react component to a global store.
-  This is similar to what react-redux does but uses our global store so
-  can share state with other React mount points or anything that uses the
-  store.
-  - selectors is an object where keys are your prop names and values are your select
-  functions that work on the store to retrieve the state you are interested in
-  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially
-*/
-
-const ConnectStateWrapper = (Component, selectors) => {
-  const [state, setState] = useState({});
-
-  const setStateForKey = (key) => (storeState) =>
-    setState(() => ({ [key]: storeState }));
-
-  useEffect(() => {
-    const store = getRemoteDataStore();
-    const resolvedState = Object.keys(selectors).reduce(
-      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
-      {},
-    );
-
-    // Set initial state
-    setState(resolvedState);
-
-    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.
-    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.
-    Object.keys(selectors).forEach((key) => {
-      connectState(selectors[key], setStateForKey(key));
-    });
-  }, []);
-
-  const WrappedComponent = (props) => <Component {...props} {...state} />;
-
-  return WrappedComponent;
-};
-
-export default ConnectStateWrapper;

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,11 +0,0 @@
-import ContactFooter from "../ContactFooter";
-
-export default {
-  title: "JS Components/Contact Footer",
-  component: ContactFooter,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Default = {};

package/src/core/ContactFooter/component.css

@@ -1,11 +0,0 @@
-@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;
-  }
-}

package/src/core/ContactFooter/component.js

@@ -1,2 +0,0 @@
-import toggleChatWidget from "../hubspot-chat-toggle";
-export default () => toggleChatWidget({ dataId: "contact-footer" });

package/src/core/ContactFooter.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect } from "react";
-
-import Icon from "./Icon";
-import _absUrl from "./url-base.js";
-import toggleChatWidget from "./hubspot-chat-toggle";
-
-type ContactFooterProps = {
-  urlBase: string;
-};
-
-const ContactFooter = ({ urlBase }: ContactFooterProps) => {
-  useEffect(() => toggleChatWidget({ dataId: "contact-footer" }), []);
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  return (
-    <div
-      className="ui-contact-footer font-sans antialiased"
-      data-id="contact-footer"
-    >
-      <div className="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
-        <div className="ui-contact-footer-box">
-          <Icon
-            name="icon-display-live-chat"
-            size="3rem"
-            additionalCSS="block mb-16"
-          />
-          <div>
-            <div className="ui-text-h3 mb-24">Live Chat</div>
-            <p className="ui-text-p1">
-              Reach out team of experts over chat powered by Ably.
-            </p>
-          </div>
-          <button
-            type="button"
-            className="ui-btn-secondary self-start mt-16"
-            disabled
-            data-id="open-chat-widget"
-            data-enabled-label="Start a live chat"
-            data-disabled-label="Live chat unavailable"
-          >
-            Live chat unavailable
-          </button>
-        </div>
-
-        <div className="ui-contact-footer-box">
-          <Icon
-            name="icon-display-call-mobile"
-            size="3rem"
-            additionalCSS="block mb-16"
-          />
-          <div className="flex-grow">
-            <div className="ui-text-h3 mb-24">Call us</div>
-            <p className="ui-text-p1">
-              <span className="block">
-                <strong className="font-bold">+1 877 434 5287</strong> (USA,
-                toll free)
-              </span>
-              <span className="block">
-                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
-              </span>
-            </p>
-          </div>
-        </div>
-
-        <div className="ui-contact-footer-box">
-          <Icon
-            name="icon-display-tech-account-comms"
-            size="3rem"
-            additionalCSS="block mb-16"
-          />
-          <div>
-            <div className="ui-text-h3 mb-24">
-              Technical and account support
-            </div>
-            <p className="ui-text-p1">
-              We&apos;re standing by to help with any questions or code.
-            </p>
-          </div>
-          <a
-            className="ui-btn-secondary self-start p-btn mt-16"
-            href={absUrl("/support")}
-          >
-            Get support now
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ContactFooter;

package/src/core/CookieMessage/CookieMessage.stories.tsx

@@ -1,12 +0,0 @@
-import CookieMessage from "../CookieMessage";
-
-export default {
-  title: "JS Components/Cookie Message",
-  component: CookieMessage,
-  args: {
-    cookieId: "cookie-namespace",
-    noticeId: "cookie-message",
-  },
-};
-
-export const Default = {};

package/src/core/CookieMessage/component.css

@@ -1,15 +0,0 @@
-@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;
-  }
-}

package/src/core/CookieMessage.tsx

@@ -1,52 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import Cookie from "js-cookie";
-
-import _absUrl from "./url-base";
-
-const COOKIE_EXPIRY = 365;
-
-type CookieMessageProps = {
-  cookieId: string;
-  urlBase: string;
-};
-
-const CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hideCookieMessage, setHideCookieMessage] = useState(true);
-
-  useEffect(() => {
-    const isCookieSet = Cookie.get(cookieId) ? true : false;
-    setHideCookieMessage(isCookieSet);
-  }, []);
-
-  const handleClose = () => {
-    Cookie.set(cookieId, "1", { expires: COOKIE_EXPIRY });
-
-    ref.current?.classList.add("bottom-1", "opacity-0");
-    setTimeout(() => setHideCookieMessage(true), 500);
-  };
-
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  // Presume the message is hidden by default
-  if (hideCookieMessage) return null;
-
-  return (
-    <div className="ui-cookie-message" ref={ref}>
-      <p className="ui-text-p2 pr-32">
-        <a href={absUrl("/privacy")} className="underline">
-          How we use cookies
-        </a>{" "}
-        to improve your experience.
-      </p>
-      <button
-        className="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap"
-        onClick={handleClose}
-      >
-        Accept and close
-      </button>
-    </div>
-  );
-};
-
-export default CookieMessage;

package/src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,43 +0,0 @@
-import CustomerLogos from "../CustomerLogos";
-
-import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
-import webflow from "../images/cust-logo-webflow-col-pos.svg";
-import mentimeter from "../images/cust-logo-mentimeter-mono-pos.svg";
-import toyota from "../images/cust-logo-toyota-mono-pos.svg";
-import split from "../images/cust-logo-split-mono-pos.svg";
-import australian from "../images/cust-logo-ausopen-mono-pos.svg";
-
-export default {
-  title: "JS Components/Customer Logos",
-  component: CustomerLogos,
-  args: {
-    companies: [
-      {
-        label: "Hubspot",
-        logo: hubspot,
-      },
-      {
-        label: "Webflow",
-        logo: webflow,
-      },
-      {
-        label: "Mentimeter",
-        logo: mentimeter,
-      },
-      {
-        label: "Toyota",
-        logo: toyota,
-      },
-      {
-        label: "Split",
-        logo: split,
-      },
-      {
-        label: "Australian Open",
-        logo: australian,
-      },
-    ],
-  },
-};
-
-export const Default = {};