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

package/src/core/Slider.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect, useRef, ReactNode } from "react";
+import Icon from "./Icon";
+import "./Slider/component.css";
+
+interface SliderProps {
+  children: ReactNode[];
+  options?: {
+    interval?: number;
+    controlPosition?: "inline" | "floating";
+    intervalIndicator?: boolean;
+  };
+}
+
+interface SliderIndicatorProps {
+  numSlides: number;
+  activeIndex: number;
+  interval: number;
+  intervalIndicator?: boolean;
+  isInline?: boolean;
+}
+
+const SlideIndicator = ({
+  numSlides,
+  activeIndex,
+  interval,
+  intervalIndicator,
+  isInline,
+}: SliderIndicatorProps) => {
+  return (
+    <ul
+      className={`flex gap-4 left-1/2 ${
+        isInline ? "bottom-0" : "absolute -bottom-40 transform -translate-x-1/2"
+      }`}
+    >
+      {Array.from({ length: numSlides }, (_, i) =>
+        intervalIndicator ? (
+          <li
+            key={i}
+            className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
+          >
+            {i === activeIndex && (
+              <span
+                className="absolute inset-0 rounded-full bg-active-orange"
+                style={{
+                  animation: `fillAnimation ${interval}ms linear`,
+                }}
+              ></span>
+            )}
+          </li>
+        ) : (
+          <li key={i}>
+            <span
+              className={`ui-slider-marker ${
+                i === activeIndex ? "text-active-orange" : "text-cool-black"
+              }`}
+              data-id="slider-marker"
+            >
+              &#x2b24;
+            </span>
+          </li>
+        )
+      )}
+    </ul>
+  );
+};
+
+const Slider = ({ children, options }: SliderProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [touchStartX, setTouchStartX] = useState(0);
+  const [touchEndX, setTouchEndX] = useState(0);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isInline = options?.controlPosition === "inline";
+
+  const next = () => {
+    setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+    resetInterval();
+  };
+
+  const prev = () => {
+    setActiveIndex((prevIndex) =>
+      prevIndex > 0 ? prevIndex - 1 : children.length - 1
+    );
+    resetInterval();
+  };
+
+  const resetInterval = () => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(next, options?.interval ?? 10000);
+  };
+
+  const handleTouchStart = (e) => {
+    setTouchStartX(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e) => {
+    setTouchEndX(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (touchStartX - touchEndX > 50) {
+      next();
+    }
+    if (touchStartX - touchEndX < -50) {
+      prev();
+    }
+  };
+
+  useEffect(() => {
+    resetInterval();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [children.length, options?.interval]);
+
+  return (
+    <div
+      className="relative"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <div className="overflow-hidden w-full py-40">
+        <div
+          className="flex items-center transition-transform ease-in-out duration-500"
+          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+        >
+          {children.map((child, index) => (
+            <div
+              key={index}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500"
+              style={{
+                opacity: activeIndex === index ? 1 : 0.1,
+              }}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className={`flex items-center pointer-events-none ${
+          isInline
+            ? "ui-standard-container justify-center gap-24"
+            : "sm:flex sm:absolute inset-0 justify-between"
+        }`}
+      >
+        <button
+          className={`${
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
+          onClick={prev}
+        >
+          <div className="ui-icon-cta-holder flex gap-4">
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-left" size="1.5rem" />
+            </div>
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-left" size="1.5rem" />
+            </div>
+          </div>
+        </button>
+
+        <SlideIndicator
+          numSlides={children.length}
+          activeIndex={activeIndex}
+          interval={options?.interval ?? 10000}
+          intervalIndicator={options?.intervalIndicator}
+          isInline={isInline}
+        />
+
+        <button
+          className={`${
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
+          onClick={next}
+        >
+          <div className="ui-icon-cta-holder flex gap-4">
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-right" size="1.5rem" />
+            </div>
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-right" size="1.5rem" />
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;

package/src/core/Table/Table.stories.tsx

@@ -0,0 +1,12 @@
+import { PricingPageTable } from "./data";
+
+export default {
+  title: "Components/Table",
+  component: PricingPageTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const PricingPage = {};

package/src/core/Table/Table.tsx

@@ -0,0 +1,59 @@
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  TableHTMLAttributes,
+  cloneElement,
+} from "react";
+
+type TableProps = {
+  id?: string;
+};
+
+export const Table = ({
+  id,
+  children,
+  ...rest
+}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (
+  <table
+    id={id}
+    {...rest}
+    className={`ui-standard-container mb-4 sm:table-fixed ${
+      rest?.className ?? ""
+    }`}
+  >
+    {children}
+  </table>
+);
+
+export const TableBody = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody {...rest}>{children}</tbody>
+);
+
+export const TableHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <thead
+    {...rest}
+    className={`sticky bg-white z-10 top-0 ${rest?.className ?? ""}`}
+  >
+    {cloneElement(children as ReactElement, { isHeader: true })}
+  </thead>
+);
+
+export const TableRowHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
+  <tr
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${
+      rest?.className ?? ""
+    }`}
+    style={{ top: "4rem" }}
+  >
+    {cloneElement(children as ReactElement, { isRowHeader: true })}
+  </tr>
+);

package/src/core/Table/TableCell.tsx

@@ -0,0 +1,109 @@
+import React, { PropsWithChildren } from "react";
+import Icon from "../Icon";
+
+type TableCellProps = {
+  isRowHeader?: boolean;
+} & React.TdHTMLAttributes<HTMLTableCellElement>;
+
+const Supported = () => (
+  <Icon
+    name="icon-gui-check-circled-fill"
+    size="1.5rem"
+    color="text-gui-success"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="supported-icon"
+  />
+);
+
+const Unsupported = () => (
+  <Icon
+    name="icon-gui-cross-circled-fill"
+    size="1.5rem"
+    color="text-gui-error"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="unsupported-icon"
+  />
+);
+
+const Partial = () => (
+  <Icon
+    name="icon-gui-partial"
+    size="1.5rem"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="partial-icon"
+  />
+);
+
+const LabelCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {
+  const classes = `
+    ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
+      rest?.className ?? ""
+    }
+  `;
+
+  return (
+    <td {...rest} className={classes}>
+      {children}
+    </td>
+  );
+};
+
+const TableCell = ({
+  children,
+  isRowHeader,
+  ...rest
+}: PropsWithChildren<TableCellProps>) => (
+  <td
+    {...rest}
+    className={`
+        border-light-grey sm:p-24 leading-none flex sm:table-cell
+        ${
+          isRowHeader
+            ? "rounded-l-none rounded-r sm:rounded-lg py-20 px-24"
+            : "py-6"
+        }
+        ${rest?.className ?? ""}
+      `}
+  >
+    {children}
+  </td>
+);
+
+const HeaderCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
+  <td
+    {...rest}
+    className={`ui-text-h3 px-24 py-24 hidden sm:table-cell ${
+      rest?.className ?? ""
+    }`}
+  >
+    {children}
+  </td>
+);
+
+const CtaCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
+  <td
+    {...rest}
+    className={`pt-24 hidden sm:table-cell ${rest?.className ?? ""}`}
+  >
+    {children}
+  </td>
+);
+
+export {
+  TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  Supported,
+  Unsupported,
+  Partial,
+};

package/src/core/Table/TableRow.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from "react";
+
+const CtaRow = ({ children }: PropsWithChildren) => (
+  <tr>
+    <td className="hidden sm:block"></td>
+    {children}
+  </tr>
+);
+
+type RowProps = {
+  isHeader?: boolean;
+} & React.HTMLAttributes<HTMLTableRowElement>;
+
+const TableRow = ({
+  children,
+  isHeader,
+  ...rest
+}: PropsWithChildren<RowProps>) => (
+  <tr {...rest}>
+    {isHeader && <td className="bg-white" />}
+    {children}
+  </tr>
+);
+
+export { TableRow, CtaRow };

package/src/core/Table/data.tsx

@@ -0,0 +1,113 @@
+import React, { Fragment } from "react";
+
+import Tooltip from "../Tooltip";
+import { Supported, Unsupported } from "./TableCell";
+import Table from "../Table";
+
+const testRow = (index) => ({
+  label: `Label ${index + 1}`,
+  cells: [
+    { label: "text", content: "Cell content", column: "Free" },
+    {
+      label: "yes",
+      content: (
+        <div className="flex items-center sm:flex-col sm:items-start">
+          <span className="sm:order-1 px-6 sm:py-6 sm:px-0">Supported</span>
+          <span className="sm:order-0">
+            <Supported />
+          </span>
+        </div>
+      ),
+      column: "PAYG",
+    },
+    {
+      label: "no",
+      content: (
+        <div className="flex items-center  sm:flex-col sm:items-start">
+          <span className="sm:order-1 px-6 sm:py-6 sm:px-0">Unsupported</span>
+          <span className="sm:order-0">
+            <Unsupported />
+          </span>
+        </div>
+      ),
+      column: "Custom",
+    },
+  ],
+});
+
+const sections = ["Features", "Support", "Technical Support"].map((label) => ({
+  label,
+  rows: [...Array(5)].map((_, i) => testRow(i)),
+}));
+
+export const PricingPageTable = () => {
+  return (
+    <div className="ui-standard-container">
+      <h2 className="ui-text-h2 text-center m-32">Pricing Page Table</h2>
+      <p className="text-center m-32">Example content</p>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">Free</span>
+            </Table.Cell>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">PAYG</span>
+            </Table.Cell>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">Custom</span>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {sections.map((section) => (
+            <Fragment key={section.label}>
+              <Table.RowHeader>
+                <Table.Cell colSpan={4}>{section.label}</Table.Cell>
+              </Table.RowHeader>
+              {section.rows.map((row) => (
+                <Table.Row key={row.label}>
+                  <Table.LabelCell
+                    key={row.label}
+                    className="border-t border-light-grey"
+                  >
+                    <a className="ui-link" href="#">
+                      {row.label}
+                    </a>
+                    <Tooltip>Example tooltip</Tooltip>
+                  </Table.LabelCell>
+                  {row.cells.map((cell) => (
+                    <Table.Cell key={cell.label} className="last:mb-16 sm:mb-0">
+                      <div className="flex-1 sm:hidden !text-dark-grey ui-text-overline2">
+                        {cell.column}
+                      </div>
+                      {cell.content}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Fragment>
+          ))}
+          <Table.Row>
+            <Table.Cell></Table.Cell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn-secondary">
+                Get started
+              </a>
+            </Table.CtaCell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn-secondary">
+                Get started
+              </a>
+            </Table.CtaCell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn">
+                Contact sales
+              </a>
+            </Table.CtaCell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </div>
+  );
+};

package/src/core/Table.tsx

@@ -0,0 +1,26 @@
+import { Table, TableRowHeader, TableHeader, TableBody } from "./Table/Table";
+import { TableRow } from "./Table/TableRow";
+import {
+  TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  Supported,
+  Unsupported,
+  Partial,
+} from "./Table/TableCell";
+
+export default {
+  Root: Table,
+  Row: TableRow,
+  Cell: TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  RowHeader: TableRowHeader,
+  Body: TableBody,
+  Header: TableHeader,
+  Supported,
+  Unsupported,
+  Partial,
+};

package/src/core/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Tooltip from "../Tooltip";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  args: {
+    children: "Example content",
+  },
+};
+
+export const Central = {
+  render: (args) => (
+    <div className="w-256 h-256 flex items-center justify-center m-24 border">
+      <Tooltip>{args.children}</Tooltip>
+    </div>
+  ),
+};
+
+export const LeftBound = {
+  render: (args) => (
+    <div className="w-256 h-256 flex items-center m-24 border">
+      <Tooltip>{args.children}</Tooltip>
+    </div>
+  ),
+};

package/src/core/Tooltip.tsx

@@ -0,0 +1,88 @@
+import React, {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Icon from "./Icon";
+
+type TooltipProps = {
+  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  tooltipProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Tooltip = ({
+  children,
+  triggerProps,
+  tooltipProps,
+  ...rest
+}: PropsWithChildren<TooltipProps>) => {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const offset = 8;
+  const reference = useRef<HTMLButtonElement>(null);
+  const floating = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      const floatingRect = floating.current?.getBoundingClientRect();
+      const referenceRect = reference.current?.getBoundingClientRect();
+
+      if (floatingRect && referenceRect) {
+        setPosition({
+          x:
+            Math.min(floatingRect.width / 2, floatingRect.left) -
+            referenceRect.width / 2,
+          y: Math.min(floatingRect.height, floatingRect.top) + offset,
+        });
+      }
+    } else {
+      setPosition({ x: 0, y: 0 });
+    }
+  }, [open]);
+
+  return (
+    <div
+      {...rest}
+      className={`relative inline-block align-top h-16 ${
+        rest?.className ?? ""
+      }`}
+    >
+      <button
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        type="button"
+        ref={reference}
+        aria-describedby="tooltip"
+        {...triggerProps}
+        className={`ml-8 p-0 relative top-1 focus:outline-none ${
+          triggerProps?.className ?? ""
+        }`}
+      >
+        <Icon name="icon-gui-info" size="1rem" />
+      </button>
+
+      {open ? (
+        <div
+          role="tooltip"
+          ref={floating}
+          style={{
+            top: -position.y,
+            left: -position.x,
+            boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)",
+          }}
+          {...tooltipProps}
+          className={`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${
+            tooltipProps?.className ?? ""
+          }`}
+        >
+          <div className="w-256">{children}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/core/icons/icon-gui-partial.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
+<path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
+</svg>

package/src/core/icons.js

@@ -0,0 +1,6 @@
+import { loadSprites } from "./scripts";
+import sprites from "../../core/sprites.svg";
+
+const loadIcons = () => loadSprites(sprites);
+
+export default loadIcons;