fulldev-ui 0.4.33 → 0.5.0-beta-16

package/src/blocks/Reviews.astro

@@ -8,6 +8,6 @@ const { ...rest } = Astro.props
   class:list="reviews"
   structure="masonry"
   align="center"
-  frame="panel"
+  panel
   {...rest}
 />

package/src/components/Avatar.astro

@@ -2,17 +2,13 @@
 import type { ComponentProps } from 'astro/types'
 import Image from 'fulldev-ui/components/Image.astro'
 
-type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
-  variant?: 'subtle' | 'outline' | 'ghost'
-  radius?: 'none' | 'auto' | 'full'
-}
+interface Props extends ComponentProps<typeof Image> {}
 
-const { radius = 'auto', ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Image
   class:list={'avatar'}
-  {radius}
   {...rest}
 />
 
@@ -20,24 +16,11 @@ const { radius = 'auto', ...rest } = Astro.props
   @layer fulldev {
     .avatar {
       display: block;
-      border: 1px solid var(--border);
       border: 1px solid var(--base-a6);
-      border-radius: var(--radius-3);
+      border-radius: 999px;
       width: calc(2.8 * var(--space-4));
       height: calc(2.8 * var(--space-4));
       object-fit: cover;
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
-      }
     }
   }
 </style>

package/src/components/Badge.astro

@@ -1,82 +1,45 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import Button from './Button.astro'
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  radius?: 'none' | 'auto' | 'full'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
-  icon?: string
-}
+interface Props extends ComponentProps<typeof Button> {}
 
 const {
+  variant = 'tertiary',
+  color = 'base',
   href,
-  html,
   text,
-  as = href ? 'a' : 'div',
-  radius = 'full',
   icon,
   ...rest
 } = Astro.props
 ---
 
-<Root
+<Button
   class:list="badge"
-  {radius}
-  {as}
+  {variant}
   {href}
+  {color}
   {...rest}
 >
-  <slot>
-    <Fragment set:text={text} />
-    <Fragment set:html={html} />
-  </slot>
+  <slot />
+  <Fragment set:html={text} />
   <Icon name={icon} />
