♻️ Use classNames utility fn for conditional classes

Author: Frontendland

scripts/buildTypes.js

@@ -22,7 +22,8 @@ const buildTypes = type => {
     if (type === 'svelte') {
         const getTypeName = component => {
             const componentsWithSvelteSpecificTypes = [
-                'Badge'
+                'Badge',
+                'Button'
             ]
 
             return componentsWithSvelteSpecificTypes.includes(component)

src/components/Avatar/Avatar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { AvatarProps } from './avatar'
+
     import styles from './avatar.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let img: AvatarProps['img'] = ''
     export let alt: AvatarProps['alt'] = 'Avatar'
@@ -11,16 +13,16 @@
     export let reverse: AvatarProps['reverse'] = false
     export let className: AvatarProps['className'] = ''
 
-    const classes = [
+    const classes = classNames([
         styles.avatar,
         borderless && styles.borderless,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
-    const groupStyles = [
+    const groupStyles = classNames([
         styles.group,
         reverse && styles.reverse
-    ].filter(Boolean).join(' ')
+    ])
 </script>
 
 {#if Array.isArray(img)}

src/components/Avatar/Avatar.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { AvatarProps } from './avatar'
+
 import styles from './avatar.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Avatar = ({
     img,
@@ -12,16 +14,16 @@ const Avatar = ({
     reverse,
     className,
 }: AvatarProps) => {
-    const classes = [
+    const classes = classNames([
         styles.avatar,
         borderless && styles.borderless,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
-    const groupStyles = [
+    const groupStyles = classNames([
         styles.group,
         reverse && styles.reverse
-    ].filter(Boolean).join(' ')
+    ])
 
     const borderColorStyle = borderColor
         ? { '--w-avatar-border': borderColor } as React.CSSProperties

src/components/Button/Button.astro

@@ -1,6 +1,8 @@
 ---
 import type { ButtonProps } from './button'
+
 import styles from './button.module.scss'
+import { classNames } from '../../utils/classNames'
 
 interface Props extends ButtonProps {}
 
@@ -11,11 +13,11 @@ const {
     ...rest
 } = Astro.props
 
-const classes = [
+const classes = classNames([
     styles.button,
     bold && styles.bold,
     theme && styles[theme]
-].filter(Boolean).join(' ')
+])
 ---
 
 {href ? (

src/components/Button/Button.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-    import type { ButtonProps } from './button'
+    import type { SvelteButtonProps } from './button'
+
     import styles from './button.module.scss'
+    import { classNames } from '../../utils/classNames'
 
-    export let theme: ButtonProps['theme'] = null
-    export let bold: ButtonProps['bold'] = false
-    export let href: ButtonProps['href'] = ''
-    export let onClick: ButtonProps['onClick'] = () => {}
+    export let theme: SvelteButtonProps['theme'] = null
+    export let bold: SvelteButtonProps['bold'] = false
+    export let href: SvelteButtonProps['href'] = ''
+    export let onClick: SvelteButtonProps['onClick'] = () => {}
 
-    const classes = [
+    const classes = classNames([
         styles.button,
         bold && styles.bold,
         theme && styles[theme]
-    ].filter(Boolean).join(' ')
+    ])
 </script>
 
 

src/components/Button/Button.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { ReactButtonProps } from './button'
+
 import styles from './button.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Button = ({
     theme,
@@ -10,11 +12,11 @@ const Button = ({
     onClick,
     ...rest
 }: ReactButtonProps) => {
-    const classes = [
+    const classes = classNames([
         styles.button,
         bold && styles.bold,
         theme && styles[theme]
-    ].filter(Boolean).join(' ')
+    ])
 
     if (href) {
         return (

src/components/Button/button.ts

@@ -9,10 +9,14 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
-    onClick?: () => any
     [key: string]: any
 }
 
+export type SvelteButtonProps = {
+    onClick?: () => any
+} & ButtonProps
+
 export type ReactButtonProps = {
+    onClick?: () => any
     children: React.ReactNode
 } & ButtonProps

src/components/Card/Card.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { CardProps } from './card'
+
     import styles from './card.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let element: CardProps['element'] = 'section'
     export let title: CardProps['title'] = ''
@@ -9,16 +11,16 @@
     export let className: CardProps['className'] = ''
     export let secondary: CardProps['secondary'] = false
 
-    const classes = [
+    const classes = classNames([
         styles.card,
         secondary && styles.secondary,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
-    const bodyClasses = [
+    const bodyClasses = classNames([
         styles.body,
         compact && styles.compact
-    ].filter(Boolean).join(' ')
+    ])
 </script>
 
 <svelte:element this={element} class={classes} {...$$restProps}>

src/components/Card/Card.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { ReactCardProps } from './card'
+
 import styles from './card.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Card = ({
     Element = 'section',
@@ -12,16 +14,16 @@ const Card = ({
     children,
     ...rest
 }: ReactCardProps) => {
-    const classes = [
+    const classes = classNames([
         styles.card,
         className,
         secondary && styles.secondary
-    ].filter(Boolean).join(' ')
+    ])
 
-    const bodyClasses = [
+    const bodyClasses = classNames([
         styles.body,
         compact && styles.compact
-    ].filter(Boolean).join(' ')
+    ])
 
     return (
         <Element className={classes} {...rest}>

src/components/Checkbox/Checkbox.svelte

@@ -5,6 +5,7 @@
     import check from '../../icons/check.svg?raw'
     
     import styles from './checkbox.module.scss'
+    import { classNames } from '../../utils/classNames'
     
     export let checked: CheckboxProps['checked'] = false
     export let label: CheckboxProps['label'] = ''
@@ -14,11 +15,11 @@
     export let color: CheckboxProps['color'] = ''
     export let onClick: () => any = () => {}
 
-    const classes = [
+    const classes = classNames([
         styles.checkbox,
         boxed && styles.boxed,
         label && subText && styles.col
-    ].filter(Boolean).join(' ')
+    ])
     
     const style = color
         ? `--w-checkbox-color: ${color};`

src/components/Checkbox/Checkbox.tsx

@@ -5,6 +5,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import check from '../../icons/check.svg?raw'
 
 import styles from './checkbox.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Checkbox = ({
     checked,
@@ -15,11 +16,11 @@ const Checkbox = ({
     color,
     onClick
 }: ReactCheckboxProps) => {
-    const classes = [
+    const classes = classNames([
         styles.checkbox,
         boxed && styles.boxed,
         label && subText && styles.col
-    ].filter(Boolean).join(' ')
+    ])
 
     const style = color
         ? { '--w-checkbox-color': color } as React.CSSProperties

src/components/Input/Input.svelte

@@ -3,6 +3,7 @@
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
     import styles from './input.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let type: InputProps['type'] = 'text'
     export let theme: InputProps['theme'] = null
@@ -13,12 +14,12 @@
     export let onChange: (e: any) => any = () => {}
     export let onKeyUp: (e: any) => any = () => {}
 
-    const classes = [
+    const classes = classNames([
         styles.input,
         theme && styles[theme],
         fill && styles.fill,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
     const useLabel = !!(label || subText || $$slots.icon)
 </script>

src/components/Input/Input.tsx

@@ -3,6 +3,7 @@ import type { ReactInputProps } from './input'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import styles from './input.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Input = ({
     type = 'text',
@@ -15,12 +16,12 @@ const Input = ({
     className,
     ...rest
 }: ReactInputProps) => {
-    const classes = [
+    const classes = classNames([
         styles.input,
         theme && styles[theme],
         fill && styles.fill,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
     const useLabel = !!(label || subText || icon)
 

src/components/Radio/Radio.svelte

@@ -3,6 +3,7 @@
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
     import styles from './radio.module.scss'
+    import { classNames } from '../../utils/classNames'
 
     export let name: RadioProps['name'] = ''
     export let items: RadioProps['items'] = []
@@ -11,11 +12,11 @@
     export let className: RadioProps['className'] = ''
     export let onChange: () => any = () => {}
 
-    const classes = [
+    const classes = classNames([
         styles.radio,
         inline && styles.inline,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
     const style = color
         ? `--w-radio-color: ${color};`

src/components/Radio/Radio.tsx

@@ -4,6 +4,7 @@ import type { ReactRadioProps } from './radio'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import styles from './radio.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Radio = ({
     name,
@@ -13,11 +14,11 @@ const Radio = ({
     className,
     onChange
 }: ReactRadioProps) => {
-    const classes = [
+    const classes = classNames([
         styles.radio,
         inline && styles.inline,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
     const style = color
         ? { '--w-radio-color': color } as React.CSSProperties

src/components/Timeline/timeline.module.scss

@@ -17,7 +17,7 @@ $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
     &::before {
         position: absolute;
         content: '';
-        width: 1px;
+        width: 2px;
         background: var(--w-timeline-color);
         height: 100%;
         left: $leftOffset