feat: add progress bar shortcode (#594)

This commit is contained in:
Robert Kaussow 2023-03-04 15:45:26 +01:00 committed by GitHub
parent 07bfc6cab9
commit 64f3d0ea7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 0 deletions

View file

@ -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 -->

View file

@ -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>

View file

@ -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;
}
}