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

package/src/components/CartList.astro

@@ -1,7 +1,6 @@
 ---
 import Element from 'fulldev-ui/components/Element.astro'
 import Button from './Button.astro'
-import Card from './Card.astro'
 import Heading from './Heading.astro'
 import Text from './Text.astro'
 
@@ -15,7 +14,7 @@ const { ...rest } = Astro.props
 />
 
 <template>
-  <Card class="cart-list-card">
+  <Element class="cart-list-card">
     <img class="cart-list-image image" />
     <Element class="column">
       <Heading
@@ -30,13 +29,13 @@ const { ...rest } = Astro.props
         />
         <Button
           class:list="cart-list-remove"
-          variant="tertiary"
+          variant="ghost"
           icon="trash"
           type="button"
         />
       </Element>
     </Element>
-  </Card>
+  </Element>
 </template>
 
 <script>
@@ -89,44 +88,28 @@ const { ...rest } = Astro.props
   })
 </script>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .cart-list {
-      display: flex;
-      flex-direction: column;
+      @apply flex flex-col text-foreground;
 
-      .card {
-        display: flex;
-        flex-direction: row;
-        gap: var(--space-5);
-        width: 100%;
+      .cart-list-card {
+        @apply flex w-full gap-5;
 
         &:not(:first-child) {
-          margin-top: var(--space-5);
-          border-top: 1px solid var(--color-a6);
-          padding-top: var(--space-5);
+          @apply mt-5 border-t pt-5;
         }
 
         .image {
-          display: block;
-          width: 100px;
-          height: auto;
+          @apply block h-auto w-24;
         }
 
         .column {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          gap: var(--space-3);
-          width: 100%;
-          height: 100%;
+          @apply flex h-full w-full flex-col justify-between gap-3;
         }
 
         .row {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
+          @apply flex w-full flex-row justify-between;
         }
       }
     }

package/src/components/CartSummary.astro

@@ -31,45 +31,40 @@ const { ...rest } = Astro.props
   <Button
     class:list="checkout-button"
     variant="primary"
-    color="brand"
     text="Afrekenen"
   />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .cart-summary {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-3);
+      @apply flex flex-col gap-3 text-foreground;
 
       .price,
       .total {
-        font-size: var(--text-4);
+        @apply text-lg;
       }
 
       .row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+        @apply flex w-full justify-between;
       }
 
       .shipping {
-        font-size: var(--text-1);
+        @apply text-sm text-muted-foreground;
       }
     }
   }
 </style>
 
 <script>
+  import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
   import { $cart } from 'fulldev-ui/stores/cart.ts'
   import { formatPrice } from 'fulldev-ui/utils/cart'
   import Stripe from 'stripe'
 
