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

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

@@ -0,0 +1,64 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, hidden, reflects, renders } from "../../tests/commonTests";
+
+describe("calcite-nav-logo", () => {
+  describe("renders", () => {
+    renders("calcite-nav-logo", { display: "inline-flex" });
+  });
+
+  it("honors hidden attribute", () => hidden("calcite-nav-logo"));
+
+  describe("accessible", () => {
+    accessible("calcite-nav-logo");
+  });
+
+  it("reflects", () =>
+    reflects("calcite-nav-logo", [
+      {
+        propertyName: "active",
+        value: "true"
+      },
+      {
+        propertyName: "href",
+        value: "#logo"
+      },
+      {
+        propertyName: "textEnabled",
+        value: "true"
+      }
+    ]));
+
+  it("should emit calciteNavLogoSelect event on user click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-nav-logo text="esri" id="esri" text-enabled></calcite-nav-logo>`);
+
+    const element = await page.find("calcite-nav-logo");
+    const eventSpy = await element.spyOnEvent("calciteNavLogoSelect");
+
+    await element.click();
+    await page.waitForChanges();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("esri");
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+  });
+
+  it("should emit calciteNavLogoSelect event when user select using Enter & Space key", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-nav-logo text="esri" id="esri" text-enabled></calcite-nav-logo> `);
+
+    const element = await page.find("calcite-nav-logo");
+    const eventSpy = await element.spyOnEvent("calciteNavLogoSelect");
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("esri");
+    expect(eventSpy).not.toHaveReceivedEvent();
+
+    await page.keyboard.press("Enter");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("esri");
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+
+    await page.keyboard.press("Space");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("esri");
+    expect(eventSpy).toHaveReceivedEventTimes(2);
+  });
+});

src/components/nav-logo/nav-logo.scss

@@ -0,0 +1,54 @@
+: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 {
+  @apply px-4 pl-4;
+}
+img ~ .text-container {
+  @apply pl-0;
+}
+:host(:active) a {
+  @apply text-color-1;
+}
+:host([active]) a {
+  z-index: 9;
+
+  @apply text-color-1;
+  border-color: var(--calcite-ui-brand);
+  --calcite-ui-icon-color: var(--calcite-ui-brand);
+}
+
+.text-container {
+  @apply flex  px-4 truncate;
+  flex-direction: column;
+  text-align: start;
+}
+
+.logo-text {
+  @apply text-0 ml-0 truncate text-color-1;
+  font-weight: 500;
+  margin-block-start: 2px;
+}
+
+.logo-subtext {
+  @apply text-color-2 truncate;
+  font-size: var(--calcite-font-size--1);
+}

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

@@ -0,0 +1,70 @@
+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/Nav/Nav Logo",
+  parameters: {
+    notes: readme
+  },
+  ...storyFilters()
+};
+
+export const simple = (): string =>
+  html`<calcite-nav>
+    <calcite-nav-logo
+      slot="logo"
+      sub-text="${text("sub-text", "City of AcmeCo")}"
+      text="${text("text", "ArcGIS Online")}"
+      thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+      ${boolean("active", false)}
+      ${boolean("text-enabled", true)}
+    />
+  </calcite-nav-logo></calcite-nav>`;
+
+export const text_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo slot="logo" text="ArcGIS Online" />
+  </calcite-nav>
+</calcite-shell>`;
+
+export const subText_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo slot="logo" sub-text="City of AcmeCo" />
+  </calcite-nav>
+</calcite-shell>`;
+
+export const thumbnail_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo slot="logo" thumbnail="${placeholderImage({ width: 50, height: 50 })}" />
+  </calcite-nav>
+</calcite-shell>`;
+
+export const textAndThumbnail_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo slot="logo" text="ArcGIS Online" thumbnail="${placeholderImage({ width: 50, height: 50 })}" />
+  </calcite-nav>
+</calcite-shell>`;
+
+export const subTextAndThumbnail_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo
+      slot="logo"
+      sub-text="City of AcmeCo"
+      thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+    />
+  </calcite-nav>
+</calcite-shell>`;
+
+export const All_TestOnly = (): string => html` <calcite-shell>
+  <calcite-nav slot="header">
+    <calcite-nav-logo
+      slot="logo"
+      text="ArcGIS Online"
+      sub-text="City of AcmeCo"
+      thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+    />
+  </calcite-nav>
+</calcite-shell>`;

src/components/nav-logo/nav-logo.tsx

@@ -0,0 +1,105 @@
+import { Component, Element, EventEmitter, h, Host, Prop, Event } from "@stencil/core";
+import { CSS } from "./resources";
+
+@Component({
+  tag: "calcite-nav-logo",
+  styleUrl: "nav-logo.scss",
+  shadow: {
+    delegatesFocus: true
+  }
+})
+export class CalciteNavLogo {
+  //--------------------------------------------------------------------------
+  //
+  //  Element
+  //
+  //--------------------------------------------------------------------------
+  @Element() el: HTMLCalciteNavLogoElement;
+
+  //--------------------------------------------------------------------------
+  //
+  //  Public Properties
+  //
+  //--------------------------------------------------------------------------
+  /** When `true`, visually highlight the component */
+  @Prop({ reflect: true }) active: boolean;
+
+  /** Specifies the href destination of the component */
+  @Prop({ reflect: true }) href: string;
+
+  /** Specifies accesible label for the component */
+  @Prop() label: string;
+
+  /** Specifies the subtext to display, for example an organization or application description */
+  @Prop() subText: string;
+
+  /** Specifies the text to display, for example a product name */
+  @Prop() text: string;
+
+  /** When `true`, makes `text` and `subText` visible */
+  @Prop({ reflect: true }) textEnabled: boolean;
+
+  /** Specifies the `src` to an image  */
+  @Prop() thumbnail: string;
+
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+
+  /** Emits when user select the component. */
+  @Event() calciteNavLogoSelect: EventEmitter<void>;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+
+  private clickHandler = (): void => {
+    this.calciteNavLogoSelect.emit();
+  };
+
+  private keyDownHandler = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === " ") {
+      this.calciteNavLogoSelect.emit();
+      event.preventDefault();
+    }
+  };
+
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+      <Host>
+        <a
+          aria-label={this.label}
+          href={this.href}
+          onClick={this.clickHandler}
+          onKeyDown={this.keyDownHandler}
+          tabIndex={0}
+        >
+          {this.thumbnail && <img src={this.thumbnail} />}
+          {(this.text || this.subText) && this.textEnabled && (
+            <div class={CSS.textContainer}>
+              {this.text && this.textEnabled ? (
+                <span class={CSS.logoText} key={CSS.logoText}>
+                  {this.text}
+                </span>
+              ) : null}
+              {this.subText && this.textEnabled ? (
+                <span class={CSS.logoSubtext} key={CSS.logoSubtext}>
+                  {this.subText}
+                </span>
+              ) : null}
+            </div>
+          )}
+        </a>
+      </Host>
+    );
+  }
+}

