Merge pull request #32 from supabase/fix/button-fixes

Fix/button fixes

Author: MildTomato

src/components/Button/Button.css

@@ -1,13 +1,13 @@
 .sbui-btn-container {
-  @apply inline-flex;
+  @apply inline-flex font-medium;
 }
 
 .sbui-btn {
-  @apply font-medium rounded;
-  @apply relative cursor-pointer inline-flex space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
+  @apply relative cursor-pointer inline-flex items-center space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
+  @apply rounded;
   font-family: inherit;
+  font-weight: inherit;
   text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
 
 .sbui-btn-container--shadow {
@@ -86,8 +86,15 @@
 }
 
 .sbui-btn-primary.sbui-btn--danger {
-  @apply bg-red-500 text-white
+  @apply bg-red-500 text-white;
+  @apply hover:bg-red-600 hover:border-red-600;
 }
+.sbui-btn-default.sbui-btn--danger, .sbui-btn-secondary.sbui-btn--danger, .sbui-btn-outline.sbui-btn--danger, .sbui-btn-dashed.sbui-btn--danger, .sbui-btn-link.sbui-btn--danger, .sbui-btn-text.sbui-btn--danger {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+}
+ /* {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+} */
 
 /* 
   Animation for icon
@@ -112,35 +119,3 @@
     transform: rotate(360deg);
   }
 }
-
-/* 
-  Puesdo classes
-*/
-
-.btn:focus {
-  @apply outline-none ring;
-}
-
-/* .sbui-btn-primary:hover svg {
-  @apply text-gray-500;
-}
-.sbui-btn-secondary:hover svg {
-  @apply text-gray-100;
-}
-.sbui-btn-default:hover svg {
-  @apply text-gray-300;
-}
-.sbui-btn-outline:hover svg {
-  @apply text-white;
-}
-.sbui-btn-ghost:hover svg {
-  @apply bg-brand-300;
-} */
-
-.sbui-btn--with-icon {
-  /* @apply pl-10; */
-}
-
-.sbui-btn-icon-container {
-  @apply inset-y-0 flex items-center pointer-events-none;
-}

src/components/Button/Button.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Button } from '.'
+import { Icon } from '../Icon'
+
+export default {
+  title: 'General/Button',
+  component: Button,
+}
+
+export const Default = (args: any) => <Button {...args}>Button text</Button>
+export const withStyles = (args: any) => <Button {...args}>Button text</Button>
+export const withIcon = (args: any) => <Button {...args}>Button text</Button>
+export const withIconRight = (args: any) => <Button {...args}>Button text</Button>
+export const withBlock = (args: any) => <Button {...args}>Button text</Button>
+export const withOnlyIcon = (args: any) => <Button {...args}/>
+export const withOnlyLoading = (args: any) => <Button {...args}/>
+
+const icon = <Icon type={"Package"}/>
+
+withIcon.args = {
+  type: 'primary',
+  icon: icon,
+}
+
+withIconRight.args = {
+  type: 'primary',
+  iconRight: <Icon type={"ChevronRight"} strokeWidth={2}/>,
+}
+
+withStyles.args = {
+  type: 'primary',
+  style: {backgroundColor: 'red', color: 'yellow'}
+}
+
+withBlock.args = {
+  type: 'primary',
+  block: true
+}
+
+withOnlyIcon.args = {
+  icon: icon
+}
+
+withOnlyLoading.args = {
+  loading: true
+}

src/components/Button/Button.stories.js

@@ -0,0 +1,108 @@
+import React from 'react'
+import PropTypes, { bool } from 'prop-types'
+import './Button.css'
+// @ts-ignore
+import { Transition, Icon } from '../../index'
+import { IconContext } from '../Icon/IconContext'
+
+interface Props {
+  block: boolean
+  className: any
+  children: React.ReactNode
+  disabled: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
+  loading?: boolean
+  shadow?: boolean
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
+  style?: React.CSSProperties
+  type?:
+    | 'primary'
+    | 'default'
+    | 'secondary'
+    | 'outline'
+    | 'dashed'
+    | 'link'
+    | 'text'
+  danger: boolean
+  spaceSize: number
+}
+
+const Button = ({
+  block,
+  className,
+  children,
+  disabled = false,
+  onClick,
+  icon,
+  iconRight,
+  loading = false,
+  shadow = true,
+  size = 'medium',
+  style,
+  type = 'primary',
+  danger,
+  spaceSize,
+}: Props) => {
+  let classes = []
+  let containerClasses = ['sbui-btn-container']
+
+  if (block) {
+    containerClasses.push('sbui-btn--w-full')
+    classes.push('sbui-btn--w-full')
+  }
+
+  if (danger) {
+    classes.push('sbui-btn--danger')
+  }
+
+  if (shadow) {
+    classes.push('sbui-btn-container--shadow')
+  }
+
+  if (size) {
+    classes.push(`sbui-btn--${size}`)
+  }
+
+  classes.push(`sbui-btn-${type}`)
+
+  const showIcon = loading || icon
+
+  return (
+    <React.Fragment>
+      <span className={containerClasses.join(' ')}>
+        <button
+          className={`sbui-btn ${classes.join(' ')} ${classes.join(
+            ' '
+          )} ${className}`}
+          disabled={loading || (disabled && true)}
+          onClick={onClick}
+          style={style}
+          type="button"
+        >
+          {showIcon &&
+            (loading ? (
+              <Icon
+                size={size}
+                className={'sbui-btn--anim--spin'}
+                type={'Loader'}
+              />
+            ) : icon ? (
+              <IconContext.Provider value={{ contextSize: size }}>
+                {icon}
+              </IconContext.Provider>
+            ) : null)}
+          {children && <span>{children}</span>}
+          {iconRight && !loading && (
+            <IconContext.Provider value={{ contextSize: size }}>
+              {iconRight}
+            </IconContext.Provider>
+          )}
+        </button>
+      </span>
+    </React.Fragment>
+  )
+}
+
+export default Button