Merge pull request #56 from openeuropa/FRONT-2483

FRONT-2483: Progress pattern.
openeuropa · Oct 11, 2021 · 5104813 · 5104813
2 parents b1b6756 + a6c0885
commit 5104813
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 16 deletions.
diff --git a/resources/js/libraries/extend/progress.js b/resources/js/libraries/extend/progress.js
@@ -15,9 +15,9 @@
    */
   Drupal.theme.progressBar = function(id) {
     return (
-      `<div id="${id}" aria-live="polite">` +
+      '<div id="' + id + '" aria-live="polite">' +
       '<label class="progress-bar-label"></label>' +
-      '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>' +
+      '<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>' +
       '<small class="form-text text-muted progress-bar-message"></small>' +
       '</div>'
     );
@@ -39,10 +39,10 @@
       setProgress(percentage, message, label) {
         if (percentage >= 0 && percentage <= 100) {
           $(this.element)
-            .find('div.progress-bar')
-            .css('width', `${percentage}%`)
-            .attr('aria-valuenow', percentage)
-            .html(`${percentage}%`);
+           .find('div.progress-bar')
+           .css('width', percentage + '%')
+           .attr('aria-valuenow', percentage)
+           .html(percentage + '%');
         }
         $('label.progress-bar-label', this.element).html(label);
         $('small.progress-bar-message', this.element).html(message);

diff --git a/templates/overrides/misc/progress-bar.html.twig b/templates/overrides/misc/progress-bar.html.twig
@@ -6,18 +6,19 @@
  * Note that the core Batch API uses this only for non-JavaScript batch jobs.
  *
  * Available variables:
- * - label: The label of the working task.
- * - percent: The percentage of the progress.
- * - message: A string containing information to be displayed.
+ * - label: Text before progress bar.
+ * - percent: Percentage of progress in the bar.
+ * - message: Text under progress bar.
  */
 #}
 
 <div data-drupal-progress>
-  {% if label %}
-    <label class="progress-bar-label">{{ label }}</label>
-  {% endif %}
-  <div class="progress">
-    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percent }}%">{{ percent }}%</div>
-  </div>
-  <small class="form-text text-muted progress-bar-message">{{ message }}</small>
+  {{ pattern('progress', {
+    'progress': percent,
+    'striped': true,
+    'animated': true,
+    'label': label,
+    'style': 'primary',
+    'message': message
+  }) }}
 </div>
diff --git a/templates/patterns/progress/pattern-progress.html.twig b/templates/patterns/progress/pattern-progress.html.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Progress.
+ */
+#}
+{% include '@oe-bcl/bcl-progress/progress.html.twig' with {
+  'progress': progress,
+  'min': min,
+  'max': max,
+  'message': message,
+  'striped': striped,
+  'animated': animated,
+  'label': label,
+  'variant': style,
+  'bar_label': bar_label,
+} %}
diff --git a/templates/patterns/progress/progress.ui_patterns.yml b/templates/patterns/progress/progress.ui_patterns.yml
@@ -0,0 +1,49 @@
+progress:
+  label: "Progress"
+  description: "Indicate the progress as a bar. https://getbootstrap.com/docs/5.0/components/progress/"
+  settings:
+    style:
+      type: "select"
+      label: "Bar style"
+      options:
+        primary: "primary"
+        secondary: "secondary"
+        success: "success"
+        danger: "danger"
+        warning: "warning"
+        info: "info"
+        light: "light"
+        dark: "dark"
+      preview: "primary"
+    striped:
+      type: "boolean"
+      label: "Striped style of state"
+      preview: true
+    animated:
+      type: "boolean"
+      label: "Animation on striped style of state"
+      preview: true
+  fields:
+    label:
+      type: "text"
+      label: "Label in the bar"
+      preview: "This is the label of progress bar"
+    progress:
+      type: "text"
+      label: "Percentage of progress in the bar"
+      preview: "50"
+    bar_label:
+      type: "text"
+      label: "Text indicating the percentage of progress in the bar"
+      preview: "50%"
+    message:
+      type: "text"
+      label: "Optional description text below the progress bar"
+    min:
+      type: "text"
+      label: "Minimum state of prorgress bar"
+      preview: "0"
+    max:
+      type: "text"
+      label: "Maximum state of prorgress bar"
+      preview: "100"
diff --git a/tests/.gitkeep b/tests/.gitkeep
diff --git a/tests/fixtures/markup_rendering_pattern.yml b/tests/fixtures/markup_rendering_pattern.yml
@@ -1,3 +1,29 @@
+progress:
+  render:
+    '#type': pattern
+    '#id': progress
+    '#fields':
+      progress: 60
+      label: "Progress label"
+      bar_label: "Bar label"
+      message: "Progress bar description"
+      min: 10
+      max: 90
+  assertions:
+    count:
+      'div[data-drupal-selector="progress"]': 1
+      'div.progress-bar': 1
+      'div.progress': 1
+      'div[role="progressbar"]': 1
+      'div[style="width: 60%"]': 1
+      'div[aria-valuenow="60"]': 1
+      'div[aria-valuemin="10"]': 1
+      'div[aria-valuemax="90"]': 1
+      'small.progress-bar-message': 1
+    contains:
+      'label.progress-bar-label': "Progress label"
+      'div.progress': "Bar label"
+      'small.progress-bar-message': "Progress bar description"
 button:
   render:
     '#type': pattern