Align v10.37 (#697)

* chore(deps-dev): upgrade carbon-components to v10.27.1

* fix(toolbar-search): omit size prop

* feat(progress-bar): add ProgressBar

* refactor(text-input): use class directive

* chore(deps-dev): rebuild yarn.lock

* fix(notification): omit iconDescription from NotificationIcon #672

Fixes #672

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 167,
+  "total": 168,
   "components": [
     {
       "moduleName": "Accordion",
@@ -7302,6 +7302,72 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "ProgressBar",
+      "filePath": "src/ProgressBar/ProgressBar.svelte",
+      "props": [
+        {
+          "name": "value",
+          "kind": "let",
+          "description": "Specify the current value",
+          "type": "number",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "max",
+          "kind": "let",
+          "description": "Specify the maximum value",
+          "type": "number",
+          "value": "100",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        {
+          "name": "labelText",
+          "default": false,
+          "fallback": "{labelText}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "ProgressIndicator",
       "filePath": "src/ProgressIndicator/ProgressIndicator.svelte",

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["Popover", "ContextMenu"];
+  const new_components = ["ProgressBar"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/ProgressBar.svx

@@ -0,0 +1,24 @@
+<script>
+  import { ProgressBar } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+Without a specified `value` prop, the progress bar is indeterminate.
+
+<ProgressBar helperText="Loading..." />
+
+### Percentage
+
+<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### Custom max value
+
+The default `max` value is `100`.
+
+<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
+
+### Hidden label
+
+<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />

docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { onMount } from "svelte";
+  import { ProgressBar } from "carbon-components-svelte";
+
+  let max = 328;
+  let value = 0;
+  let timer = undefined;
+
+  onMount(() => {
+    timer = setTimeout(() => {
+      const interval = setInterval(() => {
+        const delta = Math.random() * 10;
+
+        if (value + delta < max) {
+          value += delta;
+        } else {
+          value = max;
+          clearInterval(interval);
+        }
+      }, 20);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  });
+
+  $: helperText =
+    value > 0 ? `${value.toFixed(0)}MB of ${max}MB` : "Preparing upload...";
+  $: if (value === max) helperText = "Done";
+</script>
+
+<ProgressBar
+  labelText="Upload status"
+  value="{value}"
+  max="{max}"
+  helperText="{helperText}"
+/>