From 92544e7e4b583230e1239dc1d5b689830207dca2 Mon Sep 17 00:00:00 2001 From: Steven Chen Date: Mon, 25 Apr 2022 17:52:01 +0800 Subject: [PATCH] refactor: dialog button style --- .storybook/preview.js | 10 +- package.json | 2 +- src/Theme.types.ts | 3 + .../DialogButton/DialogButton.stories.tsx | 33 ++++- .../Button/DialogButton/DialogButton.tsx | 138 +++++++++++++----- .../Button/DialogButton/DialogButton.types.ts | 2 + src/components/main.types.ts | 1 + src/theme.ts | 3 + 8 files changed, 145 insertions(+), 47 deletions(-) create mode 100644 src/components/main.types.ts diff --git a/.storybook/preview.js b/.storybook/preview.js index 9e1c202..32e6db8 100644 --- a/.storybook/preview.js +++ b/.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', }, ], }, diff --git a/package.json b/package.json index e827078..992ee1e 100644 --- a/package.json +++ b/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": [ diff --git a/src/Theme.types.ts b/src/Theme.types.ts index 5e5645b..43a72cb 100644 --- a/src/Theme.types.ts +++ b/src/Theme.types.ts @@ -28,6 +28,9 @@ export interface Color { $80: string; $100: string; }; + green: { + $100: string; + }; highlight: string; box_bbg: string; } diff --git a/src/components/Button/DialogButton/DialogButton.stories.tsx b/src/components/Button/DialogButton/DialogButton.stories.tsx index 44cf875..d2744e4 100644 --- a/src/components/Button/DialogButton/DialogButton.stories.tsx +++ b/src/components/Button/DialogButton/DialogButton.stories.tsx @@ -40,26 +40,43 @@ export default { const Template: Story = (args) => ; -const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}); Default.args = { + color: 'primary', variant: 'contained', + children: 'Back', fullWidth: false, disabled: false, + previousIcon: false, + nextIcon: false, }; -export const Primary: Story = Template.bind({}); +export const DefaultLight: Story = 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 = Template.bind({}); + +Loading.args = { + ...Default.args, + isLoading: true, }; -export const PrimaryWithIcon: Story = Template.bind({}); +export const WithIcon: Story = Template.bind({}); -PrimaryWithIcon.args = { - ...Primary.args, +WithIcon.args = { + ...Default.args, previousIcon: true, nextIcon: false, }; diff --git a/src/components/Button/DialogButton/DialogButton.tsx b/src/components/Button/DialogButton/DialogButton.tsx index a14e0a2..65400ee 100644 --- a/src/components/Button/DialogButton/DialogButton.tsx +++ b/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)` + 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 = (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 = ({ + className, + mode = 'dark', + previousIcon, + nextIcon, + isLoading = false, + ...props +}) => { return ( - } endIcon={nextIcon && } - {...otherProps} + {...props} /> ); }; diff --git a/src/components/Button/DialogButton/DialogButton.types.ts b/src/components/Button/DialogButton/DialogButton.types.ts index 3a50269..b82af3e 100644 --- a/src/components/Button/DialogButton/DialogButton.types.ts +++ b/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; } diff --git a/src/components/main.types.ts b/src/components/main.types.ts new file mode 100644 index 0000000..2fb07b4 --- /dev/null +++ b/src/components/main.types.ts @@ -0,0 +1 @@ +export type Mode = 'dark' | 'light'; diff --git a/src/theme.ts b/src/theme.ts index 6da0d24..0c81779 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -56,6 +56,9 @@ export const color: Color = { $80: '#656565', $100: '#3E3E3E', }, + green: { + $100: '#78DC00', + }, highlight: '#FF6B00', box_bbg: '#F3F3F3', };