Skip to content

Commit 1ff8653

Browse files
FrontendlandFrontendland
committed
✨ Add Progress bar component
1 parent e5aff09 commit 1ff8653

File tree

15 files changed

+519
-13
lines changed

15 files changed

+519
-13
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ import { Accordion } from 'webcoreui/react'
144144
- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
145145
- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
146146
- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
147+
- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
147148
- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
148149
- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
149150
- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)

‎scripts/buildTypes.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ const buildTypes = type => {
4141
'Icon',
4242
'Rating',
4343
'Spinner',
44-
'TimelineItem'
44+
'TimelineItem',
45+
'Progress'
4546
]
4647

4748
return componentsWithoutReactSpecificTypes.includes(component)

‎src/components/Card/card.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
.card-body {
2323
padding: 20px;
2424
height: 100%;
25+
position: relative;
2526

2627
&.compact {
2728
background: #111;

‎src/components/Progress/Progress.astro

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
import type { ProgressProps } from './progress'
3+
import './progress.scss'
4+
5+
interface Props extends ProgressProps {}
6+
7+
const {
8+
value,
9+
size,
10+
label,
11+
color,
12+
background,
13+
square,
14+
striped,
15+
stripeLight,
16+
stripeDark,
17+
className
18+
} = Astro.props
19+
20+
const classes = [
21+
'w-progress',
22+
size,
23+
striped && 'striped',
24+
square && 'square',
25+
className
26+
]
27+
28+
const styles = [
29+
color && `--w-progress-color: ${color};`,
30+
background && `--w-progress-background: ${background};`,
31+
stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
32+
stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
33+
].filter(Boolean).join('')
34+
---
35+
36+
<div class:list={classes} style={styles}>
37+
<div class="progress" style={`--w-progress-width: ${value}%;`}>
38+
{label && `${value}%`}
39+
</div>
40+
</div>

‎src/components/Progress/Progress.svelte

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts">
2+
import type { ProgressProps } from './progress'
3+
import './progress.scss'
4+
5+
export let value: ProgressProps['value'] = 0
6+
export let size: ProgressProps['size'] = null
7+
export let label: ProgressProps['label'] = false
8+
export let color: ProgressProps['color'] = ''
9+
export let background: ProgressProps['background'] = ''
10+
export let square: ProgressProps['square'] = false
11+
export let striped: ProgressProps['striped'] = false
12+
export let stripeLight: ProgressProps['stripeLight'] = ''
13+
export let stripeDark: ProgressProps['stripeDark'] = ''
14+
export let className: ProgressProps['className'] = ''
15+
16+
const classes = [
17+
'w-progress',
18+
size,
19+
striped && 'striped',
20+
square && 'square',
21+
className
22+
].filter(Boolean).join(' ')
23+
24+
const styles = [
25+
color && `--w-progress-color: ${color};`,
26+
background && `--w-progress-background: ${background};`,
27+
stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
28+
stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
29+
].filter(Boolean).join('')
30+
</script>
31+
32+
<div class={classes} style={styles}>
33+
<div class="progress" style={`--w-progress-width: ${value}%;`}>
34+
{#if label}
35+
{`${value}%`}
36+
{/if}
37+
</div>
38+
</div>

‎src/components/Progress/Progress.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
import type { ProgressProps } from './progress'
3+
4+
import './progress.scss'
5+
6+
const Progress = ({
7+
value,
8+
size,
9+
label,
10+
color,
11+
background,
12+
square,
13+
striped,
14+
stripeLight,
15+
stripeDark,
16+
className
17+
}: ProgressProps) => {
18+
const classes = [
19+
'w-progress',
20+
size,
21+
striped && 'striped',
22+
square && 'square',
23+
className
24+
].filter(Boolean).join(' ')
25+
26+
const styles = {
27+
...(color && { '--w-progress-color': color }),
28+
...(background && { '--w-progress-background': background }),
29+
...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
30+
...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
31+
} as React.CSSProperties
32+
33+
const percent = {
34+
'--w-progress-width': `${value}%`
35+
} as React.CSSProperties
36+
37+
return (
38+
<div className={classes} style={styles}>
39+
<div className="progress" style={percent}>
40+
{label && `${value}%`}
41+
</div>
42+
</div>
43+
)
44+
}
45+
46+
export default Progress
47+

‎src/components/Progress/progress.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import '../../scss/config.scss';
2+
3+
.w-progress {
4+
width: 100%;
5+
height: 10px;
6+
background: var(--w-progress-background);
7+
border-radius: 20px;
8+
overflow: hidden;
9+
color: var(--w-progress-background);
10+
font-family: Bold;
11+
font-size: 10px;
12+
13+
&.medium {
14+
height: 15px;
15+
font-size: 12px;
16+
}
17+
18+
&.large {
19+
height: 20px;
20+
font-size: 14px;
21+
}
22+
23+
&.square {
24+
border-radius: 2px;
25+
26+
.progress {
27+
border-radius: 2px;
28+
}
29+
}
30+
31+
&.striped {
32+
33+
.progress {
34+
background-size: 10px 10px;
35+
background-image: linear-gradient(
36+
-45deg,
37+
var(--w-progress-stripe-light) 25%,
38+
var(--w-progress-stripe-dark) 25%,
39+
var(--w-progress-stripe-dark) 50%,
40+
var(--w-progress-stripe-light) 50%,
41+
var(--w-progress-stripe-light) 75%,
42+
var(--w-progress-stripe-dark) 75%,
43+
var(--w-progress-stripe-dark)
44+
);
45+
}
46+
47+
&.medium .progress {
48+
background-size: 15px 15px;
49+
}
50+
51+
&.large .progress {
52+
background-size: 20px 20px;
53+
}
54+
}
55+
56+
.progress {
57+
@include Transition(width);
58+
width: var(--w-progress-width);
59+
height: 100%;
60+
background: var(--w-progress-color);
61+
border-radius: 20px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
}
66+
}

‎src/components/Progress/progress.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type ProgressProps = {
2+
value: number
3+
size?: 'medium' | 'large' | null
4+
label?: boolean
5+
color?: string
6+
background?: string
7+
square?: boolean
8+
striped?: boolean
9+
stripeLight?: string
10+
stripeDark?: string
11+
className?: string
12+
}

‎src/pages/index.astro

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Badge from '@components/Badge/Badge.astro'
99
import Button from '@components/Button/Button.astro'
1010
import Checkbox from '@components/Checkbox/Checkbox.astro'
1111
import Icon from '@components/Icon/Icon.astro'
12+
import Progress from '@components/Progress/Progress.astro'
1213
import Radio from '@components/Radio/Radio.astro'
1314
import Rating from '@components/Rating/Rating.astro'
1415
import Spinner from '@components/Spinner/Spinner.astro'
@@ -110,6 +111,9 @@ const tabItems = [{
110111
color="#f2c262"
111112
/>
112113
</CardWrapper>
114+
<CardWrapper title="Progress" href="/progress">
115+
<Progress value={33} />
116+
</CardWrapper>
113117
<CardWrapper title="Radio" href="/radio">
114118
<Radio
115119
items={[{ label: 'Radio', selected: true, value: '1' }]}

0 commit comments

Comments
 (0)