@ably/ui 13.3.0 → 14.0.0-dev.3f64b93

package/src/core/{Footer/component.jsx → Footer.tsx}

@@ -1,44 +1,77 @@
 import React from "react";
-import T from "prop-types";
 
-import Icon from "../Icon/component.jsx";
-import _absUrl from "../url-base";
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import "./Footer/component.css";
 
-export default function Footer({ paths, urlBase }) {
+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">
+    <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>
+            <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.
+              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">
+              <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">
+              <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">
+              <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">
+              <a
+                href={absUrl("/protocols")}
+                className="ui-footer-menu-row-link"
+              >
                 Multiple protocol messaging
               </a>
             </li>
@@ -49,52 +82,82 @@ export default function Footer({ paths, urlBase }) {
           <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <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">
+              <a
+                href={absUrl("/solutions/iot-and-connected-devices")}
+                className="ui-footer-menu-row-link"
+              >
                 IoT &amp; Connected Devices
               </a>
             </li>
@@ -105,7 +168,10 @@ export default function Footer({ paths, urlBase }) {
           <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">
+              <a
+                href={absUrl("/docs/quick-start-guide")}
+                className="ui-footer-menu-row-link"
+              >
                 Start in 5 minutes
               </a>
             </li>
@@ -115,12 +181,18 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/tutorials")} className="ui-footer-menu-row-link">
+              <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">
+              <a
+                href="https://changelog.ably.com/"
+                className="ui-footer-menu-row-link"
+              >
                 Changelog
               </a>
             </li>
@@ -130,18 +202,24 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/docs/sdks")} className="ui-footer-menu-row-link">
+              <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/">
+              <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"
-                allowTransparency={true}
+                style={{ backgroundColor: "transparent" }}
                 frameBorder="0"
                 scrolling="no"
                 title="System Status"
@@ -154,17 +232,26 @@ export default function Footer({ paths, urlBase }) {
           <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">
+              <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">
+              <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">
+              <a
+                href={absUrl("/four-pillars-of-dependability")}
+                className="ui-footer-menu-row-link"
+              >
                 Four Pillars of Dependability
               </a>
             </li>
@@ -174,12 +261,18 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/protocols")} className="ui-footer-menu-row-link">
+              <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">
+              <a
+                href={absUrl("/integrations")}
+                className="ui-footer-menu-row-link"
+              >
                 Third-party integrations
               </a>
             </li>
@@ -210,12 +303,18 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/open-policy")} className="ui-footer-menu-row-link">
+              <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">
+              <a
+                href={absUrl("/press-center")}
+                className="ui-footer-menu-row-link"
+              >
                 Press & Media
               </a>
             </li>
@@ -236,7 +335,11 @@ export default function Footer({ paths, urlBase }) {
           <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">
+                <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
@@ -246,10 +349,18 @@ export default function Footer({ paths, urlBase }) {
                 >
                   <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">
+                <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">
+                <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>
@@ -265,8 +376,13 @@ export default function Footer({ paths, urlBase }) {
                   <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">
+                  <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>
@@ -285,8 +401,13 @@ export default function Footer({ paths, urlBase }) {
                 <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">
+                <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>
@@ -295,10 +416,26 @@ export default function Footer({ paths, urlBase }) {
         </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" />
+          <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>
 
@@ -314,7 +451,10 @@ export default function Footer({ paths, urlBase }) {
             <a href={absUrl("/legals")} className="pr-24 ui-footer-link">
               Legals
             </a>
-            <a href={absUrl("/data-protection")} className="pr-24 ui-footer-link">
+            <a
+              href={absUrl("/data-protection")}
+              className="pr-24 ui-footer-link"
+            >
               Data Protection
             </a>
             <a href={absUrl("/privacy")} className="ui-footer-link">
@@ -324,46 +464,73 @@ export default function Footer({ paths, urlBase }) {
         </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" />
+            <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>
+              <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" />
+            <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>
+              <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" />
+            <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>
+              <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" />
+            <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>
+              <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>
   );
-}
-
-Footer.propTypes = {
-  paths: T.shape({
-    ablyStack: T.string,
-    highestPerformer: T.string,
-    highestUserAdoption: T.string,
-    bestSupport: T.string,
-    fastestImplementation: T.string,
-  }),
-  urlBase: T.string,
 };
+
+export default Footer;

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

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