Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New Contextual Menu component #1850

Merged
merged 11 commits into from Mar 4, 2024
Merged

New Contextual Menu component #1850

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fcad149
First iteration of the Contextual Menu
GomezIvann Feb 23, 2024
73ccfa1
New prop & Unit testing
GomezIvann Feb 26, 2024
ebfffce
Uploading jest tests
GomezIvann Feb 27, 2024
ceed335
Merge branch 'master' into gomezivann/contextual-menu
GomezIvann Feb 27, 2024
3ddfe16
Contextual Menu update
GomezIvann Feb 27, 2024
4488a44
Merge branch 'gomezivann/contextual-menu' of https://github.com/dxc-t…
GomezIvann Feb 27, 2024
faf9d65
Updates based on feedback
GomezIvann Mar 4, 2024
02aa5cc
Updated test for new roles
GomezIvann Mar 4, 2024
1784074
New file name
GomezIvann Mar 4, 2024
174c8dd
Renamed type
GomezIvann Mar 4, 2024
d1a4df8
Updated stories
GomezIvann Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions lib/src/badge/types.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;

type ContextualProps = {
export type ContextualProps = {
/**
* Text to be placed in the badge.
*/
Expand All @@ -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.
*/
Expand All @@ -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.
*/
Expand Down
182 changes: 182 additions & 0 deletions lib/src/contextual-menu/ContextualMenu.stories.tsx
View file
Open in desktop
@@ -0,0 +1,182 @@
import React from "react";
import Title from "../../.storybook/components/Title";
import DxcContextualMenu from "./ContextualMenu";
import DxcContainer from "../container/Container";
import MenuItem from "./MenuItem";
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>
<MenuItem {...items[0]} selected={false} />
</ExampleContainer>
<Title title="Focus" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-focus">
<MenuItem {...items[0]} selected={false} />
</ExampleContainer>
<Title title="Hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<MenuItem {...items[0]} selected={false} />
</ExampleContainer>
<Title title="Active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<MenuItem {...items[0]} selected={false} />
</ExampleContainer>
<Title title="Selected" theme="light" level={3} />
<ExampleContainer>
<MenuItem {...items[0]} selected />
</ExampleContainer>
<Title title="Selected hover" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-hover">
<MenuItem {...items[0]} selected />
</ExampleContainer>
<Title title="Selected active" theme="light" level={3} />
<ExampleContainer pseudoState="pseudo-active">
<MenuItem {...items[0]} selected />
</ExampleContainer>
</>
);
44 changes: 44 additions & 0 deletions lib/src/contextual-menu/ContextualMenu.test.js
View file
Open in desktop
@@ -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" }],
},
];
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved

describe("Context menu component tests", () => {
test("Context menu renders with correct aria attributes", () => {
const { getAllByRole, getByRole } = render(<DxcContextualMenu items={items} defaultSelectedItemIndex={0} />);
const renderedItems = getAllByRole("menuitem");
expect(renderedItems.length).toBe(4);
expect(renderedItems[0].getAttribute("aria-selected")).toBeTruthy();
expect(getByRole("menu")).toBeTruthy();
});
test("Context menu (with sections) renders with correct aria attributes", () => {
const { getAllByRole, getByRole } = render(<DxcContextualMenu items={sections} defaultSelectedItemIndex={4} />);
const renderedItems = getAllByRole("menuitem");
expect(renderedItems.length).toBe(6);
expect(renderedItems[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("menuitem");
fireEvent.click(item);
expect(test[0].onSelect).toHaveBeenCalled();
});
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
});
113 changes: 113 additions & 0 deletions lib/src/contextual-menu/ContextualMenu.tsx
View file
Open in desktop
@@ -0,0 +1,113 @@
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 MenuItem from "./MenuItem";

const DxcContextualMenu = ({ items, defaultSelectedItemIndex = -1 }: MenuPropsType) => {
const [selectedItemIndex, setSelectedItemIndex] = useState<number>(defaultSelectedItemIndex);

const renderSingleItem = (item: Item, index: number) => (
<Li key={`option-${index}`}>
<MenuItem
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
{...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 key={`option-${currentSectionIndex}`}>
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
{section.title != null && <Title>{section.title}</Title>}
<Section role="group">
{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;