✨ Add small badge type

Author: Frontendland

src/components/Badge/Badge.astro

@@ -8,6 +8,7 @@ interface Props extends BadgeProps {}
 const {
     theme,
     hover,
+    small,
     className,
     ...rest
 } = Astro.props
@@ -16,6 +17,7 @@ const classes = [
     styles.badge,
     theme && styles[theme],
     hover && styles.hover,
+    small && styles.small,
     className
 ]
 ---

src/components/Badge/Badge.svelte

@@ -8,12 +8,14 @@
     export let theme: SvelteBadgeProps['theme'] = null
     export let onClick: SvelteBadgeProps['onClick'] = null
     export let hover: SvelteBadgeProps['hover'] = false
+    export let small: SvelteBadgeProps['small'] = false
     export let className: SvelteBadgeProps['className'] = ''
 
     const classes = classNames([
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
+        small && styles.small,
         className
     ])
 </script>

src/components/Badge/Badge.tsx

@@ -9,6 +9,7 @@ const Badge = ({
     theme,
     onClick,
     hover,
+    small,
     className,
     children,
     ...rest
@@ -17,6 +18,7 @@ const Badge = ({
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
+        small && styles.small,
         className
     ])
 

src/components/Badge/badge.module.scss

@@ -83,4 +83,8 @@
         @include typography(alert-fg);
         @include background(alert);
     }
+
+    &.small {
+        @include spacing(py-xxs, px-xs);
+    }
 }

src/components/Badge/badge.ts

@@ -8,15 +8,16 @@ export type BadgeProps = {
         | 'alert'
         | null
     hover?: boolean
+    small?: boolean
     className?: string
     [key: string]: any
 }
 
 export type SvelteBadgeProps = {
-    onClick?: (() => any) | null
+    onClick?: ((event: MouseEvent) => void) | null
 } & BadgeProps
 
 export type ReactBadgeProps = {
-    onClick?: (() => any) | null
+    onClick?: (event: React.MouseEvent) => void
     children: React.ReactNode
 } & BadgeProps

src/pages/badge.astro

@@ -12,9 +12,7 @@ import { getSections } from '@helpers'
 const sections = getSections({
     title: 'badges',
     components: [AstroBadge, SvelteBadge, ReactBadge],
-    props: {
-        onClick: () => {}
-    }
+    showSubTitle: true
 })
 ---
 
@@ -40,58 +38,79 @@ const sections = getSections({
 
     {sections.map((section: any) => (
         <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
         <div class="grid md-2 lg-3">
             <ComponentWrapper title="Primary">
-                <section.component onClick={section.onClick}>
+                <section.component hover={true}>
                     Primary
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Secondary">
-                <section.component theme="secondary" onClick={section.onClick}>
+                <section.component theme="secondary" hover={true}>
                     Secondary
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Outline">
-                <section.component theme="outline" onClick={section.onClick}>
+                <section.component theme="outline" hover={true}>
                     Outline
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Flat">
-                <section.component theme="flat" onClick={section.onClick}>
+                <section.component theme="flat" hover={true}>
                     Flat
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="With Icon">
-                <section.component theme="secondary" onClick={section.onClick}>
+                <section.component theme="secondary" hover={true}>
                     <Icon type="github" size={14} />
                     With Icon
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Info">
-                <section.component theme="info" onClick={section.onClick}>
+                <section.component theme="info" hover={true}>
                     Info
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Success">
-                <section.component theme="success" onClick={section.onClick}>
+                <section.component theme="success" hover={true}>
                     Success
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Warning">
-                <section.component theme="warning" onClick={section.onClick}>
+                <section.component theme="warning" hover={true}>
                     Warning
                 </section.component>
             </ComponentWrapper>
 
             <ComponentWrapper title="Alert">
-                <section.component theme="alert" onClick={section.onClick}>
+                <section.component theme="alert" hover={true}>
+                    Alert
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Small success">
+                <section.component theme="success" small={true}>
+                    Success
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Small warning">
+                <section.component theme="warning" small={true}>
+                    Warning
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Small alert">
+                <section.component theme="alert" small={true}>
                     Alert
                 </section.component>
             </ComponentWrapper>