New Contextual Menu component

lib/src/badge/types.tsx

@@ -1,6 +1,6 @@
 type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 
-type ContextualProps = {
+export type ContextualProps = {
   /**
    * Text to be placed in the badge.
    */
@@ -19,7 +19,7 @@ type ContextualProps = {
   color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
 };
 
-type NotificationProps = {
+export type NotificationProps = {
   /**
    * Text to be placed in the badge.
    */
@@ -38,7 +38,7 @@ type NotificationProps = {
   color?: never;
 };
 
-type CommonProps = {
+export type CommonProps = {
   /**
    * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
    */

lib/src/contextual-menu/ContextualMenu.stories.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import DxcContextualMenu from "./ContextualMenu";
+import DxcContainer from "../container/Container";
+import MenuItemAction from "./MenuItemAction";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Contextual Menu",
+  component: DxcContextualMenu,
+};
+
+const key_icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
+    <path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z" />
+  </svg>
+);
+
+const fav_icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
+    <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" />
+  </svg>
+);
+
+const items = [{ label: "Item 1" }, { label: "Item 2" }, { label: "Item 3" }, { label: "Item 4" }];
+
+const sections = [
+  {
+    title: "Team repositories",
+    items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
+  },
+  {
+    items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
+  },
+];
+
+const itemsWithIcon = [
+  {
+    label: "Item 1",
+    icon: key_icon,
+  },
+  {
+    label: "Item 2",
+    icon: fav_icon,
+  },
+];
+
+const itemsWithSlot = [
+  {
+    label: "Item 1",
+    slot: <DxcContextualMenu.Badge color="green" label="New" />,
+  },
+  {
+    label: "Item 2",
+    slot: (
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10.6667 10.6667H1.33333V1.33333H6V0H1.33333C0.593333 0 0 0.6 0 1.33333V10.6667C0 11.4 0.593333 12 1.33333 12H10.6667C11.4 12 12 11.4 12 10.6667V6H10.6667V10.6667ZM7.33333 0V1.33333H9.72667L3.17333 7.88667L4.11333 8.82667L10.6667 2.27333V4.66667H12V0H7.33333Z"
+          fill="#323232"
+        />
+      </svg>
+    ),
+  },
+];
+
+const sectionsWithScroll = [
+  {
+    title: "Team repositories",
+    items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
+  },
+  {
+    items: [
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+      { label: "Approved locations" },
+    ],
+  },
+];
+
+const itemsWithTruncatedText = [
+  {
+    label: "Item with a very long label that should be truncated",
+    slot: <DxcContextualMenu.Badge color="green" label="New" />,
+    icon: key_icon,
+  },
+  {
+    label: "Item 2",
+    slot: (
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10.6667 10.6667H1.33333V1.33333H6V0H1.33333C0.593333 0 0 0.6 0 1.33333V10.6667C0 11.4 0.593333 12 1.33333 12H10.6667C11.4 12 12 11.4 12 10.6667V6H10.6667V10.6667ZM7.33333 0V1.33333H9.72667L3.17333 7.88667L4.11333 8.82667L10.6667 2.27333V4.66667H12V0H7.33333Z"
+          fill="#323232"
+        />
+      </svg>
+    ),
+    icon: fav_icon,
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContextualMenu items={items} />
+    </ExampleContainer>
+    <Title title="With sections" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="300px">
+        <DxcContextualMenu items={sections} />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="With icons" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="300px">
+        <DxcContextualMenu items={itemsWithIcon} defaultSelectedItemIndex={0} />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="With slot" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="300px">
+        <DxcContextualMenu items={itemsWithSlot} />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="With label truncated" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="300px">
+        <DxcContextualMenu items={itemsWithTruncatedText} />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="With scroll" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer height="300px" width="300px">
+        <DxcContextualMenu items={sectionsWithScroll} />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="Width doesn't go below 248px" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="200px">
+        <DxcContextualMenu items={items} />
+      </DxcContainer>
+    </ExampleContainer>
+  </>
+);
+
+export const MenuItemStates = () => (
+  <>
+    <Title title="Default" theme="light" level={3} />
+    <ExampleContainer>
+      <MenuItemAction {...items[0]} selected={false} />
+    </ExampleContainer>
+    <Title title="Focus" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-focus">
+      <MenuItemAction {...items[0]} selected={false} />
+    </ExampleContainer>
+    <Title title="Hover" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <MenuItemAction {...items[0]} selected={false} />
+    </ExampleContainer>
+    <Title title="Active" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-active">
+      <MenuItemAction {...items[0]} selected={false} />
+    </ExampleContainer>
+    <Title title="Selected" theme="light" level={3} />
+    <ExampleContainer>
+      <MenuItemAction {...items[0]} selected />
+    </ExampleContainer>
+    <Title title="Selected hover" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <MenuItemAction {...items[0]} selected />
+    </ExampleContainer>
+    <Title title="Selected active" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-active">
+      <MenuItemAction {...items[0]} selected />
+    </ExampleContainer>
+  </>
+);

lib/src/contextual-menu/ContextualMenu.test.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import DxcContextualMenu from "./ContextualMenu.tsx";
+
+const items = [{ label: "Item 1" }, { label: "Item 2" }, { label: "Item 3" }, { label: "Item 4" }];
+
+const sections = [
+  {
+    title: "Team repositories",
+    items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
+  },
+  {
+    items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
+  },
+];
+
+describe("Context menu component tests", () => {
+  test("Context menu renders with correct aria attributes", () => {
+    const { getAllByRole, getByRole } = render(<DxcContextualMenu items={items} defaultSelectedItemIndex={0} />);
+    expect(getAllByRole("menuitem").length).toBe(4);
+    const actions = getAllByRole("button");
+    expect(actions[0].getAttribute("aria-selected")).toBeTruthy();
+    expect(getByRole("menu")).toBeTruthy();
+  });
+  test("Context menu (with sections) renders with correct aria attributes", () => {
+    const { getAllByRole } = render(<DxcContextualMenu items={sections} defaultSelectedItemIndex={4} />);
+    expect(getAllByRole("menuitem").length).toBe(6);
+    const actions = getAllByRole("button");
+    expect(actions[4].getAttribute("aria-selected")).toBeTruthy();
+    expect(getAllByRole("group").length).toBe(2);
+  });
+  test("onSelect event from each item is called correctly", () => {
+    const test = [
+      {
+        label: "Tested item",
+        onSelect: jest.fn(),
+      },
+    ];
+    const { getByRole } = render(<DxcContextualMenu items={test} />);
+    const item = getByRole("button");
+    fireEvent.click(item);
+    expect(test[0].onSelect).toHaveBeenCalled();
+  });
+});

lib/src/contextual-menu/ContextualMenu.tsx

@@ -0,0 +1,111 @@
+import React, { useState, Fragment } from "react";
+import styled from "styled-components";
+import CoreTokens from "../common/coreTokens";
+import MenuPropsType, { Item, Section as SectionType, BadgeProps as BadgePropsType } from "./types";
+import DxcBadge from "../badge/Badge";
+import MenuItemAction from "./MenuItemAction";
+
+const DxcContextualMenu = ({ items, defaultSelectedItemIndex = -1 }: MenuPropsType) => {
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number>(defaultSelectedItemIndex);
+
+  const renderSingleItem = (item: Item, index: number) => (
+    <Li key={`option-${index}`} role="menuitem">
+      <MenuItemAction
+        {...item}
+        selected={selectedItemIndex === index}
+        onSelect={() => {
+          setSelectedItemIndex(index);
+          item.onSelect?.();
+        }}
+      />
+    </Li>
+  );
+
+  let accLength = 0;
+  const renderSection = (section: SectionType, currentSectionIndex: number, items: SectionType[]) => {
+    const startingIndex = accLength;
+    accLength += section.items.length;
+    return (
+      <Fragment key={`separator-${currentSectionIndex}`}>
+        <Li role="group">
+          {section.title != null && <Title>{section.title}</Title>}
+          <Section>{section.items.map((item, index) => renderSingleItem(item, startingIndex + index))}</Section>
+        </Li>
+        {currentSectionIndex !== items.length - 1 && <Divider aria-hidden />}
+      </Fragment>
+    );
+  };
+
+  return (
+    <Menu role="menu">
+      {items.map((item: Item | SectionType, index: number, items: MenuPropsType["items"]) =>
+        "items" in item ? renderSection(item, index, items as SectionType[]) : renderSingleItem(item, index)
+      )}
+    </Menu>
+  );
+};
+
+const Menu = styled.ul`
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid ${CoreTokens.color_grey_200};
+  border-radius: 0.25rem;
+  padding: ${CoreTokens.spacing_16} ${CoreTokens.spacing_8};
+
+  display: grid;
+  gap: ${CoreTokens.spacing_4};
+  min-width: 248px;
+  max-height: 100%;
+  background-color: ${CoreTokens.color_white};
+
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: ${CoreTokens.color_grey_700};
+    border-radius: 0.25rem;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: ${CoreTokens.color_grey_300};
+    border-radius: 0.25rem;
+  }
+`;
+
+const Li = styled.li`
+  display: grid;
+`;
+
+const Section = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: ${CoreTokens.spacing_4};
+`;
+
+const Title = styled.h2`
+  margin: 0 0 ${CoreTokens.spacing_4} 0;
+  padding: ${CoreTokens.spacing_4};
+  color: ${CoreTokens.color_grey_900};
+  font-family: ${CoreTokens.type_sans};
+  font-size: ${CoreTokens.type_scale_03};
+  font-weight: ${CoreTokens.type_semibold};
+  line-height: 24px;
+
+  & + ul > li > button {
+    padding-left: ${CoreTokens.spacing_12} !important;
+  }
+`;
+
+const Divider = styled.hr`
+  margin: ${CoreTokens.spacing_4} 0;
+  border: none;
+  height: 1px;
+  background: ${CoreTokens.color_grey_200};
+`;
+
+DxcContextualMenu.Badge = (props: BadgePropsType) => <DxcBadge {...props} size="small" />;
+
+export default DxcContextualMenu;