refactor: dialog button style

Author: steven11329

.storybook/preview.js

@@ -20,11 +20,15 @@ export const parameters = {
     },
   },
   backgrounds: {
-    default: 'figma',
+    default: 'dark',
     values: [
       {
-        name: 'figma',
-        value: '#E5E5E5',
+        name: 'dark',
+        value: '#3E3E3E',
+      },
+      {
+        name: 'light',
+        value: '#EBEBEB',
       },
     ],
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/Theme.types.ts

@@ -28,6 +28,9 @@ export interface Color {
     $80: string;
     $100: string;
   };
+  green: {
+    $100: string;
+  };
   highlight: string;
   box_bbg: string;
 }

src/components/Button/DialogButton/DialogButton.stories.tsx

@@ -40,26 +40,43 @@ export default {
 
 const Template: Story<DialogButtonProps> = (args) => <DialogButton {...args} />;
 
-const Default: Story<DialogButtonProps> = Template.bind({});
+export const Default: Story<DialogButtonProps> = Template.bind({});
 
 Default.args = {
+  color: 'primary',
   variant: 'contained',
+  children: 'Back',
   fullWidth: false,
   disabled: false,
+  previousIcon: false,
+  nextIcon: false,
 };
 
-export const Primary: Story<DialogButtonProps> = Template.bind({});
+export const DefaultLight: Story<DialogButtonProps> = Template.bind({});
 
-Primary.args = {
+DefaultLight.parameters = {
+  backgrounds: {
+    default: 'light',
+  },
+};
+DefaultLight.args = {
   ...Default.args,
-  children: 'Back',
-  color: 'primary',
+  mode: 'light',
+  color: 'secondary',
+  variant: 'outlined',
+};
+
+export const Loading: Story<DialogButtonProps> = Template.bind({});
+
+Loading.args = {
+  ...Default.args,
+  isLoading: true,
 };
 
-export const PrimaryWithIcon: Story<DialogButtonProps> = Template.bind({});
+export const WithIcon: Story<DialogButtonProps> = Template.bind({});
 
-PrimaryWithIcon.args = {
-  ...Primary.args,
+WithIcon.args = {
+  ...Default.args,
   previousIcon: true,
   nextIcon: false,
 };

src/components/Button/DialogButton/DialogButton.tsx

@@ -1,49 +1,117 @@
+import classnames from 'classnames';
 import React from 'react';
 import MUIButton from '@mui/material/Button';
-import { DialogButtonProps } from './DialogButton.types';
 import ChevronLeft from '@mui/icons-material/ChevronLeft';
 import ChevronRight from '@mui/icons-material/ChevronRight';
 import { styled } from '@mui/material/styles';
 
-const Styled = styled(MUIButton)(({ theme }) => ({
-  ...theme.text.Subtitle_16_Med,
-  minWidth: 120,
-  color: '#FFF',
-  paddingTop: 4,
-  paddingBottom: 4,
-  textTransform: 'none',
-  boxShadow: 'none',
-  '&:active, &:hover': {
-    backgroundColor: theme.color.primary.$80,
-  },
-  '&.MuiButton-containedSecondary': {
-    color: theme.color.primary.$100,
-    backgroundColor: '#FFF',
-    '&:active, &:hover': {
-      backgroundColor: 'rgba(0, 0, 0, .05)',
-    },
-  },
-  '&.Mui-disabled': {
-    opacity: '.3',
+import { Mode } from 'components/main.types';
+import { DialogButtonProps } from './DialogButton.types';
+
+interface ButtonProps {
+  mode?: Mode;
+}
+
+const Button = styled(MUIButton)<ButtonProps>`
+  min-width: 120px;
+  color: white;
+  font-weight: bold;
+  padding: 4px 0;
+  text-transform: none;
+  box-shadow: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  &.Mui-disabled {
+    opacity: 0.3;
+  }
+
+  & .MuiButton-startIcon {
+    margin-right: 10px;
+  }
+
+  & .MuiButton-endIcon {
+    margin-left: 10px;
+  }
+
+  ${({ theme }) => ({
+    ...theme.typography.body2,
     '&.MuiButton-containedPrimary': {
-      color: '#FFF',
-      backgroundColor: theme.color.primary.$80,
+      '&:hover': {
+        backgroundColor: theme.color.primary.$80,
+      },
+      '&.loading': {
+        pointerEvents: 'none',
+        border: `1px solid ${theme.color.primary.$100}`,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+      '&.Mui-disabled': {
+        color: 'white',
+        backgroundColor: theme.color.primary.$80,
+      },
     },
-  },
-  '& .MuiButton-startIcon': { marginRight: '10px' },
-  '& .MuiButton-endIcon': { marginLeft: '10px' },
-}));
-
-const DialogButton: React.VFC<DialogButtonProps> = (props) => {
-  const { className, previousIcon, nextIcon, color, ...otherProps } =
-    props ?? {};
+
+    '&.MuiButton-containedSecondary': {
+      backgroundColor: theme.color.secondary.$80,
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+      '&.Mui-disabled': {
+        color: 'white',
+        backgroundColor: theme.color.secondary.$80,
+      },
+    },
+
+    '&.MuiButton-containedSuccess': {
+      border: `1px solid ${theme.color.green.$100}`,
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+      '&.Mui-disabled': {
+        color: 'white',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+    },
+
+    '&.MuiButton-outlined': {
+      '&[mode="light"]': {
+        color: theme.color.secondary.$60,
+        '&:hover': {
+          color: theme.color.secondary.$100,
+        },
+      },
+    },
+
+    '&.MuiButton-outlinedSecondary': {
+      borderColor: `1px solid ${theme.color.secondary.$60}`,
+      '&:hover': {
+        borderColor: theme.color.secondary.$100,
+      },
+    },
+  })}
+`;
+
+const DialogButton: React.VFC<DialogButtonProps> = ({
+  className,
+  mode = 'dark',
+  previousIcon,
+  nextIcon,
+  isLoading = false,
+  ...props
+}) => {
   return (
-    <Styled
-      className={className}
-      color={color}
+    <Button
+      mode={mode}
+      className={classnames({
+        className,
+        loading: isLoading,
+      })}
       startIcon={previousIcon && <ChevronLeft />}
       endIcon={nextIcon && <ChevronRight />}
-      {...otherProps}
+      {...props}
     />
   );
 };

src/components/Button/DialogButton/DialogButton.types.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from '@mui/material';
 
 export interface DialogButtonProps extends ButtonProps {
+  mode?: 'dark' | 'light';
   previousIcon?: boolean;
   nextIcon?: boolean;
+  isLoading?: boolean;
 }

src/components/main.types.ts

@@ -0,0 +1 @@
+export type Mode = 'dark' | 'light';

src/theme.ts

@@ -56,6 +56,9 @@ export const color: Color = {
     $80: '#656565',
     $100: '#3E3E3E',
   },
+  green: {
+    $100: '#78DC00',
+  },
   highlight: '#FF6B00',
   box_bbg: '#F3F3F3',
 };