-  const stripe = new Stripe(import.meta.env.PUBLIC_STRIPE_CHECKOUT_KEY)
-
   function setPrice(items: any) {
     const price = document.querySelector('.cart-summary .price')
+    console.log('settings price', price)
     if (price)
       price.textContent = formatPrice(
         items.reduce(
@@ -80,6 +75,8 @@ const { ...rest } = Astro.props
   }
 
   document.addEventListener('astro:page-load', () => {
+    if (!STRIPE_RESTRICTED_KEY) return
+    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
     setPrice($cart.get())
 
     $cart.subscribe((items: any) => {
@@ -92,7 +89,7 @@ const { ...rest } = Astro.props
       const items = $cart.get()
 
       const checkoutConfig = {
-        success_url: `${import.meta.env.PUBLIC_SITE_URL}/checkout`,
+        success_url: `${URL}/checkout`,
         mode: 'payment',
         customer_creation: 'always',
         shipping_address_collection: {
@@ -128,6 +125,7 @@ const { ...rest } = Astro.props
             currency: 'eur',
             product_data: {
               name: item.name,
+              images: [URL + item.image],
             },
             unit_amount: Math.round(item.price * 100),
           },

package/src/components/Channel.astro

@@ -18,53 +18,71 @@ interface Props extends GlobalProps, ComponentProps<typeof Button> {
 
 const {
   variant = 'secondary',
-  structure = 'row',
-  color = 'brand',
-  align = 'start',
+  size = 'md',
+  href,
+  icon,
   heading,
   text,
-  icon,
-  href,
   ...rest
 } = Astro.props
 ---
 
 <Element
-  class:list={`channel ${structure}`}
-  {align}
+  class:list="channel"
+  {size}
   {...rest}
 >
   <Button
     {variant}
-    {color}
+    {size}
     {href}
     {icon}
   />
-  <Element class:list={'column'}>
+  <Element class:list="channel-content">
     <Heading
       level={6}
       text={heading}
+      {size}
     />
-    <Text text={text} />
+    <Fragment set:html={text} />
+    <slot />
   </Element>
 </Element>
 
-<style>
+<style is:global>
   .channel {
-    gap: var(--space-4);
+    @apply flex gap-3;
+
+    .channel-content {
+      @apply flex flex-col text-muted-foreground;
+
+      .heading {
+        @apply leading-snug;
+      }
+    }
+
+    &.size-sm {
+      @apply gap-2;
+
+      .channel-content {
+        @apply text-xs leading-tight;
+      }
+    }
+
+    &.size-md {
+      @apply gap-2.5;
 
-    &.column {
-      display: flex;
-      flex-direction: column;
-      align-items: inherit;
-      gap: var(--space-1);
+      .channel-content {
+        @apply text-sm leading-tight;
+      }
     }
 
-    &.row {
-      display: flex;
-      flex-direction: row;
-      align-items: inherit;
-      gap: var(--space-1);
+    &.size-lg {
+      @apply gap-3;
+
+      .channel-content {
+        @apply text-base leading-tight;
+      }
     }
   }
 </style>

package/src/components/Channels.astro

@@ -6,32 +6,46 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   variant?: ComponentProps<typeof Channel>['variant']
+  size?: ComponentProps<typeof Channel>['size']
+  channel?: ComponentProps<typeof Channel> | undefined
   channels?: ComponentProps<typeof Channel>[] | undefined
 }
 
-const { channels, variant, ...rest } = Astro.props
+const { channels = [], channel, variant, size, ...rest } = Astro.props
 ---
 
 <Element
   class:list="channels"
+  {size}
   {...rest}
 >
   {
-    channels?.map((channel) => (
+    [channel, ...channels].filter(Boolean).map((channel) => (
       <Channel
         {variant}
+        {size}
         {...channel}
       />
     ))
   }
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .channels {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
+      @apply flex flex-col gap-2.5;
+
+      &.size-sm {
+        @apply gap-2;
+      }
+
+      &.size-md {
+        @apply gap-2.5;
+      }
+
+      &.size-lg {
+        @apply gap-3;
+      }
     }
   }
 </style>

package/src/components/Checkbox.astro

@@ -3,6 +3,7 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Icon from './Icon.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'input'> {
   label?: ComponentProps<typeof Label>['text']
@@ -10,52 +11,76 @@ interface Props extends GlobalProps, HTMLAttributes<'input'> {
 
 const {
   label,
-  id,
-  name,
-  placeholder,
-  value,
-  disabled,
-  checked,
-  required,
+  name = label,
+  id = name,
+  type = 'text',
+  size = 'md',
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list="checkbox"
-  {...rest}
+  as="label"
+  for={id}
+  {size}
 >
   <Element
+    class:list="checkbox-input"
     as="input"
     type="checkbox"
-    id={id ?? name ?? label}
-    if={id ?? name ?? label}
-    name={name ?? label ?? id}
-    {disabled}
-    {placeholder}
-    {required}
-    {checked}
+    if={id}
+    {id}
+    {name}
     {...rest}
   />
+  <Icon
+    class="checkbox-icon"
+    name="check"
+  />
   <Label
-    for={id ?? name ?? label}
+    for={id}
     text={label}
+    {size}
   />
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .checkbox {
-      display: flex;
-      align-items: center;
-      gap: var(--space-1);
-
-      input {
-        display: block;
-        width: var(--text-2);
-        height: var(--text-2);
-        accent-color: var(--color-9);
-        color-scheme: dark;
+      @apply relative flex items-center gap-2;
+
+      .checkbox-input {
+        @apply size-[1em] cursor-pointer rounded-sm border border-primary bg-transparent accent-primary;
+        @apply appearance-none border border-primary bg-background checked:bg-primary;
+      }
+
+      .icon.checkbox-icon {
+        @apply absolute bg-transparent p-0.5 text-background;
+
+        * {
+          stroke-width: 3.5px !important;
+        }
+      }
+
+      &.size-sm {
+        .checkbox-input,
+        .icon.checkbox-icon {
+          @apply !size-3.5;
+        }
+      }
+      &.size-md {
+        .checkbox-input,
+        .checkbox-icon {
+          @apply !size-4;
+        }
+      }
+
+      &.size-lg {
+        .checkbox-input,
+        .checkbox-icon {
+          @apply !size-[1.125rem];
+        }
       }
     }
   }

package/src/components/Code.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { Code as AstroCode } from 'astro:components'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends ComponentProps<typeof AstroCode> {}
+
+const { lang = 'astro', code, ...rest } = Astro.props
+---
+
+<Element class:list="code">
+  <div class="example">
+    <slot name="example" />
+    <Fragment set:html={code} />
+  </div>
+  <slot name="code" />
+  {
+    code && (
+      <AstroCode
+        class:list="code"
+        code={code}
+        {lang}
+        {...rest}
+      />
+    )
+  }
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .astro-code {
+      @apply mt-4 rounded-md p-4 text-sm first:mt-0;
+    }
+
+    .code {
+      @apply mt-8 overflow-hidden rounded-md border first:mt-0;
+
+      .example {
+        @apply flex flex-wrap items-center gap-8 p-8;
+
+        > *,
+        > slot > * {
+          @apply mt-0;
+        }
+      }
+
+      .astro-code {
+        @apply mt-0 rounded-none border-none p-4;
+      }
+    }
+  }
+</style>

package/src/components/Dialog.astro

@@ -28,7 +28,7 @@ const {
 
 <dialog
   class="dialog"
-  {id}
+  id={id as string}
   onclick={`event.target === this && this.close()`}
 >
   <Card
@@ -39,7 +39,7 @@ const {
   </Card>
 </dialog>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .dialog {
       margin: auto !important;

package/src/components/Drawer.astro

@@ -2,11 +2,13 @@
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
 import Menu from 'fulldev-ui/components/Menu.astro'
+import links from 'fulldev-ui/schemas/components/links'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Buttons from './Buttons.astro'
 import Heading from './Heading.astro'
+import Links from './Links.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
   variant?: ComponentProps<typeof Button>['variant']
@@ -17,6 +19,8 @@ interface Props extends GlobalProps, HTMLAttributes<'aside'> {
   company?: ComponentProps<typeof Logo>['company']
   menu?: ComponentProps<typeof Menu>['groups']
   buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
+  size?: 'sm' | 'md' | 'lg' | undefined
 }
 
 const {
@@ -27,6 +31,7 @@ const {
   variant,
   text,
   buttons,
+  links,
   heading,
   logo,
   company,
@@ -34,13 +39,9 @@ const {
   if: ifProp,
   ...rest
 } = Astro.props
-
-const buttonsGroup = { heading: '', buttons: buttons }
-const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
-  if={ifProp}
   variant="secondary"
   class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
@@ -48,15 +49,16 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
   {text}
   {icon}
   {color}
+  {size}
 />
 
 <Element
-  if={ifProp}
   onclick={`event.target === this && this.close()`}
   class:list="drawer"
   as="dialog"
   {id}
   {text}
+  {size}
   {icon}
   {...rest}
 >
@@ -66,6 +68,7 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
       as="header"
     >
       <Logo
+        {size}
         {company}
         {...logo}
       />
@@ -81,7 +84,11 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
       <slot name="header" />
     </Element>
     <Element class:list="drawer-content">
-      <Menu groups={mergedMenu} />
+      <Links
+        direction="column"
+        {links}
+      />
+      <Menu groups={menu} />
       <slot />
     </Element>
     <Element
@@ -93,79 +100,42 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
   </Element>
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     body:has(dialog[open]) {
-      overflow: hidden;
-
-      @media (min-width: 768px) {
-        overflow: auto;
-      }
+      @apply max-md:overflow-hidden;
     }
 
     .drawer {
-      top: 0;
-      bottom: 0;
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      max-width: 100%;
-      height: 100%;
-      max-height: 100%;
-
-      @media (min-width: 768px) {
-        width: 440px;
-      }
+      @apply inset-0 m-0 h-full max-h-full w-full max-w-full p-0 md:max-w-md;
 
       &::backdrop {
-        cursor: pointer;
-        background: rgba(0, 0, 0, 0.5);
+        @apply cursor-pointer bg-background/50;
       }
 
       .drawer-body {
-        display: flex;
-        flex-shrink: 1;
-        flex-direction: column;
-        border-right: 1px solid var(--color-a6);
-        height: 100%;
-        overflow: auto;
-      }
+        @apply flex h-full shrink flex-col overflow-auto bg-background;
 
-      .drawer-content {
-        display: flex;
-        flex-direction: column;
-        padding: var(--space-6) var(--gutter);
-      }
+        .drawer-content {
+          @apply flex flex-col gap-6 px-gutter py-12;
+        }
 
-      .drawer-header,
-      .drawer-footer {
-        display: flex;
-        position: sticky;
-        flex-shrink: 0;
-        z-index: 1;
-        border-style: solid;
-        border-color: var(--color-a6);
-        background-color: var(--base-background);
-      }
+        .drawer-header,
+        .drawer-footer {
+          @apply sticky z-10 flex shrink-0 bg-background;
+        }
 
-      .drawer-header {
-        top: 0;
-        align-items: center;
-        border-bottom-width: 1px;
-        padding: 0 var(--gutter);
-        height: 56px;
+        .drawer-header {
+          @apply top-0 h-14 items-center px-gutter;
 
-        .button {
-          margin-left: auto;
+          .button {
+            @apply ml-auto;
+          }
         }
-      }
 
-      .drawer-footer {
-        bottom: 0;
-        flex-direction: column;
-        margin-top: auto;
-        border-top-width: 1px;
-        padding: var(--space-5) var(--gutter);
+        .drawer-footer {
+          @apply bottom-0 mt-auto flex-col px-gutter py-8;
+        }
       }
     }
   }