feat(CC-progress-bar): progress bar

.gitignore

@@ -32,3 +32,4 @@ lerna-debug.log
 # For vim
 *.swp
 .yarn
+.env

packages/code-connect/components/ProgressBar/ProgressBar.figma.tsx

@@ -0,0 +1,100 @@
+import figma from '@figma/code-connect';
+import { ProgressBar, ProgressMeasureLocation } from '@patternfly/react-core';
+
+// Documentation for ProgressBar can be found at https://www.patternfly.org/components/progress-bar
+const sharedProps = {
+  helperText: figma.boolean('Show helper text', {
+    true: 'This is a helper text',
+    false: undefined
+  }),
+  size: figma.enum('Size', {
+    Default: 'md',
+    Small: 'sm',
+    Large: 'lg'
+  }),
+  title: figma.string('Title'),
+  measureLocation: {
+    outside: figma.boolean('Show outside percentage', {
+      true: 'outside',
+      false: undefined
+    }),
+    inside: figma.boolean('Show main percentage', {
+      true: 'inside',
+      false: undefined
+    })
+  },
+  variant: figma.enum('State', {
+    Success: 'success',
+    Warning: 'warning',
+    Danger: 'danger'
+  })
+};
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
+  {
+    variant: { 'Show outside percentage': true },
+    props: {
+      ...sharedProps
+    },
+    example: (props) => (
+      <ProgressBar
+        aria-describedby="progress-bar-example-helper-text"
+        helperText={props.helperText}
+        id="progress-bar-example"
+        measureLocation={ProgressMeasureLocation.outside}
+        size={props.size}
+        title={props.title}
+        value={50}
+        variant={props.variant}
+      />
+    )
+  }
+);
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
+  {
+    variant: { 'Show main percentage': true },
+    props: {
+      ...sharedProps
+    },
+    example: (props) => (
+      <ProgressBar
+        aria-describedby="progress-bar-example-helper-text"
+        helperText={props.helperText}
+        id="progress-bar-example"
+        measureLocation={ProgressMeasureLocation.inside}
+        size={props.size}
+        title={props.title}
+        value={50}
+        variant={props.variant}
+      />
+    )
+  }
+);
+
+// Base ProgressBar
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
+  {
+    props: {
+      ...sharedProps
+    },
+    example: (props) => (
+      <ProgressBar
+        aria-describedby="progress-bar-example-helper-text"
+        helperText={props.helperText}
+        id="progress-bar-example"
+        measureLocation={ProgressMeasureLocation.none}
+        size={props.size}
+        title={props.title}
+        value={50}
+        variant={props.variant}
+      />
+    )
+  }
+);

packages/code-connect/figma.config.json

@@ -1,13 +1,10 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
+    "include": ["components/ProgressBar/*.figma.tsx"],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/e1OeQDrgPKW13FswRqSP3I/PatternFly-6--Components"
+    },
     "paths": {
       "src/components": "src/components"
     },
@@ -30,4 +27,4 @@
       }
     }
   }
-}
+}