✨ Add rounded badges

Author: Frontendland

src/components/Badge/Badge.astro

@@ -9,6 +9,7 @@ const {
     theme,
     hover,
     small,
+    rounded,
     className,
     ...rest
 } = Astro.props
@@ -18,6 +19,7 @@ const classes = [
     theme && styles[theme],
     hover && styles.hover,
     small && styles.small,
+    rounded && styles.round,
     className
 ]
 ---

src/components/Badge/Badge.svelte

@@ -8,6 +8,7 @@
     export let theme: SvelteBadgeProps['theme'] = null
     export let hover: SvelteBadgeProps['hover'] = false
     export let small: SvelteBadgeProps['small'] = false
+    export let rounded: SvelteBadgeProps['rounded'] = false
     export let className: SvelteBadgeProps['className'] = ''
     export let onClick: SvelteBadgeProps['onClick'] = () => {}
 
@@ -16,6 +17,7 @@
         theme && styles[theme],
         (onClick || hover) && styles.hover,
         small && styles.small,
+        rounded && styles.round,
         className
     ])
 </script>

src/components/Badge/Badge.tsx

@@ -10,6 +10,7 @@ const Badge = ({
     onClick,
     hover,
     small,
+    rounded,
     className,
     children,
     ...rest
@@ -19,6 +20,7 @@ const Badge = ({
         theme && styles[theme],
         (onClick || hover) && styles.hover,
         small && styles.small,
+        rounded && styles.round,
         className
     ])
 

src/components/Badge/badge.module.scss

@@ -87,4 +87,8 @@
     &.small {
         @include spacing(py-xxs, px-xs);
     }
+
+    &.round {
+        @include border-radius(lg);
+    }
 }

src/components/Badge/badge.ts

@@ -11,6 +11,7 @@ export type BadgeProps = {
         | null
     hover?: boolean
     small?: boolean
+    rounded?: boolean
     className?: string
     [key: string]: any
 }

src/components/Icon/icon.ts

@@ -5,6 +5,7 @@ export type IconProps = {
         | 'arrow-right'
         | 'check'
         | 'circle-check'
+        | 'circle-close'
         | 'close'
         | 'components'
         | 'file'

src/components/Icon/map.ts

@@ -4,6 +4,7 @@ import ArrowLeft from '../../icons/arrow-left.svg?raw'
 import ArrowRight from '../../icons/arrow-right.svg?raw'
 import Check from '../../icons/check.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
+import CircleClose from '../../icons/circle-close.svg?raw'
 import Close from '../../icons/close.svg?raw'
 import Components from '../../icons/components.svg?raw'
 import File from '../../icons/file.svg?raw'
@@ -23,6 +24,7 @@ const iconMap = {
     'arrow-right': ArrowRight,
     'check': Check,
     'circle-check': CircleCheck,
+    'circle-close': CircleClose,
     'close': Close,
     'components': Components,
     'file': File,

src/helpers.js

@@ -31,3 +31,10 @@ export const getSections = ({
         }] : [])
     ]
 }
+
+export const on = (element, callback) => {
+    // eslint-disable-next-line no-undef
+    document
+        .querySelector(element)
+        ?.addEventListener('click', callback)
+}

src/icons/circle-close.svg

@@ -114,6 +114,42 @@ const sections = getSections({
                     Alert
                 </section.component>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Rounded success">
+                <section.component theme="success" rounded={true}>
+                    Success
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Rounded warning">
+                <section.component theme="warning" rounded={true}>
+                    Warning
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Rounded alert">
+                <section.component theme="alert" rounded={true}>
+                    Alert
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Chips (removable badge)">
+                <section.component
+                    theme="outline"
+                    hover={true}
+                    rounded={true}
+                    className="remove"
+                >
+                    <Icon type="circle-close" size={14} />
+                    Click to remove
+                </section.component>
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
+
+<script>
+    import { on } from '@helpers'
+
+    on('.remove', (event: any) => event.currentTarget.remove())
+</script>