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

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

@@ -1,9 +1,21 @@
 import React from "react";
-import T from "prop-types";
 
-import FeaturedLink from "../FeaturedLink/component.jsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
-const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
+type MeganavBlogPostsListProps = {
+  recentBlogPosts: {
+    link: string;
+    title: string;
+    pubDate: string;
+  }[];
+  absUrl: AbsUrl;
+};
+
+const MeganavBlogPostsList = ({
+  recentBlogPosts,
+  absUrl,
+}: MeganavBlogPostsListProps) =>
   recentBlogPosts ? (
     <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <h3 className="ui-meganav-overline" id="meganav-company-panel-list-blog">
@@ -26,15 +38,4 @@ const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
     </div>
   ) : null;
 
-MeganavBlogPostsList.propTypes = {
-  recentBlogPosts: T.arrayOf(
-    T.shape({
-      link: T.string,
-      title: T.string,
-      pubDate: T.string,
-    })
-  ),
-  absUrl: T.func,
-};
-
 export default MeganavBlogPostsList;

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

@@ -1,58 +1,91 @@
 import React from "react";
-import T from "prop-types";
 
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component.jsx";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
+import MeganavBlogPostsList from "./MeganavBlogPostsList";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
-import { selectRecentBlogPosts } from "../remote-blogs-posts";
-
-import Icon from "../Icon/component.jsx";
+type MeganavContentCompanyProps = {
+  absUrl: AbsUrl;
+  paths: {
+    awsLogo: string;
+  };
+};
 
-const MeganavContentCompany = ({ paths, absUrl }) => {
-  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, { recentBlogPosts: selectRecentBlogPosts });
+const MeganavContentCompany = ({
+  paths,
+  absUrl,
+}: MeganavContentCompanyProps) => {
+  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, {
+    recentBlogPosts: selectRecentBlogPosts,
+  });
 
   return (
     <div className="flex max-w-screen-xl mx-auto">
       <div className="ui-meganav-content-spacer"></div>
       <section className="grid grid-cols-12 ui-grid-gap-x w-full">
         <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-          <h3 className="ui-meganav-overline" id="meganav-company-panel-list-why-companies">
+          <h3
+            className="ui-meganav-overline"
+            id="meganav-company-panel-list-why-companies"
+          >
             Why companies choose Ably
           </h3>
           <ul aria-labelledby="meganav-company-panel-list-why-companies">
             <li>
-              <a href={absUrl("/customers")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/customers")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-customers-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Customers</p>
-                  <p className="ui-meganav-media-copy">Ably supports customers across multiple industries.</p>
+                  <p className="ui-meganav-media-copy">
+                    Ably supports customers across multiple industries.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/case-studies")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/case-studies")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-case-studies-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Case studies</p>
-                  <p className="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
+                  <p className="ui-meganav-media-copy">
+                    Discover how customers are benefiting from Ably.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/compare")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/compare")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-compare-tech-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Compare our tech</p>
-                  <p className="ui-meganav-media-copy">Choose the right realtime service.</p>
+                  <p className="ui-meganav-media-copy">
+                    Choose the right realtime service.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/aws")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/aws")}
+                className="ui-meganav-media-with-image group"
+              >
                 <img src={paths.awsLogo} alt="AWS logo" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Partners</p>
-                  <p className="ui-meganav-media-copy">Ably collaborates and integrates with AWS.</p>
+                  <p className="ui-meganav-media-copy">
+                    Ably collaborates and integrates with AWS.
+                  </p>
                 </div>
               </a>
             </li>
@@ -60,40 +93,63 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
         </div>
 
         <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-          <ul className="md:mt-40" aria-labelledby="meganav-company-panel-list-why-companies">
+          <ul
+            className="md:mt-40"
+            aria-labelledby="meganav-company-panel-list-why-companies"
+          >
             <li>
-              <a href={absUrl("/resources")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/resources")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-resources-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Resources</p>
-                  <p className="ui-meganav-media-copy">Learn more about realtime with our handy resources.</p>
+                  <p className="ui-meganav-media-copy">
+                    Learn more about realtime with our handy resources.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/about")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/about")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-about-ably-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">About Ably</p>
-                  <p className="ui-meganav-media-copy">Find out more about Ably’s mission.</p>
+                  <p className="ui-meganav-media-copy">
+                    Find out more about Ably’s mission.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/careers")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/careers")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-careers-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Careers</p>
-                  <p className="ui-meganav-media-copy">Discover our open roles and core Ably values.</p>
+                  <p className="ui-meganav-media-copy">
+                    Discover our open roles and core Ably values.
+                  </p>
                 </div>
               </a>
             </li>
             <li>
