@ably/ui 15.4.0 → 15.4.1

package/core/Header/HeaderLinks.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("div",{className:"flex md:items-center flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 gap-12"},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};
+import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 md:p-0 gap-12",className)},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};

package/core/Header.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement(Logo,{href:logoHref,theme:"light",additionalLinkAttrs:{className:"flex dark:hidden h-full focus-base rounded mr-32"}}),React.createElement(Logo,{href:logoHref,theme:"dark",additionalLinkAttrs:{className:"hidden dark:flex h-full focus-base rounded mr-32"}}),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),React.createElement("div",{className:"hidden md:flex flex-1 items-center h-full"},nav,React.createElement("div",{className:"flex-1 flex justify-center px-16"},searchBar),React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility})))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[108px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;

package/core/Table/data.js

@@ -1 +1 @@
-import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(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=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
+import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circle-solid",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};

package/index.d.ts

@@ -514,7 +514,9 @@ export default Footer;
 declare module '@ably/ui/core/Header/HeaderLinks' {
 import React from "react";
 import { HeaderProps } from ".@ably/ui/core/Header";
-export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton">>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
+    className?: string;
+}>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.4.0",
+  "version": "15.4.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",