feat(progress-bar): add optional percentageStart prop (#1204)

telekom · Sep 27, 2022 · 573baf3 · 573baf3
1 parent 2e7898b
commit 573baf3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap b/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressBar check props 1`] = `
-<scale-progress-bar label="testLabel" percentage="18" show-status="" status-description="statusDescription" status-inside="" stroke-width="24" styles="color:blue;" text-inside="">
+<scale-progress-bar label="testLabel" percentage="18" percentage-start="5" show-status="" status-description="statusDescription" status-inside="" stroke-width="24" styles="color:blue;" text-inside="">
   <mock:shadow-root>
     <style>
       color:blue;
     </style>
     <style>
       @keyframes showProgress {
       from {
-        width: 0;
+        width: 5%;
       }
       to {
         width: 18%;
@@ -51,7 +51,7 @@ exports[`ProgressBar should match snapshot 1`] = `
     <style>
       @keyframes showProgress {
       from {
-        width: 0;
+        width: 0%;
       }
       to {
         width: 0%;

diff --git a/packages/components/src/components/progress-bar/progress-bar.spec.ts b/packages/components/src/components/progress-bar/progress-bar.spec.ts
@@ -34,6 +34,7 @@ describe('ProgressBar', () => {
           label="testLabel"
           status-description="statusDescription"
           status-inside
+          percentage-start="5"
           percentage="18"
           text-inside 
           stroke-width=24

diff --git a/packages/components/src/components/progress-bar/progress-bar.tsx b/packages/components/src/components/progress-bar/progress-bar.tsx
@@ -26,6 +26,8 @@ export class ProgressBar {
   @Prop() busy?: boolean = false;
   /** (required) Progress bar percentage */
   @Prop() percentage: number = 0;
+  /** (optional) Progress bar percentage to start the animation from (default: 0) */
+  @Prop() percentageStart: number = 0;
   /** @deprecated - (optional) Progress bar customColor */
   @Prop() customColor?: string;
   /** (optional) Progress bar stroke width */
@@ -71,10 +73,10 @@ export class ProgressBar {
     }
   }
 
-  transitions = (width: number) => `
+  transitions = (width: number, widthStart: number) => `
     @keyframes showProgress {
       from {
-        width: 0;
+        width: ${widthStart}%;
       }
       to {
         width: ${width}%;
@@ -95,7 +97,7 @@ export class ProgressBar {
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
-        <style>{this.transitions(this.percentage)}</style>
+        <style>{this.transitions(this.percentage, this.percentageStart)}</style>
 
         <div part={this.getBasePartMap()} class={this.getCssClassMap()}>
           {!!this.label && (

diff --git a/packages/components/src/components/progress-bar/readme.md b/packages/components/src/components/progress-bar/readme.md
@@ -17,6 +17,7 @@
 | `label`             | `label`              | (optional) Progress bar label                                                                   | `string`  | `undefined` |
 | `mute`              | `mute`               | (optional) disables aria-live                                                                   | `boolean` | `undefined` |
 | `percentage`        | `percentage`         | (required) Progress bar percentage                                                              | `number`  | `0`         |
+| `percentageStart`   | `percentage-start`   | (optional) Progress bar percentage to start the animation from (default: 0)                     | `number`  | `0`         |
 | `progressBarId`     | `progress-bar-id`    | (optional) Progress bar id                                                                      | `string`  | `undefined` |
 | `showStatus`        | `show-status`        | (optional) Progress bar percentage text                                                         | `boolean` | `undefined` |
 | `statusDescription` | `status-description` | (optional) Progress bar status description text                                                 | `string`  | `undefined` |