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

src/DataTable/ToolbarSearch.svelte

@@ -47,7 +47,6 @@
 </script>
 
 <Search
-  size="sm"
   tabindex="{tabindex}"
   disabled="{disabled}"
   {...$$restProps}

src/Notification/InlineNotification.svelte

@@ -76,11 +76,7 @@
     on:mouseleave
   >
     <div class:bx--inline-notification__details="{true}">
-      <NotificationIcon
-        notificationType="inline"
-        kind="{kind}"
-        iconDescription="{iconDescription}"
-      />
+      <NotificationIcon notificationType="inline" kind="{kind}" />
       <NotificationTextDetails
         title="{title}"
         subtitle="{subtitle}"

src/Notification/ToastNotification.svelte

@@ -77,7 +77,7 @@
     on:mouseenter
     on:mouseleave
   >
-    <NotificationIcon kind="{kind}" iconDescription="{iconDescription}" />
+    <NotificationIcon kind="{kind}" />
     <NotificationTextDetails
       title="{title}"
       subtitle="{subtitle}"

src/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,60 @@
+<script>
+  /**
+   * Specify the current value
+   * @type {number}
+   */
+  export let value = undefined;
+
+  /** Specify the maximum value */
+  export let max = 100;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  let id = "ccs-" + Math.random().toString(36);
+  let helperId = "ccs-" + Math.random().toString(36);
+
+  $: indeterminate = value === undefined;
+  $: capped = value > max ? max : value < 0 ? 0 : value;
+</script>
+
+<div
+  class:bx--progress-bar="{true}"
+  class:bx--progress-bar--indeterminate="{indeterminate}"
+  {...$$restProps}
+>
+  <label
+    for="{id}"
+    class:bx--progress-bar__label="{true}"
+    class:bx--visually-hidden="{hideLabel}"
+  >
+    <slot name="labelText">
+      {labelText}
+    </slot>
+  </label>
+  <div
+    role="progressbar"
+    id="{id}"
+    class:bx--progress-bar__track="{true}"
+    aria-valuemin="{indeterminate ? undefined : 0}"
+    aria-valuemax="{indeterminate ? undefined : max}"
+    aria-valuenow="{indeterminate ? undefined : capped}"
+    aria-describedby="{helperText ? helperId : null}"
+  >
+    <div
+      class:bx--progress-bar__bar="{true}"
+      style="transform: scaleX({capped / max})"
+    ></div>
+  </div>
+  {#if helperText}
+    <div id="{helperId}" class:bx--progress-bar__helper-text="{true}">
+      {helperText}
+    </div>
+  {/if}
+</div>

src/ProgressBar/index.js

@@ -0,0 +1 @@
+export { default as ProgressBar } from "./ProgressBar.svelte";

src/TextInput/TextInput.svelte

@@ -83,7 +83,7 @@
   on:mouseleave
 >
   {#if inline}
-    <div class="bx--text-input__label-helper-wrapper">
+    <div class:bx--text-input__label-helper-wrapper="{true}">
       {#if labelText}
         <label
           for="{id}"

src/index.js

@@ -85,6 +85,7 @@ export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
 export { Popover } from "./Popover";
+export { ProgressBar } from "./ProgressBar";
 export {
   ProgressIndicator,
   ProgressIndicatorSkeleton,