feat: codesnippet

carbon-design-system · May 20, 2024 · ec68b3c · ec68b3c
1 parent 8d74500
commit ec68b3c
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 17 deletions.
diff --git a/packages/react/code-connect/Button/Button.figma.tsx b/packages/react/code-connect/Button/Button.figma.tsx
@@ -84,9 +84,8 @@ figma.connect(
     },
     example: ({ size }) => {
       return (
-        // Disclaimer: Code Connect is currently in beta and
-        // integration with Carbon React is in an exploratory phase.
-        // Code sample below may be incomplete.
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
         <ButtonSkeleton size={size} />
       );
     },

diff --git a/packages/react/code-connect/Checkbox/Checkbox.figma.tsx b/packages/react/code-connect/Checkbox/Checkbox.figma.tsx
@@ -15,7 +15,7 @@ figma.connect(
   {
     props: {
       // indented: figma.boolean('Indented'), //doesn't exist in code
-      // label: figma.boolean('Label'), //label only exists on checkbox group in code
+      // label: figma.boolean('Label'), // Label needs to be set on <CheckboxGroup /> or <FormLabel />
       // warnMessage: figma.boolean('Warning message'), // you can have a component in a warn state while hiding warning message in Figma, not supported in code
       // errorMessage: figma.boolean('Error message'), // you can have a component in a error state while hiding error message in Figma, not supported in code
 
@@ -59,7 +59,6 @@ figma.connect(
       warn,
       hideLabel,
     }) => (
-      // Label needs to be set on <CheckboxGroup /> or <FormLabel />
       <Checkbox
         id="your_checkbox_id"
         labelText={labelText}

diff --git a/packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx b/packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 { CodeSnippet, CodeSnippetSkeleton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+// Inline
+figma.connect(
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-104904&t=cMvnFTYLPEhzhIpj-4',
+  {
+    example: () => {
+      return (
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
+        <div>{/* To view CodeSnippet code, view inner component */}</div>
+      );
+    },
+  }
+);
+
+//Inline item
+figma.connect(
+  CodeSnippet,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-104960&t=cMvnFTYLPEhzhIpj-4',
+  {
+    props: {
+      children: figma.string('Code text'),
+    },
+    example: ({ children }) => {
+      return (
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
+        <CodeSnippet type="inline" feedback="Copied to clipboard">
+          {children}
+        </CodeSnippet>
+      );
+    },
+  }
+);
+
+//Single line
+figma.connect(
+  CodeSnippet,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-103999&t=cMvnFTYLPEhzhIpj-4',
+  {
+    example: () => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <CodeSnippet type="single" feedback="Copied to clipboard">
+        yarn add carbon-components@latest carbon-components-react@latest
+        @carbon/icons-react@latest carbon-icons@latest
+      </CodeSnippet>
+    ),
+  }
+);
+
+//Multi line
+figma.connect(
+  CodeSnippet,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
+  {
+    props: {
+      // numbers: figma.boolean('Numbers'), // not available in code
+      hideCopyButton: figma.boolean('Copy', {
+        true: false,
+        false: true,
+      }),
+      expanded: figma.boolean('Expanded'),
+    },
+    example: ({ hideCopyButton }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <CodeSnippet
+        type="multi"
+        feedback="Copied to clipboard"
+        hideCopyButton={hideCopyButton}>
+        Code sample here
+      </CodeSnippet>
+    ),
+  }
+);
+
+// Skeleton state (multiline only)
+figma.connect(
+  CodeSnippetSkeleton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
+  {
+    variant: { State: 'Skeleton' },
+    example: () => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <CodeSnippetSkeleton type="multi" />
+    ),
+  }
+);
+
+// // Skeleton state (multiline only)
+// figma.connect(
+//   CodeSnippetSkeleton,
+//   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
+//   {
+//     variant: { State: 'Skeleton' },
+//     example: () => {
+//       return (
+//         // Disclaimer: Code Connect is currently in beta and integration with Carbon
+//         // React is in an exploratory phase. Code sample below may be incomplete.
+//         <CodeSnippetSkeleton type="multi" />
+//       );
+//     },
+//   }
+// );
diff --git a/packages/react/code-connect/DataTable/DataTable.figma.tsx b/packages/react/code-connect/DataTable/DataTable.figma.tsx
@@ -15,18 +15,17 @@
 
 import React from 'react';
 import {
-  DataTable,
-  // Table,
-  // TableHead,
-  // TableRow,
-  // TableHeader,
-  // TableBody,
-  // TableCell,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
 } from '@carbon/react';
 import figma from '@figma/code-connect';
 
 figma.connect(
-  DataTable,
+  Table,
   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4',
   {
     props: {
@@ -52,10 +51,57 @@ figma.connect(
     example: () => {
       // Disclaimer: Code Connect is currently in beta and integration with Carbon
       // React is in an exploratory phase. Code sample below is incomplete.
+      // This is sample code for a basic Table
+      // See storybook for for detailed implementation docs
+      // https://react.carbondesignsystem.com/?path=/docs/components-datatable-basic--overview
+      const rows = [
+        {
+          id: 'load-balancer-1',
+          name: 'Load Balancer 1',
+          rule: 'Round robin',
+          Status: 'Starting',
+          other: 'Test',
+          example: '22',
+        },
+        {
+          id: 'load-balancer-2',
+          name: 'Load Balancer 2',
+          rule: 'DNS delegation',
+          status: 'Active',
+          other: 'Test',
+          example: '22',
+        },
+        {
+          id: 'load-balancer-3',
+          name: 'Load Balancer 3',
+          rule: 'Round robin',
+          status: 'Disabled',
+          other: 'Test',
+          example: '22',
+        },
+      ];
+      const headers = ['Name', 'Rule', 'Status'];
       return (
-        <DataTable>
-          {/* This code is not executed, we can add sample code here. */}
-        </DataTable>
+        <Table aria-label="sample table">
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader key={header}>{header}</TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.id}>
+                {Object.keys(row)
+                  .filter((key) => key !== 'id')
+                  .map((key) => {
+                    return <TableCell key={key}>{row[key]}</TableCell>;
+                  })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       );
     },
   }

diff --git a/packages/react/code-connect/README.md b/packages/react/code-connect/README.md
@@ -13,4 +13,4 @@ actual code snippets from Carbon React.
 Not only does Code Connect establish connections between component definitions,
 but it also facilitates the mapping of properties from Carbon React code to
 Figma. This capability enables the creation of dynamic and accurate examples,
-promoting consistentcy across both design and engineering.
+promoting consistency across both design and engineering.