TEC-4379: Fix button type prop (#25)

vissimo-group · Mar 27, 2024 · 6c76cce · 6c76cce
1 parent e44c36a
commit 6c76cce
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",

diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof Button> = {
   component: Button,
   tags: ['autodocs'],
   argTypes: {
-    type: {
+    buttonType: {
       control: {
         type: 'select',
       },
@@ -111,7 +111,7 @@ const checkIcon = (
 export const Filled: Story = {
   args: {
     variant: 'FILLED',
-    type: 'PRIMARY',
+    buttonType: 'PRIMARY',
     fullWidth: true,
     large: false,
     disabled: false,
@@ -127,7 +127,7 @@ export const Filled: Story = {
 export const FilledDestructive: Story = {
   args: {
     variant: 'FILLED',
-    type: 'DESTRUCTIVE',
+    buttonType: 'DESTRUCTIVE',
     fullWidth: true,
     large: false,
   },
@@ -140,7 +140,12 @@ export const FilledDestructive: Story = {
 }
 
 export const Outlined: Story = {
-  args: { variant: 'OUTLINED', type: 'PRIMARY', fullWidth: true, large: false },
+  args: {
+    variant: 'OUTLINED',
+    buttonType: 'PRIMARY',
+    fullWidth: true,
+    large: false,
+  },
   render: (args) => (
     <Button {...args}>
       {addIcon(Colors.light.action.action100)}
@@ -152,7 +157,7 @@ export const Outlined: Story = {
 export const OutlinedDestructive: Story = {
   args: {
     variant: 'OUTLINED',
-    type: 'DESTRUCTIVE',
+    buttonType: 'DESTRUCTIVE',
     fullWidth: true,
     large: false,
   },
@@ -167,7 +172,7 @@ export const OutlinedDestructive: Story = {
 export const NotFilled: Story = {
   args: {
     variant: 'NOT_FILLED',
-    type: 'PRIMARY',
+    buttonType: 'PRIMARY',
     fullWidth: true,
     large: false,
   },
@@ -182,7 +187,7 @@ export const NotFilled: Story = {
 export const NotFilledDestructive: Story = {
   args: {
     variant: 'NOT_FILLED',
-    type: 'DESTRUCTIVE',
+    buttonType: 'DESTRUCTIVE',
     fullWidth: true,
     large: false,
   },
@@ -195,12 +200,22 @@ export const NotFilledDestructive: Story = {
 }
 
 export const WithAnimatedIcon: Story = {
-  args: { variant: 'FILLED', type: 'PRIMARY', fullWidth: true, large: false },
+  args: {
+    variant: 'FILLED',
+    buttonType: 'PRIMARY',
+    fullWidth: true,
+    large: false,
+  },
   render: (args) => <Button {...args}>{loadingIcon}</Button>,
 }
 
 export const Large: Story = {
-  args: { variant: 'FILLED', type: 'PRIMARY', fullWidth: true, large: true },
+  args: {
+    variant: 'FILLED',
+    buttonType: 'PRIMARY',
+    fullWidth: true,
+    large: true,
+  },
   render: (args) => (
     <Button {...args}>
       {addIcon()}
@@ -210,7 +225,12 @@ export const Large: Story = {
 }
 
 export const LargeOutlined: Story = {
-  args: { variant: 'OUTLINED', type: 'PRIMARY', fullWidth: true, large: true },
+  args: {
+    variant: 'OUTLINED',
+    buttonType: 'PRIMARY',
+    fullWidth: true,
+    large: true,
+  },
   render: (args) => (
     <Button {...args}>
       {addIcon(Colors.light.action.action100)}
@@ -222,7 +242,7 @@ export const LargeOutlined: Story = {
 export const LargeNotFilled: Story = {
   args: {
     variant: 'NOT_FILLED',
-    type: 'PRIMARY',
+    buttonType: 'PRIMARY',
     fullWidth: true,
     large: true,
   },
@@ -237,7 +257,7 @@ export const LargeNotFilled: Story = {
 export const Disabled: Story = {
   args: {
     variant: 'FILLED',
-    type: 'PRIMARY',
+    buttonType: 'PRIMARY',
     fullWidth: true,
     large: false,
     disabled: true,
@@ -253,7 +273,7 @@ export const Disabled: Story = {
 export const Feedback: Story = {
   args: {
     variant: 'OUTLINED',
-    type: 'FEEDBACK',
+    buttonType: 'FEEDBACK',
     fullWidth: true,
     large: false,
   },
@@ -266,7 +286,7 @@ export const Feedback: Story = {
 }
 
 export const NotFullWidth: Story = {
-  args: { variant: 'FILLED', type: 'PRIMARY', fullWidth: false },
+  args: { variant: 'FILLED', buttonType: 'PRIMARY', fullWidth: false },
   render: (args) => (
     <Button {...args}>
       {addIcon()}
@@ -276,7 +296,12 @@ export const NotFullWidth: Story = {
 }
 
 export const NotFullWidthLarge: Story = {
-  args: { variant: 'FILLED', type: 'PRIMARY', fullWidth: false, large: true },
+  args: {
+    variant: 'FILLED',
+    buttonType: 'PRIMARY',
+    fullWidth: false,
+    large: true,
+  },
   render: (args) => (
     <Button {...args}>
       {addIcon()}

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -2,23 +2,22 @@ import {
   ButtonStyled,
   ButtonNotFilledStyled,
   ButtonOutlinedStyled,
-  ButtonFeedbackStyled,
 } from './style'
 import { ButtonProps } from './type'
 
 const Button = ({
   children,
   variant = 'FILLED',
-  type = 'PRIMARY',
+  buttonType = 'PRIMARY',
   fullWidth = false,
   disabled = false,
   large = false,
   ...props
 }: ButtonProps) => {
-  const buttonType = {
+  const buttonVariants = {
     FILLED: (
       <ButtonStyled
-        $type={type}
+        $type={buttonType}
         $fullWidth={fullWidth}
         $large={large}
         disabled={disabled}
@@ -29,7 +28,7 @@ const Button = ({
     ),
     NOT_FILLED: (
       <ButtonNotFilledStyled
-        $type={type}
+        $type={buttonType}
         $fullWidth={fullWidth}
         $large={large}
         disabled={disabled}
@@ -40,7 +39,7 @@ const Button = ({
     ),
     OUTLINED: (
       <ButtonOutlinedStyled
-        $type={type}
+        $type={buttonType}
         $fullWidth={fullWidth}
         $large={large}
         disabled={disabled}
@@ -49,20 +48,9 @@ const Button = ({
         {children}
       </ButtonOutlinedStyled>
     ),
-    FEEDBACK: (
-      <ButtonFeedbackStyled
-        $type={type}
-        $fullWidth={fullWidth}
-        $large={large}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </ButtonFeedbackStyled>
-    ),
   }
 
-  return buttonType[variant]
+  return buttonVariants[variant]
 }
 
 export { Button }
diff --git a/src/components/Button/style.tsx b/src/components/Button/style.tsx
@@ -88,25 +88,4 @@ const ButtonOutlinedStyled = styled(ButtonBaseStyled)`
   }
 `
 
-const ButtonFeedbackStyled = styled(ButtonBaseStyled)`
-  background-color: transparent;
-  color: ${(props) => typeColors[props.$type].DEFAULT};
-  border: 2px solid ${(props) => typeColors[props.$type].DEFAULT};
-
-  &:hover:not(:disabled) {
-    color: ${(props) => typeColors[props.$type].HOVER};
-    border: 2px solid ${(props) => typeColors[props.$type].HOVER};
-  }
-
-  &:active:not(:disabled) {
-    color: ${(props) => typeColors[props.$type].ACTIVE};
-    border: 2px solid ${(props) => typeColors[props.$type].ACTIVE};
-  }
-`
-
-export {
-  ButtonStyled,
-  ButtonNotFilledStyled,
-  ButtonOutlinedStyled,
-  ButtonFeedbackStyled,
-}
+export { ButtonStyled, ButtonNotFilledStyled, ButtonOutlinedStyled }
diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts
@@ -6,7 +6,7 @@ type ButtonProps = {
   children: React.ReactNode
   variant?: ButtonVariant
   fullWidth?: boolean
-  type?: ButtonType
+  buttonType?: ButtonType
   large?: boolean
   disabled?: boolean
 } & React.HTMLAttributes<HTMLButtonElement>