Add "What's a project" tooltip to "New" screen (#546)

* "What is a project" * Update copy * Style/grammar tweak
hashicorp-forge · Jan 12, 2024 · 3b554ef · 3b554ef
1 parent e6c48e2
commit 3b554ef
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 23 deletions.
diff --git a/web/app/components/new/document-template-list.hbs b/web/app/components/new/document-template-list.hbs
@@ -1,21 +1,46 @@
-<div class="flex items-center gap-3.5">
-  <h1>Choose a template</h1>
-  {{#if this.flags.projects}}
-    <div class="hermes-h4 mt-[5px] mr-0.5">
-      or
+<div class="flex items-center justify-between">
+
+  <div class="flex items-center gap-3.5">
+    <h1>Choose a template</h1>
+    {{#if this.flags.projects}}
+      <div class="hermes-h4 mt-[5px] mr-0.5">
+        or
+      </div>
+      <div class="relative mt-1">
+        <Hds::Button
+          data-test-start-a-project-button
+          @text="Start a project"
+          @icon="chevron-right"
+          @iconPosition="trailing"
+          @route="authenticated.new.project"
+          @color="secondary"
+          class="-ml-px pl-[18px]"
+        />
+        <Hds::Badge
+          @text="New"
+          @color="highlight"
+          @type="outlined"
+          @size="small"
+          class="border-color-foreground-highlight-on-surface pointer-events-none absolute top-0 right-0 translate-x-[55%] -translate-y-1/2 border !bg-color-page-primary mix-blend-normal"
+        />
+      </div>
+    {{/if}}
+  </div>
+  <div
+    class="mt-1 flex cursor-default items-center gap-2 text-color-foreground-faint"
+    {{tooltip
+      "A project is a public collection of documents and links organized around an effort."
+      class="w-[260px]"
+      placement="bottom-end"
+      offset=(hash mainAxis=8 crossAxis=10)
+    }}
+  >
+    <div class="underline decoration-dotted underline-offset-[5px]">
+      Whatʼs a project
     </div>
-    <Hds::Button
-      data-test-start-a-project-button
-      @text="Start a project"
-      @icon="chevron-right"
-      @iconPosition="trailing"
-      @route="authenticated.new.project"
-      @color="secondary"
-      class="mt-[4px]"
-    />
-  {{/if}}
+    <FlightIcon @name="help" class="-ml-px" />
+  </div>
 </div>
-
 <ol class="mt-8 grid auto-rows-min grid-cols-2 gap-2">
   {{#each this.docTypes as |docType|}}
     <li

diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts
@@ -13,6 +13,7 @@ import {
   shift,
   offset,
   platform,
+  OffsetOptions,
 } from "@floating-ui/dom";
 import { FOCUSABLE } from "hermes/components/editable-field";
 import { guidFor } from "@ember/object/internals";
@@ -49,6 +50,7 @@ enum TooltipState {
 
 interface TooltipModifierNamedArgs {
   placement?: Placement;
+  offset?: OffsetOptions;
   stayOpenOnClick?: boolean;
   isForcedOpen?: boolean;
   delay?: number;
@@ -77,11 +79,11 @@ function cleanup(instance: TooltipModifier) {
   instance.reference.removeEventListener("focusout", instance.maybeHideContent);
   instance.reference.removeEventListener(
     "mouseenter",
-    instance.showContent.perform
+    instance.showContent.perform,
   );
   instance.reference.removeEventListener(
     "mouseleave",
-    instance.maybeHideContent
+    instance.maybeHideContent,
   );
 
   if (instance.floatingUICleanup) {
@@ -142,6 +144,11 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
    */
   @tracked placement: Placement = "top";
 
+  /**
+   * The offset of the tooltip relative to the reference element.
+   */
+  @tracked offset: OffsetOptions | null = null;
+
   /**
    * The duration of the tooltip's open animation.
    * Ignored in the testing environment.
@@ -300,7 +307,7 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
         platform: platform,
         placement: this.placement,
         middleware: [
-          offset(8),
+          offset(this.offset ?? 8),
           flip(),
           shift({ padding: 20 }),
           arrow({
@@ -373,22 +380,22 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
     this.floatingUICleanup = autoUpdate(
       this.reference,
       this.tooltip,
-      updatePosition
+      updatePosition,
     );
 
     if (!Ember.testing && this.openDuration) {
       const fadeAnimation = this.tooltip.animate(
         [{ opacity: 0 }, { opacity: 1 }],
         {
           duration: Ember.testing ? 0 : 50,
-        }
+        },
       );
       const transformAnimation = this.tooltip.animate(
         [{ transform: this.transform }, { transform: "none" }],
         {
           duration: this.openDuration,
           easing: "ease-in-out",
-        }
+        },
       );
       try {
         await Promise.all([
@@ -497,7 +504,7 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
   modify(
     element: Element,
     positional: [string],
-    named: TooltipModifierNamedArgs
+    named: TooltipModifierNamedArgs,
   ) {
     this._reference = element;
     this._tooltipText = positional[0];
@@ -508,6 +515,10 @@ export default class TooltipModifier extends Modifier<TooltipModifierSignature>
       this.placement = named.placement;
     }
 
+    if (named.offset) {
+      this.offset = named.offset;
+    }
+
     if (named.class) {
       this.class = named.class;
     }