feat(button): add size and variant ghost

privy-open-source · Apr 5, 2022 · 51b01ac · 51b01ac
1 parent 6ff60ff
commit 51b01ac
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 64 deletions.
diff --git a/components/banner/component.md b/components/banner/component.md
@@ -71,10 +71,10 @@ You can hide close button with `dismissable` set to `false`
 
 ### Props
 
-| Props         | Type      | Default  | Description                                     |
-|---------------|-----------|----------|-------------------------------------------------|
-| `variant`     | `String`  | `'info'` | Banner variant, valid value is `info`, `danger` |
-| `dismissable` | `Boolean` | `true`   | Show / Hide dismiss button                      |
+| Props         | Type      | Default | Description                                     |
+|---------------|-----------|---------|-------------------------------------------------|
+| `variant`     | `String`  | `info`  | Banner variant, valid value is `info`, `danger` |
+| `dismissable` | `Boolean` | `true`  | Show / Hide dismiss button                      |
 
 ### Slots
 | Name      | Description                |

diff --git a/components/button/Button.spec.ts b/components/button/Button.spec.ts
@@ -54,6 +54,23 @@ it('should have style "secondary" if color props set to "secondary"', () => {
   expect(button).not.toHaveClass('btn--primary')
 })
 
+it('should have style "lg" if size props set to "lg"', () => {
+  const screen = render({
+    components: { Button },
+    template  : `
+      <Button size="lg">
+        Hello
+      </Button>
+    `,
+  })
+
+  const button = screen.queryByTestId('btn')
+
+  expect(button).toBeInTheDocument()
+  expect(button).toHaveClass('btn', 'btn--solid', 'btn--lg')
+  expect(button).not.toHaveClass('btn--md')
+})
+
 it('should emit "click" when button is clicked', async () => {
   const spy    = vi.fn()
   const screen = render({

diff --git a/components/button/Button.vue b/components/button/Button.vue
@@ -61,10 +61,18 @@ export default defineComponent({
   @apply self-baseline;
 }
 
+.btn--sm {
+  @apply p-1 gap-1 text-sm;
+}
+
 .btn--md {
   @apply p-2 gap-2;
 }
 
+.btn--lg {
+  @apply p-3 gap-3 text-lg;
+}
+
 .btn--solid {
   @apply border;
 
@@ -129,33 +137,39 @@ export default defineComponent({
   }
 }
 
+.btn--ghost {
+  @apply border border-transparent hover:bg-black hover:bg-opacity-5 hover:shadow-lg active:shadow-none;
+}
+
 .btn--link {
+  @apply border border-transparent hover:underline;
+
   &.btn--primary {
-    @apply text-primary-100 hover:underline hover:text-primary-hovered active:text-primary-focused;
+    @apply text-primary-100 hover:text-primary-hovered active:text-primary-focused;
   }
 
   &.btn--secondary {
-    @apply text-secondary-100 hover:underline hover:text-secondary-hovered active:text-secondary-focused;
+    @apply text-secondary-100 hover:text-secondary-hovered active:text-secondary-focused;
   }
 
   &.btn--success {
-    @apply text-success-100 hover:underline hover:text-success-hovered active:text-success-focused;
+    @apply text-success-100 hover:text-success-hovered active:text-success-focused;
   }
 
   &.btn--info {
-    @apply text-info-100 hover:underline hover:text-info-hovered active:text-info-focused;
+    @apply text-info-100 hover:text-info-hovered active:text-info-focused;
   }
 
   &.btn--warning {
-    @apply text-warning-100 hover:underline hover:text-warning-hovered active:text-warning-focused;
+    @apply text-warning-100 hover:text-warning-hovered active:text-warning-focused;
   }
 
   &.btn--danger {
-    @apply text-danger-100 hover:underline hover:text-danger-hovered active:text-danger-focused;
+    @apply text-danger-100 hover:text-danger-hovered active:text-danger-focused;
   }
 
   &.btn--gold {
-    @apply text-gold-100 hover:underline hover:text-gold-hovered active:text-gold-focused;
+    @apply text-gold-100 hover:text-gold-hovered active:text-gold-focused;
   }
 }
 </style>
diff --git a/components/button/component.md b/components/button/component.md
@@ -1,10 +1,6 @@
 <script setup>
   import Button from './Button.vue'
   import IconBee from '@carbon/icons-vue/lib/bee/20'
-
-  function log(text) {
-    console.log(text)
-  }
 </script>
 
 # Button
@@ -27,9 +23,7 @@
 
 ```vue
 <template>
-  <Button>
-    <IconBee />
-  </Button>
+  <Button><IconBee /></Button>
 </template>
 
 <script setup>
@@ -39,16 +33,15 @@
 
 ### Button with icon + text
 
-<div><Button class="mt-3 mr-1"><IconBee /> Click Me</Button><Button class="mt-3 mr-1">Click Me <IconBee /></Button></div>
+<div class="flex flex-wrap gap-1 mt-3">
+  <Button><IconBee /> Click Me</Button>
+  <Button>Click Me <IconBee /></Button>
+</div>
 
 ```vue
 <template>
-  <Button>
-    <IconBee /> Click Me
-  </Button>
-  <Button>
-    Click Me <IconBee />
-  </Button>
+  <Button><IconBee /> Click Me</Button>
+  <Button>Click Me <IconBee /></Button>
 </template>
 
 <script setup>
@@ -60,10 +53,12 @@
 
 Button has 4 variants, `solid`, `outline`, `ghost`, `link`. default is `solid`
 
-<Button class="mr-1" variant="solid">Click me</Button>
-<Button class="mr-1" variant="outline">Click me</Button>
-<Button class="mr-1" variant="ghost">Click me</Button>
-<Button class="mr-1" variant="link">Click me</Button>
+<div class="flex flex-wrap gap-1">
+  <Button variant="solid">Click me</Button>
+  <Button variant="outline">Click me</Button>
+  <Button variant="ghost">Click me</Button>
+  <Button variant="link">Click me</Button>
+</div>
 
 ```vue
 <template>
@@ -78,13 +73,15 @@ Button has 4 variants, `solid`, `outline`, `ghost`, `link`. default is `solid`
 
 Button available in 7 different colors `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `gold`. default is `primary`
 
-<Button class="mr-1" color="primary">Click me</Button>
-<Button class="mr-1" color="secondary">Click me</Button>
-<Button class="mr-1" color="success">Click me</Button>
-<Button class="mr-1" color="info">Click me</Button>
-<Button class="mr-1" color="warning">Click me</Button>
-<Button class="mr-1" color="danger">Click me</Button>
-<Button class="mr-1" color="gold">Click me</Button>
+<div class="flex flex-wrap gap-1">
+  <Button color="primary">Click me</Button>
+  <Button color="secondary">Click me</Button>
+  <Button color="success">Click me</Button>
+  <Button color="info">Click me</Button>
+  <Button color="warning">Click me</Button>
+  <Button color="danger">Click me</Button>
+  <Button color="gold">Click me</Button>
+</div>
 
 ```vue
 <template>
@@ -100,23 +97,23 @@ Button available in 7 different colors `primary`, `secondary`, `success`, `info`
 
 It's also work with other variants (except `ghost`).
 
-<div>
-  <Button class="mr-1" variant="outline" color="primary">Click me</Button>
-  <Button class="mr-1" variant="outline" color="secondary">Click me</Button>
-  <Button class="mr-1" variant="outline" color="success">Click me</Button>
-  <Button class="mr-1" variant="outline" color="info">Click me</Button>
-  <Button class="mr-1" variant="outline" color="warning">Click me</Button>
-  <Button class="mr-1" variant="outline" color="danger">Click me</Button>
-  <Button class="mr-1" variant="outline" color="gold">Click me</Button>
+<div class="flex flex-wrap gap-1">
+  <Button variant="outline" color="primary">Click me</Button>
+  <Button variant="outline" color="secondary">Click me</Button>
+  <Button variant="outline" color="success">Click me</Button>
+  <Button variant="outline" color="info">Click me</Button>
+  <Button variant="outline" color="warning">Click me</Button>
+  <Button variant="outline" color="danger">Click me</Button>
+  <Button variant="outline" color="gold">Click me</Button>
 </div>
-<div class="mt-1">
-  <Button class="mr-1" variant="link" color="primary">Click me</Button>
-  <Button class="mr-1" variant="link" color="secondary">Click me</Button>
-  <Button class="mr-1" variant="link" color="success">Click me</Button>
-  <Button class="mr-1" variant="link" color="info">Click me</Button>
-  <Button class="mr-1" variant="link" color="warning">Click me</Button>
-  <Button class="mr-1" variant="link" color="danger">Click me</Button>
-  <Button class="mr-1" variant="link" color="gold">Click me</Button>
+<div class="flex flex-wrap gap-1">
+  <Button variant="link" color="primary">Click me</Button>
+  <Button variant="link" color="secondary">Click me</Button>
+  <Button variant="link" color="success">Click me</Button>
+  <Button variant="link" color="info">Click me</Button>
+  <Button variant="link" color="warning">Click me</Button>
+  <Button variant="link" color="danger">Click me</Button>
+  <Button variant="link" color="gold">Click me</Button>
 </div>
 
 ```vue
@@ -139,12 +136,32 @@ It's also work with other variants (except `ghost`).
 </template>
 ```
 
+## Sizing
+
+3 sizes you can use: `sm`, `md`, `lg`. default is `md`
+
+<div class="flex flex-wrap items-start gap-1">
+  <Button size="sm">Click me</Button>
+  <Button size="md">Click me</Button>
+  <Button size="lg">Click me</Button>
+</div>
+
+```vue
+<template>
+  <Button size="sm">Click me</Button>
+  <Button size="md">Click me</Button>
+  <Button size="lg">Click me</Button>
+</template>
+```
+
 ## Disable state
 
-<Button class="mr-1" variant="solid" disabled>Click me</Button>
-<Button class="mr-1" variant="outline" disabled>Click me</Button>
-<Button class="mr-1" variant="ghost" disabled>Click me</Button>
-<Button class="mr-1" variant="link" disabled>Click me</Button>
+<div class="flex flex-wrap gap-1">
+  <Button variant="solid" disabled>Click me</Button>
+  <Button variant="outline" disabled>Click me</Button>
+  <Button variant="ghost" disabled>Click me</Button>
+  <Button variant="link" disabled>Click me</Button>
+</div>
 
 ```vue
 <template>
@@ -161,10 +178,10 @@ It's also work with other variants (except `ghost`).
 
 | Props      | Type      | Default   | Description                                                                                                 |
 |------------|-----------|-----------|-------------------------------------------------------------------------------------------------------------|
-| `variant`  | `String`  | `'solid'` | Button style variant, valid value is `solid`, `outline`, `ghost`, `link`                                    |
+| `variant`  | `String`  | `solid`   | Button style variant, valid value is `solid`, `outline`, `ghost`, `link`                                    |
 | `color`    | `String`  | `primary` | Button color variant, valid value is `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `gold` |
 | `size`     | `String`  | `md`      | Size of button, valid value is `sm`, `md`, `lg`                                                             |
-| `disabled` | `Boolean` | `false`   | Disabled state                                                                                              |
+| `disabled` | `Boolean` | `false`   | Disable state                                                                                               |
 
 ### Slots
 | Name      | Description                |

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -119,11 +119,12 @@ module.exports = {
         75 : '#BABABA',
         100: '#A3A3A3',
       },
-      black: '#000000',
-      dark : '#404040',
-      grey : '#808080',
-      light: '#BFBFBF',
-      white: '#FFFFFF',
+      black      : '#000000',
+      dark       : '#404040',
+      grey       : '#808080',
+      light      : '#BFBFBF',
+      white      : '#FFFFFF',
+      transparent: 'transparent',
     },
     borderRadius: {
       'none'   : '0rem',
@@ -137,7 +138,7 @@ module.exports = {
       '2xl'    : '1.25rem',
       '3xl'    : '1.375rem',
       'full'   : '9999px',
-    }
+    },
   },
   plugins: [
     require('@tailwindcss/typography'),