src/components/nav-logo/readme.md

@@ -0,0 +1,25 @@
+# calcite-nav-logo
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property      | Attribute      | Description                                                                              | Type      | Default     |
+| ------------- | -------------- | ---------------------------------------------------------------------------------------- | --------- | ----------- |
+| `active`      | `active`       | When `true`, visually highlight the component                                            | `boolean` | `undefined` |
+| `href`        | `href`         | Specifies the href destination of the component                                          | `string`  | `undefined` |
+| `label`       | `label`        | Specifies accesible label for the component                                              | `string`  | `undefined` |
+| `subText`     | `sub-text`     | Specifies the subtext to display, for example an organization or application description | `string`  | `undefined` |
+| `text`        | `text`         | Specifies the text to display, for example a product name                                | `string`  | `undefined` |
+| `textEnabled` | `text-enabled` | When `true`, makes `text` and `subText` visible                                          | `boolean` | `undefined` |
+| `thumbnail`   | `thumbnail`    | Specifies the `src` to an image                                                          | `string`  | `undefined` |
+
+## Events
+
+| Event                  | Description                           | Type                |
+| ---------------------- | ------------------------------------- | ------------------- |
+| `calciteNavLogoSelect` | Emits when user select the component. | `CustomEvent<void>` |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

src/components/nav-logo/resources.ts

@@ -0,0 +1,5 @@
+export const CSS = {
+  textContainer: "text-container",
+  logoText: "logo-text",
+  logoSubtext: "logo-subtext"
+};

src/components/nav-logo/usage/Basic.md

@@ -0,0 +1,3 @@
+```html
+<calcite-nav-logo  active  thumbnail="./_assets/images/esri-logo.svg"></calcite-nav-user>
+```

src/components/nav-user/nav-user.e2e.ts

@@ -0,0 +1,59 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, hidden, reflects, renders } from "../../tests/commonTests";
+
+describe("calcite-nav-user", () => {
+  describe("renders", () => {
+    renders("calcite-nav-user", { display: "inline-flex" });
+  });
+
+  it("honors hidden attribute", () => hidden("calcite-nav-user"));
+
+  describe("accessible", () => {
+    accessible("calcite-nav-user");
+  });
+
+  it("reflects", () =>
+    reflects("calcite-nav-user", [
+      {
+        propertyName: "active",
+        value: "true"
+      },
+      {
+        propertyName: "hideText",
+        value: ""
+      }
+    ]));
+
+  it("should emit calciteNavUserSelect event on user click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-nav-user id="batman" username="batman"></calcite-nav-user> `);
+
+    const element = await page.find("calcite-nav-user");
+    const eventSpy = await element.spyOnEvent("calciteNavUserSelect");
+
+    await element.click();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("batman");
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+  });
+
+  it("should emit calciteNavUserSelect event when user select using Enter or Space key", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-nav-user username="batman" id="batman"></calcite-nav-user> `);
+
+    const element = await page.find("calcite-nav-user");
+    const eventSpy = await element.spyOnEvent("calciteNavUserSelect");
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("batman");
+    expect(eventSpy).not.toHaveReceivedEvent();
+
+    await page.keyboard.press("Enter");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("batman");
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+
+    await page.keyboard.press("Space");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("batman");
+    expect(eventSpy).toHaveReceivedEventTimes(2);
+  });
+});