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.

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

Create Menu component #2990

Open
wants to merge 46 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
6c6ef1d
add basic Menu component
luiqor Dec 12, 2024
3207989
enhance MenuItem
luiqor Dec 12, 2024
3cc4ccb
enhance styles for density 2
luiqor Dec 12, 2024
eb17c67
add nested menu items
luiqor Dec 14, 2024
7dbdaad
add isDropdown item
luiqor Dec 14, 2024
f46a4b7
replace isDropDown with dropDownIconVariant
luiqor Dec 14, 2024
c738a7a
add state logic
luiqor Dec 14, 2024
fde760b
replace Fragment with flatMap to fix MUI error
luiqor Dec 14, 2024
eaa88a2
replace isToggled handled in parent
luiqor Dec 14, 2024
e3d25a1
add onClick to stories
luiqor Dec 14, 2024
82497b8
refactor types for MenuItem
luiqor Dec 14, 2024
86f3f6e
add decorator with anchorEl to storybook
luiqor Dec 15, 2024
d9846f2
add Menu props
luiqor Dec 15, 2024
9e78bab
add defaultOnItemClick
luiqor Dec 15, 2024
b42a3b6
add stories
luiqor Dec 15, 2024
a959490
update stories onClicks
luiqor Dec 15, 2024
3e6988a
enhance style variants for menu item
luiqor Dec 15, 2024
0c3dfa0
remove min width
luiqor Dec 15, 2024
6868eb7
add custom menu positioning stories
luiqor Dec 15, 2024
a3acc96
add ability to remove items
luiqor Dec 15, 2024
836be19
enhance remove items styles and logic
luiqor Dec 15, 2024
bee008f
enhance stories docs to include arguments and description
luiqor Dec 15, 2024
d0d0126
add MenuItem enums
luiqor Dec 15, 2024
b3bdc35
add constants to Menu
luiqor Dec 15, 2024
091d3ba
add MenuItem to storybook
luiqor Dec 15, 2024
bcb6af3
enhance MenuItem documentation
luiqor Dec 15, 2024
b61c666
fix MenuItem checkbox
luiqor Dec 16, 2024
bc6b9b7
add initialy toggled functionallity
luiqor Dec 16, 2024
accdc9a
add toggleAsSingleItem
luiqor Dec 16, 2024
032f604
add menu items removal tests
luiqor Dec 16, 2024
83faba9
add Menu component tests
luiqor Dec 16, 2024
6323fe7
add menu item tests
luiqor Dec 16, 2024
2518256
add missing argTypes to storybook docs
luiqor Dec 16, 2024
45347c2
fix elements with click handlers must have at least one keyboard list…
luiqor Dec 17, 2024
5fb9b14
fix additional info line height
luiqor Dec 17, 2024
f3ff703
fix role button sonar issues
luiqor Dec 17, 2024
5675a26
fix tabIndex on graphics divs sonar issues
luiqor Dec 17, 2024
0782dc2
refactor divs to buttons to fix sonar issues
luiqor Dec 17, 2024
e2cf5e4
refactor defaultNoItemsMessage
luiqor Dec 17, 2024
d54af8e
refactor small code issues
luiqor Dec 18, 2024
7d4eedb
remove redundant usage of useCallbacks
luiqor Dec 18, 2024
f289a23
remove graphics click control logic
luiqor Dec 19, 2024
4727ca3
made Menu toggling controlled
luiqor Dec 19, 2024
a7639aa
remove checkbox logic tests as checkbox changed to be controlled outside
luiqor Dec 20, 2024
07e4fd3
refactor types imports
luiqor Dec 22, 2024
5349f62
refactor curly braces for multiline arrow funcs
luiqor Dec 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor small code issues
luiqor committed Dec 18, 2024
commit d54af8e1514cd271b059c6d16cac1f6e9db097b8
1 change: 0 additions & 1 deletion src/design-system/components/menu-item/MenuItem.tsx
Original file line number Diff line number Diff line change
@@ -72,7 +72,6 @@ const MenuItem: FC<MenuItemProps> = ({
isDisabled && 's2s-item--disabled'
)}
disabled={isDisabled}
key={title}
onClick={handleClick}
>
<div className='s2s-item__main-info-box'>
4 changes: 2 additions & 2 deletions src/design-system/components/menu/Menu.tsx
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@ const Menu: FC<MenuProps> = ({
isItemsRemovalEnabled = false,
...menuProps
}: MenuProps) => {
const [items, setItems] = useState(menuItems)
const [items, setItems] = useState<MenuItemProps[]>(menuItems)
const [toggledItemsTitles, setToggledItemsTitles] = useState<string[]>(
allowToggleMultipleItems
? menuItems
@@ -151,7 +151,7 @@ const Menu: FC<MenuProps> = ({
: undefined
}
/>,
...(item.nestedMenuItems && toggledItemsTitles.includes(item.title)
...(toggledItemsTitles.includes(item.title) && item.nestedMenuItems
? item.nestedMenuItems.map((nestedMenuItem) => (
<MenuItem
{...nestedMenuItem}
31 changes: 19 additions & 12 deletions tests/unit/design-system/components/menu/Menu.spec.jsx
Original file line number Diff line number Diff line change
@@ -26,10 +26,17 @@ const resourcesMenuItemsWithIcon = [{ title: 'Lesson', graphics: lessonIcon }]
const noItemsCustomMessage = 'No items available.'

describe('Menu Component', () => {
let anchor

beforeEach(() => {
render(<button data-testid='default-anchor' />)
anchor = screen.getByTestId('default-anchor')
})

test('should render menu items', () => {
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItems}
/>
@@ -43,7 +50,7 @@ describe('Menu Component', () => {
test('should remove item when removal is enabled', () => {
const { getByText } = render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItems}
isItemsRemovalEnabled={true}
@@ -61,7 +68,7 @@ describe('Menu Component', () => {
test('should show no items message when no items left and removal is enabled', () => {
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={[]}
noItemsMessage={noItemsCustomMessage}
@@ -77,14 +84,14 @@ describe('Menu Component', () => {
const handleClick = vi.fn((event) => setAnchorEl(event.currentTarget))

render(
<div>
<>
<button onClick={handleClick}>Open Menu</button>
<Menu
anchorEl={document.createElement('button')}
anchorEl={null}
setAnchorEl={setAnchorEl}
menuItems={resourcesMenuItems}
/>
</div>
</>
)

const button = screen.getByText('Open Menu')
@@ -97,7 +104,7 @@ describe('Menu Component', () => {
const defaultOnItemClick = vi.fn()
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItems}
defaultOnItemClick={defaultOnItemClick}
@@ -113,7 +120,7 @@ describe('Menu Component', () => {
const defaultOnItemClick = vi.fn()
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItemsWithCustomArgs}
defaultOnItemClick={defaultOnItemClick}
@@ -132,7 +139,7 @@ describe('Menu Component', () => {
const defaultOnItemClick = vi.fn()
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItemsWithNestedItems}
defaultOnItemClick={defaultOnItemClick}
@@ -150,7 +157,7 @@ describe('Menu Component', () => {
test('should show nested items when a menu item is clicked', () => {
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItemsWithNestedItems}
/>
@@ -166,7 +173,7 @@ describe('Menu Component', () => {
test('should display additional info when it is provided', () => {
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItemsWithAdditionalInfo}
/>
@@ -181,7 +188,7 @@ describe('Menu Component', () => {
test('should display icon when it is provided', () => {
render(
<Menu
anchorEl={document.createElement('div')}
anchorEl={anchor}
setAnchorEl={() => {}}
menuItems={resourcesMenuItemsWithIcon}
/>