Merge pull request #59 from code0-tech/issue-30/more-button-styles

Issue 30/more button styles

Author: raphael-goetz

src/components/button/Button.stories.tsx

@@ -16,25 +16,29 @@ const meta = {
             type: "boolean",
             default: false
         },
-        variant: {table: {disable: true}}
+        variant: {
+            options: ['none', 'normal', 'filled', 'outlined'],
+            control: {type: 'radio'},
+        },
+        color: {table: {disable: true}}
     }
 }
 
-type ButtonStory = StoryObj<{ icon: boolean, disabled: boolean }>;
+type ButtonStory = StoryObj<{ icon: boolean, disabled: boolean, variant: string }>;
 type ButtonGroupStory = StoryObj<typeof ButtonGroup>;
 
 export default meta
 
 export const Buttons: ButtonStory = {
     render: (args) => {
 
-        const {icon, disabled} = args
+        const {icon, disabled, variant} = args
 
         return <>
             {
                 ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
                     // @ts-ignore
-                    return <Button disabled={disabled} variant={value}>
+                    return <Button disabled={disabled} variant={variant} color={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button>
@@ -44,7 +48,8 @@ export const Buttons: ButtonStory = {
     },
     args: {
         icon: true,
-        disabled: false
+        disabled: false,
+        variant: "normal"
     }
 }
 
@@ -55,7 +60,7 @@ export const ButtonGroups: ButtonGroupStory = {
                 {
                     ["primary", "secondary", "info", "success", "warning", "error"].map((value, index) => {
                         // @ts-ignore
-                        return <Button variant={value}>
+                        return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
@@ -66,7 +71,7 @@ export const ButtonGroups: ButtonGroupStory = {
                 {
                     ["primary", "primary", "primary", "primary"].map((value, index) => {
                         // @ts-ignore
-                        return <Button variant={value}>
+                        return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
@@ -78,14 +83,13 @@ export const ButtonGroups: ButtonGroupStory = {
                 {
                     ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
                         // @ts-ignore
-                        return <Button disabled={(index % 2) == 0} variant={value}>
+                        return <Button disabled={(index % 2) == 0} color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
                     })
                 }
             </ButtonGroup>
-
         </>
     }
 }

src/components/button/Button.style.scss

@@ -1,8 +1,6 @@
 @import "../../styles/helpers";
 
 .button {
-  @include box(true);
-
   padding: .5rem;
   cursor: pointer;
   display: flex;
@@ -34,10 +32,44 @@
   }
 }
 
+@function getMixedColor($color) {
+  @return mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 90%, 80%));
+}
+
 @each $name, $color in $variants {
   .button--#{$name} {
     @include box(true, $color);
 
+    &.button--filled {
+      border-color: transparent;
+
+      &:active {
+        @include border();
+      }
+    }
+
+    &.button--outlined {
+      background: transparent;
+      border-color: getMixedColor($color);
+      &:hover, &.button--none:hover {
+        background: getMixedColor($color);
+      }
+      &:active, &.button--none:active {
+        @include border();
+      }
+    }
+
+    &.button--none {
+      background: transparent;
+      border-color: transparent;
+      &:hover {
+        background: getMixedColor($color);
+      }
+      &:active {
+        @include border();
+      }
+    }
+
     .button__icon {
       color: color($color);
     }

src/components/button/Button.tsx

@@ -9,7 +9,9 @@ import {getChild, getContent} from "../../utils/utils";
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    //default to normal
+    variant?: "none" | "normal" | "outlined" | "filled",
     //defaults to false
     active?: boolean
     //defaults to false
@@ -22,13 +24,13 @@ export interface ButtonIconType {
 
 const Button: React.FC<ButtonType> = (props) => {
 
-    const {children, variant = "primary", active = false, disabled = false, ...args} = props
+    const {children, variant = "normal", color = "primary", active = false, disabled = false, ...args} = props
     const icon = getChild(children, ButtonIcon)
     const content = getContent(children, ButtonIcon)
 
-
-    return <a {...args} className={`button button--${variant} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""}`}
-        aria-disabled={disabled ? "true" : "false"}>
+    return <a {...args}
+              className={`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`}
+              aria-disabled={disabled ? "true" : "false"}>
         {icon}
         {content ? <span className={"button__content"}>{content}</span> : null}
     </a>

src/components/card/Card.stories.tsx

@@ -39,10 +39,10 @@ export const Test = () => {
         </ListGroup>
         <CardFooter>
             <ButtonGroup>
-                <Button variant={"secondary"}>
+                <Button color={"secondary"}>
                     Button
                 </Button>
-                <Button variant={"secondary"}>
+                <Button color={"secondary"}>
                     Button
                 </Button>
             </ButtonGroup>

src/components/dropdown/Dropdown.stories.tsx

@@ -53,12 +53,12 @@ export const Dropdowns = () => {
             {
                 ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
                     // @ts-ignore
-                    return (index % 2 == 0) ? <Button disabled={(index % 2) == 0} variant={value}>
+                    return (index % 2 == 0) ? <Button disabled={(index % 2) == 0} color={value}>
                         {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button> : <Dropdown position={"bottom"} align={"start"}>
                         <Dropdown.Trigger>
-                            <Button disabled={(index % 2) == 0} variant={"secondary"}>
+                            <Button disabled={(index % 2) == 0} color={"secondary"}>
                                 {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                                 {value}
                             </Button>