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

package/src/blocks/Hero.astro

@@ -1,15 +1,244 @@
 ---
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Lead from 'fulldev-ui/components/Lead.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'section'> {
+  rating?: ComponentProps<typeof Rating> | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  lead?: ComponentProps<typeof Lead>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  image?: ComponentProps<typeof Image>['id']
+  level?: ComponentProps<typeof Heading>['level']
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+}
+
+const {
+  as = 'section',
+  size = 'lg',
+  variant = 1,
+  level = 1,
+  rating,
+  tagline,
+  badge,
+  heading,
+  lead,
+  paragraph,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
-<Section
+<Element
   class:list="hero"
-  level={1}
-  size="lg"
-  align="center"
-  variant="primary"
-  color="brand"
+  {as}
+  {size}
+  {variant}
   {...rest}
-/>
+>
+  <Element class:list="hero-container">
+    <Element class:list="hero-segment">
+      <Element class:list="hero-content">
+        <Rating
+          {size}
+          {...rating}
+        />
+        <Tagline
+          text={tagline}
+          {size}
+        />
+        <Badge
+          {size}
+          {...badge}
+        />
+        <Heading
+          text={heading}
+          {level}
+          {size}
+        />
+        <Lead
+          text={lead}
+          {size}
+        />
+        <Paragraph
+          text={paragraph}
+          {size}
+        />
+        <slot name="content" />
+      </Element>
+      <Buttons
+        variant="primary"
+        {size}
+        {buttons}
+      />
+      <slot name="segment" />
+    </Element>
+    <Image
+      class:list="hero-image"
+      {...image}
+    />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .hero {
+      @apply relative w-full;
+
+      .hero-container {
+        @apply flex h-full w-full flex-col;
+      }
+
+      .hero-segment {
+        @apply z-10 flex flex-col items-start gap-8;
+      }
+
+      .hero-content {
+        @apply flex max-w-screen-md flex-col gap-6;
+      }
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      /* Column left aligned */
+      &.variant-1 {
+        .hero-container {
+          @apply container py-8;
+        }
+
+        .hero-segment {
+          @apply gap-8 py-16;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Column centered */
+      &.variant-2 {
+        .hero-container {
+          @apply container items-center py-8;
+        }
+
+        .hero-segment {
+          @apply items-center py-16;
+        }
+
+        .hero-content {
+          @apply items-center text-center;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Spread */
+      &.variant-3 {
+        .hero-container {
+          @apply container items-center py-8;
+        }
+
+        .hero-segment {
+          @apply w-full flex-row flex-wrap items-end justify-between py-16;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Split */
+      &.variant-4 {
+        .hero-container {
+          @apply container py-8 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Split fill */
+      &.variant-5 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container px-0 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .hero-segment {
+          @apply w-auto max-w-screen-md px-gutter pb-16 pt-24 lg:pb-24;
+        }
+
+        .hero-image {
+          @apply right-0 top-0 h-full object-cover lg:absolute lg:w-1/2;
+        }
+      }
+
+      /* Background left */
+      &.variant-6 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container justify-center py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+      }
+
+      /* Background center */
+      &.variant-7 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container items-center justify-center py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+
+        .hero-segment,
+        .hero-content {
+          @apply items-center text-center;
+        }
+      }
+
+      /* Background spread */
+      &.variant-8 {
+        @apply min-h-hero;
+
+        .hero-container {
+          @apply container items-center justify-end py-16;
+        }
+
+        .hero-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+
+        .hero-segment {
+          @apply w-full flex-row flex-wrap items-end justify-between;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Intro.astro

@@ -1,23 +1,101 @@
 ---
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Breadcrumb from 'fulldev-ui/components/Breadcrumb.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Lead from 'fulldev-ui/components/Lead.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
 
-const { image, ...rest } = Astro.props
+interface Props extends HTMLAttributes<'section'> {
+  rating?: ComponentProps<typeof Rating> | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  lead?: ComponentProps<typeof Lead>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  image?: ComponentProps<typeof Image>['id']
+  level?: ComponentProps<typeof Heading>['level']
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+}
+
+const {
+  as = 'section',
+  size = 'lg',
+  variant = 1,
+  level = 1,
+  slug,
+  rating,
+  tagline,
+  badge,
+  heading,
+  lead,
+  paragraph,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
-<Section
+<Element
   class:list="intro"
-  structure="column"
-  size="sm"
-  level={1}
+  {as}
+  {size}
+  {variant}
   {...rest}
-/>
+>
+  <Element class:list="intro-container">
+    <Element class:list="intro-content">
+      <!-- <Breadcrumb {slug} /> -->
+      <Heading
+        text={heading}
+        as="h1"
+        level={3}
+        {size}
+      />
+      <Paragraph
+        text={paragraph}
+        {size}
+      />
+    </Element>
+    <slot />
+  </Element>
+</Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .intro {
-      border-bottom: 1px solid var(--base-6);
-      padding-top: var(--space-7);
-      padding-bottom: var(--space-7);
+      @apply relative w-full;
+
+      .intro-container {
+        @apply flex h-full w-full flex-col;
+      }
+
+      .intro-content {
+        @apply flex max-w-screen-md flex-col gap-6;
+      }
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      /* Background left */
+      &.variant-1 {
+        .intro-container {
+          @apply container justify-center py-16;
+        }
+
+        .intro-image {
+          @apply absolute inset-0 h-full w-full object-cover opacity-30;
+        }
+      }
     }
   }
 </style>

package/src/blocks/Prices.astro

@@ -11,7 +11,7 @@ const { ...rest } = Astro.props
   {...rest}
 />
 
-<style is:global lang="scss">
+<style is:global >
   @layer fulldev {
     .prices {
       .card {

package/src/blocks/Product.astro

@@ -1,106 +1,89 @@
----
+<!-- ---
+import { getImage } from 'astro:assets'
 import CartForm from 'fulldev-ui/components/CartForm.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Gallery from 'fulldev-ui/components/experimental/Gallery.astro'
+import Gallery from 'fulldev-ui/components/Gallery.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
 import List from 'fulldev-ui/components/List.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 
 const {
+  as = 'section',
+  size = 'md',
+  variant = 1,
+  level = 1,
   heading,
+  paragraph,
   title,
   list,
   price,
-  image,
   images,
-  rating,
-  buttons,
   text,
   subheading,
   variants,
   button,
   description,
   form,
-  gallery = 'horizontal',
+  uitverkocht,
   ...rest
 } = Astro.props
 
-const slug = Astro.params.page || 'index'
-const src = `/src/images/${images?.[0].id}`
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const imageId = images?.[0]?.id
+const src = `/src/images/${imageId}`
+const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const foundImage = allImages[src]
+const gotImage =
+  imageId && (await getImage({ src: foundImage ? foundImage() : src }))
 ---
 
-<Section
+<Element
   class:list="product"
-  structure="split"
+  {as}
+  {size}
   {...rest}
 >
-  {
-    images && images.length > 1 ? (
-      <Gallery
-        {images}
-        direction={gallery}
+  <Element class:list="product-container">
+    <Gallery {images} />
+    <Element class:list="product-segment">
+      <Element class:list="product-content">
+        <Heading
+          {level}
+          text={heading || title}
+        />
+        <Paragraph text={paragraph || description} />
+        <List items={list} />
+      </Element>
+      <CartForm
+        soldout={uitverkocht}
+        image={gotImage?.src}
+        {title}
+        {price}
+        {slug}
+        {variants}
       />
-    ) : (
-      <Image {...(image || images?.[0])} />
-    )
-  }
-  <Element class:list="column">
-    <Heading
-      level={2}
-      text={heading || title}
-    />
-    <Text
-      style={{ maxWidth: '420px' }}
-      text={text || description}
-    />
-    <List
-      items={list}
-      style={{ marginTop: 'var(--space-5)' }}
-    />
-    <CartForm
-      image={src}
-      {title}
-      {price}
-      {slug}
-      {variants}
-    />
+    </Element>
   </Element>
-</Section>
+</Element>
 
-<style is:global lang="scss">
+<style is:global>
   .product {
-    padding-top: 0px;
+    @apply relative w-full;
 
-    @media (min-width: 1024px) {
-      padding-top: var(--space-6);
+    .product-container {
+      @apply container flex h-full w-full flex-col gap-16 py-8 lg:grid lg:grid-cols-[3fr_2fr];
     }
 
-    .column {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-5);
+    .product-segment {
+      @apply z-10 flex flex-col items-start gap-8;
     }
 
-    .row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-5);
+    .product-content {
+      @apply flex max-w-screen-md flex-col gap-6;
     }
 
-    @media (max-width: 1023.99px) {
-      .gallery {
-        margin-right: calc(-1 * var(--gutter));
-        margin-left: calc(-1 * var(--gutter));
-        width: calc(100% + (var(--gutter) * 2));
-
-        .small-carousel {
-          padding-right: var(--gutter);
-          padding-left: var(--gutter);
-        }
-      }
+    &.dark {
+      @apply bg-background;
     }
   }
-</style>
+</style> -->

package/src/blocks/Products.astro

@@ -1,11 +1,120 @@
 ---
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Cards from 'fulldev-ui/components/Cards.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'section'> {
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  button?: ComponentProps<typeof Buttons> | undefined
+  cards?: ComponentProps<typeof Cards>['cards']
+  level?: ComponentProps<typeof Heading>['level']
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+}
+
+const {
+  as = 'section',
+  size = 'sm',
+  variant = 1,
+  level = 2,
+  tagline,
+  heading,
+  paragraph,
+  button,
+  cards,
+  ...rest
+} = Astro.props
 ---
 
-<Section
+<Element
   class:list="products"
-  structure="carousel"
+  {as}
+  {size}
+  {variant}
   {...rest}
-/>
+>
+  <Element class:list="products-container">
+    <Element class:list="products-segment">
+      <Element class:list="products-content">
+        <Tagline
+          text={tagline}
+          {size}
+        />
+        <Heading
+          text={heading}
+          {level}
+          {size}
+        />
+        <Paragraph
+          text={paragraph}
+          {size}
+        />
+        <slot name="content" />
+      </Element>
+      <Button
+        variant="ghost"
+        {size}
+        {...button}
+      />
+      <slot name="segment" />
+    </Element>
+    <Cards
+      {cards}
+      {size}
+    />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .products {
+      @apply relative w-full;
+
+      .products-container {
+        @apply flex h-full w-full flex-col;
+      }
+
+      .products-segment {
+        @apply z-10 flex flex-col items-start gap-8;
+      }
+
+      .products-content {
+        @apply flex max-w-screen-md flex-col gap-6;
+      }
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      /* Column left aligned */
+      &.variant-1 {
+        .products-container {
+          @apply container py-8;
+        }
+
+        .products-segment {
+          @apply w-full flex-row flex-wrap justify-between gap-8 py-8;
+        }
+
+        .cards {
+          --column-width: 200px;
+
+          @apply gap-2;
+
+          .image {
+            @apply p-4;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Reviews.astro

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