feat(ui): add progress bar component EBS-1515 (#238)

* feat(ui): add progress bar component EBS-1515 * chore(styles): update metadata-card shades and bordering EBS-1515 * feat(ui): add progress bar component EBS-1515 * feat(ui): add progress bar component improved desktop view EBS-1515 * feat(ui): clean up inputs and split html EBS-1515 * format(ui): made Stylelint config more flexible with font-weight and border-radius values * format(ui): lower severity of block-no-empty rule Stylelint reports * refactor(ui): refactored cvi-progress-bar styles and ProgressBarComponent Angular component, removed dead code * docs(ui): added an HTML story for cvi-progress-bar Sass component --------- Co-authored-by: Aleksandr Beliaev <[email protected]>
e-gov · Dec 10, 2024 · 8e8ee93 · 8e8ee93
1 parent 514abae
commit 8e8ee93
Show file tree

Hide file tree

Showing 14 changed files with 461 additions and 13 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -11,6 +11,12 @@ module.exports = {
         severity: 'warning',
       },
     ],
+    'block-no-empty': [
+      true,
+      {
+        severity: 'warning',
+      },
+    ],
     'color-hex-length': 'long',
     'no-descending-specificity': true,
     'color-hex-alpha': 'never',
@@ -125,14 +131,16 @@ module.exports = {
           '100%',
           '/^var\\(--cvi-radius-/',
           '/^map\\.get\\(\\$cvi-radii/',
+          '/^calc\\(/',
+          'inherit',
         ],
         'font-size': [
           '/^var\\(/',
           '/^get-font-size\\(/',
           'inherit',
           '/^typography\\./',
         ],
-        'font-weight': ['/^get-font-weight\\(/'],
+        'font-weight': ['/^get-font-weight\\(/', '/^var\\(--cvi-font-weight-/'],
         'line-height': ['/^var\\(/', '/^get-line-height\\(/', '0'],
         'z-index': ['/^get-z-index\\(/', '/^var\\(/', '-1'],
       },

diff --git a/libs/styles/src/lib/scss/_apply.scss b/libs/styles/src/lib/scss/_apply.scss
@@ -133,3 +133,7 @@
 .cvi-metadata-card {
   @include cvi-metadata-card;
 }
+
+.cvi-progress-bar {
+  @include cvi-progress-bar;
+}
diff --git a/libs/styles/src/lib/scss/components/_metadata-card.scss b/libs/styles/src/lib/scss/components/_metadata-card.scss
@@ -4,24 +4,17 @@
   display: flex;
   border-radius: var(--cvi-radius-s);
   border-left: 6px solid var(--cvi-metadata-card-left-border-color);
-
-  @include cvi-breakpoint-up(sm) {
-    box-shadow: var(--cvi-shadow-beta);
-  }
+  box-shadow: var(--cvi-shadow-beta);
 
   #{$base}__content {
     padding-inline: get-spacing('kuressaare');
     padding-block: get-spacing('haapsalu');
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
-
-    @include cvi-breakpoint-down(sm) {
-      border: 1px solid get-color(black-coral-2);
-      border-left: none;
-      border-top-right-radius: var(--cvi-radius-s);
-      border-bottom-right-radius: var(--cvi-radius-s);
-    }
+    border: 1px solid get-color(black-coral-2);
+    border-left: none;
+    border-top-right-radius: var(--cvi-radius-s);
+    border-bottom-right-radius: var(--cvi-radius-s);
   }
 }
