@ably/ui 14.0.4 → 14.0.6

package/src/core/Footer.tsx

@@ -1,535 +0,0 @@
-import React from "react";
-
-import Icon from "./Icon";
-import _absUrl from "./url-base.js";
-
-type FooterProps = {
-  paths: {
-    ablyStack: string;
-    highestPerformer: string;
-    highestUserAdoption: string;
-    bestSupport: string;
-    fastestImplementation: string;
-  };
-  urlBase: string;
-};
-
-const Footer = ({ paths, urlBase }: FooterProps) => {
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  return (
-    <footer
-      className="bg-light-grey font-sans antialiased leading-normal"
-      data-id="footer"
-    >
-      <div className="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
-        <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="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="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>
-
-          <ul className="grid grid-cols-1">
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/channels")}
-                className="ui-footer-menu-row-link"
-              >
-                Pub/sub messaging
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/push-notifications")}
-                className="ui-footer-menu-row-link"
-              >
-                Push notifications
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/integrations")}
-                className="ui-footer-menu-row-link"
-              >
-                Third-party integrations
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/protocols")}
-                className="ui-footer-menu-row-link"
-              >
-                Multiple protocol messaging
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="col-span-full xs:col-span-3 md:col-span-1">
-          <h2 className="ui-footer-col-title">Ably is for</h2>
-          <ul>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/asset-tracking")}
-                className="ui-footer-menu-row-link"
-              >
-                Ably Asset Tracking
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/extend-kafka-to-the-edge")}
-                className="ui-footer-menu-row-link"
-              >
-                Extend Kafka to the edge
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/edtech")}
-                className="ui-footer-menu-row-link"
-              >
-                EdTech
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/automotive-logistics-and-mobility")}
-                className="ui-footer-menu-row-link"
-              >
-                Automotive, Logistics, &amp; Mobility
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/b2b-platforms")}
-                className="ui-footer-menu-row-link"
-              >
-                B2B Platforms
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/healthcare")}
-                className="ui-footer-menu-row-link"
-              >
-                Healthcare
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/ecommerce-and-retail")}
-                className="ui-footer-menu-row-link"
-              >
-                eCommerce &amp; Retail
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/sports-and-media")}
-                className="ui-footer-menu-row-link"
-              >
-                Sports &amp; Media
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/gaming")}
-                className="ui-footer-menu-row-link"
-              >
-                Gaming
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/solutions/iot-and-connected-devices")}
-                className="ui-footer-menu-row-link"
-              >
-                IoT &amp; Connected Devices
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="col-span-full xs:col-span-3 md:col-span-1">
-          <h2 className="ui-footer-col-title">Developers</h2>
-          <ul>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/docs/quick-start-guide")}
-                className="ui-footer-menu-row-link"
-              >
-                Start in 5 minutes
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/docs/")} className="ui-footer-menu-row-link">
-                Documentation
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/tutorials")}
-                className="ui-footer-menu-row-link"
-              >
-                Tutorials
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href="https://changelog.ably.com/"
-                className="ui-footer-menu-row-link"
-              >
-                Changelog
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/support")} className="ui-footer-menu-row-link">
-                Support &amp; FAQs
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/docs/sdks")}
-                className="ui-footer-menu-row-link"
-              >
-                SDKs
-              </a>
-            </li>
-            <li className="p-menu-row-snug flex items-center -mt-4">
-              <a
-                className="pr-8 ui-footer-menu-row-link"
-                href="https://status.ably.com/"
-              >
-                System status
-              </a>
-              <iframe
-                className="w-20 h-20 mb-2"
-                src="https://status.ably.com/embed/icon"
-                style={{ backgroundColor: "transparent" }}
-                frameBorder="0"
-                scrolling="no"
-                title="System Status"
-              ></iframe>
-            </li>
-          </ul>
-        </div>
-
-        <div className="col-span-full xs:col-span-3 md:col-span-1">
-          <h2 className="ui-footer-col-title">WHY ABLY</h2>
-          <ul>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/customers")}
-                className="ui-footer-menu-row-link"
-              >
-                Customers
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/case-studies")}
-                className="ui-footer-menu-row-link"
-              >
-                Case Studies
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/four-pillars-of-dependability")}
-                className="ui-footer-menu-row-link"
-              >
-                Four Pillars of Dependability
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/compare")} className="ui-footer-menu-row-link">
-                Compare our tech
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/protocols")}
-                className="ui-footer-menu-row-link"
-              >
-                Multi protocol support
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/integrations")}
-                className="ui-footer-menu-row-link"
-              >
-                Third-party integrations
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="col-span-full xs:col-span-3 md:col-span-1">
-          <h2 className="ui-footer-col-title">ABOUT</h2>
-          <ul>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/about")} className="ui-footer-menu-row-link">
-                About Ably
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/pricing")} className="ui-footer-menu-row-link">
-                Pricing
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/blog")} className="ui-footer-menu-row-link">
-                Blog
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/careers")} className="ui-footer-menu-row-link">
-                Careers
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/open-policy")}
-                className="ui-footer-menu-row-link"
-              >
-                Open protocol policy
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a
-                href={absUrl("/press-center")}
-                className="ui-footer-menu-row-link"
-              >
-                Press & Media
-              </a>
-            </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/contact")} className="ui-footer-menu-row-link">
-                Contact us
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className="max-w-screen-xl ui-grid-px mx-auto">
-        <hr className="border-t border-mid-grey my-0" />
-      </div>
-      {/* Twitter + Glassdoor SM & above + Glassdoor XS  + Badges*/}
-      <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
-        <div className="md:flex md:items-center">
-          <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
-            <div className="">
-              <div className="flex pb-24">
-                <a
-                  className="h-24 pr-24 text-cool-black hover:text-icon-twitter"
-                  href="https://twitter.com/ablyrealtime"
-                  title="Ably on X"
-                >
-                  <Icon name="icon-social-x" size="1.5rem" />
-                </a>
-                <a
-                  className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
-                  href="https://www.linkedin.com/company/ably-realtime"
-                  title="Ably on LinkedIn"
-                >
-                  <Icon name="linkedin" size="1.5rem" />
-                </a>
-                <a
-                  className="h-24 pr-24 text-cool-black hover:text-icon-github"
-                  href="https://github.com/ably/"
-                  title="Ably on Github"
-                >
-                  <Icon name="github" size="1.5rem" />
-                </a>
-                <a
-                  className="h-24 pr-24 text-cool-black hover:text-icon-discord"
-                  href="https://discord.gg/jwBPhEZ9g5"
-                  title="Ably on Discord"
-                >
-                  <Icon name="discord" size="1.5rem" />
-                </a>
-              </div>
-            </div>
-            {/* GLASSDOOR on SM and Above */}
-            <div className="xs:hidden sm:block ui-footer-glassdoor">
-              <div className="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
-                <a
-                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                  className="h-24 text-cool-black hover:text-icon-glassdoor"
-                  title="Ably reviews on glassdoor"
-                >
-                  <Icon name="glassdoor" size="1.5rem" />
-                </a>
-                <div className="pl-16 text-menu3 font-sans font-medium">
-                  <strong className="block font-medium">
-                    We&apos;re hiring!
-                  </strong>
-                  <a
-                    href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                    className="ui-footer-link"
-                  >
-                    Learn more at Glassdoor
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* GlassDoor on XS ONLY */}
-          <div className="xs:block sm:hidden">
-            <div className="border-t border-mid-grey w-full"></div>
-            <div className="flex py-24">
-              <a
-                className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
-                href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                title="Ably reviews on glassdoor"
-              >
-                <Icon name="glassdoor" size="1.5rem" />
-              </a>
-              <div className="text-menu3 font-sans font-medium">
-                <strong className="block font-medium">
-                  We&apos;re hiring!
-                </strong>
-                <a
-                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                  className="ui-footer-link"
-                >
-                  Learn more at Glassdoor
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
-          <img
-            className="mr-24 h-80"
-            src={paths.highestUserAdoption}
-            alt="Highest User Adoption 2023"
-          />
-          <img
-            className="mr-24 h-80"
-            src={paths.bestSupport}
-            alt="Best Support 2023"
-          />
-          <img
-            className="mr-24 h-80"
-            src={paths.fastestImplementation}
-            alt="Fastest Implementation 2023"
-          />
-          <img
-            className="mr-24 h-80"
-            src={paths.highestPerformer}
-            alt="High Performer 2023"
-          />
-        </div>
-      </div>
-
-      <div className="max-w-screen-xl ui-grid-px mx-auto">
-        <hr className="border-t border-mid-grey my-0" />
-      </div>
-      <div className="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
-        <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
-          <div className="flex">
-            <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
-              Cookies
-            </a>
-            <a href={absUrl("/legals")} className="pr-24 ui-footer-link">
-              Legals
-            </a>
-            <a
-              href={absUrl("/data-protection")}
-              className="pr-24 ui-footer-link"
-            >
-              Data Protection
-            </a>
-            <a href={absUrl("/privacy")} className="ui-footer-link">
-              Privacy
-            </a>
-          </div>
-        </div>
-        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
-          <div className="flex mr-24">
-            <Icon
-              name="icon-gui-tick"
-              color="text-active-orange"
-              size="1.5rem"
-              additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon"
-            />
-            <div>
-              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">
-                SOC 2 Type 2
-              </p>
-              <p className="ui-footer-compliance-text font-medium mb-24">
-                Certified
-              </p>
-            </div>
-          </div>
-          <div className="flex mr-24 md:col-start-2">
-            <Icon
-              name="icon-gui-tick"
-              color="text-active-orange"
-              size="1.5rem"
-              additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon"
-            />
-            <div>
-              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">
-                HIPAA
-              </p>
-              <p className="ui-footer-compliance-text font-medium mb-24">
-                Compliant
-              </p>
-            </div>
-          </div>
-          <div className="flex mr-24 md:col-start-3">
-            <Icon
-              name="icon-gui-tick"
-              color="text-active-orange"
-              size="1.5rem"
-              additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon"
-            />
-            <div>
-              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">
-                EU GDPR
-              </p>
-              <p className="ui-footer-compliance-text font-medium mb-24">
-                Certified
-              </p>
-            </div>
-          </div>
-          <div className="flex mr-24 md:col-start-4">
-            <Icon
-              name="icon-gui-tick"
-              color="text-active-orange"
-              size="1.5rem"
-              additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon"
-            />
-            <div>
-              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">
-                256-bit AES
-              </p>
-              <p className="ui-footer-compliance-text font-medium mb-24">
-                Encryption
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

package/src/core/Icon/Icon.stories.tsx

@@ -1,151 +0,0 @@
-import React from "react";
-import Icon from "../Icon";
-
-export default {
-  title: "Components/Icon",
-  component: Icon,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-};
-
-const coreIcons = [
-  "icon-gui-ably-badge",
-  "icon-gui-arrow-bidirectional-horizontal",
-  "icon-gui-arrow-bidirectional-vertical",
-  "icon-gui-arrow-down",
-  "icon-gui-arrow-left",
-  "icon-gui-arrow-right",
-  "icon-gui-arrow-up",
-  "icon-gui-burger-menu",
-  "icon-gui-check-circled-fill",
-  "icon-gui-check-circled-fill-black",
-  "icon-gui-check-circled",
-  "icon-gui-checklist-checked",
-  "icon-gui-clock",
-  "icon-gui-close",
-  "icon-gui-cross-circled-fill",
-  "icon-gui-cross-circled",
-  "icon-gui-copy",
-  "icon-gui-dash-circled",
-  "icon-gui-disclosure-arrow",
-  "icon-gui-document-generic",
-  "icon-gui-enlarge",
-  "icon-gui-external-link",
-  "icon-gui-history",
-  "icon-gui-info",
-  "icon-gui-link-arrow",
-  "icon-gui-live-chat",
-  "icon-gui-minus",
-  "icon-gui-partial",
-  "icon-gui-plus",
-  "icon-gui-quote-marks-solid",
-  "icon-gui-refresh",
-  "icon-gui-search",
-  "icon-gui-tick",
-  "icon-gui-warning",
-  "icon-gui-link",
-  "icon-gui-filter-flow-step-1",
-  "icon-gui-filter-flow-step-2",
-  "icon-gui-filter-flow-step-3",
-  "icon-gui-resources",
-];
-
-const displayIcons = [
-  "icon-display-48hrs",
-  "icon-display-about-ably-col",
-  "icon-display-api",
-  "icon-display-api-keys",
-  "icon-display-asset-tracking-col",
-  "icon-display-browser",
-  "icon-display-calendar",
-  "icon-display-call-mobile",
-  "icon-display-careers-col",
-  "icon-display-case-studies-col",
-  "icon-display-chat-stack-col",
-  "icon-display-cloud-servers",
-  "icon-display-compare-tech-col",
-  "icon-display-customers-col",
-  "icon-display-docs-col",
-  "icon-display-documentation",
-  "icon-display-examples-col",
-  "icon-display-gdpr",
-  "icon-display-general-comms",
-  "icon-display-hipaa",
-  "icon-display-it-support-access",
-  "icon-display-it-support-helpdesk",
-  "icon-display-laptop",
-  "icon-display-lightbulb-col",
-  "icon-display-live-chat",
-  "icon-display-map-pin",
-  "icon-display-message",
-  "icon-display-padlock-closed",
-  "icon-display-platform",
-  "icon-display-play",
-  "icon-display-privacy-shield-framework",
-  "icon-display-quickstart-guides-col",
-  "icon-display-resources-col",
-  "icon-display-sdks-col",
-  "icon-display-servers",
-  "icon-display-shopping-cart",
-  "icon-display-sla",
-  "icon-display-chat-col",
-  "icon-display-soc2-type2",
-  "icon-display-tech-account-comms",
-  "icon-display-tutorials-demos-col",
-  "icon-display-integrations-col",
-  "icon-display-virtual-events-col",
-  "icon-live-updates-results-metrics-col",
-  "icon-multi-user-spaces-col",
-];
-
-const socialIcons = [
-  "discord",
-  "facebook",
-  "github",
-  "glassdoor",
-  "linkedin",
-  "twitter",
-  "google",
-  "stackoverflow",
-  "youtube",
-];
-
-const otherIcons = ["quote"];
-
-const renderIcons = (iconSet: string[]) => (
-  <div className="grid grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-    {iconSet.map((icon: string) => (
-      <div className="border p-16" key={icon}>
-        <code className="ui-text-code mb-8 block">{icon}</code>
-        <div className="border inline-flex flex-0">
-          <div className="flex pi-checkered-bg">
-            <Icon
-              name={icon}
-              additionalCSS="hover:text-active-orange"
-              color="text-cool-black"
-              size="1.5rem"
-            />
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
-export const GUIIcons = {
-  render: () => renderIcons(coreIcons),
-};
-
-export const DisplayIcons = {
-  render: () => renderIcons(displayIcons),
-};
-
-export const SocialIcons = {
-  render: () => renderIcons(socialIcons),
-};
-
-export const Other = {
-  render: () => renderIcons(otherIcons),
-};