fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/Button.astro

@@ -1,47 +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} />
   <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
+    <Avatar src={avatar} />
+    <Icon name={icon} />
+    <Fragment set:html={text ?? entry?.data.title} />
   </slot>
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -53,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);
@@ -82,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);
@@ -128,7 +131,6 @@ const {
       }
 
       &.variant-tertiary {
-        background-color: transparent;
         color: var(--color-11);
 
         &:hover {
@@ -139,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>

package/src/components/Card.astro

@@ -1,188 +1,128 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
-import Price from 'fulldev-ui/components/experimental/Price.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Spread from 'fulldev-ui/components/Spread.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Wrap from 'fulldev-ui/components/Wrap.astro'
-import Badge from './Badge.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Icon from './Icon.astro'
+
+interface Props
+  extends GlobalProps,
+    ComponentProps<typeof Writeup>,
+    Omit<HTMLAttributes<'a'>, 'title'> {
+  image?: ComponentProps<typeof Image>
+  images?: ComponentProps<typeof Image>[]
+  position?: ComponentProps<typeof Image>['position']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  button?: ComponentProps<typeof Button> | undefined
+  variant?: ComponentProps<typeof Button>['variant']
+  align?: ComponentProps<typeof Writeup>['align']
+  icon?: ComponentProps<typeof Icon>['name']
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  id?: any
+  panel?: boolean | undefined
+}
+
+const { slug } = Astro.props
+const page = slug ? (await getEntry('pages', slug)).data : {}
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  ratio?: 'landscape' | 'portrait' | 'square' | number
-  variant?: 'primary' | 'secondary' | 'tertiary'
-  position?: 'background' | 'cover' | 'inset'
-  align?: 'start' | 'center' | 'end'
-  justify?: 'start' | 'center' | 'end'
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  size?: 'sm' | 'md' | 'lg'
-  radius?: 'auto' | 'none'
-  frame?: 'panel' | 'none'
-  color?: 'base' | 'brand'
-  space?: 'auto' | 'none'
-  mask?: 'sm' | 'md' | 'lg'
-  image?: string | ComponentProps<typeof Image>
-  images?: string[]
-  button?: ComponentProps<typeof Button<'a'>>
-  buttons?: ComponentProps<typeof Button<'a'>>[]
-  badge?: string | ComponentProps<typeof Badge<'a'>>
-  badges?: (string | ComponentProps<typeof Badge<'a'>>)[]
-  rating?: number | ComponentProps<typeof Rating>
-  price?: number
-  icon?: string
-  avatar?: string
-  avatars?: string[]
-  label?: string
-  tagline?: string
-  contrast?: boolean
-  heading?: string
-  title?: string
-  description?: string
-  html?: string
-  text?: string
-  list?: string[]
+const entryProps = {
+  heading: page.title,
+  text: page.description,
+  href: `/${slug}/`,
+  ...page,
 }
 
 const {
-  href,
-  as = href ? 'a' : 'div',
-  space = 'auto',
-  frame = 'none',
-  radius = 'auto',
   align = 'start',
-  variant,
   level = 4,
-  position,
-  label,
-  heading,
-  title,
+  href,
+  badge,
   tagline,
+  rating,
+  heading,
   text,
-  html,
-  description,
+  variant,
   list,
+  button,
   buttons,
-  badge,
-  badges,
-  ratio,
+  panel,
   image,
-  images,
-  rating,
-  button,
-  price,
   icon,
-  avatar,
-  mask,
-  avatars,
+  images,
+  position,
   ...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'
+} = {
+  ...entryProps,
+  ...Astro.props,
 }
 ---
 
-<Root
+<Element
   class:list="card"
-  ratio={position === 'background' ? ratio : undefined}
-  structure="column"
-  {align}
+  as={href ? 'a' : 'div'}
   {href}
-  {radius}
-  {space}
-  {frame}
-  {as}
+  {align}
+  {panel}
   {...rest}
 >
-  <Image
-    {position}
-    {mask}
-    ratio={position === 'background' ? undefined : ratio}
-    src={images?.[0]}
-    {...typeof image === 'string' ? { src: image } : image}
-  />
-  <Icon name={icon} />
-  <Rating
-    color="brand"
-    {avatars}
-    {avatar}
-    {label}
-    {...typeof rating === 'number' ? { value: rating } : rating}
-  />
-  <Wrap>
-    {
-      [badge, ...(badges ?? [])].filter(Boolean)?.map((badge: any) => (
-        <Badge
-          color="base"
-          {...(typeof badge === 'string' ? { html: badge } : badge)}
-        />
-      ))
-    }
-  </Wrap>
-  <Tagline
-    color="base"
-    html={tagline}
-  />
-  <Spread>
-    <Heading
-      color="base"
-      html={heading ?? title}
+  <slot name="image">
+    <Image
+      position={panel ? position : undefined}
+      {...image || images?.[0]}
+    />
+  </slot>
+  <slot name="icon">
+    <Icon name={icon} />
+  </slot>
+  <slot name="writeup">
+    <Writeup
       {level}
+      {rating}
+      {badge}
+      {tagline}
+      {heading}
+      {text}
+      {list}
     />
-    <Price value={price} />
-  </Spread>
-  <Text
-    color="base"
-    contrast={position === 'background' && true}
-    html={html || text || description}
-  />
-  <List
-    color="base"
-    contrast
-    items={list}
-  />
-  <Wrap>
-    {
-      [button, ...(buttons ?? [])]
-        .filter(Boolean)
-        ?.map((button: any, i: number) => (
-          <Button
-            variant={buttonVariant(i)}
-            {...button}
-          />
-        ))
-    }
-  </Wrap>
+  </slot>
+  <slot name="buttons">
+    <Button
+      {variant}
+      {...button}
+    />
+    <Buttons
+      {variant}
+      {buttons}
+    />
+  </slot>
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
     .card {
-      --inset-top: var(--space-5);
-      --inset-left: var(--space-5);
-      --inset-right: var(--space-5);
-      --inset-bottom: var(--space-5);
+      --inset-top: 0px;
+      --inset-left: 0px;
+      --inset-right: 0px;
+      --inset-bottom: 0px;
 
+      display: flex;
       position: relative;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-4);
       text-decoration: none;
 
       &[href] {
         cursor: pointer;
 
         > .root.image {
-          transition: var(--transition);
+          transition: all;
         }
 
         &:hover {
@@ -192,44 +132,21 @@ const buttonVariant = (i: number) => {
         }
       }
 
-      &.ratio-landscape {
-        aspect-ratio: 4/3;
-      }
+      &.panel {
+        --inset-top: var(--space-4);
+        --inset-left: var(--space-4);
+        --inset-right: var(--space-4);
+        --inset-bottom: 0px;
 
-      &.ratio-square {
-        aspect-ratio: 1/1;
-      }
-
-      &.ratio-portrait {
-        aspect-ratio: 3/4;
-      }
-
-      &.frame-fill {
-        border-radius: 0 !important;
-      }
-
-      &.frame-panel {
         border: 1px solid var(--color-a6);
+        border-radius: var(--radius-2);
         background-color: var(--color-2);
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
+        padding: var(--space-4);
         overflow: hidden;
 
         &[href]:hover {
           border: 1px solid var(--color-a7);
         }
-
-        &.radius-none {
-          border-radius: 0;
-        }
-
-        &.radius-auto {
-          border-radius: var(--radius-2);
-        }
-      }
-
-      > .image + * {
-        margin-top: var(--space-5);
       }
     }
   }

package/src/components/Cards.astro

@@ -0,0 +1,135 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  level?: ComponentProps<typeof Card>['level']
+  panel?: ComponentProps<typeof Card>['panel']
+  position?: ComponentProps<typeof Card>['position']
+  cards?: ComponentProps<typeof Card>[] | undefined
+  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
+}
+
+const { level, panel, position, cards, ...rest } = Astro.props
+---
+
+<Element
+  class:list="cards"
+  {panel}
+  {...rest}
+>
+  {
+    cards?.map((card: any) => (
+      <Card
+        {level}
+        {panel}
+        {position}
+        {...card}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cards {
+      --column-width: calc(21 * var(--space-4));
+      --gap: var(--space-5);
+
+      position: relative;
+      width: 100%;
+
+      &.panel {
+        --gap: var(--space-4);
+      }
+
+      &.position-inset {
+        margin-right: calc(var(--inset-right) * -1);
+        margin-left: calc(var(--inset-left) * -1);
+        padding-right: var(--inset-right);
+        padding-left: var(--inset-left);
+        width: calc(100% + var(--inset-left) + var(--inset-right));
+      }
+
+      &.structure-grid {
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(var(--column-width), 1fr)
+        );
+        gap: var(--gap);
+        width: 100%;
+      }
+
+      &.structure-masonry {
+        column-gap: var(--gap);
+        column-fill: balance;
+        column-width: var(--column-width);
+        column-count: 6;
+        break-inside: avoid;
+        width: 100%;
+
+        & > .root + .root,
+        & > * + * {
+          break-inside: avoid;
+          margin-top: var(--gap);
+          margin-bottom: var(--gap);
+        }
+      }
+
+      &.structure-carousel {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap);
+        padding-bottom: var(--gap);
+        overflow-x: auto;
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+
+        > .root {
+          flex-grow: 0;
+          flex-shrink: 0;
+          width: var(--column-width);
+          scroll-snap-align: center;
+        }
+      }
+
+      &.structure-stack {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+        gap: var(--space-6);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-auto-columns: 1fr;
+          grid-auto-flow: column;
+        }
+      }
+
+      &.structure-bento {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        gap: var(--space-4);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-template-columns: repeat(5, 1fr);
+
+          & > * {
+            grid-column: span 2;
+          }
+
+          & > *:nth-child(3n + 2),
+          & > *:nth-child(3n + 3) {
+            grid-column: span 3;
+          }
+        }
+      }
+    }
+  }
+</style>