feat(web): add button types

LordNex · Feb 20, 2021 · 0cac2fe · 0cac2fe
1 parent 5965da8
commit 0cac2fe
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/web/src/StyleGuide.jsx b/web/src/StyleGuide.jsx
@@ -28,6 +28,30 @@ export default function StyleGuide() {
  <Button color="green">Save</Button>
  <Button disabled>Disabled</Button>
  </div>
+ <div class="flex space-x-4 mb-4">
+ <Button type="text">Default</Button>
+ <Button color="red" type="text">
+ Danger
+ </Button>
+ <Button color="green" type="text">
+ Save
+ </Button>
+ <Button disabled type="text">
+ Disabled
+ </Button>
+ </div>
+ <div class="flex space-x-4 mb-4">
+ <Button type="outlined">Default</Button>
+ <Button color="red" type="outlined">
+ Danger
+ </Button>
+ <Button color="green" type="outlined">
+ Save
+ </Button>
+ <Button disabled type="outlined">
+ Disabled
+ </Button>
+ </div>
 
  <Heading size="md">Switch</Heading>
  <div class="flex">

diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
@@ -5,24 +5,31 @@ const noop = () => {};
 const ButtonColors = {
  blue: {
  contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
- outlined: '',
+ outlined:
+ 'text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
  text:
  'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
  },
  red: {
  contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300',
- outlined: '',
- text: '',
+ outlined:
+ 'text-red-500 border-2 border-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
+ text:
+ 'text-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
  },
  green: {
  contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300',
- outlined: '',
- text: '',
+ outlined:
+ 'text-green-500 border-2 border-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
+ text:
+ 'text-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
  },
  disabled: {
  contained: 'bg-gray-400',
- outlined: '',
- text: '',
+ outlined:
+ 'text-gray-500 border-2 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+ text:
+ 'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
  },
  black: {
  contained: '',
@@ -48,7 +55,7 @@ export default function Button({
  type = 'contained',
  ...attrs
 }) {
- let classes = `${className} ${
+ let classes = `${className} ${ButtonTypes[type]} ${
  ButtonColors[disabled ? 'disabled' : color][type]
  } font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
  disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'