@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/button.tsx

@@ -1,60 +1,32 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteFullColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
-import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export type ButtonProps = PartialElement<HTMLButtonElement> & {
-  variant?: 'contained' | 'outlined'
+  /**
+   * The visual variant of the button.
+   * - 'contained': solid background color
+   * - 'outlined': border with transparent background
+   * - 'text': no background or border (default behavior)
+   */
+  variant?: 'contained' | 'outlined' | 'text'
+  /** The palette color for the button */
   color?: keyof Palette
-}
-
-// Color mappings for each palette color
-const colorMap: Record<
-  keyof Palette,
-  { main: string; mainContrast: string; light: string; dark: string; darkContrast: string }
-> = {
-  primary: {
-    main: cssVariableTheme.palette.primary.main,
-    mainContrast: cssVariableTheme.palette.primary.mainContrast,
-    light: cssVariableTheme.palette.primary.light,
-    dark: cssVariableTheme.palette.primary.dark,
-    darkContrast: cssVariableTheme.palette.primary.darkContrast,
-  },
-  secondary: {
-    main: cssVariableTheme.palette.secondary.main,
-    mainContrast: cssVariableTheme.palette.secondary.mainContrast,
-    light: cssVariableTheme.palette.secondary.light,
-    dark: cssVariableTheme.palette.secondary.dark,
-    darkContrast: cssVariableTheme.palette.secondary.darkContrast,
-  },
-  error: {
-    main: cssVariableTheme.palette.error.main,
-    mainContrast: cssVariableTheme.palette.error.mainContrast,
-    light: cssVariableTheme.palette.error.light,
-    dark: cssVariableTheme.palette.error.dark,
-    darkContrast: cssVariableTheme.palette.error.darkContrast,
-  },
-  warning: {
-    main: cssVariableTheme.palette.warning.main,
-    mainContrast: cssVariableTheme.palette.warning.mainContrast,
-    light: cssVariableTheme.palette.warning.light,
-    dark: cssVariableTheme.palette.warning.dark,
-    darkContrast: cssVariableTheme.palette.warning.darkContrast,
-  },
-  success: {
-    main: cssVariableTheme.palette.success.main,
-    mainContrast: cssVariableTheme.palette.success.mainContrast,
-    light: cssVariableTheme.palette.success.light,
-    dark: cssVariableTheme.palette.success.dark,
-    darkContrast: cssVariableTheme.palette.success.darkContrast,
-  },
-  info: {
-    main: cssVariableTheme.palette.info.main,
-    mainContrast: cssVariableTheme.palette.info.mainContrast,
-    light: cssVariableTheme.palette.info.light,
-    dark: cssVariableTheme.palette.info.dark,
-    darkContrast: cssVariableTheme.palette.info.darkContrast,
-  },
+  /**
+   * The size of the button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large'
+  /** When true, applies the error palette color regardless of the `color` prop */
+  danger?: boolean
+  /** When true, shows a loading spinner and disables the button */
+  loading?: boolean
+  /** An element rendered before the button label */
+  startIcon?: JSX.Element
+  /** An element rendered after the button label */
+  endIcon?: JSX.Element
 }
 
 // Default colors when no color prop is specified
@@ -66,6 +38,32 @@ const defaultColors = {
   darkContrast: cssVariableTheme.text.primary,
 }
 
