feat(menu, menu-item): Adds menu & menu-item components.

src/components/menu-item/Usage/Basic.md

@@ -0,0 +1,3 @@
+```html
+<calcite-menu> <calcite-menu-item text="Nature"> </calcite-menu-item></calcite-menu>
+```

src/components/menu-item/Usage/Nested-With-Href.md

@@ -0,0 +1,9 @@
+Nested SubMenu with href.
+
+```html
+<calcite-menu>
+  <calcite-menu-item text="Nature" href="#">
+    <calcite-menu-item text="Mountains" slot="sub-menu-item"> </calcite-menu-item>
+  </calcite-menu-item>
+</calcite-menu>
+```

src/components/menu-item/interfaces.ts

@@ -0,0 +1,5 @@
+export interface MenuItemCustomEvent {
+  event: KeyboardEvent;
+  children?: HTMLCalciteMenuItemElement[];
+  isSubMenuOpen?: boolean;
+}

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

@@ -0,0 +1,83 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+
+describe("calcite-menu-item", () => {
+  describe("renders", () => {
+    renders("calcite-menu-item", { display: "flex" });
+  });
+
+  it("reflects", async () =>
+    reflects("calcite-menu-item", [
+      {
+        propertyName: "active",
+        value: "true"
+      },
+
+      {
+        propertyName: "target",
+        value: "_blank"
+      }
+    ]));
+
+  describe("honors hidden attribute", () => {
+    hidden("calcite-menu-item");
+  });
+
+  describe("accessible", () => {
+    accessible(html`<calcite-menu> <calcite-menu-item text="calcite"> </calcite-menu-item> </calcite-menu>`);
+  });
+
+  it("is focusable", () => focusable("calcite-menu-item"));
+
+  //todo : debug why calcite-menu-item requires calite-menu as parent for the click to emit event in test.
+  it("should emit calciteMenuItemSelect event on user click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-menu>
+        <calcite-menu-item id="Nature" text="Nature" href="#nature"> </calcite-menu-item>
+      </calcite-menu>`
+    );
+
+    const menuItem = await page.find("calcite-menu-item");
+    const eventSpy = await menuItem.spyOnEvent("calciteMenuItemSelect");
+
+    await menuItem.click();
+    await page.waitForChanges();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("Nature");
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+  });
+
+  it("should emit calciteMenuItemSelect event when user select the text area of the component using Enter or Space key", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-menu>
+        <calcite-menu-item id="Nature" text="Nature" href="#nature">
+          <calcite-menu-item id="Mountains" text="Mountains" slot="sub-menu-item"> </calcite-menu-item>
+          <calcite-menu-item id="Rivers" text="Rivers" slot="sub-menu-item"> </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu>
+    `);
+
+    const element = await page.find("calcite-menu-item");
+    const eventSpy = await element.spyOnEvent("calciteMenuItemSelect");
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("Nature");
+    expect(eventSpy).not.toHaveReceivedEvent();
+
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(eventSpy).toHaveReceivedEventTimes(2);
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("Nature");
+    expect(eventSpy).toHaveReceivedEventTimes(2);
+  });
+});

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

