Merge pull request #177 from PrestaShopCorp/improvement/button

Improvement/button
PrestaShopCorp · Aug 31, 2023 · 737992e · 737992e
2 parents 34362ea + 73d66cf
commit 737992e
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 3 deletions.
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
@@ -5,16 +5,18 @@ import type Button from './button.vue'
 
 export const buttonVariants = [
   'primary',
+  'primary-reverse',
   'destructive',
   'secondary',
+  'secondary-reverse',
   'tertiary',
   'text',
+  'text-reverse',
   'info',
   'success',
   'warning',
   'danger',
 ] as const
-
 export type PuikButtonVariant = (typeof buttonVariants)[number]
 
 export const buttonSizes = ['sm', 'md', 'lg'] as const

diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
@@ -115,10 +115,10 @@ export const Default = {
     :disabled="true|false"
     :left-icon="leftIcon"
     :right-icon="rightIcon"
-  >
+    >
     My button
   </puik-button>
-
+  
   <!--HTML/CSS Snippet-->
   <!--
   $sizes: ${buttonSizesSummary} (defaults to md)
@@ -193,6 +193,30 @@ export const Primary: StoryObj = {
   },
 }
 
+export const PrimaryReverse: StoryObj = {
+  render: ButtonTemplate,
+
+  args: {
+    variant: 'primary-reverse',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet -->
+  <puik-button>My button</puik-button>
+
+  <!--HTML/CSS Snippet-->
+  <button class="puik-button puik-button--primary-reverse">My button</button>
+        `,
+        language: 'html',
+        dark: true,
+      },
+    },
+  },
+}
+
 export const Secondary: StoryObj = {
   render: ButtonTemplate,
 
@@ -216,6 +240,30 @@ export const Secondary: StoryObj = {
   },
 }
 
+export const SecondaryReverse: StoryObj = {
+  render: ButtonTemplate,
+
+  args: {
+    variant: 'secondary-reverse',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet -->
+  <puik-button variant="secondary">My button</puik-button>
+
+  <!--HTML/CSS Snippet-->
+  <button class="puik-button puik-button--secondary-reverse">My button</button>
+        `,
+        language: 'html',
+        dark: true,
+      },
+    },
+  },
+}
+
 export const Tertiary: StoryObj = {
   render: ButtonTemplate,
 
@@ -285,6 +333,30 @@ export const Text: StoryObj = {
   },
 }
 
+export const TextReverse: StoryObj = {
+  render: ButtonTemplate,
+
+  args: {
+    variant: 'text-reverse',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet -->
+  <puik-button variant="text">My button</puik-button>
+
+  <!--HTML/CSS Snippet-->
+  <button class="puik-button puik-button--text-reverse">My button</button>
+        `,
+        language: 'html',
+        dark: true,
+      },
+    },
+  },
+}
+
 export const Info: StoryObj = {
   render: ButtonTemplate,
 

diff --git a/packages/theme/src/button.scss b/packages/theme/src/button.scss
@@ -44,6 +44,19 @@
       @apply bg-primary-500;
     }
   }
+  &--primary-reverse {
+    @apply bg-white text-black;
+    &:hover {
+      @apply bg-primary-200;
+    }
+    &:active {
+      @apply bg-primary-400;
+    }
+    &:disabled,
+    &.puik-button--disabled {
+      @apply bg-primary-500 text-white;
+    }
+  }
 
   &--secondary {
     @apply bg-white text-primary border border-primary;
@@ -58,6 +71,19 @@
       @apply bg-primary-200 text-primary-500 border-primary-400;
     }
   }
+  &--secondary-reverse {
+    @apply bg-transparent text-white border border-white;
+    &:hover {
+      @apply bg-primary-600;
+    }
+    &:active {
+      @apply bg-primary-700;
+    }
+    &:disabled,
+    &.puik-button--disabled {
+      @apply bg-primary-200 text-primary-500 border-primary-400;
+    }
+  }
 
   &--tertiary {
     @apply bg-primary-400 text-primary;
@@ -100,6 +126,20 @@
       @apply text-primary-500;
     }
   }
+  &--text-reverse {
+    @apply text-white;
+    &:hover {
+      @apply text-primary;
+      @apply bg-primary-300;
+    }
+    &:active {
+      @apply bg-primary-400;
+    }
+    &:disabled,
+    &.puik-button--disabled {
+      @apply text-primary-500;
+    }
+  }
 
   &--info {
     @apply text-primary bg-blue-50 border border-blue;