@ably/ui 11.7.1-dev.d65c98c → 12.0.0-dev.31bc8d9

package/src/core/ContactFooter/component.jsx

@@ -16,8 +16,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Live Chat</div>
-            <p className="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+            <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"
@@ -34,13 +34,13 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-call-mobile" size="3rem" additionalCSS="block mb-16" />
           <div className="flex-grow">
-            <div className="text-h3 mb-24">Call us</div>
-            <p className="text-p1 font-light">
+            <div className="ui-text-h3 mb-24">Call us</div>
+            <p className="ui-text-p1">
               <span className="block">
-                <strong className="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free)
+                <strong className="font-bold">+1 877 434 5287</strong> (USA, toll free)
               </span>
               <span className="block">
-                <strong className="text-p1 font-medium">+44 20 3318 4689</strong> (UK)
+                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
               </span>
             </p>
           </div>
@@ -49,8 +49,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-tech-account-comms" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Technical and account support</div>
-            <p className="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+            <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

package/src/core/DropdownMenu/component.jsx

@@ -92,7 +92,7 @@ const Link = ({ url, title, subtitle, iconName, children }) => {
         {title}
         {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
       </p>
-      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {subtitle ? <p className="ui-text-p3 mb-16">{subtitle}</p> : null}
       {children}
     </a>
   );

package/src/core/FeaturedLink/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/FeaturedLink/component.jsx

@@ -3,20 +3,35 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, children }) => (
+const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, additionalCSS = "", children }) => (
   <a
     href={url}
-    className={`ui-featured-link group ${textSize} ${flush ? "" : "py-8"}`}
+    className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
+      flush ? "" : "py-8"
+    } ${additionalCSS}`}
     style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
   >
-    {reverse ? <>
-      <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180" />
-      {children}
-    </> : 
-    <>
-      {children}
-      <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0" />
-    </>}
+    {reverse ? (
+      <>
+        <Icon
+          name="icon-gui-link-arrow"
+          size={`calc(var(--featured-link-icon-size) * 1.25)`}
+          color={iconColor}
+          additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+        />
+        {children}
+      </>
+    ) : (
+      <>
+        {children}
+        <Icon
+          name="icon-gui-link-arrow"
+          size={`calc(var(--featured-link-icon-size) * 1.25)`}
+          color={iconColor}
+          additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+        />
+      </>
+    )}
   </a>
 );
 
@@ -26,6 +41,8 @@ FeaturedLink.propTypes = {
   textSize: T.string,
   iconColor: T.string,
   flush: T.bool,
+  reverse: T.bool,
+  additionalCSS: T.string,
 };
 
 export default FeaturedLink;

package/src/core/Flash/component.css

@@ -13,10 +13,6 @@
     transform: translateY(-200%) rotateX(-90deg);
   }
 
-  .ui-flash-text {
-    @apply mr-16 text-p1;
-  }
-
   /* dynamic content inside flash, can't add classes */
   .ui-flash-text a {
     @apply underline;

package/src/core/Flash/component.jsx

@@ -125,7 +125,7 @@ const Flash = ({ id, type, content, removeFlash }) => {
     <div className={`ui-flash-message ui-grid-px ${animateEntry ? "ui-flash-message-enter" : ""}`} style={style} ref={ref} data-id="ui-flash">
       <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
         {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
-        <p className={`ui-flash-text ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
+        <p className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
         <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
           <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
         </button>

package/src/core/Footer/component.jsx

