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

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

@@ -1,27 +1,52 @@
 import React from "react";
-import T from "prop-types";
 
-import MeganavControl from "../MeganavControl/component.jsx";
-import SignOutLink from "../SignOutLink/component.jsx";
-import MeganavSearch from "../MeganavSearch/component.jsx";
+import MeganavControl from "./MeganavControl";
+import SignOutLink from "./SignOutLink";
+import MeganavSearch from "./MeganavSearch";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
+
+type MeganavItemsSignedIn = {
+  sessionState: MeganavSessionState;
+  theme: MeganavTheme;
+  absUrl: AbsUrl;
+};
 
 const truncate = (string, length) => {
-  return string?.length && string.length > length ? `${string.slice(0, length - 1)}…` : string;
+  return string?.length && string.length > length
+    ? `${string.slice(0, length - 1)}…`
+    : string;
 };
 
-const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
-  const links = sessionState.account ? Object.keys(sessionState.account.links).map((key) => sessionState.account.links[key]) : [];
+const MeganavItemsSignedIn = ({
+  sessionState,
+  theme,
+  absUrl,
+}: MeganavItemsSignedIn) => {
+  const links = sessionState.account
+    ? Object.keys(sessionState.account.links).map(
+        (key) => sessionState.account.links[key]
+      )
+    : [];
   const accountName = truncate(sessionState.accountName, 20);
   const preferredEmail = truncate(sessionState.preferredEmail, 20);
 
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
+        <MeganavControl
+          ariaControls="account-panel"
+          ariaLabel="Account"
+          theme={theme}
+          additionalCSS="mr-0"
+        >
           {accountName}
         </MeganavControl>
 
-        <div className="ui-meganav-panel-account invisible" id="account-panel" data-id="meganav-panel">
+        <div
+          className="ui-meganav-panel-account invisible"
+          id="account-panel"
+          data-id="meganav-panel"
+        >
           {/* Users exist without accounts in which case there is no links here */}
           {sessionState.account && (
             <>
@@ -29,7 +54,10 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
               <ul className="mb-16 mx-16">
                 {links.map((item) => (
                   <li key={item.href}>
-                    <a className="ui-meganav-account-link" href={absUrl(item.href)}>
+                    <a
+                      className="ui-meganav-account-link"
+                      href={absUrl(item.href)}
+                    >
                       {item.text}
                     </a>
                   </li>
@@ -41,13 +69,19 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
           <p className="ui-meganav-overline mx-16">{preferredEmail}</p>
           <ul className="mb-8 mx-16">
             <li>
-              <a href={absUrl(sessionState.mySettings.href)} className="ui-meganav-account-link">
+              <a
+                href={absUrl(sessionState.mySettings.href)}
+                className="ui-meganav-account-link"
+              >
                 {sessionState.mySettings.text}
               </a>
             </li>
             {sessionState.myAccessTokens && (
               <li>
-                <a href={absUrl(sessionState.myAccessTokens.href)} className="ui-meganav-account-link">
+                <a
+                  href={absUrl(sessionState.myAccessTokens.href)}
+                  className="ui-meganav-account-link"
+                >
                   {sessionState.myAccessTokens.text}
                   <span className="ui-version-tag">preview</span>
                 </a>
@@ -61,7 +95,11 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
             <div className="mb-16 px-16">
               <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
                 {({ text, href, onClick }) => (
-                  <a onClick={onClick} href={absUrl(href)} className="ui-meganav-account-link">
+                  <a
+                    onClick={onClick}
+                    href={absUrl(href)}
+                    className="ui-meganav-account-link"
+                  >
                     {text}
                   </a>
                 )}
@@ -77,7 +115,10 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
 
       {sessionState.account && (
         <li>
-          <a href={absUrl(sessionState.account.links.dashboard.href)} className="ui-btn-secondary p-btn-small">
+          <a
+            href={absUrl(sessionState.account.links.dashboard.href)}
+            className="ui-btn-secondary p-btn-small"
+          >
             Dashboard
           </a>
         </li>
@@ -86,13 +127,4 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   );
 };
 
-MeganavItemsSignedIn.propTypes = {
-  sessionState: T.object,
-  paths: T.shape({
-    iconSprites: T.string,
-  }),
-  theme: T.object,
-  absUrl: T.func,
-};
-
 export default MeganavItemsSignedIn;

package/src/core/MeganavSearch.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import Icon from "./Icon";
+import MeganavSearchPanel from "./MeganavSearchPanel";
+import { AbsUrl } from "./Meganav";
+
+const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
+  <>
+    <button
+      type="button"
+      data-id="meganav-control"
+      data-control="search"
+      className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
+      aria-expanded="false"
+      aria-controls="panel-search"
+      aria-label={`Show Search Panel`}
+    >
+      <Icon
+        name="icon-gui-search"
+        color="text-cool-black"
+        size="1.5rem"
+        additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus"
+      />
+    </button>
+
+    <div
+      className="ui-meganav-panel invisible"
+      id="panel-search"
+      data-id="meganav-panel"
+    >
+      <MeganavSearchPanel absUrl={absUrl} />
+    </div>
+  </>
+);
+
+export default MeganavSearch;

package/src/core/MeganavSearchAutocomplete.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const MeganavSearchAutocomplete = () => (
+  <div
+    className="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+    data-id="meganav-search-autocomplete-container"
+  >
+    <ol className="m-16" data-id="meganav-search-autocomplete-list"></ol>
+  </div>
+);
+
+export default MeganavSearchAutocomplete;

package/src/core/MeganavSearchPanel.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import Icon from "./Icon";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
+import { AbsUrl } from "./Meganav";
+
+const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
+  <section className="ui-meganav-content grid-cols-12">
+    <div className="col-span-8">
+      <div className="mb-32">
+        <form
+          className="flex items-start"
+          action={absUrl("/search")}
+          method="get"
+        >
+          <div className="relative w-full">
+            <Icon
+              name="icon-gui-search"
+              color="text-cool-black"
+              size="1.5rem"
+              additionalCSS="absolute top-12 left-16"
+            />
+            <input
+              type="search"
+              name="q"
+              className="ui-input pl-48 h-48"
+              placeholder="Search"
+              autoComplete="off"
+              data-id="meganav-search-input"
+            />
+
+            <MeganavSearchAutocomplete />
+          </div>
+
+          <button
+            type="submit"
+            className="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"
+          >
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <div className="col-span-12">
+      <MeganavSearchSuggestions displaySupportLink={true} absUrl={absUrl} />
+    </div>
+  </section>
+);
+
+export default MeganavSearchPanel;

package/src/core/MeganavSearchSuggestions.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
+
+type MeganavSearchSuggestionsProps = {
+  absUrl: AbsUrl;
+  displaySupportLink: boolean;
+};
+
+const MeganavSearchSuggestions = ({
+  absUrl,
+  displaySupportLink,
+}: MeganavSearchSuggestionsProps) => (
+  <>
+    <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
+
+    <div className="flex justify-between items-center overflow-hidden">
+      <ul className="flex transition-transform">
+        <li className="py-12 pr-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/how-ably-works")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            How does Ably work?
+          </a>
+        </li>
+        <li className="py-12 px-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/quick-start-guide")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Quickstart guide
+          </a>
+        </li>
+        <li className="py-12 px-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/core-features/pubsub")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Publish/Subscribe Messaging
+          </a>
+        </li>
+        <li className="py-12 pl-8 flex-shrink-0">
+          <a
+            href={absUrl("/platform")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Platform
+          </a>
+        </li>
+      </ul>
+      {displaySupportLink ? (
+        <FeaturedLink url={absUrl("/support")} textSize="text-p2">
+          Support
+        </FeaturedLink>
+      ) : null}
+    </div>
+  </>
+);
+
+export default MeganavSearchSuggestions;

package/src/core/Notice/component.css

@@ -1,7 +1,5 @@
-@layer components {
-  .ui-announcement {
-    @apply font-sans;
-    max-height: 37.5rem;
-    transition: max-height 300ms;
-  }
+.ui-announcement {
+  @apply font-sans;
+  max-height: 37.5rem;
+  transition: max-height 300ms;
 }

package/src/core/Notice/component.js

@@ -3,7 +3,7 @@ import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 
 import { queryId } from "../dom-query";
-import { FLASH_DATA_ID } from "../Flash/component.jsx";
+import { FLASH_DATA_ID } from "../Flash";
 
 const COOKIE_EXPIRY = 90;
 const COLLAPSE_TRIGGER_DISTANCE = 5;

package/src/core/Notice.tsx

@@ -0,0 +1,103 @@
+import React, { ReactNode, useEffect } from "react";
+
+import NoticeScripts from "./Notice/component.js";
+import "./Notice/component.css";
+import Icon from "./Icon";
+type ContentWrapperProps = {
+  buttonLink: string;
+  children: ReactNode;
+};
+
+// TODO(jamiehenson):
+// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.
+// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are
+// the ones after the line break.
+type NoticeProps = {
+  buttonLink?: string;
+  buttonLabel?: string;
+  bodyText?: string;
+  title?: string;
+  closeBtn?: boolean;
+  config?: {
+    collapse: boolean;
+    noticeId: string;
+    cookieId: string;
+  };
+  bgColor?: string;
+  textColor?: string;
+
+  bannerContainer?: Element | null;
+  cookieId?: string;
+  noticeId?: string;
+  options?: { collapse: boolean };
+};
+
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
+
+const ContentWrapper = ({ buttonLink, children }: ContentWrapperProps) =>
+  buttonLink ? (
+    <a href={buttonLink} className={contentWrapperClasses}>
+      {children}
+    </a>
+  ) : (
+    <div className={contentWrapperClasses}>{children}</div>
+  );
+
+const Notice = ({
+  buttonLink,
+  buttonLabel,
+  bodyText,
+  title,
+  config,
+  closeBtn,
+  bgColor = "bg-gradient-active-orange",
+  textColor = "text-white",
+}: NoticeProps) => {
+  useEffect(() => {
+    NoticeScripts({
+      bannerContainer: document.querySelector('[data-id="ui-notice"]'),
+      cookieId: config?.cookieId,
+      noticeId: config?.noticeId,
+      options: {
+        collapse: config?.collapse || false,
+      },
+    });
+  }, []);
+
+  const wrapperClasses = ["ui-announcement", bgColor, textColor].join(" ");
+
+  return (
+    <div
+      className={wrapperClasses}
+      data-id="ui-notice"
+      style={{ maxHeight: 0, overflow: "hidden" }}
+    >
+      <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
+        <ContentWrapper buttonLink={buttonLink ?? "#"}>
+          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
+          <span className="pr-4">{bodyText}</span>
+          {buttonLabel && (
+            <span className="underline cursor-pointer whitespace-nowrap">
+              {buttonLabel}
+            </span>
+          )}
+        </ContentWrapper>
+
+        {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-cool-black"
+            />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Notice;

package/src/core/SignOutLink.tsx

@@ -0,0 +1,51 @@
+import React, { MouseEventHandler, ReactNode, useRef } from "react";
+import { AbsUrl } from "./Meganav";
+
+type SignOutLinkProps = {
+  token: string;
+  href: string;
+  text: string;
+  children: ({
+    href,
+    text,
+    onClick,
+  }: {
+    href: string;
+    text: string;
+    onClick: MouseEventHandler<HTMLAnchorElement>;
+  }) => ReactNode;
+  absUrl: AbsUrl;
+};
+
+const SignOutLink = ({
+  token,
+  href,
+  text,
+  children,
+  absUrl,
+}: SignOutLinkProps) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const onClick = (e) => {
+    formRef.current?.submit();
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <form
+        ref={formRef}
+        method="post"
+        action={absUrl(href)}
+        className="hidden"
+      >
+        <input name="_method" value="delete" type="hidden" />
+        <input name="authenticity_token" value={token} type="hidden" />
+      </form>
+
+      {children({ href, text, onClick })}
+    </>
+  );
+};
+
+export default SignOutLink;

package/src/core/Slider/Slider.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import Slider from "../Slider";
+import Icon from "../Icon";
+
+const Slide = ({ name }: { name: string }) => (
+  <div className="relative ">
+    <div className="relative w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
+      <div className="w-full md:w-2/3 flex flex-col gap-24 pr-40 md:pr-0 pt-40 pl-40 pb-40 sm:pb-[120px] md:pb-40">
+        <h2 className="ui-text-h2 font-medium text-neutral-1000">
+          “Ably seamlessly absorbs sudden bursts in load during unexpected
+          client events. The integration was easy and we were live in under a
+          month.”
+        </h2>
+        <div className="flex flex-col sm:flex-row gap-32">
+          <div className="flex gap-8">
+            <div className="static self-center sm:absolute sm:-bottom-48 sm:-right-[56px] rounded-full bg-gradient-to-l from-neutral-200 to-50% to-neutral-500 w-[48px] h-[48px] sm:w-[201px] sm:h-[201px] md:w-[257px] md:h-[257px] lg:w-[280px] lg:h-[280px] overflow-hidden flex items-center justify-center sm:border-[16px] border-neutral-200">
+              <img src="https://picsum.photos/id/64/200" alt="test-image" />
+            </div>
+            <div className="sm:py-16">
+              <p className="ui-text-p1 text-neutral-1300">{name}</p>
+              <p className="ui-text-p3 text-neutral-800">
+                Co-Founder & Technical Leader
+              </p>
+            </div>
+          </div>
+
+          <div className="w-[80px] h-1 sm:w-1 sm:h-full bg-neutral-500"></div>
+          <div className="flex items-center gap-4">
+            <img src="https://picsum.photos/id/145/40" alt="test-image" />
+            <p className="ui-text-h4 font-bold">Mentimeter</p>
+          </div>
+        </div>
+        <a href="/case-study" className="ui-btn self-start">
+          Read case study
+          <Icon
+            name="icon-gui-arrow-right"
+            size="1.25rem"
+            additionalCSS="ml-4"
+          />
+        </a>
+      </div>
+    </div>
+
+    <div className="absolute h-256 -z-10 -bottom-48 -left-36 w-1/5 rounded-full blur-xl opacity-50 transform -rotate-45 bg-gradient-to-bl from-bg-glow-green to-bg-glow-teal"></div>
+    <div className="absolute h-256 -z-10 -top-48 -right-48 w-3/5 rounded-full blur-xl opacity-50 transform rotate-12 bg-gradient-to-br from-bg-glow-green to-bg-glow-teal"></div>
+  </div>
+);
+
+const slides = [
+  <Slide key="1" name={"Johan Bengtsson"} />,
+  <Slide key="2" name={"Mirko Bergman"} />,
+  <Slide key="3" name={"Stefania Lombardo"} />,
+  <Slide key="4" name={"Aleksandar Kostadinov"} />,
+];
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  args: {
+    children: slides,
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "floating",
+    },
+  },
+};
+
+export const FloatingControlPosition = {
+  args: {
+    children: slides,
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "floating",
+    },
+  },
+};
+
+export const InlineControlPosition = {
+  args: {
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "inline",
+    },
+  },
+};
+
+export const WithoutIntervalIndicator = {
+  args: {
+    options: {
+      interval: 10000,
+      intervalIndicator: false,
+      controlPosition: "floating",
+    },
+  },
+};

package/src/core/Slider/component.css

@@ -1,8 +1,38 @@
-@layer components {
-  .ui-slider-marker {
-    font-size: 0.5rem;
-    top: -1px;
+.ui-slider-marker {
+  font-size: 0.5rem;
+  top: -1px;
 
-    @apply leading-none px-4 relative;
+  @apply leading-none px-4 relative;
+}
+
+@keyframes fillAnimation {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+.ui-icon-cta {
+  @apply cursor-pointer overflow-hidden;
+  @apply rounded border-2 border-mid-grey hover:border-active-orange;
+  transition: all 0.4s;
+}
+
+@screen sm {
+  .ui-icon-cta-left:hover .ui-icon-cta-holder {
+    transform: translateX(-120%);
+  }
+  .ui-icon-cta-right .ui-icon-cta-holder {
+    transform: translateX(-120%);
   }
+  .ui-icon-cta-right:hover .ui-icon-cta-holder {
+    transform: translateX(0%);
+  }
+}
+
+.ui-icon-cta-holder {
+  @apply w-full h-full;
+  transition: all 0.4s;
 }