Dang-1822 / TopNavDropdown (MegaMenu redesign) (#380)

* TopNavDropdown

* more TopNavDropdown

* fix test

* nits

* add TopNavButton component

* nits & add active black bg

* nits & export TopNavButton

* story nits

* remove showmobilenav and cleanup of classes

* fix test

* change outline to dashed (not dotted)

* remove unused disabled class from item

* add one more item to top nav story

* update mdx docs and stories

* change topnav story to reflect current dashboard, with resources and username dropdowns

* remove old MegaMenu components

* nit: mainnav expand button centering

* focus visible nit

* nit

* fix

* package version & changelog

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## v2.0.0-beta.21
+
+### Features
+
+Adds the `TopNavDropdown` component that replaces the `MegaMenu` component
+
+### Breaking changes
+
+- the `MegaMenu` component is removed from the library
+
 ## v2.0.0-beta.20
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/MainNavigation/MainNavigation.vue

@@ -2,15 +2,15 @@
   <nav class="xl:min-h-full p-4 relative bg-white border-r-2 border-white-300">
     <button
       v-if="collapsible"
-      :class="['hidden xl:block w-7 h-7 rounded-full absolute -right-3 mt-3 z-10',
+      :class="['hidden xl:block w-7 h-7 rounded-full absolute -right-3.5 mt-3 z-10',
                'text-gray-500 bg-white border-2 border-white-300 transition-transform duration-100 ease-in',
                { 'transform -rotate-180': !expanded }]"
       :aria-expanded="expanded"
       @click="animateDrawer"
     >
       <ChevronLeft
         size="s"
-        class="m-auto"
+        class="m-auto mr-1.5"
       />
     </button>
     <ul

src/components/TopNavDropdown/TopNavButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <button class="type-small-700 text-gray-500 whitespace-nowrap h-[76px] px-8 hover:bg-gray-50 focus:outline-black focus:outline-dashed active:bg-black active:!text-white">
+    <div class="flex flex-col justify-center">
+      <div class="flex items-center">
+        <slot />
+        <div :class="{ 'ml-2': hasIcon }">
+          <slot name="icon" />
+        </div>
+      </div>
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'TopNavButton',
+  computed: {
+    hasIcon () {
+      return Boolean(this.$slots.icon);
+    }
+  }
+};
+</script>

src/components/TopNavDropdown/TopNavDropdown.mdx

@@ -0,0 +1,57 @@
+import {
+  Preview,
+  Story,
+  ArgsTable,
+  PRIMARY_STORY,
+} from "@storybook/addon-docs";
+import TopNavDropdown from "./TopNavDropdown.vue";
+import TopNavDropdownItem from "./TopNavDropdownItem.vue";
+
+# TopNavDropdown
+
+The TopNavDropdown component is used for displaying a big navigation menu with nested items displaying on hover.
+
+<Preview>
+  <Story id="components-top-nav-dropdown--primary" />
+</Preview>
+
+## How to Use
+
+The mega menu renders a semantic `nav` element. It is made to work with `TopNavDropdownItem` components. However, you can also write custom components for its slot.
+
+Example of using this component in a template, with a TopNavDropdownItem
+
+```html
+<TopNavDropdown title="Resources" navKey="">
+  <TopNavDropdownItem to="/settings/main/account">
+    Settings
+  </TopNavDropdownItem>
+</TopNavDropdown>
+```
+
+# TopNavDropdownItem
+
+The TopNavDropdownItem component is used for displaying a single item in the nested submenu that's displayed on hover.
+
+<Preview>
+  <Story id="components-top-nav-dropdown--item" />
+</Preview>
+
+## How to Use
+
+The TopNavDropdownItem component can render as a traditional link (hooked up to your app's routing) or as an anchor tag depending on if the link is internal to your app's routing or external.
+
+You can optionally provide an icon to display for the item in the `#icon` slot.
+
+Example of using this component in a template
+
+```html
+<TopNavDropdownItem to="/overview" navKey="">
+  <template #icon> <Signal /> </template>
+  API Status
+</TopNavDropdownItem>
+```
+
+## Props
+
+<ArgsTable story={PRIMARY_STORY} />