From 8c6ddb5c398cb1a9867ed07a8c94b4f7d096d99f Mon Sep 17 00:00:00 2001
From: Thijs van Beek <thijs@midasweb.nl>
Date: Tue, 10 May 2022 16:02:16 +0200
Subject: [PATCH 1/2] created progress bar component

---
 .../atoms/progress/progress-height.twig       | 16 ++++++
 .../progress/progress-indeterminate.twig      |  1 +
 .../components/atoms/progress/progress.scss   | 54 +++++++++++++++++++
 .../components/atoms/progress/progress.twig   | 15 ++++++
 assets/components/atoms/progress/progress.yml |  8 +++
 assets/components/entrypoint.scss             |  1 +
 6 files changed, 95 insertions(+)
 create mode 100644 assets/components/atoms/progress/progress-height.twig
 create mode 100644 assets/components/atoms/progress/progress-indeterminate.twig
 create mode 100644 assets/components/atoms/progress/progress.scss
 create mode 100644 assets/components/atoms/progress/progress.twig
 create mode 100644 assets/components/atoms/progress/progress.yml

diff --git a/assets/components/atoms/progress/progress-height.twig b/assets/components/atoms/progress/progress-height.twig
new file mode 100644
index 000000000..76642dda2
--- /dev/null
+++ b/assets/components/atoms/progress/progress-height.twig
@@ -0,0 +1,16 @@
+<div class="py-1">
+  <progress
+    class="progress"
+    value="75"
+    max="100"
+    style="height: 1px"
+  ></progress>
+</div>
+<div class="py-1">
+  <progress
+    class="progress"
+    value="75"
+    max="100"
+    style="height: 25px"
+  ></progress>
+</div>
diff --git a/assets/components/atoms/progress/progress-indeterminate.twig b/assets/components/atoms/progress/progress-indeterminate.twig
new file mode 100644
index 000000000..827e03442
--- /dev/null
+++ b/assets/components/atoms/progress/progress-indeterminate.twig
@@ -0,0 +1 @@
+<progress class="progress" max="100" value=""></progress>
diff --git a/assets/components/atoms/progress/progress.scss b/assets/components/atoms/progress/progress.scss
new file mode 100644
index 000000000..a594182e0
--- /dev/null
+++ b/assets/components/atoms/progress/progress.scss
@@ -0,0 +1,54 @@
+@charset 'utf-8';
+
+progress.progress {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background-color: $gray-100;
+  height: 0.5rem;
+}
+
+progress.progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+progress.progress::-webkit-progress-value {
+  background-color: $red;
+  transition: width 0.6s ease;
+}
+
+progress.progress::-moz-progress-bar {
+  background-color: $red;
+  transition: width 0.6s ease;
+}
+
+progress.progress:indeterminate {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
+  animation-timing-function: linear;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right, $red 100%, $gray-100 100%);
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: 200% 200%;
+  &::-webkit-progress-bar {
+    background-color: transparent;
+  }
+  &::-moz-progress-bar {
+    background-color: transparent;
+  }
+  &::-ms-fill {
+    animation-name: none;
+  }
+}
+
+@keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
diff --git a/assets/components/atoms/progress/progress.twig b/assets/components/atoms/progress/progress.twig
new file mode 100644
index 000000000..036900951
--- /dev/null
+++ b/assets/components/atoms/progress/progress.twig
@@ -0,0 +1,15 @@
+<div class="py-1">
+  <progress class="progress" value="0"></progress>
+</div>
+<div class="py-1">
+  <progress class="progress" value="0.25"></progress>
+</div>
+<div class="py-1">
+  <progress class="progress" value="1" max="2"></progress>
+</div>
+<div class="py-1">
+  <progress class="progress" value="75" max="100"></progress>
+</div>
+<div class="py-1">
+  <progress class="progress" value="100" max="100"></progress>
+</div>
diff --git a/assets/components/atoms/progress/progress.yml b/assets/components/atoms/progress/progress.yml
new file mode 100644
index 000000000..466e315c5
--- /dev/null
+++ b/assets/components/atoms/progress/progress.yml
@@ -0,0 +1,8 @@
+title: Progress
+name: progress
+variants:
+  - name: height
+    title: Height
+  - name: indeterminate
+    title: Indeterminate
+    notes: Omit the `value` property completely, set it to `undefined` or leave blank
diff --git a/assets/components/entrypoint.scss b/assets/components/entrypoint.scss
index b9822a3a6..adb82a499 100644
--- a/assets/components/entrypoint.scss
+++ b/assets/components/entrypoint.scss
@@ -41,6 +41,7 @@
 @import 'atoms/dropdown/dropdown';
 @import 'atoms/nav-toggle/nav-toggle';
 @import 'atoms/popover/popover';
