@ably/ui 15.0.1 → 15.1.0-dev.44b727ac
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/.DS_Store +0 -0
- package/core/Accordion/.DS_Store +0 -0
- package/core/Accordion.js +1 -1
- package/core/Button.js +1 -1
- package/core/Code/.DS_Store +0 -0
- package/core/ContactFooter/.DS_Store +0 -0
- package/core/CookieMessage/.DS_Store +0 -0
- package/core/CustomerLogos/.DS_Store +0 -0
- package/core/DropdownMenu/.DS_Store +0 -0
- package/core/FeaturedLink/.DS_Store +0 -0
- package/core/Flash/.DS_Store +0 -0
- package/core/Flash.js +1 -1
- package/core/Footer/.DS_Store +0 -0
- package/core/Footer.js +1 -1
- package/core/Icon/.DS_Store +0 -0
- package/core/Icon.js +1 -1
- package/core/Loader/.DS_Store +0 -0
- package/core/Logo/.DS_Store +0 -0
- package/core/Meganav/.DS_Store +0 -0
- package/core/MeganavBlogPostsList/.DS_Store +0 -0
- package/core/MeganavContentDevelopers.js +1 -1
- package/core/MeganavControl/.DS_Store +0 -0
- package/core/MeganavControlMobileDropdown/.DS_Store +0 -0
- package/core/MeganavControlMobilePanelClose/.DS_Store +0 -0
- package/core/MeganavControlMobilePanelOpen/.DS_Store +0 -0
- package/core/MeganavSearchAutocomplete/.DS_Store +0 -0
- package/core/MeganavSearchSuggestions/.DS_Store +0 -0
- package/core/Notice/.DS_Store +0 -0
- package/core/Pricing/PricingCards.js +1 -1
- package/core/ProductTile.js +1 -1
- package/core/Slider/.DS_Store +0 -0
- package/core/Status.js +1 -1
- package/core/TabMenu.js +1 -0
- package/core/Table/.DS_Store +0 -0
- package/core/Toggle.js +1 -0
- package/core/Tooltip/.DS_Store +0 -0
- package/core/icons/.DS_Store +0 -0
- package/core/styles/buttons.css +8 -8
- package/core/styles/colors/types.js +1 -1
- package/core/styles/dropdowns.css +6 -2
- package/core/styles/forms/story-components.js +1 -0
- package/core/styles/forms.css +51 -13
- package/core/styles/legacy-buttons.css +2 -2
- package/core/styles/properties.css +2 -1
- package/core/styles/text.css +42 -13
- package/core/styles.components.css +0 -1
- package/core/utils/cn.js +1 -0
- package/index.d.ts +93 -2
- package/package.json +10 -6
- package/tailwind.config.js +3 -3
- package/core/styles/gui.css +0 -33
package/core/.DS_Store
ADDED
|
Binary file
|
|
Binary file
|
package/core/Accordion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import
|
|
1
|
+
import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus:outline-none":isStaticTheme(theme),"focus:outline-gui-blue-focus":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
|
package/core/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import
|
|
1
|
+
import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className),...rest},leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};export default Button;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/core/Flash.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id
|
|
1
|
+
import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
|
|
Binary file
|
package/core/Footer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import Status from"./Status.js";const Footer=({paths,urlBase,statusUrl})=>{const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-2"},/*#__PURE__*/React.createElement("div",{className:"flex flex-row p-menu-row-snug"},/*#__PURE__*/React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),/*#__PURE__*/React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),/*#__PURE__*/React.createElement("ul",{className:"grid grid-cols-1"},/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug flex items-center -mt-4"},/*#__PURE__*/React.createElement("a",{className:"pr-8 ui-footer-menu-row-link",href:"https://status.ably.com/"},"System status"),/*#__PURE__*/React.createElement(Status,{statusUrl:statusUrl})))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},/*#__PURE__*/React.createElement("hr",{className:"border-t border-mid-grey my-0"})),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},/*#__PURE__*/React.createElement("div",{className:"md:flex md:items-center"},/*#__PURE__*/React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},/*#__PURE__*/React.createElement("div",{className:""},/*#__PURE__*/React.createElement("div",{className:"flex pb-24"},/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-linkedin",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-github",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-discord",size:"1.5rem"})))),/*#__PURE__*/React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},/*#__PURE__*/React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},/*#__PURE__*/React.createElement("strong",{className:"block font-medium"},"We're hiring!"),/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),/*#__PURE__*/React.createElement("div",{className:"xs:block sm:hidden"},/*#__PURE__*/React.createElement("div",{className:"border-t border-mid-grey w-full"}),/*#__PURE__*/React.createElement("div",{className:"flex py-24"},/*#__PURE__*/React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"text-menu3 font-sans font-medium"},/*#__PURE__*/React.createElement("strong",{className:"block font-medium"},"We're hiring!"),/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.highestUserAdoption,alt:"Highest User Adoption 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.fastestImplementation,alt:"Fastest Implementation 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.highestPerformer,alt:"High Performer 2023"}))),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},/*#__PURE__*/React.createElement("hr",{className:"border-t border-mid-grey my-0"})),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),/*#__PURE__*/React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),/*#__PURE__*/React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),/*#__PURE__*/React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),/*#__PURE__*/React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},/*#__PURE__*/React.createElement("div",{className:"flex mr-24"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-2"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-3"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-4"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;
|
|
1
|
+
import React from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import{StatusIcon}from"./Status";const Footer=({paths,urlBase,statusUrl})=>{const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-2"},/*#__PURE__*/React.createElement("div",{className:"flex flex-row p-menu-row-snug"},/*#__PURE__*/React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),/*#__PURE__*/React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),/*#__PURE__*/React.createElement("ul",{className:"grid grid-cols-1"},/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{className:"ui-footer-menu-row-link flex items-center gap-4",href:"https://status.ably.com/",target:"_blank",rel:"noreferrer"},"System status",/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl}))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),/*#__PURE__*/React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},/*#__PURE__*/React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),/*#__PURE__*/React.createElement("ul",null,/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),/*#__PURE__*/React.createElement("li",{className:"p-menu-row-snug"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},/*#__PURE__*/React.createElement("hr",{className:"border-t border-mid-grey my-0"})),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},/*#__PURE__*/React.createElement("div",{className:"md:flex md:items-center"},/*#__PURE__*/React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},/*#__PURE__*/React.createElement("div",{className:""},/*#__PURE__*/React.createElement("div",{className:"flex pb-24"},/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-linkedin",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-github",size:"1.5rem"})),/*#__PURE__*/React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-discord",size:"1.5rem"})))),/*#__PURE__*/React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},/*#__PURE__*/React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},/*#__PURE__*/React.createElement("strong",{className:"block font-medium"},"We're hiring!"),/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),/*#__PURE__*/React.createElement("div",{className:"xs:block sm:hidden"},/*#__PURE__*/React.createElement("div",{className:"border-t border-mid-grey w-full"}),/*#__PURE__*/React.createElement("div",{className:"flex py-24"},/*#__PURE__*/React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},/*#__PURE__*/React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"text-menu3 font-sans font-medium"},/*#__PURE__*/React.createElement("strong",{className:"block font-medium"},"We're hiring!"),/*#__PURE__*/React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.highestUserAdoption,alt:"Highest User Adoption 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.fastestImplementation,alt:"Fastest Implementation 2023"}),/*#__PURE__*/React.createElement("img",{className:"mr-24 h-80",src:paths.highestPerformer,alt:"High Performer 2023"}))),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},/*#__PURE__*/React.createElement("hr",{className:"border-t border-mid-grey my-0"})),/*#__PURE__*/React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),/*#__PURE__*/React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),/*#__PURE__*/React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),/*#__PURE__*/React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),/*#__PURE__*/React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},/*#__PURE__*/React.createElement("div",{className:"flex mr-24"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-2"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-3"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),/*#__PURE__*/React.createElement("div",{className:"flex mr-24 md:col-start-4"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),/*#__PURE__*/React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;
|
|
Binary file
|
package/core/Icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useCallback}from"react";import
|
|
1
|
+
import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import
|
|
1
|
+
import React from"react";import Icon from"./Icon";import{StatusIcon}from"./Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading flex items-center gap-4"},"Status",/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl})))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{Fragment,useEffect,useRef,useState}from"react";import
|
|
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 cn from"../utils/cn";const PricingCards=({data,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 delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark: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:"border-neutral-600 dark:border-neutral-700",bg:"border-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark: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:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:cn("text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",cta.className??"ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300"),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:"border-neutral-500 dark: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:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark: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:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},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 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},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 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
|
package/core/ProductTile.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import
|
|
1
|
+
import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import cn from"./utils/cn";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:cn("rounded-lg p-12 flex flex-col gap-8 transition-colors",{"bg-neutral-1200 dark:bg-neutral-100":selected},{"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100":!selected},{[`${className}`]:className}),onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,className:selected?"from-neutral-900 dark:from-neutral-400":"from-neutral-400 dark:from-neutral-900",innerClassName:selected?"bg-neutral-1100 dark:bg-neutral-200":"bg-neutral-200 dark:bg-neutral-1100"}):null,/*#__PURE__*/React.createElement("div",{className:cn("flex",{"flex-row items-center gap-4":unavailable},{"flex-col justify-center":!unavailable})},/*#__PURE__*/React.createElement("p",{className:cn("font-medium",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-1000 dark:text-neutral-300":!selected},{"ui-text-p2":unavailable},{"ui-text-p3":!unavailable})},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected},{"text-neutral-1300 dark:text-neutral-000":!selected},{"mt-[-3px]":!unavailable})},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-800 dark:text-neutral-500":!selected})},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:"ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300",iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
|
|
Binary file
|
package/core/Status.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from"react";import useSWR from"swr";import cn from"./utils/cn";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return /*#__PURE__*/React.createElement("span",{className:cn("inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl,additionalCSS,refreshInterval=1e3*60})=>{return /*#__PURE__*/React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}))};export default Status;
|
package/core/TabMenu.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,options})=>{const{defaultTabIndex=0,underline=true,animated=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight})},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`},content)))};export default TabMenu;
|
|
Binary file
|
package/core/Toggle.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,label,className,...props})=>{return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus",className),id:id,...props},/*#__PURE__*/React.createElement(Switch.Thumb,{className:"block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"})),label?/*#__PURE__*/React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;
|
|
Binary file
|
|
Binary file
|
package/core/styles/buttons.css
CHANGED
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.ui-button-lg-base {
|
|
7
|
-
@apply ui-button-base ui-
|
|
7
|
+
@apply ui-button-base ui-text-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.ui-button-md-base {
|
|
11
|
-
@apply ui-button-base ui-
|
|
11
|
+
@apply ui-button-base ui-text-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.ui-button-sm-base {
|
|
15
|
-
@apply ui-button-base ui-
|
|
15
|
+
@apply ui-button-base ui-text-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.ui-button-xs-base {
|
|
19
|
-
@apply ui-button-base ui-
|
|
19
|
+
@apply ui-button-base ui-text-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.ui-button-disabled-base {
|
|
@@ -36,19 +36,19 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.ui-button-primary-base {
|
|
39
|
-
@apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-
|
|
39
|
+
@apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 ui-button-disabled-base;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.ui-theme-dark .ui-button-primary-base {
|
|
43
|
-
@apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-
|
|
43
|
+
@apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 ui-button-disabled-base-dark;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.ui-button-secondary-base {
|
|
47
|
-
@apply text-neutral-1300 border border-neutral-600 hover:border-neutral-
|
|
47
|
+
@apply text-neutral-1300 hover:text-neutral-1100 active:text-neutral-1200 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.ui-theme-dark .ui-button-secondary-base {
|
|
51
|
-
@apply text-neutral-000
|
|
51
|
+
@apply text-neutral-000 hover:text-neutral-200 active:text-neutral-100 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.ui-button-priority-lg {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
|
|
1
|
+
export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];export const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ui-dropdown-base {
|
|
3
|
-
@apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4
|
|
3
|
+
@apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
|
|
4
|
+
@apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
|
|
4
5
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
|
|
5
|
-
background-repeat: no-repeat;
|
|
6
6
|
background-position: center right 16px;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.ui-theme-dark .ui-dropdown-base {
|
|
10
|
+
@apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
.ui-dropdown-base option:disabled {
|
|
10
14
|
@apply text-neutral-800;
|
|
11
15
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>/*#__PURE__*/React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},/*#__PURE__*/React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),/*#__PURE__*/React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),/*#__PURE__*/React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>/*#__PURE__*/React.createElement("div",{className:"flex items-center gap-8"},/*#__PURE__*/React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),/*#__PURE__*/React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));
|
package/core/styles/forms.css
CHANGED
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
.ui-checkbox-styled {
|
|
15
15
|
@apply w-20 h-20 mr-16;
|
|
16
16
|
@apply bg-white flex flex-shrink-0 justify-center items-center;
|
|
17
|
-
@apply border border-
|
|
17
|
+
@apply border border-neutral-500 rounded-md focus-within:border-active-orange;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-theme-dark .ui-checkbox-styled,
|
|
21
|
+
.ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled {
|
|
22
|
+
@apply bg-neutral-1300 border-neutral-900;
|
|
18
23
|
}
|
|
19
24
|
|
|
20
25
|
.ui-checkbox-styled-tick {
|
|
@@ -23,12 +28,17 @@
|
|
|
23
28
|
|
|
24
29
|
.ui-checkbox-label-p1 {
|
|
25
30
|
@apply select-none;
|
|
26
|
-
@apply text-p1 font-medium text-
|
|
31
|
+
@apply text-p1 font-medium text-neutral-1300;
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
.ui-checkbox-label-p2 {
|
|
30
35
|
@apply select-none;
|
|
31
|
-
@apply text-p2 font-medium text-
|
|
36
|
+
@apply text-p2 font-medium text-neutral-1300;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ui-theme-dark .ui-checkbox-label-p1,
|
|
40
|
+
.ui-theme-dark .ui-checkbox-label-p2 {
|
|
41
|
+
@apply text-neutral-000;
|
|
32
42
|
}
|
|
33
43
|
|
|
34
44
|
.ui-checkbox-input:focus + .ui-checkbox-styled {
|
|
@@ -45,7 +55,15 @@
|
|
|
45
55
|
}
|
|
46
56
|
|
|
47
57
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
48
|
-
@apply bg-
|
|
58
|
+
@apply bg-neutral-300;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
62
|
+
@apply bg-neutral-1000 border border-gui-unavailable-dark;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
|
|
66
|
+
@apply bg-active-orange border-gui-unavailable-dark;
|
|
49
67
|
}
|
|
50
68
|
|
|
51
69
|
.ui-textarea {
|
|
@@ -78,6 +96,10 @@
|
|
|
78
96
|
@apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
|
|
79
97
|
}
|
|
80
98
|
|
|
99
|
+
.ui-theme-dark .ui-toggle-slider {
|
|
100
|
+
@apply bg-neutral-700;
|
|
101
|
+
}
|
|
102
|
+
|
|
81
103
|
.ui-toggle-slider:before {
|
|
82
104
|
@apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
|
|
83
105
|
content: "";
|
|
@@ -100,24 +122,40 @@
|
|
|
100
122
|
}
|
|
101
123
|
|
|
102
124
|
.ui-input {
|
|
103
|
-
@apply ui-text-p2 font-medium bg-
|
|
104
|
-
@apply hover:border-neutral-
|
|
105
|
-
@apply max-w-screen-sm;
|
|
125
|
+
@apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
|
|
126
|
+
@apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
|
|
127
|
+
@apply max-w-screen-sm invalid:border-gui-error-red;
|
|
106
128
|
}
|
|
107
129
|
|
|
108
|
-
.ui-
|
|
109
|
-
@apply bg-neutral-1200 hover:bg-neutral-
|
|
130
|
+
.ui-theme-dark .ui-input {
|
|
131
|
+
@apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
|
|
110
132
|
}
|
|
111
133
|
|
|
112
134
|
.ui-input:disabled {
|
|
113
135
|
@apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
|
|
114
136
|
}
|
|
115
137
|
|
|
116
|
-
.ui-
|
|
117
|
-
@apply text-neutral-800 placeholder-neutral-800;
|
|
138
|
+
.ui-theme-dark .ui-input:disabled {
|
|
139
|
+
@apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
|
|
118
140
|
}
|
|
119
141
|
|
|
120
|
-
.ui-
|
|
121
|
-
@apply
|
|
142
|
+
.ui-radio {
|
|
143
|
+
@apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.ui-radio:checked {
|
|
147
|
+
@apply bg-orange-600 border-orange-600 border;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ui-radio:checked::after {
|
|
151
|
+
@apply content-[''] mt-[5px] w-8 h-8 block bg-white rounded-full m-auto;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ui-radio:disabled {
|
|
155
|
+
@apply bg-neutral-300;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ui-theme-dark .ui-radio:disabled {
|
|
159
|
+
@apply bg-neutral-1000;
|
|
122
160
|
}
|
|
123
161
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ui-btn {
|
|
3
3
|
@apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
|
|
4
|
-
@apply hover:text-white hover:bg-
|
|
5
|
-
@apply active:text-white active:bg-
|
|
4
|
+
@apply hover:text-white hover:bg-neutral-1100;
|
|
5
|
+
@apply active:text-white active:bg-neutral-1200;
|
|
6
6
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
7
7
|
@apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
|
|
8
8
|
@apply transition-colors;
|
|
@@ -196,9 +196,11 @@
|
|
|
196
196
|
--fs-btn1: 1rem;
|
|
197
197
|
--fs-btn2: 0.938rem;
|
|
198
198
|
--fs-btn3: 0.875rem;
|
|
199
|
+
--fs-btn4: 0.813rem;
|
|
199
200
|
--fs-menu1: 1rem;
|
|
200
201
|
--fs-menu2: 0.938rem;
|
|
201
202
|
--fs-menu3: 0.875rem;
|
|
203
|
+
--fs-menu4: 0.813rem;
|
|
202
204
|
--fs-quote: 1.25rem;
|
|
203
205
|
--fs-code: 0.813rem;
|
|
204
206
|
--fs-code2: 0.688rem;
|
|
@@ -256,7 +258,6 @@
|
|
|
256
258
|
--spacing-media: 0.5rem; /* 8px */
|
|
257
259
|
--spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
|
|
258
260
|
--spacing-overline: 0.6875rem 0; /* 11px 0 */
|
|
259
|
-
--spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
|
|
260
261
|
|
|
261
262
|
/* In components, when looking at implementing viewport margin and spacing between elements,
|
|
262
263
|
the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
|
package/core/styles/text.css
CHANGED
|
@@ -36,18 +36,19 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.ui-text-p1 {
|
|
39
|
-
@apply font-sans font-medium text-charcoal-grey;
|
|
40
|
-
@apply text-p1;
|
|
39
|
+
@apply font-sans font-medium text-charcoal-grey text-p1;
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
.ui-text-p2 {
|
|
44
|
-
@apply font-sans font-medium text-charcoal-grey;
|
|
45
|
-
@apply text-p2;
|
|
43
|
+
@apply font-sans font-medium text-charcoal-grey text-p2;
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
.ui-text-p3 {
|
|
49
|
-
@apply font-sans font-medium text-charcoal-grey;
|
|
50
|
-
|
|
47
|
+
@apply font-sans font-medium text-charcoal-grey text-p3;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ui-text-p4 {
|
|
51
|
+
@apply font-sans font-medium text-charcoal-grey text-p4;
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
.ui-text-standfirst {
|
|
@@ -80,18 +81,42 @@
|
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
.ui-text-menu1 {
|
|
83
|
-
@apply font-sans
|
|
84
|
-
@apply text-menu1 leading-snug;
|
|
84
|
+
@apply font-sans text-neutral-900 text-menu1 font-semibold leading-snug;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.ui-text-menu2 {
|
|
88
|
-
@apply font-sans
|
|
89
|
-
@apply text-menu2 leading-snug;
|
|
88
|
+
@apply font-sans text-neutral-900 text-menu2 font-semibold leading-snug;
|
|
90
89
|
}
|
|
91
90
|
|
|
92
91
|
.ui-text-menu3 {
|
|
93
|
-
@apply font-sans
|
|
94
|
-
|
|
92
|
+
@apply font-sans text-neutral-900 text-menu3 font-semibold leading-snug;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ui-text-menu4 {
|
|
96
|
+
@apply font-sans text-neutral-900 text-menu4 font-semibold leading-snug;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ui-theme-dark .ui-text-menu1,
|
|
100
|
+
.ui-theme-dark .ui-text-menu2,
|
|
101
|
+
.ui-theme-dark .ui-text-menu3,
|
|
102
|
+
.ui-theme-dark .ui-text-menu4 {
|
|
103
|
+
@apply text-neutral-300;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.ui-text-button1 {
|
|
107
|
+
@apply font-sans text-btn1 font-bold leading-snug;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.ui-text-button2 {
|
|
111
|
+
@apply font-sans text-btn2 font-bold leading-snug;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ui-text-button3 {
|
|
115
|
+
@apply font-sans text-btn3 font-bold leading-snug;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ui-text-button4 {
|
|
119
|
+
@apply font-sans text-btn4 font-bold leading-snug;
|
|
95
120
|
}
|
|
96
121
|
|
|
97
122
|
.ui-text-code {
|
|
@@ -103,7 +128,11 @@
|
|
|
103
128
|
}
|
|
104
129
|
|
|
105
130
|
.ui-text-code-inline {
|
|
106
|
-
@apply font-mono
|
|
131
|
+
@apply inline-flex font-mono px-[3px] py-4 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.dark .ui-text-code-inline {
|
|
135
|
+
@apply text-neutral-300 bg-neutral-1000 border-neutral-900;
|
|
107
136
|
}
|
|
108
137
|
|
|
109
138
|
.ui-unordered-list {
|
package/core/utils/cn.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{twMerge}from"tailwind-merge";import clsx from"clsx";const cn=(...inputs)=>{return twMerge(clsx(inputs))};export default cn;
|
package/index.d.ts
CHANGED
|
@@ -957,14 +957,75 @@ export default Slider;
|
|
|
957
957
|
}
|
|
958
958
|
|
|
959
959
|
declare module '@ably/ui/core/Status' {
|
|
960
|
-
const
|
|
960
|
+
export const StatusIcon: ({ statusUrl, refreshInterval, }: {
|
|
961
|
+
statusUrl: string;
|
|
962
|
+
refreshInterval?: number;
|
|
963
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
964
|
+
const Status: ({ statusUrl, additionalCSS, refreshInterval, }: {
|
|
961
965
|
statusUrl: string;
|
|
962
966
|
additionalCSS?: string;
|
|
967
|
+
refreshInterval?: number;
|
|
963
968
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
964
969
|
export default Status;
|
|
965
970
|
//# sourceMappingURL=Status.d.ts.map
|
|
966
971
|
}
|
|
967
972
|
|
|
973
|
+
declare module '@ably/ui/core/TabMenu' {
|
|
974
|
+
import React, { ReactNode } from "react";
|
|
975
|
+
/**
|
|
976
|
+
* Props for the TabMenu component.
|
|
977
|
+
*/
|
|
978
|
+
export type TabMenuProps = {
|
|
979
|
+
/**
|
|
980
|
+
* An array of tabs, which can be either a string or an object with a label and an optional disabled state.
|
|
981
|
+
*/
|
|
982
|
+
tabs: (string | {
|
|
983
|
+
label: string;
|
|
984
|
+
disabled?: boolean;
|
|
985
|
+
})[];
|
|
986
|
+
/**
|
|
987
|
+
* An optional array of React nodes representing the content for each tab.
|
|
988
|
+
*/
|
|
989
|
+
contents?: ReactNode[];
|
|
990
|
+
/**
|
|
991
|
+
* An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.
|
|
992
|
+
*/
|
|
993
|
+
tabOnClick?: (index: number) => void;
|
|
994
|
+
/**
|
|
995
|
+
* An optional class name to apply to each tab.
|
|
996
|
+
*/
|
|
997
|
+
tabClassName?: string;
|
|
998
|
+
/**
|
|
999
|
+
* Optional configuration options for the TabMenu.
|
|
1000
|
+
*/
|
|
1001
|
+
options?: {
|
|
1002
|
+
/**
|
|
1003
|
+
* The index of the tab that should be selected by default.
|
|
1004
|
+
*/
|
|
1005
|
+
defaultTabIndex?: number;
|
|
1006
|
+
/**
|
|
1007
|
+
* Whether to show an underline below the selected tab.
|
|
1008
|
+
*/
|
|
1009
|
+
underline?: boolean;
|
|
1010
|
+
/**
|
|
1011
|
+
* Whether to animate the transition between tabs.
|
|
1012
|
+
*/
|
|
1013
|
+
animated?: boolean;
|
|
1014
|
+
/**
|
|
1015
|
+
* Whether the tab width should be flexible.
|
|
1016
|
+
*/
|
|
1017
|
+
flexibleTabWidth?: boolean;
|
|
1018
|
+
/**
|
|
1019
|
+
* Whether the tab height should be flexible.
|
|
1020
|
+
*/
|
|
1021
|
+
flexibleTabHeight?: boolean;
|
|
1022
|
+
};
|
|
1023
|
+
};
|
|
1024
|
+
const TabMenu: React.FC<TabMenuProps>;
|
|
1025
|
+
export default TabMenu;
|
|
1026
|
+
//# sourceMappingURL=TabMenu.d.ts.map
|
|
1027
|
+
}
|
|
1028
|
+
|
|
968
1029
|
declare module '@ably/ui/core/Table/Table' {
|
|
969
1030
|
import { PropsWithChildren, TableHTMLAttributes } from "react";
|
|
970
1031
|
type TableProps = {
|
|
@@ -1029,6 +1090,18 @@ export default _default;
|
|
|
1029
1090
|
//# sourceMappingURL=Table.d.ts.map
|
|
1030
1091
|
}
|
|
1031
1092
|
|
|
1093
|
+
declare module '@ably/ui/core/Toggle' {
|
|
1094
|
+
import React from "react";
|
|
1095
|
+
type ToggleProps = {
|
|
1096
|
+
id: string;
|
|
1097
|
+
label?: string;
|
|
1098
|
+
className?: string;
|
|
1099
|
+
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
1100
|
+
const Toggle: React.FC<ToggleProps>;
|
|
1101
|
+
export default Toggle;
|
|
1102
|
+
//# sourceMappingURL=Toggle.d.ts.map
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1032
1105
|
declare module '@ably/ui/core/Tooltip' {
|
|
1033
1106
|
import { ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
|
|
1034
1107
|
type TooltipProps = {
|
|
@@ -1117,7 +1190,7 @@ export const violetColors: readonly ["violet-100", "violet-200", "violet-300", "
|
|
|
1117
1190
|
export const pinkColors: readonly ["pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
|
|
1118
1191
|
const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
|
|
1119
1192
|
const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
|
|
1120
|
-
const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
|
|
1193
|
+
export const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
|
|
1121
1194
|
export const colorRoles: {
|
|
1122
1195
|
neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
|
|
1123
1196
|
orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
|
|
@@ -1144,12 +1217,30 @@ export const invertTailwindClassVariant: (className: string) => ColorClass;
|
|
|
1144
1217
|
//# sourceMappingURL=utils.d.ts.map
|
|
1145
1218
|
}
|
|
1146
1219
|
|
|
1220
|
+
declare module '@ably/ui/core/styles/forms/story-components' {
|
|
1221
|
+
type FormElementProps = {
|
|
1222
|
+
index: number;
|
|
1223
|
+
disabled?: boolean;
|
|
1224
|
+
};
|
|
1225
|
+
export const Checkbox: ({ index, disabled }: FormElementProps) => import("react/jsx-runtime").JSX.Element;
|
|
1226
|
+
export const RadioButton: ({ index, disabled }: FormElementProps) => import("react/jsx-runtime").JSX.Element;
|
|
1227
|
+
export {};
|
|
1228
|
+
//# sourceMappingURL=story-components.d.ts.map
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1147
1231
|
declare module '@ably/ui/core/url-base' {
|
|
1148
1232
|
export default absUrl;
|
|
1149
1233
|
function absUrl(path: any, urlBase?: string): string;
|
|
1150
1234
|
//# sourceMappingURL=url-base.d.ts.map
|
|
1151
1235
|
}
|
|
1152
1236
|
|
|
1237
|
+
declare module '@ably/ui/core/utils/cn' {
|
|
1238
|
+
import { ClassValue } from "clsx";
|
|
1239
|
+
const cn: (...inputs: ClassValue[]) => string;
|
|
1240
|
+
export default cn;
|
|
1241
|
+
//# sourceMappingURL=cn.d.ts.map
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1153
1244
|
declare module '@ably/ui/core/utils/syntax-highlighter-registry' {
|
|
1154
1245
|
export default registry;
|
|
1155
1246
|
const registry: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.1.0-dev.44b727ac",
|
|
4
4
|
"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.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@storybook/blocks": "^8.4.0",
|
|
27
27
|
"@storybook/react-vite": "^8.4.0",
|
|
28
28
|
"@storybook/test": "^8.4.0",
|
|
29
|
-
"@storybook/test-runner": "^0.
|
|
29
|
+
"@storybook/test-runner": "^0.20.0",
|
|
30
30
|
"@swc/cli": "^0.5.0",
|
|
31
31
|
"@swc/core": "^1.4.11",
|
|
32
32
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@types/lodash.throttle": "^4.1.9",
|
|
36
36
|
"@types/react-dom": "^18.3.0",
|
|
37
37
|
"@types/svg-sprite": "^0.0.39",
|
|
38
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
39
|
-
"@typescript-eslint/parser": "^
|
|
38
|
+
"@typescript-eslint/eslint-plugin": "^8.16.0",
|
|
39
|
+
"@typescript-eslint/parser": "^8.16.0",
|
|
40
40
|
"@vitejs/plugin-react": "^4.2.1",
|
|
41
41
|
"@whitespace/storybook-addon-html": "^6.1.1",
|
|
42
42
|
"autoprefixer": "^10.0.2",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"svg-sprite": "^2.0.4",
|
|
55
55
|
"tailwindcss": "^3.3.6",
|
|
56
56
|
"ts-node": "^10.9.2",
|
|
57
|
-
"typescript": "5.
|
|
57
|
+
"typescript": "5.7.2",
|
|
58
58
|
"vite": "^5.2.12"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
@@ -79,6 +79,8 @@
|
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
81
|
"@radix-ui/react-accordion": "^1.2.1",
|
|
82
|
+
"@radix-ui/react-switch": "^1.1.1",
|
|
83
|
+
"@radix-ui/react-tabs": "^1.1.1",
|
|
82
84
|
"addsearch-js-client": "^0.8.11",
|
|
83
85
|
"array-flat-polyfill": "^1.0.1",
|
|
84
86
|
"clsx": "^2.1.1",
|
|
@@ -90,7 +92,9 @@
|
|
|
90
92
|
"react": "^18.2.0",
|
|
91
93
|
"react-dom": "^18.3.1",
|
|
92
94
|
"redux": "^4.0.5",
|
|
93
|
-
"scroll-lock": "^2.1.4"
|
|
95
|
+
"scroll-lock": "^2.1.4",
|
|
96
|
+
"swr": "^2.2.5",
|
|
97
|
+
"tailwind-merge": "^2.5.5"
|
|
94
98
|
},
|
|
95
99
|
"bugs": {
|
|
96
100
|
"url": "https://github.com/ably/ably-ui/issues"
|
package/tailwind.config.js
CHANGED
|
@@ -36,11 +36,12 @@ module.exports = {
|
|
|
36
36
|
overline2: ["var(--fs-overline2)"],
|
|
37
37
|
btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
|
|
38
38
|
btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
|
|
39
|
-
btn3: ["var(--fs-
|
|
40
|
-
btn4: ["var(--fs-
|
|
39
|
+
btn3: ["var(--fs-btn3)", "var(--lh-tight)"],
|
|
40
|
+
btn4: ["var(--fs-btn4)", "var(--lh-dense)"],
|
|
41
41
|
menu1: ["var(--fs-menu1)"],
|
|
42
42
|
menu2: ["var(--fs-menu2)"],
|
|
43
43
|
menu3: ["var(--fs-menu3)"],
|
|
44
|
+
menu4: ["var(--fs-menu4)"],
|
|
44
45
|
quote: ["var(--fs-quote)"],
|
|
45
46
|
code: ["var(--fs-code)", "var(--lh-dense)"],
|
|
46
47
|
code2: ["var(--fs-code2)", "var(--lh-dense)"],
|
|
@@ -219,7 +220,6 @@ module.exports = {
|
|
|
219
220
|
media: "var(--spacing-media)",
|
|
220
221
|
input: "var(--spacing-input)",
|
|
221
222
|
overline: "var(--spacing-overline)",
|
|
222
|
-
"inline-code": "var(--spacing-inline-code)",
|
|
223
223
|
...theme("spacing"),
|
|
224
224
|
}),
|
|
225
225
|
spacing: {
|
package/core/styles/gui.css
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
@layer components {
|
|
2
|
-
.ui-gui-menu1 {
|
|
3
|
-
@apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.ui-gui-menu2 {
|
|
7
|
-
@apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.ui-gui-menu3 {
|
|
11
|
-
@apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.ui-gui-menu4 {
|
|
15
|
-
@apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.ui-gui-button1 {
|
|
19
|
-
@apply font-sans text-p1 font-bold leading-snug;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.ui-gui-button2 {
|
|
23
|
-
@apply font-sans text-p2 font-bold leading-snug;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.ui-gui-button3 {
|
|
27
|
-
@apply font-sans text-p3 font-bold leading-snug;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.ui-gui-button4 {
|
|
31
|
-
@apply font-sans text-p4 font-bold leading-snug;
|
|
32
|
-
}
|
|
33
|
-
}
|