Skip to content

Commit 2cbc991

Browse files
matthewgallomatthewgallo
authored
feat(user-avatar): add code connect config (#8435)
* feat(user-avatar): add code connect config * feat(user-avatar): code connect fixes
1 parent d58c6b0 commit 2cbc991

File tree

4 files changed

+255
-2
lines changed

4 files changed

+255
-2
lines changed

‎packages/ibm-products-web-components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"@carbon/icon-helpers": "^10.65.0",
7171
"@carbon/icons": "^11.66.0",
7272
"@carbon/motion": "^11.34.0",
73+
"@figma/code-connect": "^1.3.6",
7374
"@ibm/telemetry-js-config-generator": "^2.1.0",
7475
"@mordech/vite-lit-loader": "^0.37.0",
7576
"@open-wc/testing": "^4.0.0",

‎packages/ibm-products-web-components/src/components/user-avatar/user-avatar.figma.ts‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/**
2+
* Copyright IBM Corp. 2025, 2025
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import figma, { html } from '@figma/code-connect/html';
9+
import './user-avatar';
10+
11+
const sharedProps = {
12+
name: figma.string('Initials text'),
13+
size: figma.enum('Size', {
14+
'Extra large': 'xl',
15+
Large: 'lg',
16+
Medium: 'md',
17+
Small: 'sm',
18+
}),
19+
20+
tooltipProps: figma.nestedProps('Tooltip', {
21+
text: figma.string('Tooltip text'),
22+
tooltipAlignment: figma.enum('🚫 Position', {
23+
Top: 'top',
24+
Right: 'right',
25+
Bottom: 'bottom',
26+
Left: 'left',
27+
}),
28+
}),
29+
30+
bgProps: figma.nestedProps('Background', {
31+
color: figma.enum('Color', {
32+
Cyan: figma.enum('Sequence', {
33+
Primary: 'order-1-cyan',
34+
Secondary: 'order-7-cyan',
35+
}),
36+
Gray: figma.enum('Sequence', {
37+
Primary: 'order-2-gray',
38+
Secondary: 'order-8-gray',
39+
}),
40+
Green: figma.enum('Sequence', {
41+
Primary: 'order-3-green',
42+
Secondary: 'order-9-green',
43+
}),
44+
Magenta: figma.enum('Sequence', {
45+
Primary: 'order-4-magenta',
46+
Secondary: 'order-10-magenta',
47+
}),
48+
Purple: figma.enum('Sequence', {
49+
Primary: 'order-5-purple',
50+
Secondary: 'order-11-purple',
51+
}),
52+
Teal: figma.enum('Sequence', {
53+
Primary: 'order-6-teal',
54+
Secondary: 'order-12-teal',
55+
}),
56+
}),
57+
}),
58+
Type: figma.enum('Type', {
59+
'Single user': 'User',
60+
'User group': 'Group',
61+
}),
62+
};
63+
64+
figma.connect(
65+
'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4',
66+
{
67+
variant: { Type: 'Image' },
68+
props: sharedProps,
69+
70+
example: ({ tooltipProps, name, size }) =>
71+
html`<c4p-user-avatar
72+
tooltip-alignment=${tooltipProps.tooltipAlignment}
73+
tooltip-text=${tooltipProps.text}
74+
name=${name}
75+
size=${size}
76+
image="/path/to/image"
77+
image-description="Alt text for image"
78+
>
79+
</c4p-user-avatar> `,
80+
imports: [
81+
"import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'",
82+
],
83+
}
84+
);
85+
86+
figma.connect(
87+
'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4',
88+
{
89+
variant: { Type: 'Initials' },
90+
props: sharedProps,
91+
example: ({ tooltipProps, name, size, bgProps }) =>
92+
html`<c4p-user-avatar
93+
tooltip-alignment=${tooltipProps.tooltipAlignment}
94+
tooltip-text=${tooltipProps.text}
95+
name=${name}
96+
size=${size}
97+
background-color=${bgProps.color}
98+
>
99+
</c4p-user-avatar> `,
100+
imports: [
101+
"import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'",
102+
],
103+
}
104+
);
105+
106+
figma.connect(
107+
'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4',
108+
{
109+
variant: { Type: 'Single user' },
110+
props: sharedProps,
111+
example: ({ tooltipProps, name, size, bgProps, Type }) =>
112+
html`<c4p-user-avatar
113+
tooltip-alignment=${tooltipProps.tooltipAlignment}
114+
tooltip-text=${tooltipProps.text}
115+
name=${name}
116+
size=${size}
117+
background-color=${bgProps.color}
118+
>
119+
<!-- Icon loaded via iconLoader helper from '@carbon/web-components' -->
120+
\${iconLoader(${Type}, { slot: 'rendericon' })}
121+
</c4p-user-avatar> `,
122+
imports: [
123+
"import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'",
124+
"import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'",
125+
"import User from '@carbon/icons/es/user/16'",
126+
],
127+
}
128+
);
129+
130+
figma.connect(
131+
'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=15368-59379&t=lbewdWdJ4JB5izcw-4',
132+
{
133+
variant: { Type: 'User group' },
134+
props: sharedProps,
135+
example: ({ tooltipProps, name, size, bgProps, Type }) =>
136+
html`<c4p-user-avatar
137+
tooltip-alignment=${tooltipProps.tooltipAlignment}
138+
tooltip-text=${tooltipProps.text}
139+
name=${name}
140+
size=${size}
141+
background-color=${bgProps.color}
142+
>
143+
<!-- Icon loaded via iconLoader helper from '@carbon/web-components' -->
144+
\${iconLoader(${Type}, { slot: 'rendericon' })}
145+
</c4p-user-avatar> `,
146+
imports: [
147+
"import '@carbon/ibm-products-web-components/es/components/user-avatar/index.js'",
148+
"import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader.js'",
149+
"import Group from '@carbon/icons/es/group/16'",
150+
],
151+
}
152+
);

‎packages/ibm-products-web-components/src/typings/resources.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
declare module '*.scss';
1111
declare module '*.scss?lit';
1212
declare module 'vitest/config';
13+
declare module '@figma/code-connect/html';
1314

1415
declare module '*.mdx' {
1516
let MDXComponent: (props: any) => JSX.Element;

‎yarn.lock‎

Lines changed: 101 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1979,6 +1979,7 @@ __metadata:
19791979
"@carbon/motion": "npm:^11.34.0"
19801980
"@carbon/styles": "npm:1.89.0"
19811981
"@carbon/web-components": "npm:2.37.0"
1982+
"@figma/code-connect": "npm:^1.3.6"
19821983
"@ibm/telemetry-js": "npm:^1.10.2"
19831984
"@ibm/telemetry-js-config-generator": "npm:^2.1.0"
19841985
"@lit-labs/signals": "npm:^0.1.2"
@@ -3725,6 +3726,38 @@ __metadata:
37253726
languageName: node
37263727
linkType: hard
37273728

3729+
"@figma/code-connect@npm:^1.3.6":
3730+
version: 1.3.6
3731+
resolution: "@figma/code-connect@npm:1.3.6"
3732+
dependencies:
3733+
boxen: "npm:5.1.1"
3734+
chalk: "npm:^4.1.2"
3735+
commander: "npm:^11.1.0"
3736+
compare-versions: "npm:^6.1.0"
3737+
cross-spawn: "npm:^7.0.3"
3738+
dotenv: "npm:^16.3.1"
3739+
fast-fuzzy: "npm:^1.12.0"
3740+
find-up: "npm:^5.0.0"
3741+
glob: "npm:^10.3.10"
3742+
jsdom: "npm:^24.1.1"
3743+
lodash: "npm:4.17.21"
3744+
minimatch: "npm:^9.0.3"
3745+
ora: "npm:^5.4.1"
3746+
parse5: "npm:^7.1.2"
3747+
prettier: "npm:^2.8.8"
3748+
prompts: "npm:^2.4.2"
3749+
strip-ansi: "npm:^6.0.0"
3750+
ts-morph: "npm:^26.0.0"
3751+
typescript: "npm:5.9.2"
3752+
undici: "npm:^5.29.0"
3753+
zod: "npm:3.25.58"
3754+
zod-validation-error: "npm:^3.2.0"
3755+
bin:
3756+
figma: bin/figma
3757+
checksum: 10/aa08c0ca1b3d9027229be31de72709e7b6dbe2772dee1e33ef661abd5777e4e416e42b1d189fca74eab9f2d1e914143f9c030da79ea06fd7b8ad7426b79b2fe2
3758+
languageName: node
3759+
linkType: hard
3760+
37283761
"@floating-ui/core@npm:^1.6.0":
37293762
version: 1.6.9
37303763
resolution: "@floating-ui/core@npm:1.6.9"
@@ -3972,6 +4005,22 @@ __metadata:
39724005
languageName: node
39734006
linkType: hard
39744007

4008+
"@isaacs/balanced-match@npm:^4.0.1":
4009+
version: 4.0.1
4010+
resolution: "@isaacs/balanced-match@npm:4.0.1"
4011+
checksum: 10/102fbc6d2c0d5edf8f6dbf2b3feb21695a21bc850f11bc47c4f06aa83bd8884fde3fe9d6d797d619901d96865fdcb4569ac2a54c937992c48885c5e3d9967fe8
4012+
languageName: node
4013+
linkType: hard
4014+
4015+
"@isaacs/brace-expansion@npm:^5.0.0":
4016+
version: 5.0.0
4017+
resolution: "@isaacs/brace-expansion@npm:5.0.0"
4018+
dependencies:
4019+
"@isaacs/balanced-match": "npm:^4.0.1"
4020+
checksum: 10/cf3b7f206aff12128214a1df764ac8cdbc517c110db85249b945282407e3dfc5c6e66286383a7c9391a059fc8e6e6a8ca82262fc9d2590bd615376141fbebd2d
4021+
languageName: node
4022+
linkType: hard
4023+
39754024
"@isaacs/cliui@npm:^8.0.2":
39764025
version: 8.0.2
39774026
resolution: "@isaacs/cliui@npm:8.0.2"
@@ -6580,6 +6629,17 @@ __metadata:
65806629
languageName: node
65816630
linkType: hard
65826631

6632+
"@ts-morph/common@npm:~0.27.0":
6633+
version: 0.27.0
6634+
resolution: "@ts-morph/common@npm:0.27.0"
6635+
dependencies:
6636+
fast-glob: "npm:^3.3.3"
6637+
minimatch: "npm:^10.0.1"
6638+
path-browserify: "npm:^1.0.1"
6639+
checksum: 10/842d8973cb34fa6d7535092e17e6d22c2642af1d9020aa06936cd1e9d6970830a888f9abf8907f60408c0a684b476b3b74316938d1edbad215881f9743f3940a
6640+
languageName: node
6641+
linkType: hard
6642+
65836643
"@tufjs/canonical-json@npm:2.0.0":
65846644
version: 2.0.0
65856645
resolution: "@tufjs/canonical-json@npm:2.0.0"
@@ -9701,7 +9761,7 @@ __metadata:
97019761
languageName: node
97029762
linkType: hard
97039763

9704-
"code-block-writer@npm:^13.0.1":
9764+
"code-block-writer@npm:^13.0.1, code-block-writer@npm:^13.0.3":
97059765
version: 13.0.3
97069766
resolution: "code-block-writer@npm:13.0.3"
97079767
checksum: 10/771546224f38610eecee0598e83c9e0f86dcd600ea316dbf27c2cfebaab4fed51b042325aa460b8e0f131fac5c1de208f6610a1ddbffe4b22e76f9b5256707cb
@@ -16222,7 +16282,7 @@ __metadata:
1622216282
languageName: node
1622316283
linkType: hard
1622416284

16225-
"lodash@npm:^4.17.21":
16285+
"lodash@npm:4.17.21, lodash@npm:^4.17.21":
1622616286
version: 4.17.21
1622716287
resolution: "lodash@npm:4.17.21"
1622816288
checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532
@@ -17167,6 +17227,15 @@ __metadata:
1716717227
languageName: node
1716817228
linkType: hard
1716917229

17230+
"minimatch@npm:^10.0.1":
17231+
version: 10.0.3
17232+
resolution: "minimatch@npm:10.0.3"
17233+
dependencies:
17234+
"@isaacs/brace-expansion": "npm:^5.0.0"
17235+
checksum: 10/d5b8b2538b367f2cfd4aeef27539fddeee58d1efb692102b848e4a968a09780a302c530eb5aacfa8c57f7299155fb4b4e85219ad82664dcef5c66f657111d9b8
17236+
languageName: node
17237+
linkType: hard
17238+
1717017239
"minimatch@npm:^3.0.3, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
1717117240
version: 3.1.2
1717217241
resolution: "minimatch@npm:3.1.2"
@@ -22123,6 +22192,16 @@ __metadata:
2212322192
languageName: node
2212422193
linkType: hard
2212522194

22195+
"ts-morph@npm:^26.0.0":
22196+
version: 26.0.0
22197+
resolution: "ts-morph@npm:26.0.0"
22198+
dependencies:
22199+
"@ts-morph/common": "npm:~0.27.0"
22200+
code-block-writer: "npm:^13.0.3"
22201+
checksum: 10/0b76beec9f9641bf3304de8f41327db4e563729b4e13b37b546a4231a4310cb760cad0c88fe8d11235bbe6f9de0471dda0992b8c35535a4e4c34033304f22d14
22202+
languageName: node
22203+
linkType: hard
22204+
2212622205
"ts-simple-type@npm:2.0.0-next.0":
2212722206
version: 2.0.0-next.0
2212822207
resolution: "ts-simple-type@npm:2.0.0-next.0"
@@ -22378,6 +22457,16 @@ __metadata:
2237822457
languageName: node
2237922458
linkType: hard
2238022459

22460+
"typescript@npm:5.9.2":
22461+
version: 5.9.2
22462+
resolution: "typescript@npm:5.9.2"
22463+
bin:
22464+
tsc: bin/tsc
22465+
tsserver: bin/tsserver
22466+
checksum: 10/cc2fe6c822819de5d453fa25aa9f32096bf70dde215d481faa1ad84a283dfb264e33988ed8f6d36bc803dd0b16dbe943efa311a798ef76d5b3892a05dfbfd628
22467+
languageName: node
22468+
linkType: hard
22469+
2238122470
"typescript@npm:>=3 < 6, typescript@npm:^5.5.3, typescript@npm:^5.7.3":
2238222471
version: 5.8.2
2238322472
resolution: "typescript@npm:5.8.2"
@@ -22408,6 +22497,16 @@ __metadata:
2240822497
languageName: node
2240922498
linkType: hard
2241022499

22500+
"typescript@patch:typescript@npm%3A5.9.2#optional!builtin<compat/typescript>":
22501+
version: 5.9.2
22502+
resolution: "typescript@patch:typescript@npm%3A5.9.2#optional!builtin<compat/typescript>::version=5.9.2&hash=5786d5"
22503+
bin:
22504+
tsc: bin/tsc
22505+
tsserver: bin/tsserver
22506+
checksum: 10/bd810ab13e8e557225a8b5122370385440b933e4e077d5c7641a8afd207fdc8be9c346e3c678adba934b64e0e70b0acf5eef9493ea05170a48ce22bef845fdc7
22507+
languageName: node
22508+
linkType: hard
22509+
2241122510
"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.5.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
2241222511
version: 5.8.2
2241322512
resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=5786d5"

0 commit comments

Comments
 (0)