-
diff --git a/libs/styles/src/lib/scss/components/_progress-bar.scss b/libs/styles/src/lib/scss/components/_progress-bar.scss
@@ -0,0 +1,126 @@
+@mixin cvi-progress-bar($base: &) {
+  --comment: 'Progress bar component that appears as a horizontal bar on desktop and a circle on mobile';
+
+  /* stylelint-disable-next-line color-no-hex, declaration-property-value-allowed-list */
+  --color: #599e75;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include cvi-breakpoint-down(sm) {
+    position: relative;
+    width: calc(var(--circle-radius) * 2 * 1px);
+    height: calc(var(--circle-radius) * 2 * 1px);
+  }
+
+  @include cvi-breakpoint-up(sm) {
+    gap: var(--cvi-spacing-haapsalu);
+  }
+
+  @at-root {
+    #{$base}.is-progress-finished {
+      #{$base}__label-wrapper {
+        @include cvi-breakpoint-down(sm) {
+          font-size: var(--cvi-font-size-70);
+        }
+      }
+    }
+
+    #{$base}__circular-bar {
+      @include cvi-breakpoint-down(sm) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+      }
+
+      @include cvi-breakpoint-up(sm) {
+        display: none;
+      }
+    }
+
+    #{$base}__circular-bar-background {
+      fill: none;
+      stroke: var(--cvi-color-black-coral-0);
+      stroke-width: var(--circle-stroke-width);
+    }
+
+    #{$base}__circular-bar-progress {
+      fill: none;
+      stroke: var(--color);
+      stroke-width: var(--circle-stroke-width);
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+      transition: stroke-dashoffset 0.35s;
+      stroke-linecap: round;
+    }
+
+    #{$base}__horizontal-bar {
+      --height: 18px;
+
+      @include cvi-breakpoint-down(sm) {
+        display: none;
+      }
+
+      @include cvi-breakpoint-up(sm) {
+        width: 100%;
+        height: var(--height);
+        border-radius: calc(var(--height) / 2);
+        background-color: var(--cvi-color-black-coral-0);
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: var(--progress);
+          height: 100%;
+          background-color: var(--color);
+          border-radius: inherit;
+        }
+      }
+    }
+
+    #{$base}__numeric-content {
+      color: var(--cvi-color-black-coral-20);
+      font-weight: var(--cvi-font-weight-delta);
+
+      @include cvi-breakpoint-down(sm) {
+        font-size: var(--cvi-font-size-250);
+      }
+    }
+
+    #{$base}__label-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: var(--cvi-font-size-80);
+      line-height: var(--cvi-line-height-300);
+
+      @include cvi-breakpoint-down(sm) {
+        flex-direction: column;
+        text-align: center;
+        padding-inline: calc(
+          var(--circle-stroke-width) * 1px + var(--cvi-spacing-paldiski)
+        );
+      }
+
+      @include cvi-breakpoint-up(sm) {
+        gap: var(--cvi-spacing-paldiski);
+      }
+    }
+
+    #{$base}__label {
+      color: var(--cvi-color-black-coral-12);
+    }
+
+    #{$base}__success-icon {
+      fill: var(--color);
+
+      @include cvi-breakpoint-down(sm) {
+        height: 40px;
+      }
+    }
+  }
+}
diff --git a/libs/styles/src/lib/scss/main.scss b/libs/styles/src/lib/scss/main.scss
@@ -58,6 +58,7 @@
 @import 'components/table-card';
 @import 'components/labeled-item';
 @import "components/metadata-card";
+@import 'components/progress-bar';
 
 @import 'apply';
 

