✨ Improve components usability, simplify logic, and fix visual bugs

Author: Frontendland

public/img/logo.png

@@ -23,13 +23,15 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            gap: 10px;
             width: 100%;
             background: transparent;
             border: 0;
             color: #FFF;
             font-size: 16px;
             padding: 0;
             cursor: pointer;
+            text-align: left;
 
             svg {
                 @include Transition(transform);

src/components/Accordion/accordion.module.scss

@@ -37,6 +37,7 @@
     svg {
         width: 20px;
         height: 20px;
+        min-width: 20px;
         margin-top: 1px;
     }
 

src/components/Alert/alert.module.scss

@@ -4,7 +4,6 @@ export type AlertProps = {
     titleTag?: string
     titleProps?: any
     bodyProps?: any
-    icon?: string | null
     className?: string | null
     theme?: 'info'
         | 'success'
@@ -16,5 +15,6 @@ export type AlertProps = {
 export type ReactAlertProps = {
     Element?: keyof JSX.IntrinsicElements
     TitleTag?: keyof JSX.IntrinsicElements
+    icon?: React.ReactNode
     children: React.ReactNode
 } & Omit<AlertProps, 'titleTag' | 'element'>

src/components/Alert/alert.ts

@@ -7,13 +7,15 @@ interface Props extends BadgeProps {}
 const {
     theme,
     hover,
+    className,
     ...rest
 } = Astro.props
 
 const classes = [
     styles.badge,
     theme && styles[theme],
-    hover && styles.hover
+    hover && styles.hover,
+    className
 ]
 ---
 

src/components/Badge/Badge.astro

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

src/components/Badge/Badge.svelte

@@ -8,13 +8,15 @@ const Badge = ({
     theme,
     onClick,
     hover,
+    className,
     children,
     ...rest
 }: ReactBadgeProps) => {
     const classes = classNames([
         styles.badge,
         theme && styles[theme],
-        (onClick || hover) && styles.hover
+        (onClick || hover) && styles.hover,
+        className
     ])
 
     if (onClick) {

src/components/Badge/Badge.tsx

@@ -8,6 +8,8 @@ export type BadgeProps = {
         | 'alert'
         | null
     hover?: boolean
+    className?: string
+    [key: string]: any
 }
 
 export type SvelteBadgeProps = {

src/components/Badge/badge.ts

@@ -10,13 +10,15 @@ const {
     theme,
     bold,
     href,
+    className,
     ...rest
 } = Astro.props
 
 const classes = classNames([
     styles.button,
     bold && styles.bold,
-    theme && styles[theme]
+    theme && styles[theme],
+    className
 ])
 ---
 

src/components/Button/Button.astro

@@ -7,12 +7,14 @@
     export let theme: SvelteButtonProps['theme'] = null
     export let bold: SvelteButtonProps['bold'] = false
     export let href: SvelteButtonProps['href'] = ''
+    export let className: SvelteButtonProps['className'] = ''
     export let onClick: SvelteButtonProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.button,
         bold && styles.bold,
-        theme && styles[theme]
+        theme && styles[theme],
+        className
     ])
 </script>