✨ 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>
 

src/components/Button/Button.svelte

@@ -8,14 +8,16 @@ const Button = ({
     theme,
     bold,
     href,
-    children,
+    className,
     onClick,
+    children,
     ...rest
 }: ReactButtonProps) => {
     const classes = classNames([
         styles.button,
         bold && styles.bold,
-        theme && styles[theme]
+        theme && styles[theme],
+        className
     ])
 
     if (href) {

src/components/Button/Button.tsx

@@ -9,6 +9,7 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
+    className?: string
     [key: string]: any
 }
 

src/components/Button/button.ts

@@ -29,10 +29,6 @@ const Title = titleTag
         <Title class:list={styles.title}>{title}</Title>
     )}
     <div class:list={[styles.body, compact && styles.compact]}>
-        {compact && !secondary ? (
-            <div class={styles.wrapper}><slot /></div>
-        ) : (
-            <slot />
-        )}
+        <slot />
     </div>
 </Component>

src/components/Card/Card.astro

@@ -30,10 +30,6 @@
         </svelte:element>
     {/if}
     <div class={bodyClasses}>
-        {#if compact && !secondary}
-            <div class={styles.wrapper}><slot /></div>
-        {:else}
-            <slot />
-        {/if}
+        <slot />
     </div>
 </svelte:element>

src/components/Card/Card.svelte

@@ -31,10 +31,7 @@ const Card = ({
                 <TitleTag className={styles.title}>{title}</TitleTag>
             )}
             <div className={bodyClasses}>
-                {compact && !secondary
-                    ? <div className={styles.wrapper}>{children}</div>
-                    : children
-                }
+                {children}
             </div>
         </Element>
     )

src/components/Card/Card.tsx

@@ -25,13 +25,9 @@
         position: relative;
 
         &.compact {
-            background: #111;
+            border: 20px solid #111;
+            background: #000;
+            padding: 40px;
         }
     }
-
-    .wrapper {
-        background: #000;
-        padding: 40px;
-        height: 100%;
-    }
 }

src/components/Card/card.module.scss

@@ -13,14 +13,14 @@ const {
     label,
     subText,
     disabled,
-    boxed,
-    color
+    color,
+    className
 } = Astro.props
 
 const classes = [
     styles.checkbox,
-    boxed && styles.boxed,
-    label && subText && styles.col
+    label && subText && styles.col,
+    className
 ]
 
 const style = color

src/components/Checkbox/Checkbox.astro

@@ -11,14 +11,14 @@
     export let label: SvelteCheckboxProps['label'] = ''
     export let subText: SvelteCheckboxProps['subText'] = ''
     export let disabled: SvelteCheckboxProps['disabled'] = false
-    export let boxed: SvelteCheckboxProps['boxed'] = false
     export let color: SvelteCheckboxProps['color'] = ''
+    export let className: SvelteCheckboxProps['className'] = ''
     export let onClick: SvelteCheckboxProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.checkbox,
-        boxed && styles.boxed,
-        label && subText && styles.col
+        label && subText && styles.col,
+        className
     ])
     
     const style = color

src/components/Checkbox/Checkbox.svelte

@@ -12,14 +12,14 @@ const Checkbox = ({
     label,
     subText,
     disabled,
-    boxed,
     color,
+    className,
     onClick
 }: ReactCheckboxProps) => {
     const classes = classNames([
         styles.checkbox,
-        boxed && styles.boxed,
-        label && subText && styles.col
+        label && subText && styles.col,
+        className
     ])
 
     const style = color

src/components/Checkbox/Checkbox.tsx

@@ -6,24 +6,22 @@
     align-items: center;
     gap: 10px;
     font-size: 16px;
+    line-height: 1.5;
 
     &.col {
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
-        gap: 5px;
+        gap: 0;
 
         .wrapper {
             display: flex;
-            align-items: center;
             gap: 10px;
-        }
-    }
 
-    &.boxed {
-        border: 1px solid #252525;
-        border-radius: 5px;
-        padding: 20px;
+            .check {
+                margin-top: 5px;
+            }
+        }
     }
 
     input {
@@ -59,6 +57,7 @@
         display: inline-block;
         width: 15px;
         height: 15px;
+        min-width: 15px;
         border: 1px solid var(--w-checkbox-color);
         border-radius: 2px;
         position: relative;

src/components/Checkbox/checkbox.module.scss

@@ -3,8 +3,8 @@ export type CheckboxProps = {
     label?: string
     subText?: string
     disabled?: boolean
-    boxed?: boolean
     color?: string
+    className?: string
 }
 
 export type SvelteCheckboxProps = {

src/components/Checkbox/checkbox.ts

@@ -2,7 +2,7 @@
     import type { ConditionalWrapperProps } from './conditionalwrapper'
 
     export let condition: ConditionalWrapperProps['condition']
-    export let element: string
+    export let element: string = 'div'
 </script>
 
 {#if condition}

src/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -11,31 +11,29 @@ const {
     theme,
     label,
     subText,
-    fill,
     className,
     ...rest
 } = Astro.props
 
 const classes = [
     styles.input,
     theme && styles[theme],
-    fill && styles.fill,
     className
 ]
 
-const useLabel = !!(label || subText || Astro.slots.has('icon'))
+const useLabel = !!(label || subText || Astro.slots.has('default'))
 ---
 
 <ConditionalWrapper condition={useLabel}>
     <label slot="wrapper" class={styles['input-label']}>
         {label && (
             <div class={styles.label}>{label}</div>
         )}
-        <ConditionalWrapper condition={Astro.slots.has('icon')}>
+        <ConditionalWrapper condition={Astro.slots.has('default')}>
             <div class={styles.wrapper} slot="wrapper">
                 children
             </div>
-            <slot name="icon" />
+            <slot />
             children
         </ConditionalWrapper>
         {subText && (

src/components/Input/Input.astro

@@ -9,19 +9,17 @@
     export let theme: SvelteInputProps['theme'] = null
     export let label: SvelteInputProps['label'] = ''
     export let subText: SvelteInputProps['subText'] = ''
-    export let fill: SvelteInputProps['fill'] = false
     export let className: SvelteInputProps['className'] = ''
     export let onChange: SvelteInputProps['onChange'] = () => {}
     export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
 
     const classes = classNames([
         styles.input,
         theme && styles[theme],
-        fill && styles.fill,
         className
     ])
 
-    const useLabel = !!(label || subText || $$slots.icon)
+    const useLabel = !!(label || subText || $$slots.default)
 </script>
 
 <ConditionalWrapper
@@ -33,11 +31,11 @@
         <div class={styles.label}>{label}</div>
     {/if}
     <ConditionalWrapper
-        condition={$$slots.icon}
+        condition={$$slots.default}
         element="div"
         class={styles.wrapper}
     >
-        <slot name="icon" />
+        <slot />
         <input
             type={type}
             class={classes}