+@import 'atoms/progress/progress';
 @import 'atoms/trapeze/trapeze';
 @import 'atoms/definition-list/definition-list';
 @import 'atoms/figure/figure';

From 436f4e7ae1d78b6f27c7d11ae6ed33d6602e1b16 Mon Sep 17 00:00:00 2001
From: Thijs van Beek <thijs@midasweb.nl>
Date: Tue, 10 May 2022 16:08:16 +0200
Subject: [PATCH 2/2] remove class .progress

---
 .../components/atoms/progress/progress-height.twig | 14 ++------------
 .../atoms/progress/progress-indeterminate.twig     |  2 +-
 assets/components/atoms/progress/progress.scss     | 10 +++++-----
 assets/components/atoms/progress/progress.twig     | 10 +++++-----
 4 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/assets/components/atoms/progress/progress-height.twig b/assets/components/atoms/progress/progress-height.twig
index 76642dda2..482396dfc 100644
--- a/assets/components/atoms/progress/progress-height.twig
+++ b/assets/components/atoms/progress/progress-height.twig
@@ -1,16 +1,6 @@
 <div class="py-1">
-  <progress
-    class="progress"
-    value="75"
-    max="100"
-    style="height: 1px"
-  ></progress>
+  <progress value="75" max="100" style="height: 1px"></progress>
 </div>
 <div class="py-1">
-  <progress
-    class="progress"
-    value="75"
-    max="100"
-    style="height: 25px"
-  ></progress>
+  <progress value="75" max="100" style="height: 25px"></progress>
 </div>
diff --git a/assets/components/atoms/progress/progress-indeterminate.twig b/assets/components/atoms/progress/progress-indeterminate.twig
index 827e03442..afb52cfc2 100644
--- a/assets/components/atoms/progress/progress-indeterminate.twig
+++ b/assets/components/atoms/progress/progress-indeterminate.twig
@@ -1 +1 @@
-<progress class="progress" max="100" value=""></progress>
+<progress max="100" value=""></progress>
diff --git a/assets/components/atoms/progress/progress.scss b/assets/components/atoms/progress/progress.scss
index a594182e0..13d5e8417 100644
--- a/assets/components/atoms/progress/progress.scss
+++ b/assets/components/atoms/progress/progress.scss
@@ -1,6 +1,6 @@
 @charset 'utf-8';
 
-progress.progress {
+progress {
   display: block;
   width: 100%;
   border: 0;
@@ -9,21 +9,21 @@ progress.progress {
   height: 0.5rem;
 }
 
-progress.progress::-webkit-progress-bar {
+progress::-webkit-progress-bar {
   background-color: transparent;
 }
 
-progress.progress::-webkit-progress-value {
+progress::-webkit-progress-value {
   background-color: $red;
   transition: width 0.6s ease;
 }
 
-progress.progress::-moz-progress-bar {
+progress::-moz-progress-bar {
   background-color: $red;
   transition: width 0.6s ease;
 }
 
-progress.progress:indeterminate {
+progress:indeterminate {
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
   animation-name: moveIndeterminate;
diff --git a/assets/components/atoms/progress/progress.twig b/assets/components/atoms/progress/progress.twig
index 036900951..01893fb2b 100644
--- a/assets/components/atoms/progress/progress.twig
+++ b/assets/components/atoms/progress/progress.twig
@@ -1,15 +1,15 @@
 <div class="py-1">
-  <progress class="progress" value="0"></progress>
+  <progress value="0"></progress>
 </div>
 <div class="py-1">
-  <progress class="progress" value="0.25"></progress>
+  <progress value="0.25"></progress>
 </div>
 <div class="py-1">
-  <progress class="progress" value="1" max="2"></progress>
+  <progress value="1" max="2"></progress>
 </div>
 <div class="py-1">
-  <progress class="progress" value="75" max="100"></progress>
+  <progress value="75" max="100"></progress>
 </div>
 <div class="py-1">
-  <progress class="progress" value="100" max="100"></progress>
+  <progress value="100" max="100"></progress>
 </div>