feat: add shared more info hover ui component

apps/web/src/app/features/account/products/views/price-detail/price-detail.component.html

@@ -113,7 +113,14 @@ <h1 class="mb-zero">Price for {{ price.product }}</h1>
   <div>
     <div class="flex align-vert gap-extra-small mb-extra-small">
       <div class="dimmed-extra">Trial Period Days</div>
-      <span class="chip grey-chip">Legacy</span>
+      <app-more-info-hover
+        text="Settings a default trial period per price is no longer recommended and is incompatible with Checkout and quotes. Free trials can be set per subscription or quote instead."
+      >
+        <div class="chip grey-chip">
+          <span>Legacy</span>
+          <img src="assets/icons/info.svg" class="icon" alt="Info icon" />
+        </div>
+      </app-more-info-hover>
     </div>
     <div>—</div>
   </div>
@@ -161,7 +168,13 @@ <h2 class="mb-zero">Pricing</h2>
   <tbody>
     <tr>
       <td class="dimmed-extra">Type</td>
-      <td>Flat rate</td>
+      <td class="flex align-vert gap-small">
+        <span>Flat rate</span>
+        <app-more-info-hover
+          text="Customers subscribed to this plan are billed for the same set quantity every period."
+        >
+        </app-more-info-hover>
+      </td>
     </tr>
     <tr>
       <td class="dimmed-extra">Currency</td>
@@ -202,12 +215,24 @@ <h2 class="mb-zero">Currencies</h2>
 
 <div class="flex align-vert gap-small">
   <h2 class="mb-zero">Upsells</h2>
-  <div class="chip grey-chip">Boosts revenue</div>
+  <app-more-info-hover
+    text="Increase your average order value by allowing customers to upgrade or add more items to their order."
+    linkUrl="https://zoneless.com/docs"
+  >
+    <div class="chip grey-chip">
+      <span>Boosts revenue</span>
+      <img src="assets/icons/info.svg" class="icon" alt="Info icon" />
+    </div>
+  </app-more-info-hover>
 </div>
 <div class="line"></div>
 <div class="flex align-vert gap-extra-large cross-sell-input">
   <span class="dimmed-extra">Upsells to</span>
   <input type="text" placeholder="Find a price..." />
+  <app-more-info-hover
+    text="Upsells are currently available for prices with the same currency, longer billing periods, and an annualised price that is less than or equal to the annualised base price."
+  >
+  </app-more-info-hover>
 </div>
 <div class="mb-extra-large"></div>
 

apps/web/src/app/features/account/products/views/price-detail/price-detail.component.ts

@@ -13,6 +13,7 @@ import { PriceActionsHostComponent } from '../../components/price-actions-host/p
 import { ActivatedRoute, Router } from '@angular/router';
 import { PopupMenuAction, PopupMenuComponent } from '../../../../../shared';
 import { EventsListComponent } from '../../../components';
+import { MoreInfoHoverComponent } from '../../../../../shared';
 
 import { Subscription } from 'rxjs';
 
@@ -24,6 +25,7 @@ import { Subscription } from 'rxjs';
     DecimalPipe,
     UpperCasePipe,
     EventsListComponent,
+    MoreInfoHoverComponent,
   ],
   templateUrl: './price-detail.component.html',
   styleUrl: './price-detail.component.scss',

apps/web/src/app/shared/ui/index.ts

@@ -9,3 +9,4 @@ export * from './status-chip/status-chip.component';
 export * from './test-mode-banner/test-mode-banner.component';
 export * from './confirm-dialog/confirm-dialog.component';
 export * from './popup-menu/popup-menu.component';
+export * from './more-info-hover/more-info-hover.component';

apps/web/src/app/shared/ui/more-info-hover/more-info-hover.component.html

@@ -0,0 +1,24 @@
+<span class="more-info-wrapper" tabindex="0" [attr.aria-label]="ariaLabel">
+  <ng-content>
+    <img
+      src="assets/icons/info.svg"
+      class="icon dimmed-extra more-info-default-icon"
+      [alt]="ariaLabel"
+    />
+  </ng-content>
+
+  <span
+    class="more-info-bubble light-shadow"
+    [class.more-info-bubble-top]="position === 'top'"
+    [class.more-info-bubble-bottom]="position === 'bottom'"
+    role="tooltip"
+  >
+    <ng-content select="[bubble]">
+      @if (text) {
+      <span>{{ text }}</span>
+      } @if (linkUrl) {
+      <a [href]="linkUrl" target="_blank" rel="noopener">{{ linkText }}</a>
+      }
+    </ng-content>
+  </span>
+</span>

