feat(navigation, navigation-logo, navigation-user): Add navigation, navigation-logo & navigation-user components.

src/components/menu-item/menu-item.e2e.ts

@@ -14,7 +14,6 @@ describe("calcite-menu-item", () => {
         propertyName: "active",
         value: "true"
       },
-
       {
         propertyName: "target",
         value: "_blank"

src/components/menu-item/menu-item.scss

@@ -2,8 +2,7 @@
   @apply flex
   items-center 
   relative 
-  box-border
-  h-full;
+  box-border;
   flex-shrink: 0;
   & .container,
   & .item-content,
@@ -16,6 +15,10 @@
   @apply w-full;
 }
 
+:host(:not([layout="vertical"])) {
+  @apply h-full;
+}
+
 .container,
 .item-content {
   @apply flex flex-row w-full h-full items-stretch;

src/components/menu-item/menu-item.stories.ts

@@ -13,7 +13,7 @@ export default {
 
 export const simple = (): string => html` <calcite-menu>
   <calcite-menu-item
-    text="${text("text", "My nav item")}"
+    text="${text("text", "Menu item")}"
     src="${text("src", "")}"
     href="${text("href", "")}"
     rel="${text("rel", "")}"
@@ -26,7 +26,7 @@ export const simple = (): string => html` <calcite-menu>
 
 export const iconStart = (): string => html` <calcite-menu>
   <calcite-menu-item
-    text="${text("text", "My nav item")}"
+    text="${text("text", "Menu item")}"
     src="${text("src", "")}"
     href="${text("href", "")}"
     rel="${text("rel", "")}"
@@ -40,7 +40,7 @@ export const iconStart = (): string => html` <calcite-menu>
 
 export const iconEnd = (): string => html` <calcite-menu>
   <calcite-menu-item
-    text="${text("text", "My nav item")}"
+    text="${text("text", "Menu item")}"
     src="${text("src", "")}"
     href="${text("href", "")}"
     rel="${text("rel", "")}"
@@ -54,7 +54,7 @@ export const iconEnd = (): string => html` <calcite-menu>
 
 export const iconsBoth = (): string => html` <calcite-menu>
   <calcite-menu-item
-    text="${text("text", "My nav item")}"
+    text="${text("text", "Menu item")}"
     src="${text("src", "")}"
     href="${text("href", "")}"
     rel="${text("rel", "")}"
@@ -69,7 +69,7 @@ export const iconsBoth = (): string => html` <calcite-menu>
 
 export const darkModeRTL_TestOnly = (): string =>
   html`<calcite-menu-item
-    text="My nav item"
+    text="Menu item"
     active
     dir="rtl"
     class="calcite-mode-dark"

src/components/menu-item/readme.md

@@ -1,4 +1,4 @@
-# calcite-nav-menu-item
+# calcite-menu-item
 
 <!-- Auto Generated Below -->
 

src/components/menu/menu.stories.ts

@@ -14,51 +14,51 @@ export default {
 export const simple = (): string => html` <calcite-menu
   layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
 >
-  <calcite-menu-item text="Example nav item 1" text-enabled></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 2" text-enabled active></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 3" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+  <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
 export const withNesting = (): string => html`<calcite-panel>
   <calcite-menu layout="${select("layout", ["horizontal", "vertical"], "horizontal")}">
-    <calcite-menu-item text="Example nav item 1" text-enabled></calcite-menu-item>
-    <calcite-menu-item text="Example nav item 2" text-enabled active></calcite-menu-item>
-    <calcite-menu-item text="Example nav item 3" text-enabled>
-      <calcite-menu-item slot="submenu-item" text="Example subnav item 1" text-enabled> </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Example subnav item 2" text-enabled>
-        <calcite-menu-item slot="submenu-item" text="Example subnav item 1" text-enabled></calcite-menu-item>
-        <calcite-menu-item slot="submenu-item" text="Example subnav item 2" text-enabled></calcite-menu-item>
-        <calcite-menu-item slot="submenu-item" text="Example subnav item 3" text-enabled></calcite-menu-item>
+    <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+    <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+    <calcite-menu-item text="Example item 3" text-enabled>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled></calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Example subnav item 3" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled> </calcite-menu-item>
     </calcite-menu-item>
-    <calcite-menu-item text="Example nav item 4" text-enabled></calcite-menu-item> </calcite-menu
+    <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
 ></calcite-panel>`;
 
 export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
-  <calcite-menu-item text="My nav item" href="#mynav" open>
+  <calcite-menu-item text="Item" href="#item" open>
     <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
   </calcite-menu-item>
 </calcite-menu>`;
 
 export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
-  <calcite-menu-item text="My nav item" href="#mynav" open>
+  <calcite-menu-item text="Item" href="#item" open>
     <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
   </calcite-menu-item>
 </calcite-menu>`;
 
 export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" class="calcite-mode-dark">
-  <calcite-menu-item text="Example nav item 1" text-enabled></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 2" text-enabled active></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 3" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+  <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
 export const verticalLyoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
   layout="vertical"
   dir="rtl"
   class="calcite-mode-dark"
 >
-  <calcite-menu-item text="Example nav item 1" text-enabled></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 2" text-enabled active></calcite-menu-item>
-  <calcite-menu-item text="Example nav item 3" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+  <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;

src/components/menu/readme.md

@@ -1,4 +1,4 @@
-# calcite-nav-menu
+# calcite-menu
 
 <!-- Auto Generated Below -->
 

src/components/navigation-logo/navigation-logo.e2e.ts

@@ -0,0 +1,40 @@
+import { html } from "../../../support/formatting";
+import { accessible, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+
+describe("calcite-navigation-logo", () => {
+  describe("renders", () => {
+    renders("calcite-navigation-logo", { display: "inline-flex" });
+  });
+
+  describe("honors hidden attribute", () => {
+    hidden("calcite-navigation-logo");
+  });
+
+  describe("accessible", () => {
+    accessible("calcite-navigation-logo");
+  });
+
+  it("reflects", () =>
+    reflects("calcite-navigation-logo", [
+      {
+        propertyName: "active",
+        value: "true"
+      },
+      {
+        propertyName: "href",
+        value: "#logo"
+      },
+      {
+        propertyName: "rel",
+        value: "external"
+      },
+      {
+        propertyName: "target",
+        value: "_self"
+      }
+    ]));
+
+  describe("is focusable", () => {
+    focusable(html`<calcite-navigation-logo href=" " heading="esri"></calcite-navigation-logo>`);
+  });
+});

src/components/navigation-logo/navigation-logo.scss

@@ -0,0 +1,70 @@
+:host {
+  @apply inline-flex outline-none;
+  & a {
+    @apply flex 
+    m-0 
+    items-center 
+    justify-center 
+    cursor-pointer 
+    transition-default 
+    focus-base 
+    no-underline;
+    border-block-end: 2px solid transparent;
+  }
+  & img {
+    @apply flex h-7 m-0;
+  }
+}
+
+a:hover,
+a:focus {
+  @apply bg-foreground-2;
+}
+
+a:focus {
+  @apply focus-inset;
+}
+
+a:active {
+  @apply bg-foreground-3;
+}
+
+img {
+  padding-inline: 1rem;
+}
+
+img ~ .container {
+  @apply ps-0;
+}
+
+:host(:active) a {
+  @apply text-color-1;
+}
+
+:host([active]) a {
+  @apply text-color-1;
+  border-color: var(--calcite-ui-brand);
+  --calcite-ui-icon-color: var(--calcite-ui-brand);
+}
+
+.container {
+  @apply flex 
+  flex-col 
+  truncate 
+  text-start;
+  padding-inline: 1rem;
+}
+
+.heading {
+  @apply text-0 
+  ms-0 
+  truncate
+  text-color-1
+  font-medium;
+  margin-block-start: 2px;
+}
+
+.description {
+  @apply text-color-2 truncate;
+  font-size: var(--calcite-font-size--1);
+}

src/components/navigation-logo/navigation-logo.stories.ts

@@ -0,0 +1,48 @@
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { text } from "@storybook/addon-knobs";
+
+export default {
+  title: "Components/Navigation/Navigation Logo",
+  parameters: {
+    notes: readme
+  },
+  ...storyFilters()
+};
+
+export const simple = (): string =>
+  html`<calcite-navigation-logo
+    description="${text("description", "City of AcmeCo")}"
+    heading="${text("heading", "ArcGIS Online")}"
+    thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+    ${boolean("active", false)}
+  />`;
+
+export const heading_TestOnly = (): string => html`<calcite-navigation-logo heading="ArcGIS Online" />`;
+
+export const description_TestOnly = (): string =>
+  html`<calcite-navigation-logo
+    description="City of AcmeCo"
+    thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+  />`;
+
+export const thumbnail_TestOnly = (): string =>
+  html`<calcite-navigation-logo thumbnail="${placeholderImage({ width: 50, height: 50 })}" />`;
+
+export const headingAndThumbnail_TestOnly = (): string => html`<calcite-navigation-logo
+  heading="ArcGIS Online"
+  thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+/>`;
+
+export const descriptionAndThumbnail_TestOnly = (): string => html`<calcite-navigation-logo
+  description="City of AcmeCo"
+  thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+/>`;
+
+export const All_TestOnly = (): string => html`<calcite-navigation-logo
+  heading="ArcGIS Online"
+  description="City of AcmeCo"
+  thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+/>`;