+const ensureSpinnerKeyframes = () => {
+  if (typeof document === 'undefined') return
+  if (document.querySelector('style[data-shades-button-spinner]')) return
+  const style = document.createElement('style')
+  style.setAttribute('data-shades-button-spinner', '')
+  style.textContent = '@keyframes shade-btn-spin { to { transform: rotate(360deg); } }'
+  document.head.appendChild(style)
+}
+
+const spinnerStyle: Partial<CSSStyleDeclaration> = {
+  display: 'inline-block',
+  width: '1em',
+  height: '1em',
+  border: '2px solid currentColor',
+  borderRightColor: 'transparent',
+  borderRadius: cssVariableTheme.shape.borderRadius.full,
+  animation: 'shade-btn-spin 0.75s linear infinite',
+  flexShrink: '0',
+}
+
+const iconWrapperStyle: Partial<CSSStyleDeclaration> = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: '0',
+}
+
 export const Button = Shade<ButtonProps>({
   shadowDomName: 'shade-button',
   elementBase: HTMLButtonElement,
@@ -75,22 +73,28 @@ export const Button = Shade<ButtonProps>({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    margin: '8px',
-    padding: '8px 20px',
+    gap: cssVariableTheme.spacing.xs,
+    margin: cssVariableTheme.spacing.sm,
+    padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.lg}`,
     border: 'none',
-    borderRadius: '6px',
+    borderRadius: cssVariableTheme.shape.borderRadius.md,
     textTransform: 'uppercase',
-    fontSize: '14px',
-    fontWeight: '500',
-    letterSpacing: '0.5px',
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wider,
     lineHeight: '1.75',
     minWidth: '64px',
     userSelect: 'none',
     cursor: 'pointer',
     boxShadow: 'none',
     background: 'transparent',
-    transition:
-      'background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.230, 1.000, 0.320, 1.000), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+    transition: buildTransition(
+      ['background', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
+      ['box-shadow', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
+      ['color', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
+      ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeOut],
+      ['opacity', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
+    ),
 
     // Common states
     '&:active:not(:disabled)': {
@@ -99,11 +103,11 @@ export const Button = Shade<ButtonProps>({
 
     '&:disabled': {
       cursor: 'not-allowed',
-      opacity: '0.6',
+      opacity: cssVariableTheme.action.disabledOpacity,
     },
 
     // ==========================================
-    // FLAT VARIANT (default - no data-variant)
+    // FLAT / TEXT VARIANT (default - no data-variant)
     // Uses CSS custom properties set in render
     // ==========================================
 
@@ -157,28 +161,74 @@ export const Button = Shade<ButtonProps>({
       color: 'var(--btn-color-dark)',
       boxShadow: '0px 0px 0px 1px var(--btn-color-dark)',
     },
+
+    // ==========================================
+    // SIZE VARIANTS
+    // ==========================================
+
+    '&[data-size="small"]': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      minWidth: '48px',
+    },
+
+    '&[data-size="large"]': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.xl}`,
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+      minWidth: '80px',
+    },
+
+    // ==========================================
+    // LOADING STATE
+    // ==========================================
+
+    '&[data-loading]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+      opacity: '0.7',
+    },
   },
-  render: ({ props, children, element }) => {
-    // Set data attributes for CSS styling
-    if (props.variant) {
-      element.setAttribute('data-variant', props.variant)
-    } else {
-      element.removeAttribute('data-variant')
+  render: ({ props, children, useHostProps }) => {
+    if (props.loading) {
+      ensureSpinnerKeyframes()
     }
 
-    // Set CSS custom properties for the button colors
-    const colors = props.color ? colorMap[props.color] : defaultColors
-    element.style.setProperty('--btn-color-main', colors.main)
-    element.style.setProperty('--btn-color-main-contrast', colors.mainContrast)
-    element.style.setProperty('--btn-color-light', colors.light)
-    element.style.setProperty('--btn-color-dark', colors.dark)
-    element.style.setProperty('--btn-color-dark-contrast', colors.darkContrast)
-
-    // Apply any custom styles from props
-    if (props.style) {
-      Object.assign(element.style, props.style)
-    }
+    // Danger overrides color to error
+    const effectiveColor = props.danger ? 'error' : props.color
 
-    return <>{children}</>
+    // Set CSS custom properties for the button colors
+    const colors = effectiveColor ? paletteFullColors[effectiveColor] : defaultColors
+    useHostProps({
+      'data-variant': props.variant && props.variant !== 'text' ? props.variant : undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
+      'data-loading': props.loading ? '' : undefined,
+      disabled: props.loading ? '' : undefined,
+      style: {
+        '--btn-color-main': colors.main,
+        '--btn-color-main-contrast': colors.mainContrast,
+        '--btn-color-light': colors.light,
+        '--btn-color-dark': colors.dark,
+        '--btn-color-dark-contrast': colors.darkContrast,
+        ...(props.style as Record<string, string>),
+      },
+    })
+
+    return (
+      <>
+        {props.loading ? (
+          <span style={spinnerStyle} className="shade-btn-spinner" />
+        ) : props.startIcon ? (
+          <span style={iconWrapperStyle} className="shade-btn-start-icon">
+            {props.startIcon}
+          </span>
+        ) : null}
+        {children}
+        {!props.loading && props.endIcon ? (
+          <span style={iconWrapperStyle} className="shade-btn-end-icon">
+            {props.endIcon}
+          </span>
+        ) : null}
+      </>
+    )
   },
 })

package/src/components/card.spec.tsx