apps/web/src/app/shared/ui/more-info-hover/more-info-hover.component.scss

@@ -0,0 +1,130 @@
+@use '../../../styles/base.scss' as *;
+
+$bubble-gap: $spacing-small;
+$bubble-tail-size: 7px;
+$bubble-tail-width: 10px;
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.more-info-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  outline: none;
+}
+
+.more-info-default-icon {
+  transition: opacity $transition;
+}
+
+.more-info-wrapper:hover .more-info-default-icon,
+.more-info-wrapper:focus-visible .more-info-default-icon {
+  opacity: 1;
+}
+
+.more-info-bubble {
+  position: absolute;
+  left: 50%;
+  z-index: 30;
+  min-width: 280px;
+  max-width: 360px;
+  padding: $spacing-snug $spacing;
+  background-color: $background-color;
+  border: 1px solid $darkest-background-color;
+  border-radius: $border-radius-small;
+  font-size: $font-size;
+  line-height: 1.45;
+  color: $text-color;
+  text-align: left;
+  white-space: normal;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity $transition-fast ease-out,
+    transform $transition-fast ease-out, visibility 0s linear $transition-fast;
+
+  a {
+    display: inline-block;
+    margin-top: $spacing-extra-small;
+    font-size: $font-size;
+  }
+
+  span + a {
+    margin-left: $spacing-extra-small;
+  }
+
+  // Transparent bridge across the visual gap so the cursor stays inside the
+  // wrapper while moving from the trigger to the bubble (and back).
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: $bubble-gap;
+  }
+
+  // The tail/pointer. A CSS triangle drawn with borders; drop-shadow paints
+  // the matching outline so it lines up with the bubble border.
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -#{$bubble-tail-width};
+    border-left: $bubble-tail-width solid transparent;
+    border-right: $bubble-tail-width solid transparent;
+  }
+}
+
+.more-info-bubble-bottom {
+  top: 100%;
+  transform: translateX(-50%) translateY(calc(#{$bubble-gap} + 4px));
+
+  &::before {
+    top: -$bubble-gap;
+  }
+
+  &::after {
+    top: -$bubble-tail-size;
+    border-bottom: $bubble-tail-size solid $background-color;
+    filter: drop-shadow(0 -1px 0 $darkest-background-color);
+  }
+}
+
+.more-info-bubble-top {
+  bottom: 100%;
+  transform: translateX(-50%) translateY(calc(-1 * (#{$bubble-gap} + 4px)));
+
+  &::before {
+    bottom: -$bubble-gap;
+  }
+
+  &::after {
+    bottom: -$bubble-tail-size;
+    border-top: $bubble-tail-size solid $background-color;
+    filter: drop-shadow(0 1px 0 $darkest-background-color);
+  }
+}
+
+.more-info-wrapper:hover .more-info-bubble,
+.more-info-wrapper:focus-within .more-info-bubble {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity $transition-fast ease-out,
+    transform $transition-fast ease-out, visibility 0s linear 0s;
+}
+
+.more-info-wrapper:hover .more-info-bubble-bottom,
+.more-info-wrapper:focus-within .more-info-bubble-bottom {
+  transform: translateX(-50%) translateY($bubble-gap);
+}
+
+.more-info-wrapper:hover .more-info-bubble-top,
+.more-info-wrapper:focus-within .more-info-bubble-top {
+  transform: translateX(-50%) translateY(calc(-1 * #{$bubble-gap}));
+}

apps/web/src/app/shared/ui/more-info-hover/more-info-hover.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-more-info-hover',
+  imports: [],
+  templateUrl: './more-info-hover.component.html',
+  styleUrl: './more-info-hover.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MoreInfoHoverComponent {
+  /** Body text shown inside the hover bubble. Ignored if a [bubble] slot is projected. */
+  @Input() text = '';
+  /** Optional link label shown after the body text. Defaults to "Learn more" when a url is given. */
+  @Input() linkText = 'Learn more';
+  /** Optional url for the link. */
+  @Input() linkUrl = '';
+  /** Accessible label applied to the default info icon trigger. */
+  @Input() ariaLabel = 'More info';
+  /** Where the bubble appears relative to the trigger. */
+  @Input() position: 'top' | 'bottom' = 'top';
+}