Skip to content

Commit e7ca067

Browse files
jamiehensonjamiehenson
authored
Merge pull request #856 from ably/WEB-4475_pricing+updates
[WEB-4475] - Pricing Card Updates
2 parents daa3849 + 18d157b commit e7ca067

File tree

12 files changed

+455
-367
lines changed

12 files changed

+455
-367
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ably/ui",
3-
"version": "17.5.8",
3+
"version": "17.6.0",
44
"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.",
55
"repository": {
66
"type": "git",

‎src/core/Accordion/utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {
1515
text: "text-neutral-1000 dark:text-neutral-000",
1616
toggleIconColor: "text-dark-grey dark:text-orange-600",
1717
border:
18-
"border-neutral-500 border-b last:border-none dark:border-neutral-900",
18+
"border-neutral-500 border-b last:border-none dark:border-neutral-1000",
1919
},
2020
static: {
2121
bg: "bg-neutral-200 dark:bg-neutral-1200",

‎src/core/CodeSnippet/__snapshots__/CodeSnippet.stories.tsx.snap

Lines changed: 47 additions & 47 deletions
Large diffs are not rendered by default.

‎src/core/Pricing/PricingCards.tsx

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { Fragment, useEffect, useRef, useState } from "react";
22
import throttle from "lodash.throttle";
33
import type { PricingDataFeature } from "./types";
44
import Icon from "../Icon";
5-
import FeaturedLink from "../FeaturedLink";
65
import LinkButton from "../LinkButton";
76
import { IconName } from "../Icon/types";
87
import Tooltip from "../Tooltip";
@@ -103,12 +102,15 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
103102
)}
104103
>
105104
{data.map(
106-
({ title, description, price, cta, sections, border }, index) => (
105+
(
106+
{ title, description, price, cta, sections, border, bottomCta },
107+
index,
108+
) => (
107109
<Fragment key={title.content}>
108110
{delimiterColumn(index)}
109111
<div
110112
className={cn(
111-
"relative border flex-1 px-6 py-8 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur",
113+
"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200",
112114
borderClasses(border?.color)?.border ??
113115
"border-neutral-200 dark:border-neutral-1100",
114116
border?.style,
@@ -130,35 +132,27 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
130132
</div>
131133
) : null}
132134
<div
133-
className={cn(
134-
"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",
135-
{
136-
"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":
137-
!delimiter,
138-
},
139-
)}
140-
></div>
141-
<div
142-
className={cn(`relative z-10 flex flex-col gap-6`, {
135+
className={cn(`relative z-10 flex flex-col gap-4`, {
143136
"@[520px]:flex-1 @[920px]:flex-none": delimiter,
144137
})}
145138
>
146139
<div>
147-
<div className="flex items-center mb-3">
140+
<div className="flex items-center mb-1">
148141
<p className={cn(title.className, title.color)}>
149142
{title.content}
150143
</p>
151144
{title.tooltip ? (
152145
<Tooltip
153146
interactive={typeof title.tooltip !== "string"}
147+
iconSize="1.25rem"
154148
>
155149
{title.tooltip}
156150
</Tooltip>
157151
) : null}
158152
</div>
159153
<p
160154
className={cn(
161-
"ui-text-p1 min-h-5",
155+
"ui-text-h1 text-h1-xl h-5 block",
162156
description.className,
163157
description.color,
164158
)}
@@ -175,7 +169,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
175169
delimiter,
176170
})}
177171
>
178-
<p className="ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000">
172+
<p className="ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000">
179173
{price.amount}
180174
</p>
181175
<div className="ui-text-p3 text-neutral-1300 dark:text-neutral-000">
@@ -192,7 +186,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
192186
href={cta.url}
193187
onClick={cta.onClick}
194188
disabled={cta.disabled}
195-
rightIcon="icon-gui-arrow-long-right-outline"
189+
rightIcon="icon-gui-arrow-right-outline"
196190
iconColor={cta.iconColor}
197191
>
198192
{cta.text}
@@ -204,15 +198,13 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
204198
</div>
205199
)}
206200
</div>
207-
<div className="flex-1 flex flex-col gap-6 relative z-10">
208-
{sections.map(({ title, items, listItemColors, cta }) => (
201+
<div className="flex flex-col gap-4 relative z-10 flex-grow">
202+
{sections.map(({ title, items, listItemColors }) => (
209203
<div key={title} className="flex flex-col gap-3">
210-
<p className="text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
204+
<p className="text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4">
211205
{title}
212206
</p>
213-
<div
214-
className={cn({ "flex flex-col gap-1": !delimiter })}
215-
>
207+
<div className={cn({ "flex flex-col": !delimiter })}>
216208
{items.map((item, index) =>
217209
Array.isArray(item) ? (
218210
<div
@@ -231,7 +223,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
231223
className={cn(
232224
"ui-text-p3",
233225
index === 0 ? "font-bold" : "font-medium",
234-
"text-neutral-1000 dark:text-neutral-300",
226+
"text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]",
235227
subIndex % 2 === 1 ? "text-right" : "",
236228
)}
237229
>
@@ -240,20 +232,19 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
240232
))}
241233
</div>
242234
) : (
243-
<div key={item} className="flex gap-2 items-start">
235+
<div key={item} className="flex items-start gap-2">
244236
{listItemColors ? (
245237
<Icon
246238
name="icon-gui-check-circled-fill"
247239
color={listItemColors.background}
248240
secondaryColor={listItemColors.foreground}
249241
size="16px"
250-
additionalCSS="mt-0.5"
242+
additionalCSS="mt-1"
251243
/>
252244
) : null}
253245
<div
254246
className={cn(
255-
`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,
256-
listItemColors ? "ui-text-p3" : "ui-text-p2",
247+
`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,
257248
)}
258249
>
259250
{item}
@@ -262,24 +253,32 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
262253
),
263254
)}
264255
</div>
265-
{cta ? (
266-
<div className="relative -mx-6 flex items-center h-10 overflow-x-hidden">
267-
<FeaturedLink
268-
url={cta.url}
269-
additionalCSS="absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 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"
270-
onClick={cta.onClick}
271-
iconColor={listItemColors?.foreground}
272-
>
273-
{cta.text}
274-
</FeaturedLink>
275-
<div className="absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800">
276-
•••
277-
</div>
278-
</div>
279-
) : null}
280256
</div>
281257
))}
282258
</div>
259+
260+
{bottomCta && (
261+
<div>
262+
<div className="border-t border-neutral-200 dark:border-neutral-1100 -mx-6"></div>
263+
<a
264+
href={bottomCta.url}
265+
className={cn(
266+
"text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center",
267+
"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus",
268+
)}
269+
>
270+
{bottomCta.text}
271+
<Icon
272+
name="icon-gui-arrow-down-outline"
273+
size="12px"
274+
color={bottomCta.iconColor}
275+
additionalCSS={cn(
276+
"align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5",
277+
)}
278+
/>
279+
</a>
280+
</div>
281+
)}
283282
</div>
284283
{delimiterColumn(index)}
285284
</Fragment>

0 commit comments

Comments
 (0)