@ably/ui 14.0.5 → 14.1.0-dev.30520a8

package/core/Flash.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{nanoid}from"nanoid/non-secure";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}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)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes===null||flashes===void 0?void 0:flashes.items).map(flash=>({...flash,id:nanoid(),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{nanoid}from"nanoid/non-secure";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}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)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{var _flashes_items;return[...state,...((_flashes_items=flashes===null||flashes===void 0?void 0:flashes.items)!==null&&_flashes_items!==void 0?_flashes_items:[]).map(flash=>({...flash,id:nanoid(),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/styles/forms.css

@@ -61,4 +61,28 @@
     /* color: var(--text-dark-grey); */
     color: #76767c;
   }
+
+  .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 text-p2 flex;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
+    background-repeat: no-repeat;
+    background-position: center right 16px;
+  }
+
+  .ui-dropdown-base option:disabled {
+    @apply text-neutral-800;
+  }
+
+  .ui-dropdown {
+    @apply ui-dropdown-base py-12;
+  }
+
+  .ui-dropdown-small {
+    @apply ui-dropdown-base py-[9px];
+  }
+
+  /* Special wrapper for overriding default Select2 functionality */
+  .ui-dropdown-select2-wrapper .select2-selection__arrow {
+    display: none;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.5",
+  "version": "14.1.0-dev.30520a8",
   "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",
@@ -30,10 +29,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",
     "cypress": "^13.3.1",
-    "eslint": "^7.12.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.2.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
     "msw": "2.3.1",
     "msw-storybook-addon": "^2.0.2",
@@ -51,9 +49,9 @@
     "build:cleanup": "mv dist/* . && rm -r dist",
     "build": "yarn build:prebuild && yarn build:swc && yarn build:sprites && yarn build:cleanup",
     "watch": "yarn build:swc -w",
-    "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx} cypress",
-    "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx} cypress",
-    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx} cypress",
+    "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
+    "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
+    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx}",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
     "update:all": "./scripts/update-dependents.sh",

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

@@ -1,39 +0,0 @@
-import React from "react";
-import Accordion, { AccordionProps } from "../Accordion";
-
-export default {
-  title: "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: "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: "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: "Components/Cookie Message",
-  component: CookieMessage,
-  args: {
-    cookieId: "cookie-namespace",
-    noticeId: "cookie-message",
-  },
-};
-
-export const Default = {};