From ba5ad391b5a6b0256d2f334b3f2182ed59d4977a Mon Sep 17 00:00:00 2001 From: Matt Gallo Date: Fri, 10 Oct 2025 09:38:22 -0400 Subject: [PATCH 1/2] feat(user-avatar): add code connect config --- .../ibm-products-web-components/package.json | 1 + .../user-avatar/user-avatar.figma.ts | 140 ++++++++++++++++++ .../src/typings/resources.d.ts | 1 + yarn.lock | 103 ++++++++++++- 4 files changed, 243 insertions(+), 2 deletions(-) create mode 100644 packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index 715bc6997b1..5da33725ccf 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -70,6 +70,7 @@ "@carbon/icon-helpers": "^10.65.0", "@carbon/icons": "^11.66.0", "@carbon/motion": "^11.34.0", + "@figma/code-connect": "^1.3.6", "@ibm/telemetry-js-config-generator": "^2.1.0", "@mordech/vite-lit-loader": "^0.37.0", "@open-wc/testing": "^4.0.0", diff --git a/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts b/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts new file mode 100644 index 00000000000..d16774372ae --- /dev/null +++ b/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts @@ -0,0 +1,140 @@ +/** + * Copyright IBM Corp. 2025, 2025 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import figma, { html } from '@figma/code-connect/html'; +import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'; +import Group from '@carbon/icons/es/group/16'; +import User from '@carbon/icons/es/user/16'; +import './user-avatar'; + +const sharedProps = { + name: figma.string('Initials text'), + size: figma.enum('Size', { + 'Extra large': 'xl', + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + + tooltipProps: figma.nestedProps('Tooltip', { + text: figma.string('Tooltip text'), + tooltipAlignment: figma.enum('🚫 Position', { + Top: 'top', + Right: 'right', + Bottom: 'bottom', + Left: 'left', + }), + }), + + bgProps: figma.nestedProps('Background', { + color: figma.enum('Color', { + Cyan: figma.enum('Sequence', { + Primary: 'order-1-cyan', + Secondary: 'order-7-cyan', + }), + Gray: figma.enum('Sequence', { + Primary: 'order-2-gray', + Secondary: 'order-8-gray', + }), + Green: figma.enum('Sequence', { + Primary: 'order-3-green', + Secondary: 'order-9-green', + }), + Magenta: figma.enum('Sequence', { + Primary: 'order-4-magenta', + Secondary: 'order-10-magenta', + }), + Purple: figma.enum('Sequence', { + Primary: 'order-5-purple', + Secondary: 'order-11-purple', + }), + Teal: figma.enum('Sequence', { + Primary: 'order-6-teal', + Secondary: 'order-12-teal', + }), + }), + }), +}; + +const connectionURL = + 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4'; + +figma.connect(connectionURL, { + variant: { Type: 'Image' }, + props: sharedProps, + + example: ({ tooltipProps, name, size }) => + html` + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + ], +}); + +figma.connect(connectionURL, { + variant: { Type: 'Initials' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps }) => + html` + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + ], +}); + +figma.connect(connectionURL, { + variant: { Type: 'Single user' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps }) => + html` + ${iconLoader(User, { slot: 'rendericon' })} + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", + "import User from '@carbon/icons/es/user/16'", + ], +}); + +figma.connect(connectionURL, { + variant: { Type: 'User group' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps }) => + html` + ${iconLoader(Group, { slot: 'rendericon' })} + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", + "import Group from '@carbon/icons/es/group/16'", + ], +}); diff --git a/packages/ibm-products-web-components/src/typings/resources.d.ts b/packages/ibm-products-web-components/src/typings/resources.d.ts index 528dc15cead..b9e6891f800 100644 --- a/packages/ibm-products-web-components/src/typings/resources.d.ts +++ b/packages/ibm-products-web-components/src/typings/resources.d.ts @@ -10,6 +10,7 @@ declare module '*.scss'; declare module '*.scss?lit'; declare module 'vitest/config'; +declare module '@figma/code-connect/html'; declare module '*.mdx' { let MDXComponent: (props: any) => JSX.Element; diff --git a/yarn.lock b/yarn.lock index 8d614ab5ddf..269b928cdf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1979,6 +1979,7 @@ __metadata: "@carbon/motion": "npm:^11.34.0" "@carbon/styles": "npm:1.89.0" "@carbon/web-components": "npm:2.37.0" + "@figma/code-connect": "npm:^1.3.6" "@ibm/telemetry-js": "npm:^1.10.2" "@ibm/telemetry-js-config-generator": "npm:^2.1.0" "@lit-labs/signals": "npm:^0.1.2" @@ -3725,6 +3726,38 @@ __metadata: languageName: node linkType: hard +"@figma/code-connect@npm:^1.3.6": + version: 1.3.6 + resolution: "@figma/code-connect@npm:1.3.6" + dependencies: + boxen: "npm:5.1.1" + chalk: "npm:^4.1.2" + commander: "npm:^11.1.0" + compare-versions: "npm:^6.1.0" + cross-spawn: "npm:^7.0.3" + dotenv: "npm:^16.3.1" + fast-fuzzy: "npm:^1.12.0" + find-up: "npm:^5.0.0" + glob: "npm:^10.3.10" + jsdom: "npm:^24.1.1" + lodash: "npm:4.17.21" + minimatch: "npm:^9.0.3" + ora: "npm:^5.4.1" + parse5: "npm:^7.1.2" + prettier: "npm:^2.8.8" + prompts: "npm:^2.4.2" + strip-ansi: "npm:^6.0.0" + ts-morph: "npm:^26.0.0" + typescript: "npm:5.9.2" + undici: "npm:^5.29.0" + zod: "npm:3.25.58" + zod-validation-error: "npm:^3.2.0" + bin: + figma: bin/figma + checksum: 10/aa08c0ca1b3d9027229be31de72709e7b6dbe2772dee1e33ef661abd5777e4e416e42b1d189fca74eab9f2d1e914143f9c030da79ea06fd7b8ad7426b79b2fe2 + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.6.0": version: 1.6.9 resolution: "@floating-ui/core@npm:1.6.9" @@ -3972,6 +4005,22 @@ __metadata: languageName: node linkType: hard +"@isaacs/balanced-match@npm:^4.0.1": + version: 4.0.1 + resolution: "@isaacs/balanced-match@npm:4.0.1" + checksum: 10/102fbc6d2c0d5edf8f6dbf2b3feb21695a21bc850f11bc47c4f06aa83bd8884fde3fe9d6d797d619901d96865fdcb4569ac2a54c937992c48885c5e3d9967fe8 + languageName: node + linkType: hard + +"@isaacs/brace-expansion@npm:^5.0.0": + version: 5.0.0 + resolution: "@isaacs/brace-expansion@npm:5.0.0" + dependencies: + "@isaacs/balanced-match": "npm:^4.0.1" + checksum: 10/cf3b7f206aff12128214a1df764ac8cdbc517c110db85249b945282407e3dfc5c6e66286383a7c9391a059fc8e6e6a8ca82262fc9d2590bd615376141fbebd2d + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -6503,6 +6552,17 @@ __metadata: languageName: node linkType: hard +"@ts-morph/common@npm:~0.27.0": + version: 0.27.0 + resolution: "@ts-morph/common@npm:0.27.0" + dependencies: + fast-glob: "npm:^3.3.3" + minimatch: "npm:^10.0.1" + path-browserify: "npm:^1.0.1" + checksum: 10/842d8973cb34fa6d7535092e17e6d22c2642af1d9020aa06936cd1e9d6970830a888f9abf8907f60408c0a684b476b3b74316938d1edbad215881f9743f3940a + languageName: node + linkType: hard + "@tufjs/canonical-json@npm:2.0.0": version: 2.0.0 resolution: "@tufjs/canonical-json@npm:2.0.0" @@ -9624,7 +9684,7 @@ __metadata: languageName: node linkType: hard -"code-block-writer@npm:^13.0.1": +"code-block-writer@npm:^13.0.1, code-block-writer@npm:^13.0.3": version: 13.0.3 resolution: "code-block-writer@npm:13.0.3" checksum: 10/771546224f38610eecee0598e83c9e0f86dcd600ea316dbf27c2cfebaab4fed51b042325aa460b8e0f131fac5c1de208f6610a1ddbffe4b22e76f9b5256707cb @@ -16145,7 +16205,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.21": +"lodash@npm:4.17.21, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532 @@ -17090,6 +17150,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:^10.0.1": + version: 10.0.3 + resolution: "minimatch@npm:10.0.3" + dependencies: + "@isaacs/brace-expansion": "npm:^5.0.0" + checksum: 10/d5b8b2538b367f2cfd4aeef27539fddeee58d1efb692102b848e4a968a09780a302c530eb5aacfa8c57f7299155fb4b4e85219ad82664dcef5c66f657111d9b8 + languageName: node + linkType: hard + "minimatch@npm:^3.0.3, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -22019,6 +22088,16 @@ __metadata: languageName: node linkType: hard +"ts-morph@npm:^26.0.0": + version: 26.0.0 + resolution: "ts-morph@npm:26.0.0" + dependencies: + "@ts-morph/common": "npm:~0.27.0" + code-block-writer: "npm:^13.0.3" + checksum: 10/0b76beec9f9641bf3304de8f41327db4e563729b4e13b37b546a4231a4310cb760cad0c88fe8d11235bbe6f9de0471dda0992b8c35535a4e4c34033304f22d14 + languageName: node + linkType: hard + "ts-simple-type@npm:2.0.0-next.0": version: 2.0.0-next.0 resolution: "ts-simple-type@npm:2.0.0-next.0" @@ -22274,6 +22353,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:5.9.2": + version: 5.9.2 + resolution: "typescript@npm:5.9.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/cc2fe6c822819de5d453fa25aa9f32096bf70dde215d481faa1ad84a283dfb264e33988ed8f6d36bc803dd0b16dbe943efa311a798ef76d5b3892a05dfbfd628 + languageName: node + linkType: hard + "typescript@npm:>=3 < 6, typescript@npm:^5.5.3, typescript@npm:^5.7.3": version: 5.8.2 resolution: "typescript@npm:5.8.2" @@ -22304,6 +22393,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A5.9.2#optional!builtin": + version: 5.9.2 + resolution: "typescript@patch:typescript@npm%3A5.9.2#optional!builtin::version=5.9.2&hash=5786d5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10/bd810ab13e8e557225a8b5122370385440b933e4e077d5c7641a8afd207fdc8be9c346e3c678adba934b64e0e70b0acf5eef9493ea05170a48ce22bef845fdc7 + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin, typescript@patch:typescript@npm%3A^5.5.3#optional!builtin, typescript@patch:typescript@npm%3A^5.7.3#optional!builtin": version: 5.8.2 resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin::version=5.8.2&hash=5786d5" From 054a3d17dc962cc95810e3ac693bf4192d7ff081 Mon Sep 17 00:00:00 2001 From: Matt Gallo Date: Thu, 16 Oct 2025 15:38:19 -0400 Subject: [PATCH 2/2] feat(user-avatar): code connect fixes --- .../user-avatar/user-avatar.figma.ts | 166 ++++++++++-------- 1 file changed, 89 insertions(+), 77 deletions(-) diff --git a/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts b/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts index d16774372ae..7950e7787f7 100644 --- a/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts +++ b/packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts @@ -6,9 +6,6 @@ */ import figma, { html } from '@figma/code-connect/html'; -import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'; -import Group from '@carbon/icons/es/group/16'; -import User from '@carbon/icons/es/user/16'; import './user-avatar'; const sharedProps = { @@ -58,83 +55,98 @@ const sharedProps = { }), }), }), + Type: figma.enum('Type', { + 'Single user': 'User', + 'User group': 'Group', + }), }; -const connectionURL = - 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4'; - -figma.connect(connectionURL, { - variant: { Type: 'Image' }, - props: sharedProps, +figma.connect( + 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4', + { + variant: { Type: 'Image' }, + props: sharedProps, - example: ({ tooltipProps, name, size }) => - html` - `, - imports: [ - "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", - ], -}); + example: ({ tooltipProps, name, size }) => + html` + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + ], + } +); -figma.connect(connectionURL, { - variant: { Type: 'Initials' }, - props: sharedProps, - example: ({ tooltipProps, name, size, bgProps }) => - html` - `, - imports: [ - "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", - ], -}); +figma.connect( + 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4', + { + variant: { Type: 'Initials' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps }) => + html` + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + ], + } +); -figma.connect(connectionURL, { - variant: { Type: 'Single user' }, - props: sharedProps, - example: ({ tooltipProps, name, size, bgProps }) => - html` - ${iconLoader(User, { slot: 'rendericon' })} - `, - imports: [ - "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", - "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", - "import User from '@carbon/icons/es/user/16'", - ], -}); +figma.connect( + 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4', + { + variant: { Type: 'Single user' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps, Type }) => + html` + + \${iconLoader(${Type}, { slot: 'rendericon' })} + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", + "import User from '@carbon/icons/es/user/16'", + ], + } +); -figma.connect(connectionURL, { - variant: { Type: 'User group' }, - props: sharedProps, - example: ({ tooltipProps, name, size, bgProps }) => - html` - ${iconLoader(Group, { slot: 'rendericon' })} - `, - imports: [ - "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", - "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", - "import Group from '@carbon/icons/es/group/16'", - ], -}); +figma.connect( + 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4', + { + variant: { Type: 'User group' }, + props: sharedProps, + example: ({ tooltipProps, name, size, bgProps, Type }) => + html` + + \${iconLoader(${Type}, { slot: 'rendericon' })} + `, + imports: [ + "import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'", + "import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'", + "import Group from '@carbon/icons/es/group/16'", + ], + } +);