@@ -13,10 +13,10 @@ export default function Footer({ paths, urlBase }) {
         <div className="col-span-full md:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
-            <h2 className="text-overline2 font-mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
+            <h2 className="ui-text-overline2 col-span-full">The Ably Platform</h2>
           </div>
           <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-            <p className="font-sans text-p3 py-16 font-bold p-menu-row-snug">
+            <p className="ui-text-p3 font-bold py-16 p-menu-row-snug">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>

package/src/core/Meganav/component.css

@@ -105,7 +105,7 @@
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-bold font-mono tracking-widen-0.16 p-overline;
+    @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

package/src/core/MeganavContentProducts/component.jsx

@@ -12,7 +12,7 @@ const MeganavContentProducts = ({ paths, absUrl }) => (
           <img src={paths.ablyStack} alt="Ably homepage" />
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
-        <p className="text-p2 font-bold text-cool-black mb-24 leading-normal" style={{ maxWidth: "330px" }}>
+        <p className="ui-text-p2 font-bold mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
           realtime, and lets you focus on your code.
         </p>
@@ -41,7 +41,7 @@ const MeganavContentProducts = ({ paths, absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/livesync")} className="group ui-meganav-media">
-              <p className="ui-meganav-media-heading">LiveSync (Pre release)</p>
+              <p className="ui-meganav-media-heading">LiveSync (Early access)</p>
               <p className="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
             </a>
           </li>

package/src/core/Notice/component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import T from "prop-types";
 
-const contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 import NoticeScripts from "./component.js";
 import Icon from "../Icon/component.jsx";
@@ -45,7 +45,7 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
 
         {closeBtn && (
           <button type="button" className="ml-auto h-20 w-20 border-none bg-none self-baseline">
-            <Icon name="icon-gui-close" size="1.25rem" color="text-white" />
+            <Icon name="icon-gui-close" size="1.25rem" color="text-cool-black" />
           </button>
         )}
       </div>

package/src/core/react-renderer.js

@@ -1,9 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
-const renderComponent = (Component, props, node) =>
+const renderComponent = (Component, props, node) => {
+  const root = createRoot(node);
   // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(<Component {...props} />, node);
+  root.render(<Component {...props} />);
+};
 
 export { renderComponent };
 
@@ -19,7 +21,8 @@ export default function reactRenderer(components) {
     const propsJson = node.getAttribute("data-react-props");
     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/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/styles/text.css

@@ -95,25 +95,32 @@
   }
 
   .ui-text-code {
-    @apply font-mono font-medium text-code;
+    @apply font-mono font-normal text-code;
   }
 
   .ui-text-code2 {
-    @apply font-mono font-medium text-code2;
+    @apply font-mono font-normal text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @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-cool-black;
-    @apply list-disc ml-32 my-16;
+    @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 list-decimal;
+    @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),
@@ -122,11 +129,11 @@
   }
 
   .ui-unordered-list ul {
-    @apply ml-24 mt-16 list-circle;
+    @apply ml-24 my-8 list-circle;
   }
 
   .ui-ordered-list ol {
-    @apply ml-24 mt-16 list-decimal;
+    @apply ml-24 my-16 list-decimal;
   }
 
   .ui-unordered-list ul ul {
@@ -137,34 +144,6 @@
     @apply my-8;
   }
 
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-sans tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
-  }
-
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 mt-32 -mb-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div {
-    @apply relative -top-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div > strong {
-    @apply block;
-  }
-
-  .ui-unordered-list-with-emphasis ul {
-    margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-circle;
-  }
-
-  .ui-unordered-list-with-emphasis ul ul {
-    @apply list-square;
-  }
-
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
@@ -174,7 +153,16 @@
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
+    @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/src/core/styles.components.css

@@ -5,7 +5,7 @@
 
 @layer components {
   .ui-input {
-    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-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;

package/tailwind.config.js

@@ -1,19 +1,19 @@
 module.exports = {
-  purge: {
-    content: [
-      "./src/**/*.html.erb",
-      "./src/**/*.jsx",
-      "./src/**/*.js",
-      "./src/**/*.json",
-    ],
-    options: {
-      safelist: {
-        standard: ["w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"],
-        greedy: [/^hljs.*/, /^ui-.*/],
-      },
-    },
-  },
-  darkMode: false,
+  content: [
+    "./src/**/*.jsx",
+    "./src/**/*.js",
+    "./src/**/*.json",
+    "./src/**/*.css",
+  ],
+  safelist: [
+    "w-1/2",
+    "w-1/3",
+    "w-1/4",
+    "w-1/5",
+    "w-1/6",
+    { pattern: /^hljs.*/ },
+    { pattern: /^ui-.*/ },
+  ],
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries
@@ -136,6 +136,7 @@ module.exports = {
       "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
       "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
       "gui-blue-focus": "var(--color-gui-blue-focus)",
+      "gui-blue-visited": "var(--color-gui-blue-focus)",
       "gui-unavailable": "var(--color-gui-unavailable)",
       "gui-success-green": "var(--color-gui-success-green)",
       "gui-error-red": "var(--color-gui-error-red)",
@@ -298,10 +299,6 @@ module.exports = {
       full: "9999px",
       DEFAULT: "0.375rem",
     },
-    filter: {
-      none: "none",
-      grayscale: "grayscale(1)",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
@@ -313,7 +310,6 @@ module.exports = {
       },
       outline: {
         "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-neutral-000)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -353,12 +349,11 @@ module.exports = {
       backgroundImage: ["hover", "active", "focus"],
       filter: ["hover"],
       cursor: ["disabled"],
-      inset: ['group-hover']
-
+      inset: ["group-hover"],
     },
   },
   corePlugins: {
     preflight: false,
   },
-  plugins: [require("tailwindcss-filters")],
+  plugins: [],
 };

package/tailwind.extend.js

@@ -15,10 +15,7 @@ const ablyUItailwindConfig = (extend) => {
 
   const configWithPlugin = {
     ...ablyUIConfig,
-    purge: {
-      content: addPurgeContentPaths(),
-      options: ablyUIConfig.purge.options,
-    },
+    content: addPurgeContentPaths(),
   };
 
   return extend(configWithPlugin);

package/src/core/Code/component.html.erb

@@ -1,3 +0,0 @@
-<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
-  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
-<% end %>

package/src/core/Code/component.rb

@@ -1,12 +0,0 @@
-module AblyUi
-  module Core
-    class Code < ViewComponent::Base
-      include AblyUi::Core::Util
-      def initialize(language:, snippet:, text_size: 'ui-text-code')
-        @language = language
-        @snippet = snippet.try(:strip)
-        @text_size = text_size
-      end
-    end
-  end
-end

package/src/core/ContactFooter/component.html.erb

@@ -1,32 +0,0 @@
-<div class="ui-contact-footer font-sans antialiased" data-id="contact-footer">
-  <div class="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 class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="text-h3 mb-24">Live Chat</div>
-        <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
-      </div>
-      <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
-        Live chat unavailable
-      <% end %>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
-      <div class="flex-grow">
-        <div class="text-h3 mb-24">Call us</div>
-        <p class="text-p1 font-light">
-          <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
-          <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
-        </p>
-      </div>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="text-h3 mb-24">Technical and account support</div>
-        <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
-      </div>
-      <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
-    </div>
-  </div>
-</div>

package/src/core/ContactFooter/component.rb

@@ -1,13 +0,0 @@
-module AblyUi
-  module Core
-    class ContactFooter < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base
-
-      def initialize(url_base: AblyUi::Core::Util::DEFAULT_URL_BASE)
-        @url_base = url_base
-      end
-    end
-  end
-end

package/src/core/CustomerLogos/component.html.erb

@@ -1,9 +0,0 @@
-<section class="w-full bg-white">
-  <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
-    <% companies.each do |company| %>
-	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
-	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
-	    </li>
-    <% end %>
-  <% end %>
-</section>

package/src/core/CustomerLogos/component.rb

@@ -1,14 +0,0 @@
-require 'json'
-
-module AblyUi
-  module Core
-    class CustomerLogos < ViewComponent::Base
-      attr_reader :companies
-
-      def initialize(companies:, additional_css: '')
-        @companies = companies
-        @additional_css = additional_css
-      end
-    end
-  end
-end

package/src/core/FeatureFooter/component.html.erb

@@ -1,54 +0,0 @@
-<%- @image_url ||= asset_path('ably_ui/core/images/technical-support-01-800x533.jpg') %>
-<div class="ui-feature-footer" data-id="feature-footer">
-  <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 md:grid grid-cols-3 ui-grid-gap ui-grid-px">
-    <div class="col-span-2 bg-cool-black text-white rounded-lg overflow-hidden sm:flex flex-row mb-24 md:mb-0">
-      <%= tag.div class: 'ui-feature-image flex-0 bg-center bg-cover w-full h-256 sm:w-1/2 sm:h-auto', style: "background-image:url(#{@image_url})" %>
-      <div class="p-24 sm:p-32 flex-1 h-full">
-        <div class="flex flex-col h-full space-between">
-          <span class="flex-1">
-            <div class="text-h3 mb-24 flex-1"><%= @title %> </div>
-            <p class="text-p1 font-light"><%= @subtitle %></p>
-            <%= tag.button type: "button", class: "ui-btn-secondary-invert self-start mt-24", data: { id: "open-chat-widget", enabled_label: live_chat_label, disabled_label: live_chat_disabled_label }, disabled: true do %>
-              <%= live_chat_disabled_label %>
-            <% end %>
-          </span>
-          <span class="flex-0 mt-24 md:mt-0">
-            <p class="text-p1 font-light">
-              Don’t want to chat?
-              <%= link_to 'Get in touch via our contact page', abs_url("/contact"), class: "text-white underline font-medium hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus" %>
-            </p>
-          </span>
-        </div>
-      </div>
-    </div>
-    <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
-      <div class="flex flex-col h-full space-between">
-        <span class="flex-1">
-          <div class="text-h3 mb-24">Try our APIs for free</div>
-          <p class="text-p1 font-medium mb-16">Our free plan includes</p>
-          <ul class="relative ml-24 text-p1 font-light leading-8">
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              6m messages per month
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              200 peak connections
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              200 peak channels
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              Loads of features
-            </li>
-          </ul>
-        </span>
-        <span class="flex-0">
-          <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>

package/src/core/FeatureFooter/component.rb

@@ -1,30 +0,0 @@
-module AblyUi
-  module Core
-    class FeatureFooter < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base,
-                  :image_url,
-                  :title,
-                  :subtitle,
-                  :live_chat_label,
-                  :live_chat_disabled_label
-
-      def initialize(
-        url_base: AblyUi::Core::Util::DEFAULT_URL_BASE,
-        image_url: nil,
-        title: 'Talk to our technical team',
-        subtitle: "If you're having technical or account issues just get in touch.",
-        live_chat_label: 'Start a live chat',
-        live_chat_disabled_label: 'Live chat unavailable'
-      )
-        @url_base = url_base
-        @image_url = image_url
-        @title = title
-        @subtitle = subtitle
-        @live_chat_label = live_chat_label
-        @live_chat_disabled_label = live_chat_disabled_label
-      end
-    end
-  end
-end

package/src/core/FeaturedLink/component.css

@@ -1,6 +0,0 @@
-@layer components {
-  .ui-featured-link {
-    @apply font-sans font-bold block;
-    @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
-  }
-}

package/src/core/FeaturedLink/component.html.erb

@@ -1,15 +0,0 @@
-<%= link_to(@url, class: "ui-featured-link group #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
-  <% if @reverse %>
-    <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
-                                      size: "calc(var(--featured-link-icon-size) * 1.25)",
-                                      color: @icon_color,
-                                      additional_css: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
-    <%= content -%>
-  <% else %>
-    <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
-                                                     size: "calc(var(--featured-link-icon-size) * 1.25)",
-                                                     color: @icon_color,
-                                                     additional_css: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
-  <% end %>
-
-<% end %>