v2.5.0

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "engines": {
     "node": "^18",
     "npm": "^9"
@@ -25,24 +25,24 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mui/lab": "5.0.0-alpha.134",
-    "@mui/material": "5.14.8",
+    "@mui/material": "5.14.10",
     "@mui/x-data-grid": "6.13.0",
     "@mui/x-data-grid-pro": "6.7.0",
     "@mui/x-date-pickers": "6.4.0",
     "@mui/x-license-pro": "6.0.4"
   },
   "devDependencies": {
-    "@babel/core": "7.22.15",
+    "@babel/core": "7.22.20",
     "@date-io/dayjs": "2.16.0",
-    "@date-io/moment": "2.16.1",
+    "@date-io/moment": "2.17.0",
     "@storybook/addon-actions": "7.0.18",
     "@storybook/addon-essentials": "7.0.24",
     "@storybook/addon-links": "7.4.0",
     "@storybook/addon-styling": "1.0.6",
     "@storybook/nextjs": "7.0.10",
     "@storybook/react": "7.0.24",
     "@storybook/test-runner": "0.10.0",
-    "@svgr/cli": "8.0.1",
+    "@svgr/cli": "8.1.0",
     "@types/node": "20.6.0",
     "@types/react": "18.2.11",
     "babel-loader": "9.1.3",
@@ -55,9 +55,9 @@
     "next": "12.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.0.10",
+    "storybook": "7.4.2",
     "typescript": "4.9.5",
-    "webpack": "5.83.0"
+    "webpack": "5.88.2"
   },
   "main": "index.js",
   "types": "index.d.ts",

src/components/DropdownMenu.tsx

@@ -9,7 +9,7 @@ import { TypographyProps } from './Typography';
 export interface DropdownProps {
   title: string;
   onSelect: (clickedItem: number) => void;
-  items: Array<{ id: number; title: string; icon?: any; menuItemProps?: Partial<MenuItemProps>  }>;
+  items: Array<{ id: number; title: string; icon?: any; menuItemProps?: Partial<MenuItemProps> }>;
   buttonProps?: Partial<ButtonProps>;
   subtitle?: string;
   menuItemProps?: Partial<MenuItemProps>;
@@ -46,9 +46,15 @@ const DropdownMenu = (props: DropdownProps): JSX.Element => {
         onClick={handleClick}
         {...props.buttonProps}
       >
-        {props.title}
+        {props.buttonProps?.children || props.title}
       </Button>
-      <Menu id="menu-list-grow" anchorEl={anchorEl} open={open} onClose={handleClose} {...props.menuProps}>
+      <Menu
+        id="menu-list-grow"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        {...props.menuProps}
+      >
         {props.subtitle && (
           <ListItemText primaryTypographyProps={{ ...props.textProps }} sx={{ pl: 1.5, pb: 0.5 }}>
             {props.subtitle}

src/icons/DoubleArrow.tsx

@@ -0,0 +1,15 @@
+import { createElement } from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+const DoubleArrow = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      d="M12 21V3m0 18 3-3m-3 3-3-3m3-15L9 6m3-3 3 3"
+      stroke="#192832"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+export default DoubleArrow;

src/icons/HandGrab.tsx

@@ -0,0 +1,22 @@
+import { createElement } from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+const HandGrab = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      d="M8 11V7.5a1.5 1.5 0 0 1 3 0V10m0-.5v-3a1.5 1.5 0 1 1 3 0V10m0-2.5a1.5 1.5 0 1 1 3 0V10"
+      stroke="#192832"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />,
+    <path
+      d="M17 9.5a1.5 1.5 0 0 1 3 0V14a6 6 0 0 1-6 6h-2 .208a6 6 0 0 1-5.012-2.7L7 17c-.312-.479-1.407-2.388-3.286-5.728A1.5 1.5 0 0 1 4.25 9.25a1.867 1.867 0 0 1 2.28.28L8 11"
+      stroke="#192832"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+export default HandGrab;

src/icons/index.ts

@@ -130,3 +130,5 @@ export { default as PlayContained } from './PlayContained';
 export { default as ClockContained } from './ClockContained';
 export { default as ParticipantFictional } from './ParticipantFictional';
 export { default as Sharing } from './Sharing';
+export { default as DoubleArrow } from './DoubleArrow';
+export { default as HandGrab } from './HandGrab';

stories/DataDisplay/Icons.stories.tsx

@@ -192,6 +192,8 @@ const iconsList = [
   { name: 'ClockContained', component: i.ClockContained },
   { name: 'ParticipantFictional', component: i.ParticipantFictional },
   { name: 'Sharing', component: i.Sharing },
+  { name: 'DoubleArrow', component: i.DoubleArrow },
+  { name: 'HandGrab', component: i.HandGrab },
 ];
 
 const Template: StoryFn<SvgIconProps> = (args) => {
@@ -227,9 +229,9 @@ import { ${importIcon} } from '@lyyti/design-system/icons';
         {iconsList
           .filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
           .sort((a, b) => a.name.localeCompare(b.name))
-          .map((icon, index) => {
+          .map((icon) => {
             return (
-              <Grid item xs={3} key={index} onClick={() => setImportIcon(icon.name)}>
+              <Grid item xs={3} key={icon.name} onClick={() => setImportIcon(icon.name)}>
                 <Paper
                   sx={{
                     backgroundColor: 'grey.200',

stories/Navigation/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import DropdownMenu, { DropdownProps } from '../../src/components/DropdownMenu';
-import { Calendar, ChevronDown, Radio, Rectangle } from '../../src/icons';
+import { Calendar, ChevronDown, LayoutRows, Radio, Rectangle } from '../../src/icons';
 
 export default {
   title: 'Components/Navigation/Menu',
@@ -47,3 +47,12 @@ DropdownIcons.args = {
   menuItemProps: { sx: { py: 1.5, pl: 3 } },
   textProps: { color: 'primary' },
 };
+
+export const DropdownButtonPropsChildren = Template.bind({});
+DropdownButtonPropsChildren.args = {
+  items: menuItems2,
+  buttonProps: {
+    variant: 'icon',
+    children: <LayoutRows />,
+  },
+};