@ably/ui 15.3.1 → 15.3.2

package/core/Header/HeaderLinks.js

@@ -0,0 +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})=>{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"},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 md:mr-16 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"}))),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"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"mr-12 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

@@ -0,0 +1 @@
+import React,{useState,useEffect,useRef}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=[]})=>{const[showMenu,setShowMenu]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);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]);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"},searchButton,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})))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 animate-[fadeInTenPercent_150ms_ease-in-out_forwards]",onClick:()=>setShowMenu(!showMenu),onKeyDown:e=>e.key==="Escape"&&setShowMenu(false),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/utils/heights.js

@@ -0,0 +1 @@
+export const HEADER_HEIGHT=64;export const HEADER_BOTTOM_MARGIN=24;export const componentMaxHeight=(...heights)=>{const totalHeight=heights.reduce((sum,height)=>sum+height,0)+"px";return`calc(100vh - ${totalHeight})`};

package/index.d.ts

@@ -441,6 +441,47 @@ export default Footer;
 //# sourceMappingURL=Footer.d.ts.map
 }
 
+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">>;
+//# sourceMappingURL=HeaderLinks.d.ts.map
+}
+
+declare module '@ably/ui/core/Header' {
+import React, { ReactNode } from "react";
+export type ThemedScrollpoint = {
+    id: string;
+    className: string;
+};
+export type HeaderProps = {
+    searchBar?: ReactNode;
+    searchButton?: ReactNode;
+    logoHref?: string;
+    headerLinks?: {
+        href: string;
+        label: string;
+        external?: boolean;
+    }[];
+    nav?: ReactNode;
+    mobileNav?: ReactNode;
+    sessionState?: {
+        signedIn: boolean;
+        account: {
+            links: {
+                dashboard: {
+                    href: string;
+                };
+            };
+        };
+    };
+    themedScrollpoints?: ThemedScrollpoint[];
+};
+const Header: React.FC<HeaderProps>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/EncapsulatedIcon' {
 import { IconProps } from ".@ably/ui/core/Icon";
 import { IconSize } from "@ably/ui/core/types";
@@ -1335,6 +1376,19 @@ export default cn;
 //# sourceMappingURL=cn.d.ts.map
 }
 
+declare module '@ably/ui/core/utils/heights' {
+export const HEADER_HEIGHT = 64;
+export const HEADER_BOTTOM_MARGIN = 24;
+/**
+ * Calculates the maximum height for a component by subtracting the total of given heights from 100vh.
+ *
+ * @param {...number} heights - An array of heights in pixels.
+ * @returns {string} The CSS calc expression for the maximum height.
+ */
+export const componentMaxHeight: (...heights: number[]) => string;
+//# sourceMappingURL=heights.d.ts.map
+}
+
 declare module '@ably/ui/core/utils/syntax-highlighter-registry' {
 export default registry;
 const registry: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.3.1",
+  "version": "15.3.2",
   "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",
@@ -41,7 +41,7 @@
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.0.2",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.11.2",
     "heroicons": "^2.2.0",

package/tailwind.config.js

@@ -328,6 +328,10 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        fadeInTenPercent: {
+          from: { opacity: 0 },
+          to: { opacity: 0.1 },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",