Skip to content

Commit 1fdef66

Browse files
FrontendlandFrontendland
committed
✨ Add rounded badges
1 parent 2cee766 commit 1fdef66

13 files changed

+66
-18
lines changed

‎src/components/Badge/Badge.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const {
99
theme,
1010
hover,
1111
small,
12+
rounded,
1213
className,
1314
...rest
1415
} = Astro.props
@@ -18,6 +19,7 @@ const classes = [
1819
theme && styles[theme],
1920
hover && styles.hover,
2021
small && styles.small,
22+
rounded && styles.round,
2123
className
2224
]
2325
---

‎src/components/Badge/Badge.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
export let theme: SvelteBadgeProps['theme'] = null
99
export let hover: SvelteBadgeProps['hover'] = false
1010
export let small: SvelteBadgeProps['small'] = false
11+
export let rounded: SvelteBadgeProps['rounded'] = false
1112
export let className: SvelteBadgeProps['className'] = ''
1213
export let onClick: SvelteBadgeProps['onClick'] = () => {}
1314
@@ -16,6 +17,7 @@
1617
theme && styles[theme],
1718
(onClick || hover) && styles.hover,
1819
small && styles.small,
20+
rounded && styles.round,
1921
className
2022
])
2123
</script>

‎src/components/Badge/Badge.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const Badge = ({
1010
onClick,
1111
hover,
1212
small,
13+
rounded,
1314
className,
1415
children,
1516
...rest
@@ -19,6 +20,7 @@ const Badge = ({
1920
theme && styles[theme],
2021
(onClick || hover) && styles.hover,
2122
small && styles.small,
23+
rounded && styles.round,
2224
className
2325
])
2426

‎src/components/Badge/badge.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,8 @@
8787
&.small {
8888
@include spacing(py-xxs, px-xs);
8989
}
90+
91+
&.round {
92+
@include border-radius(lg);
93+
}
9094
}

‎src/components/Badge/badge.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export type BadgeProps = {
1111
| null
1212
hover?: boolean
1313
small?: boolean
14+
rounded?: boolean
1415
className?: string
1516
[key: string]: any
1617
}

‎src/components/Icon/icon.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export type IconProps = {
55
| 'arrow-right'
66
| 'check'
77
| 'circle-check'
8+
| 'circle-close'
89
| 'close'
910
| 'components'
1011
| 'file'

‎src/components/Icon/map.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ArrowLeft from '../../icons/arrow-left.svg?raw'
44
import ArrowRight from '../../icons/arrow-right.svg?raw'
55
import Check from '../../icons/check.svg?raw'
66
import CircleCheck from '../../icons/circle-check.svg?raw'
7+
import CircleClose from '../../icons/circle-close.svg?raw'
78
import Close from '../../icons/close.svg?raw'
89
import Components from '../../icons/components.svg?raw'
910
import File from '../../icons/file.svg?raw'
@@ -23,6 +24,7 @@ const iconMap = {
2324
'arrow-right': ArrowRight,
2425
'check': Check,
2526
'circle-check': CircleCheck,
27+
'circle-close': CircleClose,
2628
'close': Close,
2729
'components': Components,
2830
'file': File,

‎src/helpers.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,10 @@ export const getSections = ({
3131
}] : [])
3232
]
3333
}
34+
35+
export const on = (element, callback) => {
36+
// eslint-disable-next-line no-undef
37+
document
38+
.querySelector(element)
39+
?.addEventListener('click', callback)
40+
}

‎src/icons/circle-close.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/pages/badge.astro

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,42 @@ const sections = getSections({
114114
Alert
115115
</section.component>
116116
</ComponentWrapper>
117+
118+
<ComponentWrapper title="Rounded success">
119+
<section.component theme="success" rounded={true}>
120+
Success
121+
</section.component>
122+
</ComponentWrapper>
123+
124+
<ComponentWrapper title="Rounded warning">
125+
<section.component theme="warning" rounded={true}>
126+
Warning
127+
</section.component>
128+
</ComponentWrapper>
129+
130+
<ComponentWrapper title="Rounded alert">
131+
<section.component theme="alert" rounded={true}>
132+
Alert
133+
</section.component>
134+
</ComponentWrapper>
135+
136+
<ComponentWrapper title="Chips (removable badge)">
137+
<section.component
138+
theme="outline"
139+
hover={true}
140+
rounded={true}
141+
className="remove"
142+
>
143+
<Icon type="circle-close" size={14} />
144+
Click to remove
145+
</section.component>
146+
</ComponentWrapper>
117147
</div>
118148
))}
119149
</Layout>
150+
151+
<script>
152+
import { on } from '@helpers'
153+
154+
on('.remove', (event: any) => event.currentTarget.remove())
155+
</script>

‎src/pages/modal.astro

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const sections = getSections({
188188
</section.component>
189189
</ComponentWrapper>
190190

191-
<ComponentWrapper title="Info modal">
191+
<ComponentWrapper title="Warning modal">
192192
<Button theme="warning" id={`modal-btn-8${index}`}>
193193
Trigger
194194
</Button>
@@ -202,7 +202,7 @@ const sections = getSections({
202202
</section.component>
203203
</ComponentWrapper>
204204

205-
<ComponentWrapper title="Info modal">
205+
<ComponentWrapper title="Alert modal">
206206
<Button theme="alert" id={`modal-btn-9${index}`}>
207207
Trigger
208208
</Button>
@@ -222,11 +222,7 @@ const sections = getSections({
222222
<script>
223223
import { closeModal, modal } from '@utils/modal'
224224

225-
const on = (element: string, callback: () => any) => {
226-
document
227-
.querySelector(element)
228-
?.addEventListener('click', callback)
229-
}
225+
import { on } from '@helpers'
230226

231227
const selectors = [
232228
'astro',

‎src/pages/sheet.astro

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -206,11 +206,7 @@ const sections = getSections({
206206
<script>
207207
import { closeModal, modal } from '@utils/modal'
208208

209-
const on = (element: string, callback: () => any) => {
210-
document
211-
.querySelector(element)
212-
?.addEventListener('click', callback)
213-
}
209+
import { on } from '@helpers'
214210

215211
const selectors = [
216212
'astro',

‎src/pages/toast.astro

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,9 @@ const sections = getSections({
157157
toast
158158
} from '@utils/toast'
159159

160-
setDefaultTimeout(3000)
160+
import { on } from '@helpers'
161161

162-
const on = (element: string, callback: () => any) => {
163-
document
164-
.querySelector(element)
165-
?.addEventListener('click', callback)
166-
}
162+
setDefaultTimeout(3000)
167163

168164
const ids = Array(13).fill(10).map((x, index) => x * (index + 1))
169165
const buttons = [

0 commit comments

Comments
 (0)