diff --git a/libs/styles/src/lib/scss/settings/variables/_typography.scss b/libs/styles/src/lib/scss/settings/variables/_typography.scss
@@ -19,6 +19,7 @@ $cvi-font-sizes: (
 
 $cvi-line-heights: (
   100: 1,
+  300: 1.3,
   500: 1.5
 );
 

diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -81,3 +81,4 @@ export * from './lib/table-card/table-card.component';
 export * from './lib/table-responsive/table-responsive.component';
 export * from './lib/labeled-item/labeled-item.component';
 export * from './lib/metadata-card/metadata-card.component';
+export * from './lib/progress-bar/progress-bar.component';
diff --git a/libs/ui/src/lib/progress-bar/progress-bar.component.html b/libs/ui/src/lib/progress-bar/progress-bar.component.html
@@ -0,0 +1,24 @@
+<div class="cvi-progress-bar__label-wrapper">
+  <cvi-ng-icon *ngIf="progressFinished" name="check" svgClass="cvi-progress-bar__success-icon">
+  </cvi-ng-icon>
+
+  <span class="cvi-progress-bar__label">
+    <ng-container *ngIf="!progressFinished">
+      {{ progressMessage }}
+    </ng-container>
+    <ng-container *ngIf="progressFinished">
+      {{ successMessage }}
+    </ng-container>
+  </span>
+
+  <span *ngIf="!progressFinished" class="cvi-progress-bar__numeric-content">
+    {{ progressValue }}/{{ progressValueMax }}
+  </span>
+</div>
+
+<div *ngIf="!progressFinished" class="cvi-progress-bar__horizontal-bar"></div>
+
+<svg class="cvi-progress-bar__circular-bar" xmlns="http://www.w3.org/2000/svg" [attr.width]="getCircleDiameter()" [attr.height]="getCircleDiameter()" [attr.viewBox]="'0 0 ' + getCircleDiameter() + ' ' + getCircleDiameter()">
+  <circle class="cvi-progress-bar__circular-bar-background" [attr.cx]="circleRadius" [attr.cy]="circleRadius" [attr.r]="getCircleBoundaries()" />
+  <circle class="cvi-progress-bar__circular-bar-progress" [attr.cx]="circleRadius" [attr.cy]="circleRadius" [attr.r]="getCircleBoundaries()" [ngStyle]="{ 'stroke-dasharray': getCircleCircumference() + ' ' + getCircleCircumference(), 'stroke-dashoffset': getCircleOffset() }" />
+</svg>
diff --git a/libs/ui/src/lib/progress-bar/progress-bar.component.md b/libs/ui/src/lib/progress-bar/progress-bar.component.md
@@ -0,0 +1,13 @@
+## General description
+
+| Feature                    | Description       |
+|----------------------------|-------------------|
+| Selector                   | `cvi-ng-progress-bar`   |
+| Component name             | `ProgressBarComponent` |
+| Content                    | -               |
+| Permitted parent/ancestors | -               |
+| Permitted children         | -                 |
+
+## Where to use
+
+Use if you need to visualise a progress. The component renders as a circle on mobile and as a horizontal bar on desktop.
diff --git a/libs/ui/src/lib/progress-bar/progress-bar.component.stories.ts b/libs/ui/src/lib/progress-bar/progress-bar.component.stories.ts
@@ -0,0 +1,108 @@
+import { componentWrapperDecorator, Meta } from '@storybook/angular';
+import notes from '../progress-bar/progress-bar.component.md';
+import { ProgressBarComponent } from './progress-bar.component';
+
+const wrapperDecorators = [
+  componentWrapperDecorator(ProgressBarComponent, ({ args }) => {
+    return args;
+  }),
+];
+
+export default {
+  title: 'Angular/Progress bar',
+  component: ProgressBarComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: notes,
+      },
+    },
+    layout: 'padded',
+  },
+  args: {
+    progressValue: 0,
+    progressMessage: 'Lõpetatud tegevused:',
+    successMessage: 'Kõik tegevused lõpetatud',
+  },
+} as Meta<ProgressBarComponent>;
+
+export const Default = {
+  render: (args: ProgressBarComponent) => ({
+    props: args,
+    template: `{{ content }}`,
+  }),
+  decorators: wrapperDecorators,
+};
+
+export const Mobile0 = {
+  ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone12mini',
+    },
+  },
+};
+
+export const Mobile1 = {
+  ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone12mini',
+    },
+  },
+  args: {
+    progressValue: 1,
+  },
+};
+
+export const Mobile2 = {
+  ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone12mini',
+    },
+  },
+  args: {
+    progressValue: 2,
+  },
+};
+
+export const Mobile3 = {
+  ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone12mini',
+    },
+  },
+  args: {
+    progressValue: 3,
+  },
+};
+
+export const Desktop0 = {
+  ...Default,
+  args: {
+    progressValue: 0,
+  },
+};
+
+export const Desktop1 = {
+  ...Default,
+  args: {
+    progressValue: 1,
+  },
+};
+
+export const Desktop2 = {
+  ...Default,
+  args: {
+    progressValue: 2,
+  },
+};
+
+export const Desktop3 = {
+  ...Default,
+  args: {
+    progressValue: 3,
+  },
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ $cvi-font-sizes: ( @@
     $cvi-line-heights: (
 : 1,
+: 1.3,
 : 1.5
     );
@@ Expand Down @@