docs(progress-bar): add component live demo (#3182)

* docs(progress-bar): add component live demo

* chore(package): add @carbon/react resolution

* chore(package): update gatsby-theme-carbon

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

package.json

@@ -57,7 +57,7 @@
     "gatsby": "^4.9.2",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.0.0-next.12",
+    "gatsby-theme-carbon": "^3.0.0-next.13",
     "lodash-es": "^4.17.15",
     "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",

src/data/docgen/react-docgen.json

@@ -4702,6 +4702,82 @@
     }
   },
   "PrimaryButton": { "description": "", "displayName": "PrimaryButton" },
+  "ProgressBar": {
+    "description": "",
+    "displayName": "ProgressBar",
+    "methods": [],
+    "props": {
+      "className": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "Additional CSS class names."
+      },
+      "helperText": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "The current progress as a textual representation."
+      },
+      "hideLabel": {
+        "type": { "name": "bool" },
+        "required": false,
+        "description": "Whether the label should be visually hidden."
+      },
+      "label": {
+        "type": { "name": "string" },
+        "required": true,
+        "description": "A label describing the progress bar."
+      },
+      "max": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The maximum value.",
+        "defaultValue": { "value": "100", "computed": false }
+      },
+      "size": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'small'", "computed": false },
+            { "value": "'big'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the size of the ProgressBar.",
+        "defaultValue": { "value": "'big'", "computed": false }
+      },
+      "status": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'active'", "computed": false },
+            { "value": "'finished'", "computed": false },
+            { "value": "'error'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the status.",
+        "defaultValue": { "value": "'active'", "computed": false }
+      },
+      "type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'default'", "computed": false },
+            { "value": "'inline'", "computed": false },
+            { "value": "'indented'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Defines the alignment variant of the progress bar.",
+        "defaultValue": { "value": "'default'", "computed": false }
+      },
+      "value": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The current value."
+      }
+    }
+  },
   "ProgressIndicator": {
     "description": "",
     "displayName": "ProgressIndicator",

src/pages/components/progress-bar/ComponentDemo.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ComponentDemo from '../../../components/ComponentDemo';
+import ComponentVariant from '../../../components/ComponentDemo/ComponentVariant';
+
+const components = [
+  {
+    id: 'determinate',
+    label: 'Determinate',
+  },
+  {
+    id: 'indeterminate',
+    label: 'Indeterminate',
+  },
+];
+
+const knobs = {
+  ProgressBar: ['hideLabel', 'size', 'status', 'type'],
+};
+
+const links = {
+  React:
+    'https://react.carbondesignsystem.com/?path=/story/components-progressbar--playground',
+};
+
+function PopoverComponentDemo() {
+  return (
+    <ComponentDemo
+      components={components}
+    >
+      <ComponentVariant id="determinate" knobs={knobs} links={links}>
+        {`
+<div style={{ width: '75%' }}>
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+    value={75}
+  />
+</div>
+        `}
+      </ComponentVariant>
+      <ComponentVariant id="indeterminate" knobs={knobs} links={links}>
+        {`
+<div style={{ width: '75%' }}>
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+  />
+</div>
+        `}
+      </ComponentVariant>
+    </ComponentDemo>
+  );
+}
+
+export default PopoverComponentDemo;

src/pages/components/progress-bar/code.mdx

@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import ProgressBarComponentDemo from './ComponentDemo';
+
 <PageDescription>
 
 Preview the progress bar component with the React live demo. For detailed code
@@ -25,3 +27,7 @@ usage documentation, see the Storybooks for each framework below.
   </ResourceCard>
 </Column>
 </Row>
+
+## Live demo
+
+<ProgressBarComponentDemo />

src/pages/components/progress-bar/usage.mdx

@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import ProgressBarComponentDemo from './ComponentDemo';
+
 import localVideo from './videos/progress-bar-usage-4.mp4';
 import localPoster from './images/progress-bar-usage-4.png';
 
@@ -35,6 +37,7 @@ long a user will be waiting.
 <AnchorLinks>
 
 <AnchorLink>Overview</AnchorLink>
+<AnchorLink>Live demo</AnchorLink>
 <AnchorLink>Variants</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
@@ -62,6 +65,10 @@ how long a process will take, or if a request is being executed.
 </Column>
 </Row>
 
+## Live demo
+
+<ProgressBarComponentDemo />
+
 #### When to use
 
 - For a long operation or a process that can take a considerable or unknown