u

* jenkinsfile: fix paths for all steps

Use newest jenkins lib tag which adds the entryPoint as an argument to the nix shell function.

Referenced issue: https://github.com/status-im/status-web/issues/590

Signed-off-by: markoburcul <marko@status.im>

apps/connector/Jenkinsfile

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.9.1'
+library 'status-jenkins-lib@v1.9.11'
 
 pipeline {
   agent { label 'linux' }
@@ -28,40 +28,64 @@ pipeline {
 
   stages {
     stage('Install') {
-      steps { script {
-        nix.shell('yarn install --frozen-lockfile', pure: false)
-      } }
+      steps {
+          dir("${env.WORKSPACE}/apps/connector") {
+            script {
+              nix.shell(
+                'yarn install --frozen-lockfile',
+                pure: false,
+                entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
+              )
+            }
+          }
+      }
     }
 
     stage('Build') {
-      steps { script {
-        nix.shell('yarn build:chrome', pure: false)
-      } }
+      steps {
+          dir("${env.WORKSPACE}/apps/connector") {
+            script {
+              nix.shell(
+                'yarn build:chrome',
+                pure: false,
+                entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
+              )
+            }
+          }
+      }
     }
 
     stage('Zip') {
       steps {
-        zip(
-          zipFile: env.ZIP_NAME,
-          dir: 'build/chrome-mv3-prod',
-          archive: false,
-        )
+        dir("${env.WORKSPACE}/apps/connector") {
+          zip(
+            zipFile: env.ZIP_NAME,
+            dir: 'build/chrome-mv3-prod',
+            archive: false,
+          )
+        }
       }
     }
 
     stage('Archive') {
       steps {
-        archiveArtifacts(
-          artifacts: env.ZIP_NAME,
-          fingerprint: true,
-        )
+        dir("${env.WORKSPACE}/apps/connector") {
+          archiveArtifacts(
+            artifacts: env.ZIP_NAME,
+            fingerprint: true,
+          )
+        }
       }
     }
 
     stage('Upload') {
-      steps { script {
-        env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
-      } }
+      steps {
+        dir("${env.WORKSPACE}/apps/connector") {
+          script {
+            env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
+          }
+        }
+      }
     }
   }
 

packages/components/src/button/button.stories.tsx

@@ -1,3 +1,5 @@
+import { PlaceholderIcon } from '@status-im/icons/20'
+
 import { Button } from './button'
 
 import type { Meta, StoryObj } from '@storybook/react'
@@ -55,6 +57,52 @@ const meta: Meta<
           ))}
         </div>
       ))}
+      {(
+        [
+          'primary',
+          'positive',
+          'grey',
+          'darkGrey',
+          'outline',
+          'ghost',
+          'danger',
+        ] as const
+      ).map(variant => (
+        <div key={variant} className="flex items-center gap-4">
+          {(['40', '32', '24'] as const).map(size => (
+            <Button
+              key={size}
+              {...args}
+              variant={variant}
+              size={size}
+              iconAfter={<PlaceholderIcon />}
+            />
+          ))}
+        </div>
+      ))}
+      {(
+        [
+          'primary',
+          'positive',
+          'grey',
+          'darkGrey',
+          'outline',
+          'ghost',
+          'danger',
+        ] as const
+      ).map(variant => (
+        <div key={variant} className="flex items-center gap-4">
+          {(['40', '32', '24'] as const).map(size => (
+            <Button
+              key={size}
+              {...args}
+              variant={variant}
+              size={size}
+              iconBefore={<PlaceholderIcon />}
+            />
+          ))}
+        </div>
+      ))}
     </div>
   ),
 }

packages/components/src/button/button.tsx

@@ -69,18 +69,19 @@ function Button(
       onClick={onClick}
       {...buttonProps}
       ref={ref}
-      className={styles({ variant, size })}
+      className={styles({
+        variant,
+        size,
+        iconPlacement:
+          (iconBefore && 'before') || (iconAfter && 'after') || 'unset',
+      })}
     >
       {iconBefore && (
-        <span className={iconStyles({ size, placement: 'before', variant })}>
-          {iconBefore}
-        </span>
+        <span className={iconStyles({ size, variant })}>{iconBefore}</span>
       )}
       <span className="flex-1 whitespace-nowrap">{children}</span>
       {iconAfter && (
-        <span className={iconStyles({ size, placement: 'after', variant })}>
-          {iconAfter}
-        </span>
+        <span className={iconStyles({ size, variant })}>{iconAfter}</span>
       )}
     </Element>
   )
@@ -126,15 +127,67 @@ const styles = cva({
         'dark:bg-danger-60 dark:hover:bg-danger-50 dark:pressed:bg-danger-50/[.9]',
       ],
     },
+    iconPlacement: {
+      before: '',
+      after: '',
+      unset: '',
+    },
     size: {
-      '40': 'h-[40px] rounded-12 px-4 text-15',
-      '32': 'h-[32px] rounded-10 px-3 text-15',
-      '24': 'h-[24px] rounded-8 px-2 text-13',
+      '40': 'h-[40px] rounded-12 text-15',
+      '32': 'h-[32px] rounded-10 text-15',
+      '24': 'h-[24px] rounded-8 text-13',
     },
     iconOnly: {
       true: 'aspect-square !px-0',
     },
   },
+  compoundVariants: [
+    {
+      size: '40',
+      iconPlacement: 'unset',
+      className: 'px-4',
+    },
+    {
+      size: '32',
+      iconPlacement: 'unset',
+      className: 'px-3',
+    },
+    {
+      size: '24',
+      iconPlacement: 'unset',
+      className: 'px-2',
+    },
+    {
+      size: '40',
+      iconPlacement: 'before',
+      className: 'pl-3 pr-4',
+    },
+    {
+      size: '40',
+      iconPlacement: 'after',
+      className: 'pl-4 pr-3',
+    },
+    {
+      size: '32',
+      iconPlacement: 'before',
+      className: 'pl-2 pr-3',
+    },
+    {
+      size: '32',
+      iconPlacement: 'after',
+      className: 'pl-3 pr-2',
+    },
+    {
+      size: '24',
+      iconPlacement: 'before',
+      className: 'pl-1.5 pr-2',
+    },
+    {
+      size: '24',
+      iconPlacement: 'after',
+      className: 'pl-2 pr-1.5',
+    },
+  ],
 })
 
 const iconStyles = cva({
@@ -159,10 +212,6 @@ const iconStyles = cva({
       ghost: ['text-neutral-50'],
       danger: ['text-blur-white/70'],
     },
-    placement: {
-      before: '',
-      after: '',
-    },
     size: {
       '40': 'size-5',
       '32': 'size-5',
@@ -173,26 +222,6 @@ const iconStyles = cva({
     },
   },
   compoundVariants: [
-    {
-      size: ['40', '32'],
-      placement: 'before',
-      className: '-ml-1',
-    },
-    {
-      size: ['40', '32'],
-      placement: 'after',
-      className: '-mr-1',
-    },
-    {
-      size: '24',
-      placement: 'before',
-      className: '-ml-0.5',
-    },
-    {
-      size: '24',
-      placement: 'after',
-      className: '-mr-0.5',
-    },
     {
       variant: 'outline',
       iconOnly: true,