Skip to content

Commit 6fe0780

Browse files
FrontendlandFrontendland
committed
✨ Add Badge component
1 parent 1098d75 commit 6fe0780

File tree

9 files changed

+282
-5
lines changed

9 files changed

+282
-5
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ import { Accordion } from 'webcoreui/react'
132132
## Components
133133

134134
- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
135+
- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
135136
- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
136137
- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
137138
- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)

‎src/components/Badge/Badge.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
import type { BadgeProps } from './badge'
3+
4+
interface Props extends BadgeProps {
5+
interactive?: boolean
6+
}
7+
8+
const {
9+
theme,
10+
interactive
11+
} = Astro.props
12+
13+
const classes = [
14+
'w-badge',
15+
theme || null,
16+
interactive && 'hover'
17+
]
18+
---
19+
20+
<span class:list={classes}>
21+
<slot />
22+
</span>
23+
24+
25+
<style lang="scss">
26+
@import './badge.scss';
27+
</style>

‎src/components/Badge/Badge.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { BadgeProps } from './badge'
3+
4+
export let theme: BadgeProps['theme'] = null
5+
export let onClick: BadgeProps['onClick'] = () => {}
6+
7+
const classes = [
8+
'w-badge',
9+
theme || null,
10+
onClick && 'hover'
11+
].filter(Boolean).join(' ')
12+
</script>
13+
14+
<span class={classes} on:click={onClick}>
15+
<slot />
16+
</span>
17+
18+
<style lang="scss">
19+
@import './badge.scss';
20+
</style>

‎src/components/Badge/Badge.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import type { BadgeProps } from './badge'
3+
import './badge.scss'
4+
5+
const Badge = ({ theme, onClick, children }: BadgeProps) => {
6+
const classes = [
7+
'w-badge',
8+
theme || null,
9+
onClick && 'hover'
10+
].filter(Boolean).join(' ')
11+
12+
return (
13+
<span className={classes} onClick={onClick}>
14+
{children}
15+
</span>
16+
)
17+
}
18+
19+
export default Badge

‎src/components/Badge/badge.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@import '../../scss/config.scss';
2+
3+
.w-badge {
4+
@include Transition();
5+
padding: 5px 10px;
6+
border-radius: 5px;
7+
display: inline-flex;
8+
align-items: center;
9+
gap: 5px;
10+
font-size: 12px;
11+
background: #FFF;
12+
color: #252525;
13+
14+
&.hover {
15+
cursor: pointer;
16+
17+
&:hover {
18+
background: #BBB;
19+
}
20+
21+
&.secondary:hover {
22+
background: #333;
23+
}
24+
25+
&.outline:hover {
26+
color: #FFF;
27+
background: transparent;
28+
box-shadow: inset 0px 0px 0px 1px #FFF;
29+
}
30+
31+
&.flat:hover {
32+
background: #333;
33+
}
34+
35+
&.info:hover {
36+
background: #48dbfb;
37+
}
38+
39+
&.success:hover {
40+
background: #1dd1a1;
41+
}
42+
43+
&.warning:hover {
44+
background: #f7aa61;
45+
}
46+
47+
&.alert:hover {
48+
background: #ee5253;
49+
}
50+
}
51+
52+
53+
&.secondary {
54+
background: #252525;
55+
color: #FFF;
56+
}
57+
58+
&.outline {
59+
background: #000;
60+
color: #BBB;
61+
box-shadow: inset 0px 0px 0px 1px #BBB;
62+
}
63+
64+
&.flat {
65+
background: #000;
66+
color: #FFF;
67+
}
68+
69+
&.info {
70+
background: #0abde3;
71+
}
72+
73+
&.success {
74+
background: #10ac84;
75+
}
76+
77+
&.warning {
78+
background: #ff9f43;
79+
}
80+
81+
&.alert {
82+
background: #e73f40;
83+
color: #fff;
84+
}
85+
}

‎src/components/Badge/badge.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type BadgeProps = {
2+
theme?: 'secondary'
3+
| 'outline'
4+
| 'flat'
5+
| 'info'
6+
| 'success'
7+
| 'warning'
8+
| 'alert'
9+
| null
10+
onClick?: () => any
11+
[key: string]: any
12+
}

‎src/components/Button/button.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@
3535

3636
&.outline {
3737
background: #000;
38-
color: #FFF;
39-
box-shadow: inset 0px 0px 0px 1px #FFF;
40-
38+
color: #BBB;
39+
box-shadow: inset 0px 0px 0px 1px #BBB;
40+
4141
&:hover {
42-
color: #BBB;
43-
box-shadow: inset 0px 0px 0px 1px #BBB;
42+
color: #FFF;
43+
box-shadow: inset 0px 0px 0px 1px #FFF;
4444
}
4545
}
4646

