@ably/ui 14.0.0-dev.1939f45 → 14.0.0-dev.2944826

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 !font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;
+import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;

package/core/Code.js

@@ -1 +1 @@
-import React from"react";import"./utils/syntax-highlighter.css";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/Expander.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";const Expander=({height=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[contentHeight,setContentHeight]=useState(height);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;setContentHeight((_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:height)},[height,expanded]);const showControls=contentHeight>height;return React.createElement(React.Fragment,null,React.createElement("div",{style:{height:expanded?contentHeight:height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"},expanded?"View less -":"View all +"))};export default Expander;
+import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;const contentHeight=(_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"},expanded?"View less -":"View all +"))};export default Expander;

package/core/Table/TableCell.js

@@ -1,5 +1,5 @@
 import React from"react";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-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const Partial=()=>React.createElement(Icon,{name:"icon-gui-partial",size:"1.5rem",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"partial-icon"});const LabelCell=({children,...rest})=>{var _rest_className;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=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
+    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=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
   `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("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"}

package/core/utils/syntax-highlighter.css

@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-
 @layer base {
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
   @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.1939f45",
+  "version": "14.0.0-dev.2944826",
   "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",
@@ -37,8 +37,6 @@
     "eslint-plugin-storybook": "^0.6.15",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
-    "postcss": "^8.4.35",
-    "postcss-import": "^13.0.0",
     "prettier": "^2.3.0",
     "storybook": "^7.6.4",
     "svg-sprite": "^2.0.4",

package/src/core/Accordion.tsx

@@ -80,7 +80,7 @@ const AccordionRow = ({
         onClick={handleSetIndex}
         className={`flex w-full px-0 focus:outline-none py-20`}
       >
-        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
+        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
         <span className="ml-auto">{active ? iconActive : iconInactive}</span>
       </button>
 

package/src/core/Code.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import "./utils/syntax-highlighter.css";
 import {
   highlightSnippet,
   registerDefaultLanguages,

package/src/core/Expander.tsx

@@ -1,31 +1,40 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 type ExpanderProps = {
-  height?: number;
+  heightThreshold?: number;
   className?: string;
   fadeClassName?: string;
 };
 
 const Expander = ({
-  height = 200,
+  heightThreshold = 200,
   className,
   fadeClassName,
   children,
 }: PropsWithChildren<ExpanderProps>) => {
   const innerRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState(height);
+  const [showControls, setShowControls] = useState(false);
+  const [height, setHeight] = useState<number | "auto">(heightThreshold);
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
-    setContentHeight(innerRef.current?.clientHeight ?? height);
-  }, [height, expanded]);
+    const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;
 
-  const showControls = contentHeight > height;
+    if (contentHeight < heightThreshold) {
+      setHeight("auto");
+    } else if (expanded) {
+      setHeight(contentHeight);
+    } else {
+      setHeight(heightThreshold);
+    }
+
+    setShowControls(contentHeight >= heightThreshold);
+  }, [heightThreshold, expanded]);
 
   return (
     <>
       <div
-        style={{ height: expanded ? contentHeight : height }}
+        style={{ height }}
         className={`overflow-hidden transition-all relative ${className ?? ""}`}
       >
         {showControls && !expanded && (

package/src/core/Table/TableCell.tsx

@@ -39,7 +39,7 @@ const LabelCell = ({
   ...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 ${
+    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 ?? ""
     }
   `;

package/src/core/utils/syntax-highlighter.css

@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-
 @layer base {
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
   @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");