feat(navigation, navigation-logo, navigation-user): Add navigation, n…

…avigation-logo & navigation-user components. (#6873) **Related Issue:** #6531 ## Summary This PR adds the following components: - calcite-navigation - calcite-navigation-user - calcite-navigation-logo Co-authored by @macandcheese Extracted from #6829 ## calcite-navigation  ### Usage #### Basic ```html <calcite-shell> <calcite-navigation slot="header"> <calcite-chip-group slot="content-center"> <calcite-chip>nav item 1</calcite-chip> <calcite-chip>nav item 2</calcite-chip> <calcite-chip>nav item 3</calcite-chip> </calcite-chip-group> </calcite-navigation> </calcite-shell> ``` ### Properties | Property | Attribute | Description | Type | Default | | -------------------- | ------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ----------- | | `label` _(required)_ | `label` | When `navigationAction` is `true`, specifies the label of the `calcite-action`. | `string` | `undefined` | | `navigationAction` | `navigation-action` | When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. | `boolean` | `false` | ### Events | Event | Description | Type | | ------------------------------- | ----------------------------------------------------------------------------------- | ------------------- | | `calciteNavigationActionSelect` | When `navigationAction` is true, emits when the displayed action selection changes. | `CustomEvent<void>` | ### Methods #### `setFocus() => Promise<void>` When `navigation-action` is `true`, sets focus on the component's action element. ##### Returns Type: `Promise<void>` ### CSS Custom Properties | Name | Description | | ----------------------------------- | ---------------------------------------------------- | | `--calcite-navigation-background` | Specifies the background color of the component. | | `--calcite-navigation-border-color` | Specifies the border color of the component. | | `--calcite-navigation-width` | Specifies the width of the component's content area. | ### Dependencies #### Depends on - [calcite-action](../action) ---------------------------------------------- ## calcite-navigation-logo  ### Usage #### Basic ```html <calcite-navigation-logo active thumbnail="./_assets/images/esri-logo.svg"></calcite-navigation-user> ``` ### Properties | Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | | `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | | `description` | `description` | A description for the component, which displays below the `heading`. | `string` | `undefined` | | `heading` | `heading` | Specifies heading text for the component, such as a product or organization name. | `string` | `undefined` | | `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | | `label` | `label` | Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | | `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | | `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | | `thumbnail` | `thumbnail` | Specifies the `src` to an image. | `string` | `undefined` | ### Methods #### `setFocus() => Promise<void>` Sets focus on the component. ##### Returns Type: `Promise<void>` ---------------------------------------------- ## calcite-navigation-user  ### Usage #### Basic ```html <calcite-navigation-user full-name="Jhon Doe" user-id="Jhon123" active></calcite-navigation-user> ``` ### Properties | Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- | | `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | | `fullName` | `full-name` | Specifies the full name of the user. | `string` | `undefined` | | `label` | `label` | Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | | `textDisabled` | `text-disabled` | When `true`, hides the `fullName` and `username` contents. | `boolean` | `false` | | `thumbnail` | `thumbnail` | Specifies the`src` to an image (remember to add a token if the user is private). | `string` | `undefined` | | `userId` | `user-id` | Specifies the unique id of the user. | `string` | `undefined` | | `username` | `username` | Specifies the username of the user. | `string` | `undefined` | ### Methods #### `setFocus() => Promise<void>` Sets focus on the component. ##### Returns Type: `Promise<void>` ### Dependencies #### Depends on - [calcite-avatar](../avatar) --------- Co-authored-by: Adam <[email protected]> Co-authored-by: Adam Tirella <[email protected]>
Esri · May 22, 2023 · 167f9f8 · 167f9f8
1 parent 1fd5b9b
commit 167f9f8
Show file tree

Hide file tree

Showing 44 changed files with 2,395 additions and 156 deletions.
diff --git a/src/components/menu-item/menu-item.e2e.ts b/src/components/menu-item/menu-item.e2e.ts
@@ -14,7 +14,6 @@ describe("calcite-menu-item", () => {
         propertyName: "active",
         value: "true"
       },
-
       {
         propertyName: "target",
         value: "_blank"

diff --git a/src/components/menu-item/menu-item.scss b/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;

diff --git a/src/components/menu-item/menu-item.stories.ts b/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"

diff --git a/src/components/menu-item/readme.md b/src/components/menu-item/readme.md
@@ -1,4 +1,4 @@
-# calcite-nav-menu-item
+# calcite-menu-item
 
 <!-- Auto Generated Below -->
 

diff --git a/src/components/menu/menu.stories.ts b/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>`;
diff --git a/src/components/menu/readme.md b/src/components/menu/readme.md
@@ -1,4 +1,4 @@
-# calcite-nav-menu
+# calcite-menu
 
 <!-- Auto Generated Below -->
 

diff --git a/src/components/navigation-logo/navigation-logo.e2e.ts b/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>`);
+  });
+});
diff --git a/src/components/navigation-logo/navigation-logo.scss b/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);
+}
diff --git a/src/components/navigation-logo/navigation-logo.stories.ts b/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 })}"
+/>`;