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

@@ -30,25 +30,14 @@ pipeline {
 
   stages {
     stage('Check Changed Files') {
-        steps {
-          script {
-            // Get the list of changed files
-            def changedFiles = sh(
-                script: "git diff --name-only origin/main...HEAD",
-                returnStdout: true
-            ).trim()
-            
-            // Check if the changes are relevant
-            def isRelevant = changedFiles.split('\n').any { file ->
-                file.startsWith('apps/connector/')
-            }
-
-            // If no relevant changes, skip the build
-            if (isRelevant) {
-                changesDetected = true
-            }
-          }
+      when {
+          changeset pattern: "apps/connector/**", comparator: "GLOB"
+      }
+      steps {
+        script {
+            changesDetected = true
         }
+      }
     }
 
     stage('Install') {

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@status-im/components",
-  "version": "1.0.6",
+  "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 })}>