Merge pull request #45 from lyytioy/next

Version 1.0.5
lyytioy · Apr 28, 2022 · 7b626ea · 7b626ea
2 parents 69ffc66 + 584e9c5
commit 7b626ea
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "engines": {
     "node": "^16",
     "npm": "^8"

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,26 +1,31 @@
 import { Button as MuiButton, ButtonProps as MuiButtonProps, IconButton } from '@mui/material';
 import { alpha } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
+import { forwardRef, Ref } from 'react';
 
 const containedBoxShadow =
   '0.79px 6.95px 11px rgba(0, 0, 0, 0.0096), 0.52px 4.53px 6.44px rgba(0, 0, 0, 0.0157), 0.31px 2.76px 3.5px rgba(0, 0, 0, 0.02), 0.17px 1.52px 1.79px rgba(0, 0, 0, 0.0243), 0.08px 0.72px 0.9px rgba(0, 0, 0, 0.0304), 0.03px 0.25px 0.43px rgba(0, 0, 0, 0.04);';
 
-export interface ButtonProps extends Omit<MuiButtonProps, 'size'> {
+export interface ButtonProps extends Omit<MuiButtonProps, 'size' | 'color'> {
   chunky?: boolean;
   children: MuiButtonProps['children'] & { $$typeof?: symbol; props?: any };
-  color?: 'primary' | 'secondary' | 'inherit';
+  color?: 'primary' | 'secondary' | 'danger' | 'inherit';
   'data-testid'?: string;
 }
 
-const Button = ({
-  children,
-  chunky = false,
-  variant = 'contained',
-  color = 'secondary',
-  disabled = false,
-  ...props
-}: ButtonProps): JSX.Element => {
+const Button = (
+  {
+    children,
+    chunky = false,
+    variant = 'contained',
+    color = 'secondary',
+    disabled = false,
+    ...props
+  }: ButtonProps,
+  ref: Ref<HTMLButtonElement>
+): JSX.Element => {
   const theme = useTheme();
+  const buttonColor = color === 'danger' ? 'error' : color;
 
   if (
     children &&
@@ -30,7 +35,7 @@ const Button = ({
     children.props.fontSize
   ) {
     return (
-      <IconButton color={color} disabled={disabled} size="large" {...props}>
+      <IconButton ref={ref} color={buttonColor} disabled={disabled} size="large" {...props}>
         {children}
       </IconButton>
     );
@@ -70,6 +75,23 @@ const Button = ({
     },
   };
 
+  const containedDanger = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'error.dark',
+    },
+    '&:hover': {
+      backgroundColor: 'error.main',
+    },
+    '&:active': {
+      backgroundColor: 'errorStates.activeContained',
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'errorStates.disabledBg',
+      color: 'error.contrastText',
+    },
+  };
+
   const outlinedPrimary = {
     boxShadow: containedBoxShadow,
     '&::before': {
@@ -106,6 +128,24 @@ const Button = ({
     },
   };
 
+  const outlinedDanger = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'errorStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'errorStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      border: '1px solid',
+      borderColor: alpha(theme.palette.error.main, 0.5),
+      color: alpha(theme.palette.error.main, 0.5),
+    },
+  };
+
   const textPrimary = {
     boxShadow: containedBoxShadow,
     '&::before': {
@@ -138,10 +178,27 @@ const Button = ({
     },
   };
 
+  const textDanger = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'errorStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'errorStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.error.main, 0.5),
+    },
+  };
+
   return (
     <MuiButton
+      ref={ref}
       variant={variant}
-      color={color}
+      color={buttonColor}
       disabled={disabled}
       sx={{
         borderRadius: '3px',
@@ -164,15 +221,18 @@ const Button = ({
         },
         '&.MuiButton-containedPrimary': containedPrimary,
         '&.MuiButton-containedSecondary': containedSecondary,
+        '&.MuiButton-containedError': containedDanger,
         '&.MuiButton-outlinedPrimary': outlinedPrimary,
         '&.MuiButton-outlinedSecondary': outlinedSecondary,
+        '&.MuiButton-outlinedError': outlinedDanger,
         '&.MuiButton-textPrimary': textPrimary,
         '&.MuiButton-textSecondary': textSecondary,
+        '&.MuiButton-textError': textDanger,
       }}
       {...props}
     >
       {children}
     </MuiButton>
   );
 };
-export default Button;
+export default forwardRef(Button);
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -16,7 +16,6 @@ const isDisallowedYear = (date: Date) => {
 
 const DatePicker = ({
   allowAllYears = false,
-  showDaysOutsideCurrentMonth = true,
   InputProps = { color: 'primary', id: 'datepicker' },
   ...props
 }: DatePickerProps<Date>): JSX.Element => {
@@ -70,7 +69,6 @@ const DatePicker = ({
         },
       }}
       shouldDisableYear={!allowAllYears ? isDisallowedYear : undefined}
-      showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth}
       {...props}
       renderInput={(params) => {
         return <TextField {...(params as TextFieldProps)} {...InputProps} />;

diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
@@ -28,14 +28,16 @@ const TextField = ({
   color = 'primary',
   error = false,
   helperText = '',
+  sx = {},
+  InputLabelProps = {},
   ...props
 }: TextFieldProps): JSX.Element => {
   const muiTextField = useRef<HTMLInputElement>(null);
   const overrideColor = color === 'white' ? 'common.white' : undefined;
 
   return (
     <MuiTextField
-      variant='outlined'
+      variant="outlined"
       fullWidth={fullWidth}
       size={size}
       error={error}
@@ -52,7 +54,7 @@ const TextField = ({
         ...(props.InputProps ?? {}),
         notched: false,
       }}
-      InputLabelProps={{ shrink: true }}
+      InputLabelProps={{ shrink: true, ...InputLabelProps }}
       sx={{
         '& label': {
           color: overrideColor ?? 'grey.400',
@@ -85,6 +87,7 @@ const TextField = ({
           {
             color: overrideColor,
           },
+        ...sx,
       }}
       {...props}
     />

diff --git a/src/components/TimePicker.tsx b/src/components/TimePicker.tsx
@@ -10,17 +10,16 @@ const TimePicker = ({ ampm = false, InputProps = {}, ...props }: TimePickerProps
   return (
     <MuiTimePicker
       ampm={ampm}
+      open={false}
       {...props}
-      PopperProps={{
-        // @ts-ignore
+      InputAdornmentProps={{
         sx: {
-          '& .MuiClockPicker-arrowSwitcher': {
-            width: '70px',
-
-            '& button:hover': {
-              backgroundColor: 'primary.light',
-            },
-          },
+          ml: '0px',
+        },
+      }}
+      OpenPickerButtonProps={{
+        sx: {
+          pointerEvents: 'none',
         },
       }}
       renderInput={(params) => <TextField {...(params as TextFieldProps)} {...InputProps} />}

diff --git a/src/themes/theme.ts b/src/themes/theme.ts
@@ -50,13 +50,15 @@ declare module '@mui/material/styles/createPalette' {
   interface Palette {
     primaryStates: ColorStateOptions;
     secondaryStates: ColorStateOptions;
+    errorStates: ColorStateOptions;
     light: ColorShadeOptions;
     lightStates: ColorStateOptions;
     blue: ColorRangeOptions;
   }
   interface PaletteOptions {
     primaryStates: ColorStateOptions;
     secondaryStates: ColorStateOptions;
+    errorStates: ColorStateOptions;
     light: ColorShadeOptions;
     lightStates: ColorStateOptions;
     blue: ColorRangeOptions;
@@ -93,7 +95,7 @@ export default createTheme({
       main: '#D1492E',
       dark: '#A33924',
       light: '#F4A094',
-      contrastText: '#D1492E',
+      contrastText: '#FFFFFF',
     },
     warning: {
       main: '#F09000',
@@ -150,6 +152,14 @@ export default createTheme({
       outlinedStroke: '#EE8B3A',
       disabledBg: '#E4BE9F',
     },
+    errorStates: {
+      activeContained: 'rgba(209, 73, 46, 0.3)',
+      hover: 'rgba(209, 73, 46, 0.1)',
+      selected: 'rgba(209, 73, 46, 0.08)',
+      activeOutlined: 'rgba(209, 73, 46, 0.24)',
+      outlinedStroke: '#D1492E',
+      disabledBg: '#F4A094',
+    },
     lightStates: {
       activeContained: 'rgba(250, 250, 250, 0.3)',
       hover: 'rgba(255, 255, 255, 0.1)',

diff --git a/stories/Inputs/Button.stories.tsx b/stories/Inputs/Button.stories.tsx
@@ -11,7 +11,7 @@ export default {
   },
   argTypes: {
     color: {
-      options: ['primary', 'secondary', 'inherit'],
+      options: ['primary', 'secondary', 'danger', 'inherit'],
     },
     disabled: {
       control: { type: 'boolean' },
@@ -32,6 +32,11 @@ Primary.args = {
 export const Secondary = Template.bind({});
 Secondary.args = {};
 
+export const Danger = Template.bind({});
+Danger.args = {
+  color: 'danger'
+};
+
 export const OutlinedPrimary = Template.bind({});
 OutlinedPrimary.args = {
   color: 'primary',
@@ -43,6 +48,12 @@ OutlinedSecondary.args = {
   variant: 'outlined',
 };
 
+export const OutlinedDanger = Template.bind({});
+OutlinedDanger.args = {
+  color: 'danger',
+  variant: 'outlined',
+};
+
 export const TextPrimary = Template.bind({});
 TextPrimary.args = {
   color: 'primary',
@@ -54,6 +65,12 @@ TextSecondary.args = {
   variant: 'text',
 };
 
+export const TextDanger = Template.bind({});
+TextDanger.args = {
+  color: 'danger',
+  variant: 'text',
+};
+
 export const Chunky = Template.bind({});
 Chunky.args = {
   chunky: true,

diff --git a/stories/Inputs/DatePicker.stories.tsx b/stories/Inputs/DatePicker.stories.tsx
@@ -61,16 +61,6 @@ Please install any of these date management libraries, @date-io adapter for it a
         },
       },
     },
-    showDaysOutsideCurrentMonth: {
-      control: { type: 'boolean' },
-      description: 'If true, days that have outsideCurrentMonth={true} are displayed.',
-      table: {
-        defaultValue: true,
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
   },
 } as Meta;