@@ -0,0 +1,191 @@
+:host {
+  @apply flex
+  items-center 
+  relative 
+  box-border;
+  flex-shrink: 0;
+  block-size: 100%;
+  & .container,
+  & .item-content,
+  & a {
+    min-block-size: theme("spacing.12");
+  }
+}
+
+:host([layout="vertical"]) {
+  inline-size: 100%;
+}
+
+.container,
+.item-content {
+  display: flex;
+  flex-direction: row;
+  block-size: 100%;
+  inline-size: 100%;
+  align-items: stretch;
+}
+
+a {
+  @apply flex
+  items-center
+  relative
+  justify-center
+  cursor-pointer 
+  outline-none
+  text-0
+  text-color-2 box-border bg-foreground-1;
+  text-decoration: none;
+  border-block-end: theme("spacing[0.5]") solid transparent;
+  padding-block-start: theme("spacing[0.5]");
+  padding-inline: 1rem;
+  block-size: 100%;
+  &:hover {
+    @apply bg-foreground-2 text-color-2;
+  }
+  &:focus {
+    @apply bg-foreground-2 text-color-2 focus-inset;
+  }
+  &:active {
+    @apply bg-foreground-3 text-color-1;
+  }
+  & span {
+    display: inline-flex;
+  }
+  &.layout--vertical {
+    padding-block: 1rem;
+    inline-size: 100%;
+    display: flex;
+    justify-content: flex-start;
+    border-block-end: 0;
+    border-inline-end: theme("spacing.1") solid transparent;
+  }
+}
+
+:host([active]) a {
+  @apply text-color-1;
+  border-color: var(--calcite-ui-brand);
+  .icon {
+    --calcite-ui-icon-color: var(--calcite-ui-brand);
+  }
+}
+
+.icon--start {
+  margin-inline-end: 0.75rem;
+}
+
+.icon--end {
+  margin-inline-start: 0.75rem;
+}
+
+.icon--dropdown {
+  margin-inline: auto 0px;
+  padding-inline-start: 0.5rem;
+  --calcite-ui-icon-color: var(--calcite-ui-text-3);
+  position: relative;
+}
+
+:host([layout="vertical"]) .icon--dropdown {
+  inset-inline-start: theme("spacing.1");
+}
+
+.icon--breadcrumb {
+  padding-inline-start: 0.5rem;
+  margin-inline-end: 0px;
+  --calcite-ui-icon-color: var(--calcite-ui-text-3);
+}
+
+:host([breadcrumb]) a {
+  padding-inline-end: 0.75rem;
+}
+
+calcite-action {
+  block-size: auto;
+  position: relative;
+  border-inline-start: 1px solid var(--calcite-ui-foreground-1);
+  &:after {
+    display: block;
+    inline-size: 1px;
+    content: "";
+    inset-block: theme("spacing.3");
+    background-color: var(--calcite-ui-border-3);
+    position: absolute;
+    inset-inline-start: -1px;
+  }
+  &:hover:after {
+    block-size: 100%;
+    inset-block: 0;
+  }
+}
+
+a:focus ~ calcite-action,
+a:hover ~ calcite-action {
+  @apply text-color-1;
+  border-inline-start: 1px solid var(--calcite-ui-border-3);
+}
+
+.container:hover .dropdown-action {
+  @apply bg-foreground-2;
+}
+
+.dropdown-menu-items {
+  border: 1px solid var(--calcite-ui-border-3);
+  position: absolute;
+  background: var(--calcite-ui-foreground-1);
+  block-size: auto;
+  flex-direction: column;
+  min-inline-size: 100%;
+  display: none;
+  overflow: visible;
+  inset-block-start: 100%;
+  z-index: theme("zIndex.dropdown");
+  &.open {
+    display: block;
+  }
+  &.nested {
+    inset-block-start: -1px;
+    position: absolute;
+    transform: translateX(calc(100% - 2px));
+  }
+}
+
+.parent--vertical {
+  flex-direction: column;
+}
+
+.dropdown--vertical.dropdown-menu-items {
+  position: relative;
+  border-radius: 0;
+  box-shadow: none;
+  inset-block-start: 0;
+  transform: none;
+  &:last-of-type {
+    border-inline: 0;
+  }
+}
+
+:host([slot="sub-menu-item"]) .parent--vertical {
+  padding-inline-start: theme("spacing.7");
+}
+
+.dropdown-menu-items.is-rtl.nested {
+  transform: translateX(calc(-100% + 2px));
+}
+
+.dropdown--vertical.dropdown-menu-items.is-rtl.nested {
+  transform: none;
+}
+
+.hover-href-icon {
+  opacity: 0;
+  padding-inline-start: 2rem;
+  margin-inline-start: auto;
+  transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
+  inset-inline-end: 0.25rem;
+  position: relative;
+}
+
+a:focus .hover-href-icon,
+a:hover .hover-href-icon {
+  opacity: 1;
+  inset-inline-end: -0.25rem;
+}

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

@@ -0,0 +1,72 @@
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { select, text } from "@storybook/addon-knobs";
+
+export default {
+  title: "Components/Menu Item",
+  parameters: {
+    notes: readme
+  },
+  ...storyFilters()
+};
+
+export const simple = (): string => html` <calcite-menu>
+  <calcite-menu-item
+    text="${text("text", "My nav item")}"
+    src="${text("src", "")}"
+    href="${text("href", "")}"
+    rel="${text("rel", "")}"
+    target="${text("target", "")}"
+    label="${text("label", "")}"
+    ${boolean("active", false)}
+    ${boolean("breadcrumb", false)}
+    ${boolean("text-enabled", true)}
+  />
+</calcite-menu>`;
+
+export const iconStart = (): string => html` <calcite-menu>
+  <calcite-menu-item
+    text="${text("text", "My nav item")}"
+    src="${text("src", "")}"
+    href="${text("href", "")}"
+    rel="${text("rel", "")}"
+    target="${text("target", "")}"
+    label="${text("label", "")}"
+    icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    ${boolean("active", false)}
+    ${boolean("breadcrumb", false)}
+    ${boolean("text-enabled", true)}
+  />
+</calcite-menu>`;
+
+export const iconEnd = (): string => html` <calcite-menu>
+  <calcite-menu-item
+    text="${text("text", "My nav item")}"
+    src="${text("src", "")}"
+    href="${text("href", "")}"
+    rel="${text("rel", "")}"
+    target="${text("target", "")}"
+    label="${text("label", "")}"
+    icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    ${boolean("active", false)}
+    ${boolean("breadcrumb", false)}
+    ${boolean("text-enabled", true)}
+  />
+</calcite-menu>`;
+
+export const iconsBoth = (): string => html` <calcite-menu>
+  <calcite-menu-item
+    text="${text("text", "My nav item")}"
+    src="${text("src", "")}"
+    href="${text("href", "")}"
+    rel="${text("rel", "")}"
+    target="${text("target", "")}"
+    label="${text("label", "")}"
+    icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    ${boolean("active", false)}
+    ${boolean("breadcrumb", false)}
+    ${boolean("text-enabled", true)}
+  />
+</calcite-menu>`;