‎src/pages/badge.astro‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import ComponentWrapper from '@static/ComponentWrapper.astro'
4+
5+
import Icon from '@components/Icon/Icon.astro'
6+
import AstroBadge from '@components/Badge/Badge.astro'
7+
import SvelteBadge from '@components/Badge/Badge.svelte'
8+
import ReactBadge from '@components/Badge/Badge.tsx'
9+
10+
const sections = [
11+
{
12+
title: 'Astro badges',
13+
component: AstroBadge
14+
},
15+
{
16+
title: 'Svelte badges (Interactive)',
17+
component: SvelteBadge,
18+
onClick: () => {}
19+
},
20+
{
21+
title: 'React badges',
22+
component: ReactBadge
23+
}
24+
]
25+
---
26+
27+
<Layout>
28+
<h1>Badge</h1>
29+
<div class="grid md-2 lg-3">
30+
<ComponentWrapper type="Astro">
31+
<AstroBadge>Badge in Astro</AstroBadge>
32+
</ComponentWrapper>
33+
34+
<ComponentWrapper type="Svelte">
35+
<SvelteBadge theme="alert">
36+
Badge in Svelte
37+
</SvelteBadge>
38+
</ComponentWrapper>
39+
40+
<ComponentWrapper type="React">
41+
<ReactBadge theme="info">
42+
Badge in React
43+
</ReactBadge>
44+
</ComponentWrapper>
45+
</div>
46+
47+
{sections.map(section => (
48+
<h1>{section.title}</h1>
49+
<div class="grid md-2 lg-3">
50+
<ComponentWrapper title="Primary">
51+
<section.component onClick={section.onClick}>
52+
Primary
53+
</section.component>
54+
</ComponentWrapper>
55+
56+
<ComponentWrapper title="Secondary">
57+
<section.component theme="secondary" onClick={section.onClick}>
58+
Secondary
59+
</section.component>
60+
</ComponentWrapper>
61+
62+
<ComponentWrapper title="Outline">
63+
<section.component theme="outline" onClick={section.onClick}>
64+
Outline
65+
</section.component>
66+
</ComponentWrapper>
67+
68+
<ComponentWrapper title="Flat">
69+
<section.component theme="flat" onClick={section.onClick}>
70+
Flat
71+
</section.component>
72+
</ComponentWrapper>
73+
74+
<ComponentWrapper title="With Icon">
75+
<section.component theme="secondary" onClick={section.onClick}>
76+
<Icon type="github" size={14} />
77+
With Icon
78+
</section.component>
79+
</ComponentWrapper>
80+
81+
<ComponentWrapper title="Info">
82+
<section.component theme="info" onClick={section.onClick}>
83+
Info
84+
</section.component>
85+
</ComponentWrapper>
86+
87+
<ComponentWrapper title="Success">
88+
<section.component theme="success" onClick={section.onClick}>
89+
Success
90+
</section.component>
91+
</ComponentWrapper>
92+
93+
<ComponentWrapper title="Warning">
94+
<section.component theme="warning" onClick={section.onClick}>
95+
Warning
96+
</section.component>
97+
</ComponentWrapper>
98+
99+
<ComponentWrapper title="Alert">
100+
<section.component theme="alert" onClick={section.onClick}>
101+
Alert
102+
</section.component>
103+
</ComponentWrapper>
104+
</div>
105+
))}
106+
</Layout>

‎src/pages/index.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import CardWrapper from '@static/CardWrapper.astro'
55
import Button from '@components/Button/Button.astro'
66
import Accordion from '@components/Accordion/Accordion.astro'
77
import Icon from '@components/Icon/Icon.astro'
8+
import Badge from '@components/Badge/Badge.astro'
89
---
910

1011
<Layout>
@@ -49,6 +50,12 @@ import Icon from '@components/Icon/Icon.astro'
4950
<CardWrapper title="Card" href="/card">
5051
<p>Paragraph inside a card</p>
5152
</CardWrapper>
53+
<CardWrapper title="Icon" href="/icon">
54+
<Icon type="github" />
55+
</CardWrapper>
56+
<CardWrapper title="Badge" href="/badge">
57+
<Badge theme="outline">Badge</Badge>
58+
</CardWrapper>
5259
</div>
5360
</Layout>
5461

0 commit comments

Comments
 (0)