test: this should skip steps

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

README.md

@@ -6,16 +6,16 @@ This monorepo contains packages for building web applications in the Status ecos
 
 ## Packages
 
-| Name                                                   | `npm`                                                                                                                     | Description                                                                                                                                                                   |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components) | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
-| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                 | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |
-| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)           | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
-| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)     | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
-| [`@status-im/eslint-config`](./packages/eslint-config) |                                                                                                                           | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
+| Name                                                   | `npm`                                                                                                                               | Description                                                                                                                                                                   |
+| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)           | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
+| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                           | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |
+| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                     | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
+| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)               | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
+| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config.svg)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
 
 ## Apps
-
+test
 | Name                                   | Description                                                                   |
 | -------------------------------------- | ----------------------------------------------------------------------------- |
 | [`./apps/connector`](./apps/connector) | Status Desktop Wallet extended to decentralised applications in your browser. |

apps/connector/Jenkinsfile

@@ -1,6 +1,8 @@
 #!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.9.11'
 
+def changesDetected = false
+
 pipeline {
   agent { label 'linux' }
 
@@ -27,7 +29,21 @@ pipeline {
   }
 
   stages {
+    stage('Check Changed Files') {
+      when {
+          changeset pattern: "apps/connector/**", comparator: "GLOB"
+      }
+      steps {
+        script {
+            changesDetected = true
+        }
+      }
+    }
+
     stage('Install') {
+      when {
+          expression { changesDetected }
+      }
       steps {
           dir("${env.WORKSPACE}/apps/connector") {
             script {
@@ -42,6 +58,9 @@ pipeline {
     }
 
     stage('Build') {
+      when {
+          expression { changesDetected }
+      }
       steps {
           dir("${env.WORKSPACE}/apps/connector") {
             script {
@@ -56,6 +75,9 @@ pipeline {
     }
 
     stage('Zip') {
+      when {
+          expression { changesDetected }
+      }
       steps {
         dir("${env.WORKSPACE}/apps/connector") {
           zip(
@@ -68,6 +90,9 @@ pipeline {
     }
 
     stage('Archive') {
+      when {
+          expression { changesDetected }
+      }
       steps {
         dir("${env.WORKSPACE}/apps/connector") {
           archiveArtifacts(
@@ -79,6 +104,9 @@ pipeline {
     }
 
     stage('Upload') {
+      when {
+          expression { changesDetected }
+      }
       steps {
         dir("${env.WORKSPACE}/apps/connector") {
           script {
@@ -90,8 +118,20 @@ pipeline {
   }
 
   post {
-    success { script { github.notifyPR(true) } }
-    failure { script { github.notifyPR(false) } }
+    success {
+      script {
+        if(changesDetected) {
+          github.notifyPR(true) 
+        } 
+      }
+    }
+    failure {
+      script {
+        if(changesDetected) {
+          github.notifyPR(false) 
+        } 
+      }
+    }
     cleanup { cleanWs() }
   }
 }

packages/components/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @status-im/components
 
+## 1.0.7
+
+### Patch Changes
+
+- e9979fd: updates icon color for missing compound variants
+- bf14368: add `type="account"` to `<ContextTag />`
+
+## 1.0.6
+
+### Patch Changes
+
+- 7f21132: fix `<Shortcut />`icon prop and symbol centering
+
 ## 1.0.5
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@status-im/components",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MPL-2.0",
   "sideEffects": [
     "*.css"

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

@@ -1,3 +1,7 @@
+import { Fragment } from 'react'
+
+import { PlaceholderIcon } from '@status-im/icons/20'
+
 import { Button } from './button'
 
 import type { Meta, StoryObj } from '@storybook/react'
@@ -51,7 +55,22 @@ const meta: Meta<
       ).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} />
+            <Fragment key={size}>
+              <Button {...args} variant={variant} size={size} />
+              {/* With icon */}
+              <Button
+                {...args}
+                size={size}
+                variant={variant}
+                iconBefore={<PlaceholderIcon />}
+              />
+              <Button
+                aria-label="Button with icon only"
+                size={size}
+                variant={variant}
+                icon={<PlaceholderIcon />}
+              />
+            </Fragment>
           ))}
         </div>
       ))}

packages/components/src/button/button.tsx

@@ -193,11 +193,41 @@ const iconStyles = cva({
       placement: 'after',
       className: '-mr-0.5',
     },
+    {
+      variant: 'grey',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
     {
       variant: 'outline',
       iconOnly: true,
       className: '!text-neutral-100 dark:!text-white-100',
     },
+    {
+      variant: 'darkGrey',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
+    {
+      variant: 'ghost',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
+    {
+      variant: 'primary',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
+    {
+      variant: 'positive',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
+    {
+      variant: 'danger',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
   ],
 })
 

packages/components/src/context-tag/context-tag.stories.tsx

@@ -45,6 +45,7 @@ const ContextTagVariant = (props: Props) => {
           />
         }
       />
+      <ContextTag {...props} type="account" label="Account name" emoji="🐷" />
       <ContextTag
         {...props}
         type="icon"

packages/components/src/context-tag/context-tag.tsx

@@ -3,6 +3,8 @@ import { cloneElement, forwardRef } from 'react'
 import { cva, cx } from 'cva'
 import { match } from 'ts-pattern'
 
+import { Avatar } from '../avatar'
+
 import type { IconElement } from '../types'
 import type { VariantProps } from 'cva'
 
@@ -15,10 +17,10 @@ type Props = {
   | { type: 'community'; label: string; icon: IconElement }
   | { type: 'token'; label: string; icon: IconElement }
   | { type: 'network'; label: string; icon: IconElement }
+  | { type: 'account'; label: string; emoji: string }
   | { type: 'icon'; label: string; icon: IconElement }
 )
 // | { type: 'user'; user: { name: string; src: string } }
-// | { type: 'account'; account: { name: string; emoji: string } }
 // | {
 //     type: 'group'
 //     group: {
@@ -36,7 +38,7 @@ type Props = {
 
 const baseStyles = cva({
   base: [
-    'inline-flex w-fit cursor-default items-center rounded-full',
+    'inline-flex w-fit cursor-default items-center',
     'font-medium text-neutral-100 dark:text-white-100',
     'bg-neutral-10 blur:bg-neutral-80/5 dark:bg-neutral-90 blur:dark:bg-white-5',
   ],
@@ -50,6 +52,13 @@ const baseStyles = cva({
     selected: {
       true: 'border border-customisation-50',
     },
+    rounded: {
+      '8': 'rounded-8',
+      full: 'rounded-full',
+    },
+  },
+  defaultVariants: {
+    rounded: 'full',
   },
 })
 
@@ -116,6 +125,23 @@ const ContextTag = (props: Props, ref: React.Ref<HTMLDivElement>) => {
         </div>
       )
     })
+    .with({ type: 'account' }, ({ label, emoji }) => {
+      return (
+        <div {...rest} ref={ref} className={baseStyles({ size, rounded: '8' })}>
+          <span className={iconStyles({ size, rounded: '6', offset: size })}>
+            <Avatar
+              type="account"
+              size={match(size)
+                .with('32', () => '28' as const)
+                .otherwise(() => '20' as const)}
+              name={label}
+              emoji={emoji}
+            />
+          </span>
+          <span>{label}</span>
+        </div>
+      )
+    })
     .with({ type: 'icon' }, ({ icon, label }) => {
       return (
         <div {...rest} ref={ref} className={baseStyles({ size })}>

packages/components/src/shortcut/shortcut.stories.tsx

@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'gray'] as const
 // eslint-disable-next-line react/display-name
 const renderVariant = (variant: (typeof variants)[number]) => (props: any) => (
   <div className="flex items-center gap-2">
-    <Shortcut {...props} variant={variant} icon={CommandIcon} />
+    <Shortcut {...props} variant={variant} icon={<CommandIcon />} />
     <Shortcut {...props} variant={variant} symbol="K" />
   </div>
 )

packages/components/src/shortcut/shortcut.tsx

@@ -1,13 +1,14 @@
-import { forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import { match, P } from 'ts-pattern'
 
 import { cva } from '../utils/variants'
 
+import type { IconElement } from '../types'
 import type { VariantProps } from '../utils/variants'
 
 const styles = cva({
-  base: 'flex size-4 flex-shrink-0 items-center justify-center rounded-6 border',
+  base: 'grid size-4 flex-shrink-0 place-items-center rounded-6 border',
   variants: {
     variant: {
       primary: [
@@ -32,7 +33,7 @@ const styles = cva({
 type Props = VariantProps<typeof styles> &
   (
     | {
-        icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+        icon: IconElement
         symbol?: never
       }
     | {
@@ -42,15 +43,17 @@ type Props = VariantProps<typeof styles> &
   )
 
 const Shortcut = (props: Props, ref: React.Ref<HTMLDivElement>) => {
-  const { variant = 'primary', ...rest } = props
+  const { variant = 'primary' } = props
 
   return (
-    <div className={styles({ variant })} ref={ref} {...rest}>
+    <div className={styles({ variant })} ref={ref}>
       {match(props)
         .with({ symbol: P.string }, ({ symbol }) => (
           <span className="text-11 font-medium">{symbol}</span>
         ))
-        .with({ icon: P._ }, ({ icon: Icon }) => <Icon className="size-3" />)
+        .with({ icon: P._ }, ({ icon }) =>
+          cloneElement(icon, { className: 'size-3' }),
+        )
         .exhaustive()}
     </div>
   )