Merge pull request #479 from lyytioy/next

Version 2.2.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.1.6",
+  "version": "2.2.0",
   "engines": {
     "node": "^18",
     "npm": "^8"
@@ -25,7 +25,7 @@
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
     "@mui/lab": "5.0.0-alpha.129",
-    "@mui/material": "5.12.0",
+    "@mui/material": "5.13.2",
     "@mui/x-data-grid": "6.4.0",
     "@mui/x-data-grid-pro": "6.4.0",
     "@mui/x-date-pickers": "6.4.0",
@@ -41,14 +41,14 @@
     "@storybook/addon-mdx-gfm": "7.0.10",
     "@storybook/addon-styling": "1.0.6",
     "@storybook/nextjs": "7.0.10",
-    "@storybook/react": "7.0.10",
+    "@storybook/react": "7.0.12",
     "@storybook/test-runner": "0.10.0",
     "@svgr/cli": "8.0.1",
     "@types/node": "16.18.23",
     "@types/react": "17.0.43",
     "babel-loader": "9.1.2",
     "dayjs": "1.11.7",
-    "eslint": "8.35.0",
+    "eslint": "8.41.0",
     "eslint-config-next": "12.3.4",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-storybook": "0.6.12",

src/components/DatePicker.tsx

@@ -1,7 +1,9 @@
 import {
-  DatePicker as MuiDatePicker,
+  DatePicker as MuiResponsiveDatePicker,
   DatePickerProps as MuiDatepickerProps,
 } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import type { FormHelperTextProps, InputLabelProps, InputAdornmentProps as MuiInputAdornmentProps } from '@mui/material';
 
@@ -16,6 +18,7 @@ export interface DatePickerProps<TDate = unknown> extends Omit<MuiDatepickerProp
   InputAdornmentProps?: Partial<MuiInputAdornmentProps>;
   InputLabelProps?: Partial<InputLabelProps>
   'data-testid'?: string;
+  variant: 'desktop' | 'mobile' | 'responsive';
 }
 
 export { AdapterDayjs }
@@ -34,9 +37,11 @@ const DatePicker = <TDate = unknown>(
     InputLabelProps,
     helperText,
     FormHelperTextProps,
+    variant = 'responsive',
     ...props
   }: DatePickerProps<TDate>,
 ): JSX.Element => {
+  const MuiDatePicker = variant === 'responsive' ? MuiResponsiveDatePicker : variant === 'desktop' ? MuiDesktopDatePicker : MuiMobileDatePicker;
   return (
     <MuiDatePicker
       slots={{ openPickerIcon: (iconProps) => Calendar({ fontSize: 'small', ...iconProps }) }}

src/icons/Check.tsx

@@ -5,7 +5,7 @@ const Check = (props: any) =>
   createElement(
     SvgIcon,
     props,
-    <circle cx={12} cy={12} r={12} fill="currentColor" fillOpacity={0.5} />,
+    <circle cx={12} cy={12} r={12} fill="currentColor" />,
     <path
       d="m17.833 6.167-7.291 11.666-4.375-5.25"
       stroke="#fff"

src/icons/ClockContained.tsx

@@ -0,0 +1,13 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+const ClockContained = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      fill="currentColor"
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+    />,
+    <path stroke="#fff" strokeLinecap="round" strokeWidth={2} d="M12 8.25V13l5.25 4.25" />
+  );
+export default ClockContained;

src/icons/PlayContained.tsx

@@ -0,0 +1,16 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+const PlayContained = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      fill="currentColor"
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+    />,
+    <path
+      fill="#fff"
+      d="M17.25 11.567a.5.5 0 0 1 0 .866l-7.5 4.33A.5.5 0 0 1 9 16.33V7.67a.5.5 0 0 1 .75-.433l7.5 4.33Z"
+    />
+  );
+export default PlayContained;

src/icons/index.ts

@@ -126,3 +126,5 @@ export { default as Play } from './Play';
 export { default as Pause } from './Pause';
 export { default as Delete } from './Delete';
 export { default as Send } from './Send';
+export { default as PlayContained } from './PlayContained';
+export { default as ClockContained } from './ClockContained';

stories/DataDisplay/Icons.stories.tsx

@@ -188,6 +188,8 @@ const iconsList = [
   { name: 'Pause', component: i.Pause },
   { name: 'Delete', component: i.Delete },
   { name: 'Send', component: i.Send },
+  { name: 'PlayContained', component: i.PlayContained },
+  { name: 'ClockContained', component: i.ClockContained },
 ];
 
 const Template: StoryFn<SvgIconProps> = (args) => {