Merge pull request #32 from platanus/feat/button-design

platanus · Aug 24, 2023 · ad6c7d4 · ad6c7d4
2 parents adb5e0b + 85cf3ce
commit ad6c7d4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/src/components/BnBtn/BnBtn.story.vue b/src/components/BnBtn/BnBtn.story.vue
@@ -16,13 +16,15 @@ const sizeVariants = [
 const shapeVariants = [
   { shape: 'circle', size: 'lg', text: '👍' },
   { shape: 'pill' },
-  { shape: 'rounded' },
+  { shape: 'square' },
 ];
 
 const variantVariants = [
   { variant: 'default' },
   { variant: 'outline' },
+  { variant: 'outline', disabled: true, title: 'BnBtn outline disabled' },
   { variant: 'no-border' },
+  { variant: 'no-border', disabled: true, title: 'BnBtn no-border disabled' },
 ];
 
 const colorVariants = [
@@ -32,6 +34,7 @@ const colorVariants = [
 
 const loadingVariants = [
   { loading: true, text: 'Loading...', title: 'Loading' },
+  { loading: true, text: 'Loading...', size: 'xs', title: 'Loading sm' },
   { loading: true, text: 'Loading...', size: 'sm', title: 'Loading sm' },
   { loading: true, text: 'Loading...', size: 'md', title: 'Loading md' },
   { loading: true, text: 'Loading...', size: 'lg', title: 'Loading lg' },
@@ -95,7 +98,7 @@ defineExpose({
     <Variant
       v-for="(props, key) of variantVariants"
       :key="key"
-      :title="'BnBtn ' + props.variant"
+      :title="props.title || 'BnBtn ' + props.variant"
     >
       <BnBtn v-bind="props">
         {{ state.text }}

diff --git a/src/components/BnBtn/BnBtn.styles.cjs b/src/components/BnBtn/BnBtn.styles.cjs
@@ -1,21 +1,21 @@
 module.exports = {
   '.bn-btn': {
     '@apply items-center justify-center inline-flex': {},
-    '@apply disabled:opacity-60 disabled:cursor-not-allowed': {},
+    '@apply disabled:cursor-not-allowed': {},
     '&--sizes-xs': {
       '@apply text-xs': {},
-      '@apply px-3 py-1.5': {},
+      '@apply px-4 py-1.5': {},
     },
     '&--sizes-sm': {
       '@apply text-sm': {},
-      '@apply px-3 py-1.5': {},
+      '@apply px-6 py-1.5': {},
     },
     '&--sizes-md': {
       '@apply text-base': {},
-      '@apply px-4 py-2': {},
+      '@apply px-6 py-2': {},
     },
     '&--sizes-lg': {
-      '@apply text-lg': {},
+      '@apply text-base': {},
       '@apply px-6 py-3': {},
     },
     '&--shapes-circle': {
@@ -31,43 +31,47 @@ module.exports = {
         '@apply w-10 h-10': {},
       },
     },
+    '&--shapes-default': {
+      '@apply rounded': {},
+    },
     '&--shapes-pill': {
       '@apply rounded-full': {},
     },
-    '&--shapes-rounded': {
-      '@apply rounded': {},
+    '&--shapes-square': {
+      '@apply rounded-none': {},
     },
     '&--variants-default': {
       '@apply border border-solid': {},
-      '@apply focus:outline-none focus:ring-2': {},
+      '@apply focus:outline-none focus:ring-4': {},
       colors: {
+        '@apply disabled:bg-varColor-200 disabled:border-varColor-200': {},
         '@apply text-white bg-varColor-600': {},
         '@apply border-varColor-600': {},
-        '@apply hover:bg-varColor-500 hover:border-varColor-500': {},
-        '@apply focus:ring-varColor-600': {},
+        '@apply hover:bg-varColor-700 hover:border-varColor-700': {},
+        '@apply focus:ring-varColor-200': {},
       },
     },
     '&--variants-outline': {
       '@apply bg-transparent': {},
       '@apply border border-solid': {},
-      '@apply focus:outline-none focus:ring-2': {},
+      '@apply focus:outline-none focus:ring-4 focus:border-transparent': {},
       colors: {
+        '@apply disabled:text-varColor-200 disabled:border-varColor-200 disabled:bg-transparent': {},
         '@apply text-varColor-600': {},
         '@apply border-varColor-600': {},
-        '@apply hover:bg-varColor-100': {},
-
-        '@apply focus:ring-varColor-600': {},
+        '@apply hover:border-varColor-700 hover:text-varColor-700': {},
+        '@apply focus:ring-varColor-200': {},
       },
     },
     '&--variants-no-border': {
       '@apply text-banano-base-600 bg-transparent': {},
       '@apply border border-transparent': {},
       '@apply focus:outline-none': {},
       colors: {
+        '@apply disabled:text-varColor-200 disabled:bg-transparent disabled:border-transparent': {},
         '@apply text-varColor-600': {},
-        '@apply hover:text-varColor-400': {},
-
-        '@apply focus:text-varColor-400': {},
+        '@apply hover:text-varColor-700': {},
+        '@apply focus:text-varColor-700': {},
       },
     },
     '&__icon-left': {
@@ -77,18 +81,18 @@ module.exports = {
       '@apply flex shrink-0 flex-row items-center': {},
     },
     '&__loading': {
-      '@apply animate-spin mr-3': {},
+      '@apply animate-spin ml-3': {},
       '&--no-content': {
-        '@apply mr-0': {},
+        '@apply ml-0': {},
       },
       '&--sizes-xs': {
         '@apply w-4 h-4': {},
       },
       '&--sizes-sm': {
-        '@apply w-4 h-4': {},
+        '@apply w-5 h-5': {},
       },
       '&--sizes-md': {
-        '@apply w-5 h-5': {},
+        '@apply w-6 h-6': {},
       },
       '&--sizes-lg': {
         '@apply w-6 h-6': {},

diff --git a/src/components/BnBtn/BnBtn.vue b/src/components/BnBtn/BnBtn.vue
@@ -60,6 +60,7 @@ const tag = computed(() => {
         <slot name="icon-left" />
       </div>
       <span class="bn-btn__content-and-loading-wrapper">
+        <slot />
         <svg
           v-if="loading"
           class="bn-btn__loading"
@@ -86,7 +87,6 @@ const tag = computed(() => {
               5.824 3 7.938l3-2.647z"
           />
         </svg>
-        <slot />
       </span>
       <div
         v-if="$slots['icon-right']"