"Recommended" text in Plan cards (#6735)

Author: hasparus

packages/libraries/core/tests/usage.spec.ts

@@ -333,7 +333,7 @@ test('should send data to Hive (deprecated endpoint)', async () => {
   expect(operation.execution.ok).toBe(true);
 });
 
-test('should not leak the exception', async () => {
+test('should not leak the exception', { retry: 3 }, async () => {
   const logger = createHiveTestingLogger();
 
   const hive = createHive({

packages/libraries/yoga/tests/persisted-documents.spec.ts

@@ -720,7 +720,7 @@ test('deduplication of parallel requests resolving the same document from CDN',
   httpScope.done();
 });
 
-test('usage reporting with batch execution and persisted documents', async () => {
+test('usage reporting with batch execution and persisted documents', { retry: 3 }, async () => {
   const httpScope = nock('http://artifacts-cdn.localhost', {
     reqheaders: {
       'X-Hive-CDN-Key': value => {

packages/web/docs/src/components/pricing/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { HTMLAttributes, ReactElement, ReactNode, useRef, useState } from 'react';
-import { Content, Root, Trigger } from '@radix-ui/react-tooltip';
 import {
   CallToAction,
   cn,
@@ -11,6 +10,7 @@ import {
   ShieldFlashIcon,
   TextLink,
 } from '@theguild/components';
+import { Tooltip } from '../tooltip';
 import {
   AvailabilityIcon,
   BillingIcon,
@@ -25,33 +25,6 @@ import {
 import { PlanCard } from './plan-card';
 import { PricingSlider } from './pricing-slider';
 
-function Tooltip({ content, children }: { content: string; children: ReactNode }) {
-  return (
-    <Root delayDuration={350}>
-      <Trigger className="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 text-left">
-        {children}
-      </Trigger>
-      <Content
-        align="start"
-        sideOffset={5}
-        className="bg-green-1000 z-20 rounded p-2 text-sm font-normal leading-4 text-white shadow"
-      >
-        {content}
-        <svg
-          // radix arrow is in wrong spot, so I added a custom one
-          width="10"
-          height="14"
-          viewBox="0 0 12 16"
-          fill="currentColor"
-          className="text-green-1000 absolute bottom-0 left-1/3 -translate-x-1/2 translate-y-1/2"
-        >
-          <path d="M0 8L6 0L12 8L6 16L0 8Z" />
-        </svg>
-      </Content>
-    </Root>
-  );
-}
-
 interface PlanFeaturesListItemProps extends HTMLAttributes<HTMLLIElement> {
   icon: ReactNode;
   category: string;
@@ -158,7 +131,7 @@ export function Pricing({ className }: { className?: string }): ReactElement {
         <div
           ref={scrollviewRef}
           // the padding is here so `overflow-auto` doesn't cut button hover states
-          className="nextra-scrollbar -mx-4 -mb-6 flex flex-col items-stretch gap-6 px-4 py-6 sm:flex-row sm:overflow-auto sm:*:min-w-[380px] md:-mx-6 md:px-6 lg:mt-6"
+          className="nextra-scrollbar -mx-4 -mb-6 flex flex-col items-stretch gap-6 px-4 py-6 sm:flex-row sm:overflow-auto sm:*:min-w-[380px] md:-mx-6 md:px-6"
         >
           <PlanCard
             data-plan="Hobby"

packages/web/docs/src/components/pricing/plan-card.tsx

@@ -175,12 +175,14 @@ export function PlanCard({
         ref={cardRef}
         className={cn(
           'relative isolate rounded-3xl bg-white shadow-[inset_0_0_0_1px_theme(colors.green.400)]',
-          'before:absolute before:inset-0 before:-z-10 before:rounded-3xl before:bg-[linear-gradient(#fff,#fff),linear-gradient(to_bottom,#E1FF00,#DEDACF,#68A8B6)] before:p-[4px] before:opacity-0 before:transition-[opacity] before:duration-700 before:content-[""] before:[background-clip:content-box,padding-box]',
+          'duration-200 before:absolute before:inset-0 before:-z-10 before:rounded-3xl before:bg-[linear-gradient(#fff,#fff),linear-gradient(to_bottom,#68A8B6,#DEDACF,#E1FF00)] before:p-[4px] before:opacity-0 before:transition-[opacity,top,height] before:content-[""] before:[background-clip:content-box,padding-box] before:[transition-duration:50ms,25ms,25ms] sm:mt-[52px] sm:before:top-[-40px]',
           (highlighted || !collapsed) && 'before:opacity-100',
           'max-sm:transition-[width,height,border-radius] max-sm:duration-700 max-sm:ease-in-out',
           !collapsed &&
             'max-sm:fixed max-sm:inset-2 max-sm:z-50 max-sm:m-0 max-sm:h-[calc(100vh-16px)] max-sm:bg-white',
           transitioning && 'z-50',
+          highlighted && // delay is 29ms so fast swipes don't blink needlessly
+            'sm:before:top-[-52px] sm:before:h-[calc(100%+52px)] sm:before:pt-[50px] sm:before:delay-[29ms] sm:before:[transition-duration:150ms,75ms,75ms]',
           className,
         )}
         {...rest}
@@ -192,6 +194,15 @@ export function PlanCard({
             !collapsed && 'nextra-scrollbar h-full max-sm:overflow-auto',
           )}
         >
+          <div
+            aria-hidden={!highlighted}
+            className={cn(
+              'absolute -top-9 left-0 w-full text-center font-medium text-white transition-opacity max-sm:hidden',
+              highlighted ? 'opacity-100' : 'opacity-0',
+            )}
+          >
+            Recommended
+          </div>
           <header className="relative text-green-800">
             <div className="flex flex-row items-center gap-2">
               <h2 className="text-2xl font-medium">{name}</h2>
@@ -213,7 +224,9 @@ export function PlanCard({
               </button>
             )}
           </header>
-          <div className="mt-4 h-6 text-[#4F6C6A]">{startingFrom && 'Starting from'}</div>
+          <div className={cn('mt-4 h-6 text-[#4F6C6A]', !startingFrom && 'max-sm:h-0')}>
+            {startingFrom && 'Starting from'}
+          </div>
           <div className="text-5xl font-medium leading-[56px] tracking-[-0.48px]">{price}</div>
           <div className="mt-4 flex *:grow">{callToAction}</div>
 

packages/web/docs/src/components/slider.tsx

@@ -111,6 +111,8 @@ export function Slider({ counter, className, deadZone, style, ...rest }: SliderP
     <div className="flex w-full">
       <button
         className="z-10 my-3"
+        tabIndex={-1}
+        title="Set to minimum"
         style={{ width: deadZone }}
         onClick={event => {
           const input = event.currentTarget.parentElement!.querySelector(

packages/web/docs/src/components/tooltip.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Content, Root, Trigger } from '@radix-ui/react-tooltip';
+
+export function Tooltip({ content, children }: { content: string; children: ReactNode }) {
+  return (
+    <Root delayDuration={350}>
+      <Trigger className="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 text-left">
+        {children}
+      </Trigger>
+      <Content
+        align="start"
+        sideOffset={5}
+        className="bg-green-1000 z-20 rounded px-2 py-[3px] text-sm font-normal text-white shadow"
+      >
+        {content}
+        <TooltipArrow className="text-green-1000 absolute bottom-0 left-1/3 -translate-x-1/2 translate-y-full" />
+      </Content>
+    </Root>
+  );
+}
+
+function TooltipArrow(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="10" height="5" viewBox="0 0 8 4" fill="currentColor" {...props}>
+      <path d="M5.06066 2.93934C4.47487 3.52513 3.52513 3.52513 2.93934 2.93934L-6.03983e-07 -6.99382e-07L8 0L5.06066 2.93934Z" />
+    </svg>
+  );
+}