Merge pull request #443 from lyytioy/next

Version 2.1.2

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.1",
+  "version": "2.1.2",
   "engines": {
     "node": "^18",
     "npm": "^8"
@@ -24,19 +24,19 @@
   "dependencies": {
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@mui/lab": "5.0.0-alpha.126",
+    "@mui/lab": "5.0.0-alpha.128",
     "@mui/material": "5.12.0",
-    "@mui/x-data-grid": "6.2.0",
-    "@mui/x-data-grid-pro": "6.2.0",
-    "@mui/x-date-pickers": "6.2.0",
+    "@mui/x-data-grid": "6.2.1",
+    "@mui/x-data-grid-pro": "6.2.1",
+    "@mui/x-date-pickers": "6.2.1",
     "@mui/x-license-pro": "6.0.4"
   },
   "devDependencies": {
     "@babel/core": "7.21.4",
     "@date-io/dayjs": "2.16.0",
     "@date-io/moment": "2.16.1",
     "@storybook/addon-actions": "7.0.4",
-    "@storybook/addon-essentials": "7.0.4",
+    "@storybook/addon-essentials": "7.0.7",
     "@storybook/addon-links": "7.0.4",
     "@storybook/addon-styling": "1.0.0",
     "@storybook/nextjs": "7.0.4",

src/components/Button.tsx

@@ -10,7 +10,7 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'color' | 'variant' |
   chunky?: boolean;
   variant?: MuiButtonProps['variant'] | 'icon' | 'fab';
   children: MuiButtonProps['children'] & { $$typeof?: symbol; props?: any };
-  color?: 'primary' | 'secondary' | 'danger' | 'inherit';
+  color?: 'primary' | 'secondary' | 'danger' | 'inherit' | 'white';
   loading?: boolean;
   'data-testid'?: string;
 }
@@ -75,6 +75,7 @@ const Button = (
         disabled={disabled}
         size="large"
         sx={{
+          '&.MuiIconButton-root:hover': { backgroundColor: alpha(theme.palette.white.main, 0.5) },
           '&.MuiIconButton-colorPrimary': iconPrimaryStyles,
           '&.MuiIconButton-colorSecondary': iconSecondaryStyles,
           '&.MuiIconButton-colorError': iconDangerStyles,

src/components/Chip.tsx

@@ -2,7 +2,7 @@ import { Chip as MuiChip, ChipProps as MuiChipProps } from '@mui/material';
 import { forwardRef, Ref } from 'react';
 
 export interface ChipProps extends MuiChipProps {
-  color?: 'primary' | 'secondary';
+  color?: 'primary' | 'secondary' | 'white';
   clickable?: boolean;
   disabled?: boolean;
   'data-testid'?: string;
@@ -20,6 +20,40 @@ const Chip = (
   }: ChipProps,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
+  const overrideDeleteIconStyles = {
+    '&, &:hover, &:active': {
+      color: 'none',
+    },
+    ...(color === 'white' && {
+      color: 'grey.200',
+      '&:active': {
+        color: 'grey.300',
+      },
+      '&:hover': {
+        color: 'grey.400',
+      },
+      ...(variant === 'outlined' && {
+        color: 'white.main',
+        '&:active': {
+          color: 'white.light',
+        },
+        '&:hover': {
+          color: 'white.dark',
+        },
+      }),
+    }),
+  };
+
+  const overrideChipAvatarStyles = {
+    color: color === 'white' && variant !== 'outlined' ? 'white.main' : 'none',
+  };
+  const overrideAvatarStyles = {
+    backgroundColor: 'none',
+    ...(color === 'white' && {
+      backgroundColor: variant === 'outlined' ? 'white.main' : 'primary.main',
+    }),
+  };
+
   return (
     <MuiChip
       ref={ref}
@@ -28,7 +62,15 @@ const Chip = (
       size={size}
       clickable={clickable}
       disabled={disabled}
-      sx={{ root: { bgcolor: 'primary.main' }, ...sx }}
+      sx={{
+        root: {
+          bgcolor: 'primary.main',
+        },
+        '& .MuiChip-deleteIcon': overrideDeleteIconStyles,
+        '& .MuiChip-avatar': overrideChipAvatarStyles,
+        '& .MuiAvatar-root': overrideAvatarStyles,
+        ...sx,
+      }}
       {...props}
     />
   );

src/icons/Delete.tsx

@@ -0,0 +1,10 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+const Delete = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path d="M11.998 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" />,
+    <path d="M16.498 17.25a.743.743 0 0 1-.53-.22l-3.97-3.97-3.969 3.97a.743.743 0 0 1-.53.22.743.743 0 0 1-.53-.22.744.744 0 0 1 0-1.06L10.937 12l-3.97-3.97a.743.743 0 0 1-.22-.53c0-.2.078-.389.22-.53.141-.142.33-.22.53-.22s.389.078.53.22l3.97 3.97 3.969-3.97a.744.744 0 0 1 1.06 0c.142.141.22.33.22.53s-.078.389-.22.53L13.058 12l3.97 3.97a.744.744 0 0 1 0 1.06.749.749 0 0 1-.53.22z" />
+  );
+export default Delete;

src/icons/index.ts

@@ -124,3 +124,4 @@ export { default as EmailQuestion } from './EmailQuestion';
 export { default as Check } from './Check';
 export { default as Play } from './Play';
 export { default as Pause } from './Pause';
+export { default as Delete } from './Delete';

src/themes/theme.ts

@@ -16,86 +16,6 @@ const baseFontStack = [
 const objektivMk1FontFamily = ['"Objektiv MK1"'].concat(baseFontStack).join(',');
 const objektivMk3FontFamily = ['"Objektiv MK3"'].concat(baseFontStack).join(',');
 
-interface ColorStateOptions {
-  activeContained: string;
-  hover: string;
-  selected: string;
-  activeOutlined: string;
-  outlinedStroke: string;
-  disabledBg: string;
-}
-
-interface ColorShadeOptions {
-  main: string;
-  dark: string;
-  light: string;
-  contrastText: string;
-}
-
-interface ColorRangeOptions {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-}
-
-declare module '@mui/material/styles/createPalette' {
-  interface Palette {
-    primaryStates: ColorStateOptions;
-    secondaryStates: ColorStateOptions;
-    errorStates: ColorStateOptions;
-    light: ColorShadeOptions;
-    lightStates: ColorStateOptions;
-    sky: ColorRangeOptions;
-    balticSea: ColorRangeOptions;
-    coral: ColorRangeOptions;
-    sunset: ColorRangeOptions;
-    sun: ColorRangeOptions;
-    sand: ColorRangeOptions;
-  }
-  interface PaletteOptions {
-    primaryStates: ColorStateOptions;
-    secondaryStates: ColorStateOptions;
-    errorStates: ColorStateOptions;
-    light: ColorShadeOptions;
-    lightStates: ColorStateOptions;
-    sky: ColorRangeOptions;
-    balticSea: ColorRangeOptions;
-    coral: ColorRangeOptions;
-    sunset: ColorRangeOptions;
-    sun: ColorRangeOptions;
-    sand: ColorRangeOptions;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface TypographyVariants {
-    navigationLink: React.CSSProperties;
-  }
-
-  // allow configuration using `createTheme`
-  interface TypographyVariantsOptions {
-    navigationLink?: React.CSSProperties;
-  }
-  interface PaletteColor {
-    darkText?: string;
-    lightBg?: string;
-  }
-  interface SimplePaletteColorOptions {
-    darkText?: string;
-    lightBg?: string;
-  }
-}
-
-// Update the Typography's variant prop options
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    navigationLink: true;
-  }
-}
-
 export default createTheme({
   palette: {
     primary: {
@@ -215,6 +135,12 @@ export default createTheme({
       '400': '#E0C9AC',
       '500': '#735632',
     },
+    white: {
+      main: '#FFFFFF',
+      dark: '#B1B9BE',
+      light: '#F3F3F3',
+      contrastText: '#045B56',
+    },
     primaryStates: {
       activeContained: 'rgba(4, 91, 86, 0.3)',
       hover: 'rgba(4, 91, 86, 0.1)',

stories/DataDisplay/Chip.stories.tsx

@@ -1,7 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 import Chip, { ChipProps } from '../../src/components/Chip';
 import Avatar from '../../src/components/Avatar';
-import { StarFilled } from '../../src/icons';
+import { Play, StarFilled } from '../../src/icons';
 import { modifyExcludedParams } from '../../.storybook/excludedParams';
 
 export default {
@@ -57,3 +57,32 @@ SecondaryOutlined.args = {
   avatar: <Avatar alt="Steve" src="/steve-basic.png" />,
   onDelete: undefined,
 };
+
+export const SecondaryOutlinedIcon = Template.bind({});
+SecondaryOutlinedIcon.args = {
+  color: 'secondary',
+  variant: 'outlined',
+  icon: <Play fontSize="small" />,
+  onDelete: undefined,
+};
+
+export const White = Template.bind({});
+White.args = {
+  color: 'white',
+  variant: 'outlined',
+  icon: <Play fontSize="small" />,
+  clickable: true,
+};
+White.parameters = {
+  backgrounds: { default: 'dark' },
+};
+
+export const WhiteFilled = Template.bind({});
+WhiteFilled.args = {
+  color: 'white',
+  avatar: <Avatar>{'M'}</Avatar>,
+  onDelete: () => null,
+};
+WhiteFilled.parameters = {
+  backgrounds: { default: 'dark' },
+};

stories/DataDisplay/Icons.stories.tsx

@@ -186,6 +186,7 @@ const iconsList = [
   { name: 'Check', component: i.Check },
   { name: 'Play', component: i.Play },
   { name: 'Pause', component: i.Pause },
+  { name: 'Delete', component: i.Delete },
 ];
 
 const Template: StoryFn<SvgIconProps> = (args) => {

stories/Inputs/Button.stories.tsx

@@ -115,3 +115,13 @@ Fab.args = {
   variant: 'fab',
   children: <Bin />,
 };
+
+export const WhiteIconButton = Template.bind({});
+WhiteIconButton.args = {
+  variant: 'icon',
+  color: 'white',
+  children: <Bin />,
+};
+WhiteIconButton.parameters = {
+  backgrounds: { default: 'dark' },
+};