@ably/ui 14.7.5 → 14.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/core/Accordion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-1000",toggleIconColor:"text-dark-grey",border:"border-neutral-500 border-b last:border-none"},darkTransparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-000",toggleIconColor:"text-orange-600",border:"border-neutral-900 border-b last:border-none"},static:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-200",text:"text-neutral-1300",toggleIconColor:"text-neutral-200",selectableBg:"bg-neutral-1200",selectableText:"text-white"},darkStatic:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1200",text:"text-white",toggleIconColor:"text-neutral-1200",selectableBg:"bg-neutral-1200",selectableText:"text-neutral-1300"}};const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);const isStaticTheme=theme=>["static","darkStatic"].includes(theme);const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const resizeObserver=new ResizeObserver(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}});if(rowRef.current){resizeObserver.observe(rowRef.current)}return()=>{if(rowRef.current){resizeObserver.unobserve(rowRef.current)}}},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText,border}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`${border??""}`},/*#__PURE__*/React.createElement("button",{type:"button",...!isStaticTheme(theme)?{onClick}:{},className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16 mb-16":""} ${isStaticTheme(theme)?"pointer-events-none":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"
|
|
1
|
+
import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-1000",toggleIconColor:"text-dark-grey",border:"border-neutral-500 border-b last:border-none"},darkTransparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-000",toggleIconColor:"text-orange-600",border:"border-neutral-900 border-b last:border-none"},static:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-200",text:"text-neutral-1300",toggleIconColor:"text-neutral-200",selectableBg:"bg-neutral-1200",selectableText:"text-white"},darkStatic:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1200",text:"text-white",toggleIconColor:"text-neutral-1200",selectableBg:"bg-neutral-1200",selectableText:"text-neutral-1300"}};const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);const isStaticTheme=theme=>["static","darkStatic"].includes(theme);const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const resizeObserver=new ResizeObserver(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}});if(rowRef.current){resizeObserver.observe(rowRef.current)}return()=>{if(rowRef.current){resizeObserver.unobserve(rowRef.current)}}},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText,border}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`${border??""}`},/*#__PURE__*/React.createElement("button",{type:"button",...!isStaticTheme(theme)?{onClick}:{},className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16 mb-16":""} ${isStaticTheme(theme)?"pointer-events-none":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16px"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-y-hidden`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose,fullyOpen}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:fullyOpen??openIndexes.includes(currentIndex),onClick:()=>{handleSetIndex(currentIndex);item.onClick?.(currentIndex)},toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"
|
|
1
|
+
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:themeColor("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:themeColor("border-neutral-700"),bg:themeColor("bg-neutral-700")},blue:{border:themeColor("border-blue-600"),bg:themeColor("bg-blue-600")},orange:{border:themeColor("border-orange-600"),bg:themeColor("bg-orange-600")}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${borderClasses(border?.color)?.border??themeColor("border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur`,"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`},border.text):null,/*#__PURE__*/React.createElement("div",{className:`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${themeColor("bg-neutral-1300")} ${!delimiter?`${themeColor("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:`${title.className??""} ${themeColor(title.color??"text-neutral-000")}`},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{theme:theme,interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${themeColor(description.color??"text-neutral-000")} min-h-[20px]`,style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${themeColor("text-neutral-000")}`},price.amount),/*#__PURE__*/React.createElement("div",{className:`ui-text-p3 ${themeColor("text-neutral-000")}`},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${themeColor("bg-neutral-000")} ${themeColor("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""} cursor-pointer`,url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:`${themeColor("border-neutral-800")} w-64`}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${themeColor("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${themeColor("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${themeColor("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:themeColor(listItemColors.background),secondaryColor:themeColor(listItemColors.foreground),size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${themeColor("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:`absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${themeColor("text-neutral-500")} hover:${themeColor("text-neutral-000")} cursor-pointer`,onClick:cta.onClick,iconColor:themeColor(listItemColors?.foreground??"text-neutral-000")},cta.text),/*#__PURE__*/React.createElement("div",{className:`absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${themeColor("text-neutral-800")}`},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M19 5.3335L3.92308 5.3335C1.97436 5.33331 1 6.33331 1 8.33331V26.3335C1 28.3335 1.97436 29.3335 3.92308 29.3335H23.4103C25.359 29.3335 26.3333 28.3335 26.3333 26.3335V11.6668" stroke="
|
|
2
|
+
<path d="M19 5.3335L3.92308 5.3335C1.97436 5.33331 1 6.33331 1 8.33331V26.3335C1 28.3335 1.97436 29.3335 3.92308 29.3335H23.4103C25.359 29.3335 26.3333 28.3335 26.3333 26.3335V11.6668" stroke="currentColor" stroke-linecap="round"/>
|
|
3
3
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 6.66683C19 3.72131 21.3878 1.3335 24.3333 1.3335C27.2789 1.3335 29.6667 3.72131 29.6667 6.66683C29.6667 9.61235 27.2789 12.0002 24.3333 12.0002C21.3878 12.0002 19 9.61235 19 6.66683Z" stroke="currentColor"/>
|
|
4
4
|
<path d="M25 4.3335V9.00016H24.0525V5.27002H24.0263L23 5.93994V5.06494L24.1094 4.3335H25Z" fill="currentColor"/>
|
|
5
5
|
<path d="M18.1684 12.6665H8.5032C8.10446 12.6665 7.722 12.8212 7.44005 13.0963C7.15809 13.3714 6.99984 13.7443 6.99984 14.1333V20.3203C6.99984 20.7094 7.15809 21.0828 7.44005 21.3579C7.722 21.633 8.10446 21.7877 8.5032 21.7877H17.4649L19.0331 23.2335C19.0865 23.2826 19.1535 23.3153 19.2258 23.3276C19.2981 23.34 19.3723 23.3315 19.4397 23.3031C19.5071 23.2747 19.5646 23.2279 19.6049 23.168C19.6452 23.1081 19.6666 23.0381 19.6665 22.9664V14.1333C19.6665 13.7452 19.5089 13.3727 19.2281 13.0978C18.9473 12.8228 18.5662 12.6679 18.1684 12.6665Z" stroke="currentColor"/>
|