Update "New" button (#361)

hashicorp-forge · Oct 10, 2023 · 5a31f29 · 5a31f29
1 parent a4d2980
commit 5a31f29
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 deletions.
diff --git a/web/app/components/header/nav.hbs b/web/app/components/header/nav.hbs
@@ -36,11 +36,11 @@
 
     <div class="user-buttons">
       <Hds::Button
+        data-test-create-new-button
         @route="authenticated.new"
-        @isIconOnly={{true}}
-        @text="Create draft"
-        @icon="file-plus"
-        class="create-draft-button"
+        @text="New"
+        @icon="plus"
+        class="pl-2.5 pr-4"
       />
       <div class="relative">
         {{#if this.userMenuHighlightIsShown}}

diff --git a/web/app/styles/components/nav.scss b/web/app/styles/components/nav.scss
@@ -1,42 +1,42 @@
 .header-nav {
-  @apply flex flex-wrap justify-between md:flex-nowrap items-center w-full relative;
+  @apply relative flex w-full flex-wrap items-center justify-between md:flex-nowrap;
 
   .header-nav-logo {
-    @apply mr-6 mt-3.5 md:mt-0 shrink-0 flex items-center md:mr-0 order-1 md:h-16 hover:text-color-foreground-strong;
+    @apply order-1 mr-6 mt-3.5 flex shrink-0 items-center hover:text-color-foreground-strong md:mt-0 md:mr-0 md:h-16;
   }
 
   .primary-links {
-    @apply -ml-2.5 h-16 flex shrink-0 md:mx-6 order-3 md:order-2;
+    @apply order-3 -ml-2.5 flex h-16 shrink-0 md:order-2 md:mx-6;
 
     a {
-      @apply px-2.5 md:px-3.5 h-full flex items-center text-color-foreground-faint;
+      @apply flex h-full items-center px-2.5 text-color-foreground-faint md:px-3.5;
 
       &:hover {
         @apply text-color-foreground-strong;
       }
 
       &.active {
-        @apply text-color-palette-blue-200 relative;
+        @apply relative text-color-palette-blue-200;
 
         /* Active indicator */
         &::before {
           content: "";
-          @apply absolute w-full h-1 left-0 -bottom-px bg-color-palette-blue-200;
+          @apply absolute left-0 -bottom-px h-1 w-full bg-color-palette-blue-200;
         }
       }
     }
   }
 
   .global-search {
-    @apply order-2 md:order-3 pt-3.5 md:py-0 w-[calc(100%-9rem)] md:w-full flex;
+    @apply order-2 flex w-[calc(100%-9rem)] pt-3.5 md:order-3 md:w-full md:py-0;
   }
 
   .user-buttons {
-    @apply flex items-center justify-end space-x-1.5 sm:ml-6 md:ml-8 order-4;
+    @apply order-4 flex items-center justify-end space-x-1.5 sm:ml-6 md:ml-8;
   }
 
   .user-avatar {
-    @apply w-[30px] h-[30px] rounded-[3px] absolute z-10 top-1/2 -translate-y-1/2 left-[3px] pointer-events-none;
+    @apply pointer-events-none absolute top-1/2 left-[3px] z-10 h-[30px] w-[30px] -translate-y-1/2 rounded-[3px];
   }
 
   .user-menu-external-link {
@@ -58,7 +58,7 @@
   }
 
   .search-dropdown {
-    @apply w-full max-w-none min-w-[320px];
+    @apply w-full min-w-[320px] max-w-none;
   }
 
   a {
@@ -69,15 +69,11 @@
     }
   }
 
-  .create-draft-button {
-    @apply rounded-full w-9 p-0;
-  }
-
   .highlighted-new {
     .hds-dropdown-list-item__interactive-text {
       &::after {
         content: "New";
-        @apply text-body-100 px-2 py-1 rounded font-medium bg-color-surface-highlight text-color-foreground-highlight ml-0.5;
+        @apply ml-0.5 rounded bg-color-surface-highlight px-2 py-1 text-body-100 font-medium text-color-foreground-highlight;
       }
     }
   }

diff --git a/web/app/styles/hds-overrides.scss b/web/app/styles/hds-overrides.scss
@@ -38,3 +38,11 @@
     @apply absolute right-1.5 top-1/2 -translate-y-1/2;
   }
 }
+
+a.hds-button {
+  &:hover,
+  &:focus,
+  &:active {
+    @apply no-underline;
+  }
+}
diff --git a/web/tests/integration/components/header/nav-test.ts b/web/tests/integration/components/header/nav-test.ts
@@ -11,6 +11,7 @@ import ConfigService from "hermes/services/config";
 
 const SUPPORT_URL = "https://example.com/support";
 const USER_MENU_TOGGLE_SELECTOR = "[data-test-user-menu-toggle]";
+const CREATE_NEW_BUTTON = "[data-test-create-new-button]";
 
 module("Integration | Component | header/nav", function (hooks) {
   setupRenderingTest(hooks);
@@ -19,7 +20,7 @@ module("Integration | Component | header/nav", function (hooks) {
 
   hooks.beforeEach(function () {
     let authenticatedUserSvc = this.owner.lookup(
-      "service:authenticated-user"
+      "service:authenticated-user",
     ) as AuthenticatedUserService;
 
     authenticatedUserSvc._info = {
@@ -41,6 +42,8 @@ module("Integration | Component | header/nav", function (hooks) {
     assert.dom('[data-test-nav-link="my"]').hasAttribute("href", "/my");
     assert.dom('[data-test-nav-link="drafts"]').hasAttribute("href", "/drafts");
 
+    assert.dom(CREATE_NEW_BUTTON).hasText("New").hasAttribute("href", "/new");
+
     assert.dom(".global-search").exists();
 
     await click(USER_MENU_TOGGLE_SELECTOR);
@@ -66,7 +69,7 @@ module("Integration | Component | header/nav", function (hooks) {
 
     assert.equal(
       window.localStorage.getItem("emailNotificationsHighlightIsShown"),
-      null
+      null,
     );
 
     assert.dom("[data-test-user-menu-highlight]").exists("highlight is shown");
@@ -82,7 +85,7 @@ module("Integration | Component | header/nav", function (hooks) {
       .hasPseudoElementStyle(
         "after",
         { content: '"New"' },
-        "highlighted link has the correct class and pseudoElement text"
+        "highlighted link has the correct class and pseudoElement text",
       );
 
     // close and reopen the menu