feat(link): add web components Link mapping and align Link type variants (#22253)

heloiselui · web-flow · commit 02b559583aaf · 2026-05-14T14:14:27.000Z
diff --git a/packages/react/code-connect/Link/Link.figma.tsx b/packages/react/code-connect/Link/Link.figma.tsx
@@ -1,12 +1,13 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 React from 'react';
 import { Link } from '@carbon/react';
+import type { ComponentType } from 'react';
 import figma from '@figma/code-connect';
 
 figma.connect(
@@ -16,9 +17,10 @@ figma.connect(
     props: {
       inline: figma.enum('Type', {
         Inline: true,
+        Standalone: false,
       }),
       linkText: figma.string('Link text'),
-      renderIcon: figma.instance('Swap icon'),
+      renderIcon: figma.instance<ComponentType>('Swap icon'),
       size: figma.enum('Size', {
         Large: 'lg',
         Medium: 'md',
diff --git a/packages/web-components/code-connect/link/link.figma.ts b/packages/web-components/code-connect/link/link.figma.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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';
+
+figma.connect(
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=50111-991&mode=design&t=kyFCPK0tCeufcNP2-4',
+  {
+    props: {
+      inline: figma.enum('Type', {
+        Inline: true,
+        Standalone: false,
+      }),
+      linkText: figma.string('Link text'),
+      renderIcon: figma.instance('Swap icon'),
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+    },
+    example: (props) =>
+      html` <cds-link
+        inline=${props.inline}
+        size=${props.size}
+        disabled=${props.disabled}>
+        ${props.linkText} ${props.renderIcon}
+      </cds-link>`,
+    imports: ["import '@carbon/web-components/es/components/link/link.js'"],
+  }
+);