-              <a href={absUrl("/events")} className="ui-meganav-media-with-image group">
+              <a
+                href={absUrl("/events")}
+                className="ui-meganav-media-with-image group"
+              >
                 <Icon name="icon-display-events-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Events</p>
-                  <p className="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+                  <p className="ui-meganav-media-copy">
+                    Join Ably at upcoming events.
+                  </p>
                 </div>
               </a>
             </li>
@@ -107,11 +163,4 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
   );
 };
 
-MeganavContentCompany.propTypes = {
-  absUrl: T.func,
-  paths: T.shape({
-    awsLogo: T.string,
-  }),
-};
-
 export default MeganavContentCompany;

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

@@ -1,50 +1,73 @@
 import React from "react";
-import T from "prop-types";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
-const MeganavContentDevelopers = ({ absUrl }) => (
+const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer"></div>
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-        <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
+        <h3
+          className="ui-meganav-overline uppercase"
+          id="meganav-developers-panel-explore"
+        >
           Explore
         </h3>
         <ul aria-labelledby="meganav-developers-panel-explore">
           <li>
-            <a href={absUrl("/docs")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/docs")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-docs-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Documentation</p>
-                <p className="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
+                <p className="ui-meganav-media-copy">
+                  Technical guides to help you build with Ably.
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/docs/quick-start-guide")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Quickstart guides</p>
-                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
+                <p className="ui-meganav-media-copy">
+                  Documentation to help you get started quickly.
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/integrations")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-integrations-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Integrations</p>
-                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+                <p className="ui-meganav-media-copy">
+                  Find out more about Ably integrations.{" "}
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/examples")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/examples")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-examples-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Live examples</p>
-                <p className="ui-meganav-media-copy">Discover our features and their use cases.</p>
+                <p className="ui-meganav-media-copy">
+                  Discover our features and their use cases.
+                </p>
               </div>
             </a>
           </li>
@@ -52,40 +75,67 @@ const MeganavContentDevelopers = ({ absUrl }) => (
       </div>
 
       <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-        <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
+        <ul
+          className="md:mt-40"
+          aria-labelledby="meganav-developers-panel-explore"
+        >
           <li>
-            <a href={absUrl("/docs/sdks")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/docs/sdks")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-sdks-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">SDKs</p>
-                <p className="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
+                <p className="ui-meganav-media-copy">
+                  Download an SDK to help you build realtime apps faster.
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/tutorials")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/tutorials")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Tutorials & Demos</p>
-                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
+                <p className="ui-meganav-media-copy">
+                  Get stuck in with our hands-on resources.
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/reference-guide-chat")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/reference-guide-chat")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-display-chat-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Chat apps reference guide</p>
-                <p className="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
+                <p className="ui-meganav-media-heading">
+                  Chat apps reference guide
+                </p>
+                <p className="ui-meganav-media-copy">
+                  Learn how to build chat apps with Ably.
+                </p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
+            <a
+              href={absUrl("/reference-guide-multiplayer")}
+              className="ui-meganav-media-with-image group"
+            >
               <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
-                <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+                <p className="ui-meganav-media-heading">
+                  Multiplayer reference guide
+                </p>
+                <p className="ui-meganav-media-copy">
+                  Learn how to build collaborative features with Ably.
+                </p>
               </div>
             </a>
           </li>
@@ -93,33 +143,48 @@ const MeganavContentDevelopers = ({ absUrl }) => (
       </div>
 
       <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-        <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
+        <h3
+          className="ui-meganav-overline uppercase"
+          id="meganav-developers-panel-quick-links"
+        >
           Quick links
         </h3>
         <ul aria-labelledby="meganav-developers-panel-quick-links">
           <li>
-            <a href="https://discord.gg/jwBPhEZ9g5" className="group ui-meganav-media py-12">
+            <a
+              href="https://discord.gg/jwBPhEZ9g5"
+              className="group ui-meganav-media py-12"
+            >
               <p className="ui-meganav-media-heading">Discord</p>
             </a>
           </li>
           <li>
-            <a href="https://github.com/ably" className="group ui-meganav-media py-12">
+            <a
+              href="https://github.com/ably"
+              className="group ui-meganav-media py-12"
+            >
               <p className="ui-meganav-media-heading">GitHub</p>
             </a>
           </li>
           <li>
-            <a href="https://changelog.ably.com/" className="group ui-meganav-media py-12">
+            <a
+              href="https://changelog.ably.com/"
+              className="group ui-meganav-media py-12"
+            >
               <p className="ui-meganav-media-heading">Changelog</p>
             </a>
           </li>
           <li>
-            <a href="https://status.ably.com/" className="group ui-meganav-media py-12">
+            <a
+              href="https://status.ably.com/"
+              className="group ui-meganav-media py-12"
+            >
               <p className="ui-meganav-media-heading">
                 Status
                 <iframe
                   title="Ably status"
                   src="https://status.ably.com/embed/icon"
-                  allowtransparency="true"
+                  style={{ backgroundColor: "transparent" }}
                   frameBorder="0"
                   scrolling="no"
                   className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
@@ -128,7 +193,10 @@ const MeganavContentDevelopers = ({ absUrl }) => (
             </a>
           </li>
           <li>
-            <a href={absUrl("/support")} className="group ui-meganav-media py-12">
+            <a
+              href={absUrl("/support")}
+              className="group ui-meganav-media py-12"
+            >
               <p className="ui-meganav-media-heading">Support & FAQs</p>
             </a>
           </li>
@@ -139,8 +207,4 @@ const MeganavContentDevelopers = ({ absUrl }) => (
   </div>
 );
 
-MeganavContentDevelopers.propTypes = {
-  absUrl: T.func,
-};
-
 export default MeganavContentDevelopers;

package/src/core/MeganavContentProducts.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
+
+type MeganavContentProductsProps = {
+  paths: {
+    ablyStack: string;
+    iconSprites: string;
+  };
+  absUrl: AbsUrl;
+};
+
+const MeganavContentProducts = ({
+  paths,
+  absUrl,
+}: MeganavContentProductsProps) => (
+  <div className="flex max-w-screen-xl mx-auto">
+    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
+        <div className="flex mb-20">
+          <img src={paths.ablyStack} alt="Ably homepage" />
+          <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
+        </div>
+        <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>
+
+        <FeaturedLink url={absUrl("/platform")} textSize="text-p2">
+          Explore how it works
+        </FeaturedLink>
+      </div>
+
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
+        <h3
+          className="ui-meganav-overline"
+          id="meganav-products-panel-list-examples"
+        >
+          Products
+        </h3>
+        <ul
+          className="mb-16"
+          aria-labelledby="meganav-products-panel-list-examples"
+        >
+          <li>
+            <a
+              href={absUrl("/solutions/channels")}
+              className="group ui-meganav-media"
+            >
+              <p className="ui-meganav-media-heading">Pub/Sub Channels</p>
+              <p className="ui-meganav-media-copy">
+                Build infinitely scalable realtime applications.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/spaces")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Spaces (Beta)</p>
+              <p className="ui-meganav-media-copy">
+                Create multi-user collaborative environments.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/livesync")} className="group ui-meganav-media">
+              <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>
+        </ul>
+      </div>
+
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
+        <h3
+          className="ui-meganav-overline"
+          id="meganav-products-panel-list-our-technology"
+        >
+          Technology
+        </h3>
+        <ul
+          className="mb-16"
+          aria-labelledby="meganav-products-panel-list-our-technology"
+        >
+          <li>
+            <a
+              href={absUrl("/four-pillars-of-dependability#performance")}
+              className="ui-meganav-media group"
+            >
+              <p className="ui-meganav-media-heading">
+                Predictable performance
+              </p>
+              <p className="ui-meganav-media-copy">
+                A low-latency and high-throughput global network.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a
+              href={absUrl("/four-pillars-of-dependability#integrity")}
+              className="ui-meganav-media group"
+            >
+              <p className="ui-meganav-media-heading">
+                Guaranteed ordering & delivery
+              </p>
+              <p className="ui-meganav-media-copy">
+                Data is delivered - in order - even after disconnections.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a
+              href={absUrl("/four-pillars-of-dependability#reliability")}
+              className="ui-meganav-media group"
+            >
+              <p className="ui-meganav-media-heading">
+                Fault tolerant infrastructure
+              </p>
+              <p className="ui-meganav-media-copy">
+                Redundancy is built in at global and regional levels.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a
+              href={absUrl("/four-pillars-of-dependability#availability")}
+              className="ui-meganav-media group"
+            >
+              <p className="ui-meganav-media-heading">
+                High scalability & availability
+              </p>
+              <p className="ui-meganav-media-copy">
+                Built for scale with legitimate 99.999% uptime SLAs.
+              </p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/network")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Global edge network</p>
+              <p className="ui-meganav-media-copy">
+                An edge network of 15 core routing datacenters and 205+ PoPs.
+              </p>
+            </a>
+          </li>
+        </ul>
+
+        <FeaturedLink
+          url={absUrl("/four-pillars-of-dependability")}
+          textSize="text-p3"
+        >
+          Explore Four Pillars of Dependability
+        </FeaturedLink>
+      </div>
+    </section>
+    <div className="ui-meganav-content-spacer"></div>
+  </div>
+);
+
+export default MeganavContentProducts;