fulldev-ui 0.5.0-beta.9 → 0.6.0-beta.0

package/src/components/Buttons.astro

@@ -6,44 +6,54 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   variant?: ComponentProps<typeof Button>['variant']
+  button?: ComponentProps<typeof Button> | undefined
   buttons?: ComponentProps<typeof Button>[] | undefined
+  direction?: 'row' | 'column' | undefined
 }
 
-const { variant = 'secondary', buttons, ...rest } = Astro.props
+const {
+  direction = 'row',
+  variant = 'primary',
+  buttons = [],
+  button,
+  size,
+  ...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 === 'primary' && i > 1) return 'ghost'
   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'
+  else return 'ghost'
 }
 ---
 
 <Element
   class:list="buttons"
+  {direction}
   {...rest}
 >
   {
-    buttons?.map((button, i) => (
+    [button, ...buttons].filter(Boolean).map((button, i) => (
       <Button
-        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        variant={buttonVariant(i)}
+        {size}
         {...button}
       />
     ))
   }
+  <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .buttons {
-      display: inline-flex;
-      flex-wrap: wrap;
-      justify-content: stretch;
-      gap: var(--space-2);
-      width: auto;
+      @apply inline-flex flex-wrap justify-stretch gap-2;
+
+      &.direction-column {
+        @apply flex-col items-start;
+      }
     }
   }
 </style>

package/src/components/Card.astro

@@ -1,157 +1,171 @@
 ---
-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 Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Icon from './Icon.astro'
-import Price from './Price.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']
-  price?: ComponentProps<typeof Price>['value']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  id?: any
-  panel?: boolean | undefined
-  title?: ComponentProps<typeof Writeup>['heading']
-}
+import Price from 'fulldev-ui/components/Price.astro'
+import Heading from './Heading.astro'
+import Lead from './Lead.astro'
+import Paragraph from './Paragraph.astro'
+import Rating from './Rating.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']
+//   price?: ComponentProps<typeof Price>['value']
+//   slug?: CollectionEntry<'pages'>['slug'] | undefined
+//   id?: any
+//   panel?: boolean | undefined
+//   title?: ComponentProps<typeof Writeup>['heading']
+// }
 
-const { slug } = Astro.props
-const page = slug ? (await getEntry('pages', slug)).data : {}
+const { slug, ...props } = Astro.props
+const page = slug && (await getEntry('pages', slug))
 
-const entryProps = {
-  heading: page.title,
-  text: page.description,
-  href: slug ? `/${slug}/` : undefined,
-  ...page,
+const merged = {
+  ...props,
+  ...page?.data,
 }
 
 const {
-  align = 'start',
-  level = 4,
-  href,
-  badge,
-  tagline,
+  href = slug === 'index' ? undefined : `/${slug}/`,
+  as = href ? 'a' : 'div',
+  heading = page?.data.title || props.title,
+  image = page?.data.images?.[0] || props.images?.[0],
+  size = 'md',
+  panel = true,
+  inset = panel,
+  level = 3,
+  lead,
+  paragraph,
   rating,
-  heading,
-  text,
-  variant,
   price,
-  list,
-  button,
-  buttons,
-  panel,
-  image,
   icon,
-  title,
-  images,
   position,
   ...rest
-} = {
-  ...entryProps,
-  ...Astro.props,
-}
+} = merged
 ---
 
 <Element
   class:list="card"
   as={href ? 'a' : 'div'}
   {href}
-  {align}
   {panel}
+  {inset}
+  {size}
   {...rest}
 >
-  <slot name="image">
-    <Image
-      position={panel ? position : undefined}
-      {...image || images?.[0]}
-    />
-  </slot>
-  <slot name="icon">
+  <Image
+    position={panel ? position : undefined}
+    {...image}
+  />
+  <Element class:list="card-content">
     <Icon name={icon} />
-  </slot>
-  <slot name="writeup">
-    <Writeup
-      heading={heading || title}
+    <Rating
+      {size}
+      value={rating}
+    />
+    <Heading
+      {size}
       {level}
-      {rating}
-      {badge}
-      {tagline}
-      {text}
-      {list}
+      text={heading}
     />
-    <Price value={price} />
-  </slot>
-  <slot name="buttons">
-    <Button
-      {variant}
-      {...button}
+    <Lead
+      {size}
+      text={lead}
     />
