feat: upgrade carbon-components to v10.56.0 (carbon-design-system#1213)

* chore(deps-dev): upgrade carbon-components to v10.56.0 * feat(progress-bar): add kind prop * Run "yarn build:docs" * test(progress-bar): assert kind prop
Mattchine · Mar 27, 2022 · ade0557 · ade0557
1 parent 21714d0
commit ade0557
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 35 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2788,15 +2788,16 @@ None.
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                          | Default value                                    | Description                                   |
-| :--------- | :--------------- | :------- | :---------------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value      | <code>let</code> | No       | <code>number</code>           | <code>undefined</code>                           | Specify the current value                     |
-| max        | <code>let</code> | No       | <code>number</code>           | <code>100</code>                                 | Specify the maximum value                     |
-| size       | <code>let</code> | No       | <code>"sm" &#124; "md"</code> | <code>"md"</code>                                | Specify the size                              |
-| labelText  | <code>let</code> | No       | <code>string</code>           | <code>""</code>                                  | Specify the label text                        |
-| hideLabel  | <code>let</code> | No       | <code>boolean</code>          | <code>false</code>                               | Set to `true` to visually hide the label text |
-| helperText | <code>let</code> | No       | <code>string</code>           | <code>""</code>                                  | Specify the helper text                       |
-| id         | <code>let</code> | No       | <code>string</code>           | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |
+| Prop name  | Kind             | Reactive | Type                                                     | Default value                                    | Description                                   |
+| :--------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
+| value      | <code>let</code> | No       | <code>number</code>                                      | <code>undefined</code>                           | Specify the current value                     |
+| max        | <code>let</code> | No       | <code>number</code>                                      | <code>100</code>                                 | Specify the maximum value                     |
+| kind       | <code>let</code> | No       | <code>"default" &#124; "inline" &#124; "indented"</code> | <code>"default"</code>                           | Specify the kind of progress bar              |
+| size       | <code>let</code> | No       | <code>"sm" &#124; "md"</code>                            | <code>"md"</code>                                | Specify the size                              |
+| labelText  | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the label text                        |
+| hideLabel  | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to visually hide the label text |
+| helperText | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the helper text                       |
+| id         | <code>let</code> | No       | <code>string</code>                                      | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |
 
 ### Slots
 

diff --git a/docs/package.json b/docs/package.json
@@ -12,7 +12,7 @@
     "@sveltech/routify": "^1.9.9",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.54.0",
+    "carbon-components": "10.56.0",
     "carbon-components-10.47": "npm:[email protected]",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^10.44.3",

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -8260,6 +8260,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "kind",
+          "kind": "let",
+          "description": "Specify the kind of progress bar",
+          "type": "\"default\" | \"inline\" | \"indented\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",

diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
@@ -35,6 +35,16 @@ Use `hideLabel` to visually hide the label text.
 
 <ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+### Inline variant
+
+The inline variant visually hides the `helperText`.
+
+<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### Indented variant
+
+<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
 ### UX example
 
 This example shows how to animate the progress bar from 0 to 100% with start and end states.

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -114,6 +114,11 @@
     winston "^3.3.3"
     yargs "^16.1.1"
 
+"@carbon/[email protected]":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
+  integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg==
+
 "@dabh/diagnostics@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@@ -467,16 +472,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
     warning "^3.0.0"
 
 carbon-components-svelte@../:
-  version "0.59.0"
+  version "0.62.2"
   dependencies:
     flatpickr "4.6.9"
 
-carbon-components@10.54.0:
-  version "10.54.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.54.0.tgz#f70d0a9fcc7e84f8fb00a45b6b9894d77155acce"
-  integrity sha512-gl0b4wRG1E/ns02nG/M0FaNm4FCT91iTr1XFzqY+h1wFsjG1/2OOu7A6lth8Qtk0jsr//YZcB0MNjq8WFaFciw==
+carbon-components@10.56.0:
+  version "10.56.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.56.0.tgz#bb5890f00f81cebcddfa2dbae4794477deb539f4"
+  integrity sha512-GPLqHiu2SWvMxcQOi/CcgA/XA3aX/5HiEPSQjLwzjKAJsnkpzq043Jf7QwgLOVbTBzGSjFbFkJnE2lc73I2WBw==
   dependencies:
-    "@carbon/telemetry" "0.0.0-alpha.6"
+    "@carbon/telemetry" "0.1.0"
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"
     warning "^3.0.0"

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.2",
-    "carbon-components": "10.54.0",
+    "carbon-components": "10.56.0",
     "carbon-components-10.47": "npm:[email protected]",
     "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",

diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte
@@ -8,6 +8,12 @@
   /** Specify the maximum value */
   export let max = 100;
 
+  /**
+   * Specify the kind of progress bar
+   * @type {"default" | "inline" | "indented"}
+   */
+  export let kind = "default";
+
   /**
    * Specify the size
    * @type {"sm" | "md"}
@@ -37,6 +43,8 @@
   class:bx--progress-bar--indeterminate="{indeterminate}"
   class:bx--progress-bar--big="{size === 'md'}"
   class:bx--progress-bar--small="{size === 'sm'}"
+  class:bx--progress-bar--inline="{kind === 'inline'}"
+  class:bx--progress-bar--indented="{kind === 'indented'}"
   {...$$restProps}
 >
   <label

diff --git a/tests/ProgressBar.test.svelte b/tests/ProgressBar.test.svelte
@@ -5,21 +5,11 @@
 <ProgressBar helperText="Loading..." />
 
 <ProgressBar
+  kind="inline"
+  size="md"
   value="{40}"
+  max="{100}"
   labelText="Upload status"
-  helperText="40 MB of 100 MB"
-/>
-
-<ProgressBar
-  value="{40}"
-  max="{200}"
-  labelText="Upload status"
-  helperText="40 MB of 100 MB"
-/>
-
-<ProgressBar
   hideLabel
-  value="{40}"
-  labelText="Upload status"
   helperText="40 MB of 100 MB"
 />
diff --git a/types/ProgressBar/ProgressBar.svelte.d.ts b/types/ProgressBar/ProgressBar.svelte.d.ts
@@ -15,6 +15,12 @@ export interface ProgressBarProps
    */
   max?: number;
 
+  /**
+   * Specify the kind of progress bar
+   * @default "default"
+   */
+  kind?: "default" | "inline" | "indented";
+
   /**
    * Specify the size
    * @default "md"

diff --git a/yarn.lock b/yarn.lock
@@ -121,6 +121,11 @@
     winston "^3.3.3"
     yargs "^16.1.1"
 
+"@carbon/[email protected]":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
+  integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg==
+
 "@dabh/diagnostics@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@@ -464,12 +469,12 @@ caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-components@10.54.0:
-  version "10.54.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.54.0.tgz#f70d0a9fcc7e84f8fb00a45b6b9894d77155acce"
-  integrity sha512-gl0b4wRG1E/ns02nG/M0FaNm4FCT91iTr1XFzqY+h1wFsjG1/2OOu7A6lth8Qtk0jsr//YZcB0MNjq8WFaFciw==
+carbon-components@10.56.0:
+  version "10.56.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.56.0.tgz#bb5890f00f81cebcddfa2dbae4794477deb539f4"
+  integrity sha512-GPLqHiu2SWvMxcQOi/CcgA/XA3aX/5HiEPSQjLwzjKAJsnkpzq043Jf7QwgLOVbTBzGSjFbFkJnE2lc73I2WBw==
   dependencies:
-    "@carbon/telemetry" "0.0.0-alpha.6"
+    "@carbon/telemetry" "0.1.0"
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"
     warning "^3.0.0"