feat: add progress bar shortcode (#594)

Author: xoxys

exampleSite/content/en/shortcodes/progress.md

@@ -0,0 +1,29 @@
+---
+title: Progress
+---
+
+A progress bar shows how far a process has progressed.
+
+## Attributes
+
+| Name             | Description                                                                | default   |
+| ---------------- | -------------------------------------------------------------------------- | --------- |
+| value            | progress value                                                             | 0         |
+| icon (optional)  | icon to use, need to be an icon from an [SVG sprite](/features/icon-sets/) | undefined |
+| title (optional) | progress title                                                             | undefined |
+
+## Usage
+
+<!-- prettier-ignore-start -->
+```tpl
+{{</* progress title=Eating value=65 icon=gdoc_heart */>}}
+```
+<!-- prettier-ignore-end -->
+
+## Example
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< progress title=Eating value=65 icon=gdoc_heart >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->

layouts/shortcodes/progress.html

@@ -0,0 +1,23 @@
+{{- $value := default 0 (.Get "value") -}}
+{{- $title := .Get "title" -}}
+{{- $icon := .Get "icon" -}}
+
+
+<div class="gdoc-progress">
+  <div class="gdoc-progress__label flex justify-between">
+    <div class="gdoc-progress__label--name flex align-center">
+      {{ with $icon -}}
+        <svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
+      {{- end }}
+      {{ with $title }}<span>{{ . }}</span>{{ end }}
+    </div>
+    <div>{{ $value }}%</div>
+  </div>
+  <div class="gdoc-progress__wrap">
+    <div
+      class="gdoc-progress__bar"
+      data-percent="{{ $value }}"
+      style="width: {{ $value }}%;"
+    ></div>
+  </div>
+</div>

src/sass/_shortcodes.scss

@@ -238,3 +238,39 @@
     font-size: $font-size-14;
   }
 }
+
+// {{% progress %}}
+.gdoc-progress {
+  margin-bottom: $padding-16;
+
+  &__label {
+    padding: $padding-4 0;
+
+    &--name {
+      font-weight: bold;
+    }
+  }
+
+  &__wrap {
+    background-color: var(--accent-color-lite);
+    border-radius: 1em;
+    box-shadow: inset 0 0 0 $border-1 var(--accent-color);
+  }
+
+  &__bar {
+    height: 1em;
+    border-radius: 1em;
+    background-image: linear-gradient(
+      -45deg,
+      rgba(255, 255, 255, 0.125) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.125) 50%,
+      rgba(255, 255, 255, 0.125) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 2.5em 2.5em;
+    background-color: $main-color !important;
+  }
+}