@ably/ui 14.6.0-dev.ff34fb9 → 14.6.0
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/FeaturedLink.js +1 -1
- package/core/Icon/EncapsulatedIcon.js +1 -0
- package/core/Icon/types.js +1 -1
- package/core/Icon.js +1 -1
- package/core/Meganav.js +1 -1
- package/core/MeganavItemsMobile.js +1 -1
- package/core/MeganavItemsSignedIn.js +1 -1
- package/core/MeganavSearch.js +1 -1
- package/core/MeganavSearchSuggestions/component.js +1 -1
- package/core/Pricing/PricingCards.js +1 -0
- package/core/Pricing/data.js +1 -0
- package/core/Pricing/types.js +1 -0
- package/core/ProductTile/data.js +1 -1
- package/core/ProductTile.js +1 -1
- package/core/sprites.svg +1 -1
- package/core/styles/colors/utils.js +1 -0
- package/core/styles.components.css +4 -0
- package/index.d.ts +87 -14
- package/package.json +2 -1
- package/tailwind.config.js +11 -10
- package/core/icons/icon-product-asset-tracking-encapsulated.svg +0 -15
- package/core/icons/icon-product-chat-encapsulated.svg +0 -20
- package/core/icons/icon-product-livesync-encapsulated.svg +0 -15
- package/core/icons/icon-product-pubsub-encapsulated.svg +0 -21
- package/core/icons/icon-product-spaces-encapsulated.svg +0 -20
package/core/FeaturedLink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor
|
|
1
|
+
import React from"react";import Icon from"./Icon";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return /*#__PURE__*/React.createElement("a",{href:url,className:`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${flush?"":"py-8"} ${additionalCSS}`,style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover:right-0 transform rotate-180"}),children):/*#__PURE__*/React.createElement(React.Fragment,null,children,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"})))};export default FeaturedLink;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import Icon from"../Icon";import{determineThemeColor}from"../styles/colors/utils";const EncapsulatedIcon=({theme="dark",size="40px",className,...iconProps})=>{const t=color=>determineThemeColor("dark",theme,color);const numericalSize=parseInt(size,10);return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${t("from-neutral-900")} ${className??""}`,style:{width:numericalSize,height:numericalSize}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")}`,style:{height:numericalSize-2}},/*#__PURE__*/React.createElement(Icon,{size:`${numericalSize-12}`,...iconProps})))};export default EncapsulatedIcon;
|
package/core/Icon/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const coreIcons=["icon-gui-ably-badge","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill","icon-gui-check-circled-fill-black","icon-gui-check-circled","icon-gui-checklist-checked","icon-gui-clock","icon-gui-close","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-copy","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-live-chat","icon-gui-minus","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-search","icon-gui-tick","icon-gui-warning","icon-gui-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-resources"];const displayIcons=["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-stack-col","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-&-recovery","icon-display-consumer-groups","icon-display-custom","icon-display-custom-cname","icon-display-customers-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-push-notifications-col","icon-display-data-broadcast-col","icon-display-data-synchronization-col","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations","icon-display-integrations-col","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-live-updates-results-metrics-col","icon-multi-user-spaces-col"];const socialIcons=["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-linkedin","icon-social-twitter","icon-social-google","icon-social-stackoverflow","icon-social-youtube","icon-social-x"];const otherIcons=["quote"];const techIcons=["icon-tech-amqp10","icon-tech-apache-kafka","icon-tech-apachepulsar","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azureservicebus","icon-tech-cloudflareworkers","icon-tech-csharp","icon-tech-flutter","icon-tech-gcloudfunctions","icon-tech-go","icon-tech-ifttt","icon-tech-java","icon-tech-javascript","icon-tech-net","icon-tech-objectivec","icon-tech-php","icon-tech-python","icon-tech-react","icon-tech-ruby","icon-tech-swift","icon-tech-terraform","icon-tech-zapier"];const productIcons=["icon-product-asset-tracking","icon-product-chat","icon-product-liveobjects","icon-product-livesync","icon-product-pubsub","icon-product-spaces"
|
|
1
|
+
const coreIcons=["icon-gui-ably-badge","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill","icon-gui-check-circled-fill-black","icon-gui-check-circled","icon-gui-checklist-checked","icon-gui-clock","icon-gui-close","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-copy","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-live-chat","icon-gui-minus","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-search","icon-gui-tick","icon-gui-warning","icon-gui-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-resources"];const displayIcons=["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-stack-col","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-&-recovery","icon-display-consumer-groups","icon-display-custom","icon-display-custom-cname","icon-display-customers-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-push-notifications-col","icon-display-data-broadcast-col","icon-display-data-synchronization-col","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations","icon-display-integrations-col","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-live-updates-results-metrics-col","icon-multi-user-spaces-col"];const socialIcons=["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-linkedin","icon-social-twitter","icon-social-google","icon-social-stackoverflow","icon-social-youtube","icon-social-x"];const otherIcons=["quote"];const techIcons=["icon-tech-amqp10","icon-tech-apache-kafka","icon-tech-apachepulsar","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azureservicebus","icon-tech-cloudflareworkers","icon-tech-csharp","icon-tech-flutter","icon-tech-gcloudfunctions","icon-tech-go","icon-tech-ifttt","icon-tech-java","icon-tech-javascript","icon-tech-net","icon-tech-objectivec","icon-tech-php","icon-tech-python","icon-tech-react","icon-tech-ruby","icon-tech-swift","icon-tech-terraform","icon-tech-zapier"];const productIcons=["icon-product-asset-tracking","icon-product-chat","icon-product-liveobjects","icon-product-livesync","icon-product-pubsub","icon-product-spaces"];export const iconNames={core:coreIcons,display:displayIcons,social:socialIcons,other:otherIcons,tech:techIcons,product:productIcons};
|
package/core/Icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";
|
|
1
|
+
import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";const Icon=({name,size="0.75rem",color,secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color??""} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;
|
package/core/Meganav.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl
|
|
1
|
+
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?/*#__PURE__*/React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):/*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>/*#__PURE__*/React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&/*#__PURE__*/React.createElement(Notice,{...notice.props,config:notice.config}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"mr-24"},/*#__PURE__*/React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),/*#__PURE__*/React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?/*#__PURE__*/React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):/*#__PURE__*/React.createElement(SignInPlaceholder,null),/*#__PURE__*/React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl
|
|
1
|
+
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return /*#__PURE__*/React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},/*#__PURE__*/React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?/*#__PURE__*/React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>/*#__PURE__*/React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavControlMobileDropdown,{theme:theme}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},/*#__PURE__*/React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},/*#__PURE__*/React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},/*#__PURE__*/React.createElement("div",{className:"relative w-full"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),/*#__PURE__*/React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),/*#__PURE__*/React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),/*#__PURE__*/React.createElement(MeganavSearchAutocomplete,null))),/*#__PURE__*/React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},/*#__PURE__*/React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),/*#__PURE__*/React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return /*#__PURE__*/React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},/*#__PURE__*/React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},/*#__PURE__*/React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),/*#__PURE__*/React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),/*#__PURE__*/React.createElement("hr",{className:"ui-meganav-hr mb-20"}),/*#__PURE__*/React.createElement("div",{className:"flex justify-between items-center mb-16"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default /*#__PURE__*/React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl
|
|
1
|
+
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return /*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item relative"},/*#__PURE__*/React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
|
package/core/MeganavSearch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl
|
|
1
|
+
import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl})=>/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("button",{type:"button","data-id":"meganav-control","data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},/*#__PURE__*/React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle
|
|
1
|
+
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const PricingCards=({data,theme="dark",delimiter})=>{const t=color=>determineThemeColor("dark",theme,color);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center w-full m-8 @[920px]:w-20"},/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:t("text-neutral-500")})):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`flex flex-1 p-1 bg-gradient-to-b ${t("from-neutral-1100")} ${t("to-neutral-1100")} rounded-2xl min-w-[272px]`},/*#__PURE__*/React.createElement("div",{className:`flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl ${t("bg-neutral-1300")} bg-opacity-25 ${cta?`${t("hover:bg-neutral-1200")} hover:bg-opacity-100`:""} transition-colors group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""}`},/*#__PURE__*/React.createElement("div",{className:`flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px}:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:`mb-12 ${title.className??""} ${t(title.color??"text-neutral-000")}`},title.content),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${t(description.color??"text-neutral-000")}`},description.content)),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`},Number.isNaN(Number(price.amount))?"":"$",price.amount),/*#__PURE__*/React.createElement("div",{className:t("text-neutral-000")},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""}`,url:cta.url},cta.text)):null),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${t("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${t("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:t(listItemColors.background),secondaryColor:t(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${t("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"flex items-center h-40"},/*#__PURE__*/React.createElement("div",{className:`hidden sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`},"•••"),/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url??"#",additionalCSS:`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`},cta.text)):null))))),delimiterColumn(index)))))};export default PricingCards;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:0},cta:{text:"Start for free",url:"#"},sections:[{title:"Capacity",items:["200 concurrent channels","200 concurrent connections"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-600",background:"text-neutral-1000"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:29,content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"#"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages/second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:399,content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"#"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages/second"]},{title:"Includes",items:["4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"#",className:"ui-btn-alt text-white"},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited concurrent connections","Unlimited messages/second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600",background:"text-orange-1000"},cta:{text:"See all features",url:"#"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:2.5,content:"per million"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Clients publish and receive messages on channels (also know as topics). We only charge for active channels.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:1,content:"per million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 10 million msgs","$1.00"],["Next 90 million msgs","$0.95"],["Next 900 million msgs","$0.85"],["Next 4 billion msgs","$0.75"],["Next 10 billion msgs","$0.65"],["Over 15 billion msgs","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets. We only charge for active connections.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:1,content:"per million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 10 million msgs","$1.00"],["Next 90 million msgs","$0.95"],["Next 900 million msgs","$0.85"],["Next 4 billion msgs","$0.75"],["Next 10 billion msgs","$0.65"],["Over 15 billion msgs","$0.60"]]}]}];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
package/core/ProductTile/data.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const products={pubsub:{label:"PubSub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub
|
|
1
|
+
export const products={pubsub:{label:"PubSub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",link:"/docs/products/asset-tracking",unavailable:true}};
|
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{determineThemeColor}from"./styles/colors/utils";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};const t=color=>determineThemeColor("dark",selected?"light":"dark",color);return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${t("bg-neutral-1200")} ${selected?"":"hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,theme:selected?"light":"dark"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${t("text-neutral-300")} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${t("text-neutral-000")} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans 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:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-500"} font-medium leading-snug`},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 ${t("text-neutral-000")}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
|