-</Root>
+</Button>
 
 <style is:global lang="scss">
   @layer fulldev {
-    .badge {
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      vertical-align: top;
+    .button.badge {
       gap: var(--space-2);
-      transition: var(--transition);
-      border: 1px solid var(--color-a6);
+      transition: all 0.15s ease;
+      border: 1px solid var(--color-a7);
+      border-radius: 999px;
       padding: 0 var(--space-3);
       height: calc(var(--text-1) + 2 * var(--space-2));
-      color: var(--color-11);
-      font-weight: 500;
       font-size: var(--text-1);
-      line-height: 1;
-      text-align: center;
-      text-decoration: none;
-      white-space: nowrap;
 
-      &[href] {
-        border-color: var(--color-7);
-
-        &:hover {
-          border-color: var(--color-8);
-        }
-      }
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
+      &:hover {
+        border-color: var(--color-a8);
       }
     }
   }

package/src/components/Badges.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Badge from './Badge.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  badges?: ComponentProps<typeof Badge>[] | undefined
+}
+
+const { variant = 'tertiary', badges, ...rest } = Astro.props
+---
+
+<Element
+  class:list="badges"
+  {...rest}
+>
+  {
+    badges?.map((badge) => (
+      <Badge
+        {variant}
+        {...badge}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .badges {
+      display: inline-flex;
+      flex-wrap: wrap;
+      justify-content: stretch;
+      gap: var(--space-2);
+      width: auto;
+    }
+  }
+</style>

package/src/components/Button.astro

@@ -1,46 +1,54 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
 import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  variant?: 'primary' | 'secondary' | 'tertiary'
-  radius?: 'none' | 'auto' | 'full'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  avatar?: string
-  icon?: string
-  html?: string
-  text?: string
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'button'>,
+    HTMLAttributes<'a'>,
+    HTMLAttributes<'label'> {
+  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
+  icon?: ComponentProps<typeof Icon>['name']
+  avatar?: ComponentProps<typeof Avatar>['src']
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | undefined
+  reverse?: boolean | undefined
+  text?: string | undefined
 }
 
-const {
-  as = 'a',
-  variant = 'primary',
-  radius = 'auto',
-  avatar,
-  icon,
-  html,
-  text,
-  ...rest
-} = Astro.props
+const { variant = 'secondary', slug, text, avatar, icon, ...rest } = Astro.props
+
+const entry = slug && !text ? await getEntry('pages', slug) : undefined
+const hrefString =
+  rest.href && typeof rest.href !== 'string' ? rest.href.href : rest.href
+const href =
+  hrefString ?? (slug ? (slug === 'index' ? '/' : `/${slug}/`) : undefined)
+const as = href ? 'a' : rest.for ? 'label' : 'button'
+const color =
+  variant === 'link' && href === Astro.url.pathname ? 'brand' : rest.color
 ---
 
-<Root
+<Element
   class:list="button"
+  _target={href?.startsWith('http') ? '_blank' : undefined}
+  type={as === 'button' ? 'button' : undefined}
   {as}
+  {href}
+  {color}
   {variant}
-  {radius}
   {...rest}
 >
-  <Avatar src={avatar} />
-  <Icon name={icon} />
-  <Fragment set:html={html} />
-  <Fragment set:text={text} />
-  <slot />
-</Root>
+  <slot>
+    <Avatar src={avatar} />
+    <Icon name={icon} />
+    <Fragment set:html={text ?? entry?.data.title} />
+  </slot>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -52,12 +60,12 @@ const {
       vertical-align: top;
       gap: var(--space-2);
       appearance: none;
-      transition: background-color var(--transition);
+      transition: all 0.15s ease;
       cursor: pointer;
       outline: none;
       box-shadow: none;
       border-width: 0px;
-      background: none;
+      border-radius: var(--radius-1);
       padding: 0 var(--space-4);
       height: calc(var(--text-2) + 2 * var(--space-4));
       color: var(--text);
@@ -81,28 +89,24 @@ const {
         outline-offset: 2px;
       }
 
+      &.reverse > * {
+        order: 999;
+      }
+
       &:disabled {
         opacity: 0.5;
         cursor: not-allowed;
         pointer-events: none;
       }
 
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
-      }
-
       &.variant-primary {
         background-color: var(--color-9);
         color: var(--color-contrast);
 
+        .icon {
+          color: inherit;
+        }
+
         &:hover,
         &:active {
           background-color: var(--color-10);
@@ -127,7 +131,6 @@ const {
       }
 
       &.variant-tertiary {
-        background-color: transparent;
         color: var(--color-11);
 
         &:hover {
@@ -138,6 +141,22 @@ const {
           background-color: var(--color-4);
         }
       }
+
+      &.variant-link {
+        justify-content: flex-start;
+        padding: 0;
+        height: auto;
+        color: var(--color-11);
+        font-weight: 400;
+
+        &:hover {
+          color: var(--color-12);
+        }
+
+        &:active {
+          color: var(--color-12);
+        }
+      }
     }
   }
 </style>

package/src/components/Buttons.astro

@@ -0,0 +1,49 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  buttons?: ComponentProps<typeof Button>[] | undefined
+}
+
+const { variant = 'secondary', buttons, ...rest } = Astro.props
+
+const buttonVariant = (i: number) => {
+  if (variant === 'primary' && i === 0) return 'primary'
+  else if (variant === 'primary' && i === 1) return 'secondary'
+  else if (variant === 'primary' && i > 1) return 'tertiary'
+  else if (variant === 'secondary' && i === 0) return 'secondary'
+  else if (variant === 'secondary' && i > 0) return 'tertiary'
+  else if (variant === 'tertiary') return 'tertiary'
+  else return 'tertiary'
+}
+---
+
+<Element
+  class:list="buttons"
+  {...rest}
+>
+  {
+    buttons?.map((button, i) => (
+      <Button
+        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        {...button}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .buttons {
+      display: inline-flex;
+      flex-wrap: wrap;
+      justify-content: stretch;
+      gap: var(--space-2);
+      width: auto;
+    }
+  }
+</style>