chore: add visual regression test for button component states (#212)

* chore: add visual regression test for button component states * fix: add addon to the dev dep * docs: add button hover state * fix: remove storybook-addon-pseudo-states * chore: transform css to handle native component states * fix: delete unused story template * chore: add production check for build script before release * fix: change build mode to production for releases * refactor: make release.yml more clean for production builds * fix: add more information to build stage * refactor: building improvements and code cleanup * fix: parameter implementation * fix: improve github action message Co-authored-by: Levent Anil Ozen <[email protected]>
Trendyol · Sep 1, 2022 · 9fd294c · 9fd294c
1 parent 75c8ec4
commit 9fd294c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,6 +20,10 @@ jobs:
           node-version: 16
       - name: Install dependencies
         run: npm ci
+      - name: Create env file with release config 
+        run: |
+          touch .env
+          echo RELEASE=true >> .env
       - name: Run build
         run: npm run build
       - name: Create build artifact

diff --git a/scripts/build.js b/scripts/build.js
@@ -10,6 +10,22 @@ const args = parseArgs(process.argv.slice(2), {
 (async () => {
   const { globby } = await import('globby');
   const destinationPath = 'dist';
+  const isRelease = process.env.RELEASE || false;
+
+  const cssPluginOptions = {
+    uglify: true,
+    filter: /components\/.*\.css$/
+  };
+
+  if (!isRelease) {
+    cssPluginOptions.transform = (content) => content.replace(/.*:hover[^{]*/g, matched => {
+      // Replace :hover with special class. (There will be additional classes for focus, etc. Should be implemented in here.)
+      const replacedWithNewClass = matched.replace(/:hover/, '.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__')
+      // Concat strings
+      return matched.concat(', ', replacedWithNewClass)
+    })
+  }
+
 
   try {
     const buildOptions = {
@@ -38,10 +54,7 @@ const args = parseArgs(process.argv.slice(2), {
       minify: true,
       external: ['react'],
       plugins: [
-        litCssPlugin({
-          uglify: true,
-          filter: /components\/.*\.css$/,
-        }),
+        litCssPlugin(cssPluginOptions),
       ],
     };
 

diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx
@@ -49,6 +49,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 />
 
 export const SingleButtonTemplate = (args) => html`<bl-button
+    class=${ifDefined(args.class)}  
     variant=${ifDefined(args.variant)}
     kind=${ifDefined(args.kind)}
     href=${ifDefined(args.href)}
@@ -76,11 +77,6 @@ ${SingleButtonTemplate({size: 'large', ...args})}
 ${SingleButtonTemplate({size: 'medium', ...args})}
 ${SingleButtonTemplate({size: 'small', ...args})}`;
 
-export const VariousStylesTemplate = (args) => html`
-${SingleButtonTemplate({...args})}
-${SingleButtonTemplate({kind: 'outline', ...args})}
-${SingleButtonTemplate({kind: 'text', ...args})}`;
-
 # Button
 
 Buttons allow users to take actions, and make choices with a single tap.
@@ -199,7 +195,7 @@ If button has a limited width and a long text that can not fit in a single line,
   </Story>
 </Canvas>
 
-## Disabled buttons
+## Disabled Buttons
 
 We have 2 types of disabled buttons: **Contained** and **Text**. Disable version of Contained and Outline buttons is the same.
 
@@ -209,6 +205,30 @@ We have 2 types of disabled buttons: **Contained** and **Text**. Disable version
   </Story>
 </Canvas>
 
+## Hover States
+
+export const SingleButtonHoverTemplate = (args) => html`${SingleButtonTemplate({ class: '__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__', ...args})}`;
+
+export const HoverTemplate = (args) => html`
+${SingleButtonHoverTemplate({content: 'Primary Button', ...args})}
+${SingleButtonHoverTemplate({variant: 'secondary', content: 'Secondary Button', ...args})}
+${SingleButtonHoverTemplate({variant: 'success', content: 'Success Button', ...args})}
+${SingleButtonHoverTemplate({variant: 'danger', content: 'Danger Button', ...args})}`;
+
+<Canvas isColumn>
+  <Story name="Contained Buttons Hover" args={{ content: 'Save', icon: 'info' }}>
+    {HoverTemplate.bind({})}
+  </Story>
+  <Story name="Outline Buttons Hover" args={{ content: 'Save', kind: 'outline', icon: 'info' }}>
+    {HoverTemplate.bind({})}
+  </Story>
+    <Story name="Text Buttons Hover" args={{ content: 'Save', kind: 'text', icon: 'info' }}>
+    {HoverTemplate.bind({})}
+  </Story>
+</Canvas>
+
+
+
 
 ## Reference