-    <Buttons
-      {variant}
-      {buttons}
+    <Paragraph
+      {size}
+      text={paragraph}
     />
-  </slot>
+    <Price value={price} />
+  </Element>
   <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .card {
-      --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;
-
-        > .image {
-          transition: all 0.2s ease;
+      @apply relative flex flex-col items-start;
+
+      &:is(a[href]) > .image {
+        @apply transition hover:opacity-80;
+      }
+
+      .card-content {
+        @apply flex flex-col;
+      }
+
+      &.panel {
+        @apply overflow-hidden rounded-md border bg-card;
+      }
+
+      &.size-sm {
+        @apply gap-4;
+
+        .card-content {
+          @apply gap-2;
+        }
+
+        &.panel {
+          @apply p-4;
         }
 
-        &:hover {
-          > .image {
-            opacity: 0.8;
+        &.inset {
+          @apply gap-0 p-0;
+
+          .card-content {
+            @apply p-4;
           }
         }
       }
 
-      &.panel {
-        --inset-top: var(--space-4);
-        --inset-left: var(--space-4);
-        --inset-right: var(--space-4);
-        --inset-bottom: 0px;
-
-        border: 1px solid var(--color-a6);
-        border-radius: var(--radius-2);
-        background-color: var(--color-2);
-        padding: var(--space-4);
-        overflow: hidden;
-
-        &[href]:hover {
-          border: 1px solid var(--color-a7);
+      &.size-md {
+        @apply gap-5;
+
+        .card-content {
+          @apply gap-2.5;
+        }
+
+        &.panel {
+          @apply p-5;
+        }
+
+        &.inset {
+          @apply gap-0 p-0;
+
+          .card-content {
+            @apply p-5;
+          }
+        }
+      }
+
+      &.size-lg {
+        @apply gap-6;
+
+        .card-content {
+          @apply gap-3;
+        }
+
+        &.panel {
+          @apply p-6;
+        }
+
+        &.inset {
+          @apply gap-0 p-0;
+
+          .card-content {
+            @apply p-6;
+          }
         }
       }
     }

package/src/components/Cards.astro

@@ -12,19 +12,30 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
 }
 
-const { level, panel, position, cards, ...rest } = Astro.props
+const {
+  structure = 'grid',
+  level,
+  panel,
+  position,
+  cards,
+  size,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="cards"
   {panel}
+  {size}
+  {structure}
   {...rest}
 >
   {
     cards?.map((card: any) => (
       <Card
-        {level}
+        level={level + 3}
         {panel}
+        {size}
         {position}
         {...card}
       />
@@ -32,51 +43,26 @@ const { level, panel, position, cards, ...rest } = Astro.props
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @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));
-      }
+      --column-width: 20rem;
+      @apply relative w-full;
 
       &.structure-grid {
-        display: grid;
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(var(--column-width), 1fr)
-        );
-        gap: var(--gap);
-        width: 100%;
+        @apply grid w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
       }
 
       &.structure-masonry {
-        column-gap: var(--gap);
+        @apply w-full columns-6 break-inside-avoid gap-5 space-y-5;
         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 {
@@ -88,7 +74,7 @@ const { level, panel, position, cards, ...rest } = Astro.props
         scroll-behavior: smooth;
         scroll-snap-type: x mandatory;
 
-        > .root {
+        > * {
           flex-grow: 0;
           flex-shrink: 0;
           width: var(--column-width);
@@ -130,6 +116,18 @@ const { level, panel, position, cards, ...rest } = Astro.props
           }
         }
       }
+
+      &.size-sm {
+        --column-width: 16rem;
+      }
+
+      &.size-md {
+        --column-width: 20rem;
+      }
+
+      &.size-lg {
+        --column-width: 26rem;
+      }
     }
   }
 </style>

package/src/components/Carousel.astro

@@ -0,0 +1,106 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props {}
+---
+
+<script>
+  function scrollLeft(content: HTMLElement) {
+    content.scrollLeft -= content.clientWidth
+  }
+
+  function scrollRight(content: HTMLElement) {
+    content.scrollLeft += content.clientWidth
+  }
+
+  const updateButtons = (
+    left: HTMLElement,
+    right: HTMLElement,
+    content: HTMLElement
+  ) => {
+    const isScrollable = content.scrollWidth > content.clientWidth
+    const atStart = content.scrollLeft <= 0
+    const atEnd =
+      content.scrollLeft >= content.scrollWidth - content.clientWidth
+
+    left?.classList.toggle('hide', !isScrollable || atStart)
+    right?.classList.toggle('hide', !isScrollable || atEnd)
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    const carousels = document.querySelectorAll('.carousel')
+    carousels.forEach((carousel) => {
+      const left = carousel?.querySelector('.carousel-left')
+      const right = carousel?.querySelector('.carousel-right')
+      const content = carousel?.querySelector('.carousel-content')
+
+      if (!(content instanceof HTMLElement)) return
+      if (!(left instanceof HTMLElement)) return
+      if (!(right instanceof HTMLElement)) return
+
+      left?.addEventListener('click', () => scrollLeft(content))
+      right?.addEventListener('click', () => scrollRight(content))
+
+      const observer = new ResizeObserver(() => {
+        updateButtons(left, right, content)
+      })
+
+      observer.observe(content)
+
+      content.addEventListener('scroll', () => {
+        updateButtons(left, right, content)
+      })
+    })
+  })
+</script>
+
+<Element class:list="carousel">
+  <Button
+    class="carousel-left hide"
+    icon="chevron-left"
+    variant="secondary"
+    size="sm"
+  />
+  <Element class:list="carousel-content">
+    <slot />
+  </Element>
+  <Button
+    class="carousel-right hide"
+    icon="chevron-right"
+    variant="secondary"
+    size="sm"
+  />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .carousel {
+      @apply container relative flex w-full items-center overflow-hidden px-0;
+
+      .button {
+        @apply absolute z-10 bg-secondary-hover opacity-50 hover:opacity-100;
+
+        &.hide {
+          @apply !hidden;
+        }
+      }
+
+      .carousel-left {
+        @apply left-2;
+      }
+
+      .carousel-right {
+        @apply right-2;
+      }
+
+      .carousel-content {
+        @apply inline-flex w-full snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-gutter scrollbar-none;
+
+        > * {
+          @apply snap-center;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Cart.astro

@@ -27,7 +27,7 @@ const {
   <CartSummary slot="footer" />
 </Drawer>
 
-<style lang="scss" is:global>
+<style  is:global>
   @layer fulldev {
     form {
       display: flex;

package/src/components/CartForm.astro

@@ -4,7 +4,7 @@ import Button from 'fulldev-ui/components/Button.astro'
 import Input from 'fulldev-ui/components/Input.astro'
 import Select from 'fulldev-ui/components/Select.astro'
 import { capitalize } from 'radash'
-import Form from './experimental/Form.astro'
+import Form from './Form.astro'
 import Price from './Price.astro'
 
 interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
@@ -12,6 +12,7 @@ interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
   slug: string
   price: number
   image?: string | undefined
+  soldout?: boolean
   variants?:
     | {
         [key: string]: string[]
@@ -19,7 +20,7 @@ interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
     | undefined
 }
 
-const { title, slug, image, price, variants, ...rest } = Astro.props
+const { title, slug, image, price, variants, soldout, ...rest } = Astro.props
 ---
 
 <Form
@@ -44,7 +45,7 @@ const { title, slug, image, price, variants, ...rest } = Astro.props
   <Input
     type="hidden"
     name="image"
-    value={Astro.url.origin ? Astro.url.origin + image : undefined}
+    value={image}
   />
   {
     Object.entries(variants ?? {}).map(([key, options]) => (
@@ -52,6 +53,7 @@ const { title, slug, image, price, variants, ...rest } = Astro.props
         label={capitalize(key)}
         name={`variant-${key}`}
         options={options}
+        disabled={soldout}
       />
     ))
   }
@@ -63,10 +65,10 @@ const { title, slug, image, price, variants, ...rest } = Astro.props
   />
   <Button
     variant="primary"
-    color="brand"
     type="submit"
     class="cart-add"
-    text="Toevoegen aan winkelwagen"
+    text={soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
+    disabled={soldout}
   />
 </Form>
 
@@ -106,15 +108,13 @@ const { title, slug, image, price, variants, ...rest } = Astro.props
   })
 </script>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .cart-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
+      @apply flex flex-col gap-4;
 
       .input {
-        display: none;
+        @apply hidden;
       }
     }
   }