@@ -0,0 +1,389 @@
+import { createComponent, flushUpdates } from '@furystack/shades'
+import { describe, expect, it } from 'vitest'
+import { Card, CardActions, CardContent, CardHeader, CardMedia } from './card.js'
+
+describe('Card', () => {
+  it('should be defined', () => {
+    expect(Card).toBeDefined()
+    expect(typeof Card).toBe('function')
+  })
+
+  it('should create a card element', () => {
+    const el = (<Card />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-card')
+  })
+
+  it('should render children', async () => {
+    const el = (
+      <div>
+        <Card>
+          <span>Content</span>
+        </Card>
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.querySelector('span')).not.toBeNull()
+  })
+
+  it('should set data-variant to elevation by default', async () => {
+    const el = (
+      <div>
+        <Card />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.getAttribute('data-variant')).toBe('elevation')
+  })
+
+  it('should set data-variant to outlined when specified', async () => {
+    const el = (
+      <div>
+        <Card variant="outlined" />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.getAttribute('data-variant')).toBe('outlined')
+  })
+
+  it('should set data-elevation to 1 by default', async () => {
+    const el = (
+      <div>
+        <Card />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.getAttribute('data-elevation')).toBe('1')
+  })
+
+  it('should set data-elevation to the provided value', async () => {
+    const el = (
+      <div>
+        <Card elevation={3} />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.getAttribute('data-elevation')).toBe('3')
+  })
+
+  it('should set data-clickable when clickable is true', async () => {
+    const el = (
+      <div>
+        <Card clickable />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.hasAttribute('data-clickable')).toBe(true)
+  })
+
+  it('should set data-clickable when onclick handler is provided', async () => {
+    const el = (
+      <div>
+        <Card onclick={() => {}} />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.hasAttribute('data-clickable')).toBe(true)
+  })
+
+  it('should not set data-clickable by default', async () => {
+    const el = (
+      <div>
+        <Card />
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.hasAttribute('data-clickable')).toBe(false)
+  })
+})
+
+describe('CardHeader', () => {
+  it('should be defined', () => {
+    expect(CardHeader).toBeDefined()
+    expect(typeof CardHeader).toBe('function')
+  })
+
+  it('should create a card-header element', () => {
+    const el = (<CardHeader title="Title" />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-card-header')
+  })
+
+  it('should render a title', async () => {
+    const el = (
+      <div>
+        <CardHeader title="My Title" />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    const titleEl = header.querySelector('.card-header-title')
+    expect(titleEl).not.toBeNull()
+    expect(titleEl?.textContent).toBe('My Title')
+  })
+
+  it('should render a subheader when provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" subheader="Subheader text" />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    const subheaderEl = header.querySelector('.card-header-subheader')
+    expect(subheaderEl).not.toBeNull()
+    expect(subheaderEl?.textContent).toBe('Subheader text')
+  })
+
+  it('should not render a subheader when not provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    const subheaderEl = header.querySelector('.card-header-subheader')
+    expect(subheaderEl).toBeNull()
+  })
+
+  it('should render an avatar when provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" avatar={<span className="test-avatar">A</span>} />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    const avatarContainer = header.querySelector('.card-header-avatar')
+    expect(avatarContainer).not.toBeNull()
+    expect(avatarContainer?.querySelector('.test-avatar')).not.toBeNull()
+  })
+
+  it('should not render avatar container when not provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    expect(header.querySelector('.card-header-avatar')).toBeNull()
+  })
+
+  it('should render an action when provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" action={<button className="test-action">X</button>} />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    const actionContainer = header.querySelector('.card-header-action')
+    expect(actionContainer).not.toBeNull()
+    expect(actionContainer?.querySelector('.test-action')).not.toBeNull()
+  })
+
+  it('should not render action container when not provided', async () => {
+    const el = (
+      <div>
+        <CardHeader title="Title" />
+      </div>
+    )
+    const header = el.firstElementChild as JSX.Element
+    header.updateComponent()
+    await flushUpdates()
+    expect(header.querySelector('.card-header-action')).toBeNull()
+  })
+})
+
+describe('CardContent', () => {
+  it('should be defined', () => {
+    expect(CardContent).toBeDefined()
+    expect(typeof CardContent).toBe('function')
+  })
+
+  it('should create a card-content element', () => {
+    const el = (<CardContent />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-card-content')
+  })
+
+  it('should render children', async () => {
+    const el = (
+      <div>
+        <CardContent>
+          <p>Some text content</p>
+        </CardContent>
+      </div>
+    )
+    const content = el.firstElementChild as JSX.Element
+    content.updateComponent()
+    await flushUpdates()
+    expect(content.querySelector('p')).not.toBeNull()
+  })
+})
+
+describe('CardMedia', () => {
+  it('should be defined', () => {
+    expect(CardMedia).toBeDefined()
+    expect(typeof CardMedia).toBe('function')
+  })
+
+  it('should create a card-media element', () => {
+    const el = (<CardMedia image="https://example.com/img.jpg" />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-card-media')
+  })
+
+  it('should render an img element with the provided src', async () => {
+    const el = (
+      <div>
+        <CardMedia image="https://example.com/photo.jpg" alt="Test photo" />
+      </div>
+    )
+    const media = el.firstElementChild as JSX.Element
+    media.updateComponent()
+    await flushUpdates()
+    const img = media.querySelector('img') as HTMLImageElement
+    expect(img).not.toBeNull()
+    expect(img.getAttribute('src')).toBe('https://example.com/photo.jpg')
+    expect(img.getAttribute('alt')).toBe('Test photo')
+  })
+
+  it('should set height on the element', async () => {
+    const el = (
+      <div>
+        <CardMedia image="https://example.com/photo.jpg" height="300px" />
+      </div>
+    )
+    const media = el.firstElementChild as JSX.Element
+    media.updateComponent()
+    await flushUpdates()
+    expect(media.style.height).toBe('300px')
+  })
+
+  it('should default height to 200px', async () => {
+    const el = (
+      <div>
+        <CardMedia image="https://example.com/photo.jpg" />
+      </div>
+    )
+    const media = el.firstElementChild as JSX.Element
+    media.updateComponent()
+    await flushUpdates()
+    expect(media.style.height).toBe('200px')
+  })
+
+  it('should default alt to empty string', async () => {
+    const el = (
+      <div>
+        <CardMedia image="https://example.com/photo.jpg" />
+      </div>
+    )
+    const media = el.firstElementChild as JSX.Element
+    media.updateComponent()
+    await flushUpdates()
+    const img = media.querySelector('img') as HTMLImageElement
+    expect(img.getAttribute('alt')).toBe('')
+  })
+})
+
+describe('CardActions', () => {
+  it('should be defined', () => {
+    expect(CardActions).toBeDefined()
+    expect(typeof CardActions).toBe('function')
+  })
+
+  it('should create a card-actions element', () => {
+    const el = (<CardActions />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-card-actions')
+  })
+
+  it('should render children', async () => {
+    const el = (
+      <div>
+        <CardActions>
+          <button>Action</button>
+        </CardActions>
+      </div>
+    )
+    const actions = el.firstElementChild as JSX.Element
+    actions.updateComponent()
+    await flushUpdates()
+    expect(actions.querySelector('button')).not.toBeNull()
+  })
+
+  it('should set data-disable-spacing when disableSpacing is true', async () => {
+    const el = (
+      <div>
+        <CardActions disableSpacing />
+      </div>
+    )
+    const actions = el.firstElementChild as JSX.Element
+    actions.updateComponent()
+    await flushUpdates()
+    expect(actions.hasAttribute('data-disable-spacing')).toBe(true)
+  })
+
+  it('should not set data-disable-spacing by default', async () => {
+    const el = (
+      <div>
+        <CardActions />
+      </div>
+    )
+    const actions = el.firstElementChild as JSX.Element
+    actions.updateComponent()
+    await flushUpdates()
+    expect(actions.hasAttribute('data-disable-spacing')).toBe(false)
+  })
+})
+
+describe('Card composition', () => {
+  it('should compose Card with all sub-components', async () => {
+    const el = (
+      <div>
+        <Card>
+          <CardMedia image="https://example.com/img.jpg" alt="Photo" />
+          <CardHeader title="Title" subheader="Subheader" />
+          <CardContent>
+            <p>Body text</p>
+          </CardContent>
+          <CardActions>
+            <button>Learn More</button>
+          </CardActions>
+        </Card>
+      </div>
+    )
+    const card = el.firstElementChild as JSX.Element
+    card.updateComponent()
+    await flushUpdates()
+    expect(card.querySelector('shade-card-media')).not.toBeNull()
+    expect(card.querySelector('shade-card-header')).not.toBeNull()
+    expect(card.querySelector('shade-card-content')).not.toBeNull()
+    expect(card.querySelector('shade-card-actions')).not.toBeNull()
+  })
+})