feat(code-connect): connect textarea, textinput, dropdown, slider, pr…

…ogress indicator (#16941) * feat(code-connect): connect textarea, textinput and dropdown * feat: add slider, progress indicator update cc version
carbon-design-system · Jul 11, 2024 · ae2b029 · ae2b029
1 parent c1822dc
commit ae2b029
Show file tree

Hide file tree

Showing 13 changed files with 532 additions and 9 deletions.
diff --git a/...nnect-npm-1.0.1-64a8b81268-1fceaee828.zip → ...nnect-npm-1.0.2-c160202f86-28de9e3070.zip b/...nnect-npm-1.0.1-64a8b81268-1fceaee828.zip → ...nnect-npm-1.0.2-c160202f86-28de9e3070.zip
diff --git a/packages/react/code-connect/Dropdown/Dropdown.figma.tsx b/packages/react/code-connect/Dropdown/Dropdown.figma.tsx
@@ -44,11 +44,8 @@ figma.connect(
       }),
       warnText: figma.string('Warning message'),
       type: figma.enum('Style', {
-        // Fixed: 'fixed',
         Inline: 'inline',
       }),
-      // selectedtext: figma.string('Selected text'), // what is this used for in Figma?
-      // unselectedtext: figma.string('Unselected text'),// what is this used for in Figma?
     },
     example: ({ ...props }) => {
       const items = [

diff --git a/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx b/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx
@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import {
+  unstable__FluidDropdown as FluidDropdown,
+  unstable__FluidDropdownSkeleto as FluidDropdownSkeleton,
+} from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  FluidDropdown,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-302528&t=4Ath5JqwaYJZxznq-4',
+  {
+    props: {
+      titleText: figma.string('Label text'),
+      label: figma.string('Prompt text'),
+      readOnly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        Error: true,
+      }),
+      invalidText: figma.string('Error text'),
+      warn: figma.enum('State', {
+        Warning: true,
+      }),
+      warnText: figma.string('Warning text'),
+    },
+    example: ({ ...props }) => {
+      const items = [
+        {
+          id: 'option-0',
+          text: 'Option 0',
+        },
+        {
+          id: 'option-1',
+          text: 'Option 1',
+        },
+      ];
+
+      return (
+        <FluidDropdown
+          {...props}
+          id="id"
+          initialSelectedItem={items[0]}
+          itemToString={(item) => (item ? item.text : '')}
+        />
+      );
+    },
+  }
+);
+
+figma.connect(
+  FluidDropdownSkeleton,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=14032-290635&mode=dev',
+  {
+    variant: { State: 'Skeleton' },
+    example: () => {
+      return <FluidDropdownSkeleton />;
+    },
+  }
+);
diff --git a/packages/react/code-connect/ProgressIndicator/ProgressIndicator.figma.tsx b/packages/react/code-connect/ProgressIndicator/ProgressIndicator.figma.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 { ProgressIndicator } from '@carbon/react';
+// import { ProgressIndicatorSkeleton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  ProgressIndicator,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
+  {
+    props: {
+      children: figma.children(['_Progress indicator item']),
+      vertical: figma.enum('Direction', {
+        Vertical: true,
+      }),
+    },
+    example: ({ children, vertical }) => (
+      <ProgressIndicator vertical={vertical}>{children}</ProgressIndicator>
+    ),
+  }
+);
+
+// figma.connect(
+//   ProgressIndicatorSkeleton,
+//   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
+//   {
+//     variant: need nested variant selector here, https://github.com/figma/code-connect/issues/91
+//     props: {
+//       vertical: figma.enum('Direction', {
+//         Vertical: true,
+//       }),
+//     },
+//     example: ({ children, vertical }) => (
+//       <ProgressIndicatorSkeleton vertical={vertical} />
+//     ),
+//   }
+// );
diff --git a/packages/react/code-connect/ProgressIndicator/ProgressStep.figma.tsx b/packages/react/code-connect/ProgressIndicator/ProgressStep.figma.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { ProgressStep } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  ProgressStep,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3377-31707&m=dev',
+  {
+    props: {
+      complete: figma.enum('State', {
+        Completed: true,
+      }),
+      current: figma.enum('State', {
+        Current: true,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        Error: true,
+      }),
+      secondaryLabel: figma.boolean('Optional label', {
+        true: figma.textContent('Optional label'),
+      }),
+      label: figma.string('Label text'),
+    },
+    example: ({ ...props }) => <ProgressStep {...props} />,
+  }
+);
diff --git a/packages/react/code-connect/Slider/Slider.figma.tsx b/packages/react/code-connect/Slider/Slider.figma.tsx
@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { Slider, SliderSkeleton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+//single
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
+  {
+    props: {
+      slider: figma.nestedProps('_Slider base', {
+        labelText: figma.textContent('Label'),
+      }),
+      invalidText: figma.string('Error text'),
+      warnText: figma.string('Warning text'),
+      disabled: figma.enum('Status', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('Status', {
+        Error: true,
+      }),
+      readOnly: figma.enum('Status', {
+        'Read-only': true,
+      }),
+      warn: figma.enum('Status', {
+        Warning: true,
+      }),
+      textInput: figma.nestedProps('Text input - Default', {
+        value: figma.string('Input text'),
+      }),
+    },
+    example: ({ slider, textInput, ...props }) => (
+      <Slider value={textInput.value} labelText={slider.labelText} {...props} />
+    ),
+  }
+);
+
+//two handle
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
+  {
+    props: {
+      max: figma.string('Max range text'),
+      min: figma.string('Min range text'),
+      invalidText: figma.string('Error text'),
+      warnText: figma.string('Warning text'),
+      labelText: figma.string('Label text'),
+      hideTextInput: figma.boolean('Inputs', {
+        false: true,
+        true: false,
+      }),
+      invalidText: figma.string('Error text'),
+      warnText: figma.string('Warning text'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        'Hover + Error': true,
+        'Active + Error': true,
+        'Focused + Error': true,
+      }),
+      readOnly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      warn: figma.enum('State', {
+        'Hover + Warning': true,
+        'Active + Warning': true,
+        'Focused + Warning': true,
+      }),
+    },
+    example: ({ ...props }) => <Slider twoHandles {...props} />,
+  }
+);
+
+//single
+figma.connect(
+  SliderSkeleton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
+  {
+    variant: { Status: 'Skeleton' },
+    example: () => <SliderSkeleton />,
+  }
+);
+
+//two handle
+figma.connect(
+  SliderSkeleton,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
+  {
+    variant: { State: 'Skeleton' },
+    example: () => <SliderSkeleton twoHandles />,
+  }
+);
diff --git a/packages/react/code-connect/Slider/SliderRange.figma.tsx b/packages/react/code-connect/Slider/SliderRange.figma.tsx
@@ -0,0 +1,47 @@
+// /**
+//  * 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.
+//  */
+
+// // @ts-nocheck
+// import React from 'react';
+// import { Slider, SliderSkeleton } from '@carbon/react';
+// import figma from '@figma/code-connect';
+
+// figma.connect(
+//   SliderRange,
+//   "https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev",
+//   {
+//     props: {
+//       maxrangetext3836123: figma.string("Max range text"),
+//       minrangetext383610: figma.string("Min range text"),
+//       errortext97969: figma.string("Error text"),
+//       warningtext97992: figma.string("Warning text"),
+//       labeltext9790: figma.string("Label text"),
+//       inputs: figma.boolean("Inputs"),
+//       state: figma.enum("State", {
+//         Enabled: "enabled",
+//         Hover: "hover",
+//         Active: "active",
+//         Disabled: "disabled",
+//         Focused: "focused",
+//         Skeleton: "skeleton",
+//         "Read only": "read-only",
+//         "Hover + Error": "hover---error",
+//         "Active + Error": "active---error",
+//         "Focused + Error": "focused---error",
+//         "Hover + Warning": "hover---warning",
+//         "Active + Warning": "active---warning",
+//         "Focused + Warning": "focused---warning",
+//       }),
+//       handle: figma.enum("Handle", {
+//         None: "none",
+//         Left: "left",
+//         Right: "right",
+//       }),
+//     },
+//     example: (props) => <SliderRange />,
+//   },
+// )
diff --git a/packages/react/code-connect/TextArea/FluidTextArea.figma.tsx b/packages/react/code-connect/TextArea/FluidTextArea.figma.tsx
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { unstable__FluidTextArea as FluidTextArea } from './TextAreaFluid';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  FluidTextArea,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=18791-274643&t=4Ath5JqwaYJZxznq-4',
+  {
+    props: {
+      value: figma.boolean('Text filled', {
+        true: figma.string('Body text'),
+      }),
+      labelText: figma.string('Label text'),
+      warnText: figma.string('Warning message'),
+      invalidText: figma.string('Error message'),
+      placeholdertext: figma.string('Placeholder text'),
+      warn: figma.enum('State', {
+        Warning: true,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      invalid: figma.enum('State', {
+        Error: true,
+      }),
+      readOnly: figma.enum('State', {
+        'Read-only': 'read-only',
+      }),
+    },
+    example: ({ ...props }) => <FluidTextArea {...props} />,
+  }
+);