@ably/ui 14.6.3-dev.37f2407 → 14.6.3-dev.febab8e
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/Pricing/PricingCards.js +1 -1
- package/core/Pricing/data.js +1 -1
- package/index.d.ts +3 -6
- package/package.json +1 -1
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,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children
|
|
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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const onCtaClick=id=>{const element=document.getElementById(id.split("#")[1]);if(element){window.scrollTo({top:element.getBoundingClientRect().top
|
|
1
|
+
import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const onCtaClick=id=>{const element=document.getElementById(id.split("#")[1]);if(element){window.scrollTo({top:element.getBoundingClientRect().top-96,behavior:"smooth"})}};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:`relative border ${t("border-neutral-1100")} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] overflow-hidden backdrop-blur`},/*#__PURE__*/React.createElement("div",{className:`absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl ${t("bg-neutral-1300")} ${cta?`${t("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("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 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:`${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:block sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`},"•••"),/*#__PURE__*/React.createElement(FeaturedLink,{url:"#",additionalCSS:`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`,onClick:()=>onCtaClick(cta.url)},cta.text)):null)))),delimiterColumn(index)))))};export default PricingCards;
|
package/core/Pricing/data.js
CHANGED
|
@@ -1 +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:
|
|
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:"https://ably.com/sign-up"},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:"#pricing-table"}}]},{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:"https://ably.com/users/paid_sign_up"},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:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Scale business critical workloads.",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:"https://ably.com/users/paid_sign_up"},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:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Serious workloads without limits.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"#pricing-enterprise",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:"#pricing-table"}}]}];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"]]}]}];
|
package/index.d.ts
CHANGED
|
@@ -168,9 +168,8 @@ type FeaturedLinkProps = {
|
|
|
168
168
|
additionalCSS?: string;
|
|
169
169
|
newWindow?: boolean;
|
|
170
170
|
onClick?: () => void;
|
|
171
|
-
disabled?: boolean;
|
|
172
171
|
};
|
|
173
|
-
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children,
|
|
172
|
+
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
174
173
|
export default FeaturedLink;
|
|
175
174
|
//# sourceMappingURL=FeaturedLink.d.ts.map
|
|
176
175
|
}
|
|
@@ -677,7 +676,7 @@ import { IconName } from ".@ably/ui/core/Icon/types";
|
|
|
677
676
|
export type PricingCardsProps = {
|
|
678
677
|
data: PricingDataFeature[];
|
|
679
678
|
theme?: Theme;
|
|
680
|
-
delimiter?: IconName
|
|
679
|
+
delimiter?: IconName;
|
|
681
680
|
};
|
|
682
681
|
const PricingCards: ({ data, theme, delimiter, }: PricingCardsProps) => import("react/jsx-runtime").JSX.Element;
|
|
683
682
|
export default PricingCards;
|
|
@@ -703,14 +702,12 @@ type PricingDataFeatureCta = {
|
|
|
703
702
|
text: string;
|
|
704
703
|
url: string;
|
|
705
704
|
className?: string;
|
|
706
|
-
disabled?: boolean;
|
|
707
|
-
onClick?: () => void;
|
|
708
705
|
};
|
|
709
706
|
export type PricingDataFeature = {
|
|
710
707
|
title: PricingDataHeader;
|
|
711
708
|
description: PricingDataHeader;
|
|
712
709
|
price: {
|
|
713
|
-
amount: string;
|
|
710
|
+
amount: number | string;
|
|
714
711
|
content?: ReactNode;
|
|
715
712
|
};
|
|
716
713
|
cta?: PricingDataFeatureCta;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "14.6.3-dev.
|
|
3
|
+
"version": "14.6.3-dev.febab8e",
|
|
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",
|