fulldev-ui 0.5.0-beta.0 → 0.5.0-beta.10

package/src/components/CartSummary.astro

@@ -0,0 +1,147 @@
+---
+import Button from './Button.astro'
+import Element from './Element.astro'
+import Price from './Price.astro'
+import Text from './Text.astro'
+
+interface Props {}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  size="md"
+  class="cart-summary"
+>
+  <div
+    class="row"
+    {...rest}
+  >
+    <Text
+      class:list="total"
+      text="Totaal"
+      contrast
+    />
+    <Price value={10} />
+  </div>
+  <Text
+    class:list="shipping"
+    text="Verzendkosten worden berekend bij het afrekenen."
+  />
+  <Button
+    class:list="checkout-button"
+    variant="primary"
+    color="brand"
+    text="Afrekenen"
+  />
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cart-summary {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+
+      .price,
+      .total {
+        font-size: var(--text-4);
+      }
+
+      .row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .shipping {
+        font-size: var(--text-1);
+      }
+    }
+  }
+</style>
+
+<script>
+  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')
+    if (price)
+      price.textContent = formatPrice(
+        items.reduce(
+          (acc: number, item: { price: number }) => acc + item.price,
+          0
+        )
+      )
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    setPrice($cart.get())
+
+    $cart.subscribe((items: any) => {
+      setPrice(items)
+    })
+
+    const button = document.querySelector('.cart-summary .checkout-button')
+
+    button?.addEventListener('click', async () => {
+      const items = $cart.get()
+
+      const checkoutConfig = {
+        success_url: `${import.meta.env.PUBLIC_SITE_URL}/checkout`,
+        mode: 'payment',
+        customer_creation: 'always',
+        shipping_address_collection: {
+          allowed_countries: ['NL'],
+        },
+        phone_number_collection: {
+          enabled: true,
+        },
+      }
+
+      try {
+        const lineItems = items.map((item: any) => ({
+          price_data: {
+            currency: 'eur',
+            product: item.id,
+          },
+          quantity: 1,
+        }))
+
+        // @ts-ignore
+        const checkoutSession = await stripe.checkout.sessions.create({
+          line_items: lineItems,
+          ...checkoutConfig,
+        })
+
+        checkoutSession.url && window.location.replace(checkoutSession.url)
+      } catch (error) {
+        console.error(error)
+
+        const lineItems = items.map((item: any) => ({
+          quantity: 1,
+          price_data: {
+            currency: 'eur',
+            product_data: {
+              name: item.name,
+              images: [window],
+            },
+            unit_amount: Math.round(item.price * 100),
+          },
+        }))
+
+        // @ts-ignore
+        const checkoutSession = await stripe.checkout.sessions.create({
+          line_items: lineItems,
+          ...checkoutConfig,
+        })
+
+        checkoutSession.url && window.location.replace(checkoutSession.url)
+      }
+    })
+  })
+</script>

package/src/components/Drawer.astro

@@ -1,95 +1,171 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
 import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Buttons from './Buttons.astro'
+import Heading from './Heading.astro'
 
-interface Props extends Omit<ComponentProps<typeof Card>, 'position'> {
-  label?: string | undefined
-  icon?: string | undefined
-  position?: 'left' | 'right' | undefined
-  panel?: boolean | undefined
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  text?: ComponentProps<typeof Button>['text']
+  icon?: ComponentProps<typeof Button>['icon']
+  heading?: ComponentProps<typeof Heading>['text']
+  logo?: ComponentProps<typeof Logo> | undefined
+  company?: ComponentProps<typeof Logo>['company']
+  menu?: ComponentProps<typeof Menu>['groups']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
 }
 
 const {
   id = 'drawer',
-  position = 'left',
-  panel,
-  label,
-  icon,
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  buttons,
+  heading,
+  logo,
+  company,
+  menu,
+  if: ifProp,
   ...rest
 } = Astro.props
+
+const buttonsGroup = { heading: '', buttons: buttons }
+const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
-  class:list="drawer-button"
+  if={ifProp}
   variant="secondary"
-  id={`${id}-button`}
-  text={label}
-  icon={icon}
+  class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
 />
 
 <Element
+  if={ifProp}
+  onclick={`event.target === this && this.close()`}
+  class:list="drawer"
   as="dialog"
-  class="drawer"
   {id}
-  {position}
-  onclick={`event.target === this && this.close()`}
+  {text}
+  {icon}
+  {...rest}
 >
-  <Element
-    class:list={[panel, `position-${position}`]}
-    {...rest}
-  >
-    <slot />
+  <Element class:list="drawer-body">
+    <Element
+      class:list="drawer-header"
+      as="header"
+    >
+      <Logo
+        {company}
+        {...logo}
+      />
+      <Heading
+        level={4}
+        text={heading}
+      />
+      <Button
+        variant="secondary"
+        icon="x"
+        onclick={`document.getElementById('${id}').close()`}
+      />
+      <slot name="header" />
+    </Element>
+    <Element class:list="drawer-content">
+      <Menu groups={mergedMenu} />
+      <slot />
+    </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    body:has(dialog[open]) {
+      overflow: hidden;
+
+      @media (min-width: 768px) {
+        overflow: auto;
+      }
+    }
+
     .drawer {
-      flex-shrink: 0;
-      align-items: stretch;
-      box-sizing: border-box;
-      margin: 0 !important;
-      outline: 0;
-      border: 0;
-      background: var(--color-2);
+      top: 0;
+      bottom: 0;
+      margin: 0;
       padding: 0;
-      padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
-      min-width: 260px;
-      max-width: 360px;
-      height: 100vh;
-      max-height: 100vh;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+
+      @media (min-width: 768px) {
+        width: 440px;
+      }
 
       &::backdrop {
+        cursor: pointer;
         background: rgba(0, 0, 0, 0.5);
       }
 
-      &.position-left {
-        margin-right: 0;
+      .drawer-body {
+        display: flex;
+        flex-shrink: 1;
+        flex-direction: column;
+        border-right: 1px solid var(--color-a6);
+        height: 100%;
+        overflow: auto;
+      }
+
+      .drawer-content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--space-6) var(--gutter);
       }
 
-      &.position-right {
-        right: 0;
+      .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);
       }
 
-      .box {
-        padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
-        min-width: calc(var(--space-7) * 14);
-        height: 100vh;
-        overflow-x: hidden;
-        overflow-y: auto;
+      .drawer-header {
+        top: 0;
+        align-items: center;
+        border-bottom-width: 1px;
+        padding: 0 var(--gutter);
+        height: 56px;
 
-        &.position-left {
-          border-right: 1px solid var(--color-a6);
-          padding-left: var(--gutter);
+        .button {
+          margin-left: auto;
         }
+      }
 
-        &.position-right {
-          border-left: 1px solid var(--color-a6);
-          padding-right: var(--gutter);
-        }
+      .drawer-footer {
+        bottom: 0;
+        flex-direction: column;
+        margin-top: auto;
+        border-top-width: 1px;
+        padding: var(--space-5) var(--gutter);
       }
     }
   }

package/src/components/Footer.astro

@@ -53,9 +53,8 @@ const {
 >
   <Element class:list="column">
     <Logo
-      id={logo}
-      src={logo}
       {company}
+      {...typeof logo === 'string' ? { src: logo } : logo}
     />
     <Text
       color="base"
@@ -110,12 +109,12 @@ const {
       align-items: flex-start;
       gap: var(--space-6);
       margin-top: auto;
+      margin-top: auto;
       border-top-width: 1px;
       border-color: var(--base-a6);
       background-color: var(--base-2);
       padding: var(--space-7) var(--gutter);
       width: 100%;
-      overflow: auto;
 
       @media (min-width: 1024px) {
         grid-auto-columns: 1fr;
@@ -132,6 +131,10 @@ const {
         flex-direction: column;
       }
 
+      > .column {
+        gap: var(--space-4);
+      }
+
       .socials {
         display: flex;
       }

package/src/components/Form.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 Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'form'> {
+  fields: (
+    | ComponentProps<typeof Input>
+    | ComponentProps<typeof Select>
+    | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+  )[]
+  submit?: ComponentProps<typeof Button>['text']
+}
+
+const { fields, submit, ...rest } = Astro.props
+---
+
+<Element
+  class:list="form"
+  as="form"
+  {...rest}
+>
+  {
+    fields.map((field) => {
+      if ('options' in field) return <Select {...field} />
+      if ('type' in field && field.type === 'textarea')
+        return <Textarea {...field} />
+      return <Input {...(field as any)} />
+    })
+  }
+  <Button
+    type="submit"
+    text={submit}
+  />
+</Element>
+
+<style is:global lang="scss">
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    width: 100%;
+    max-width: calc(var(--space-4) * 44);
+  }
+</style>

package/src/components/Header.astro

@@ -1,21 +1,24 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-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 Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Search from 'fulldev-ui/components/Search.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Cart from './Cart.astro'
+import Drawer from './Drawer.astro'
+import type Menu from './Menu.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>['src']
+  logo?: ComponentProps<typeof Logo>
   company?: ComponentProps<typeof Logo>['company']
   buttons?: ComponentProps<typeof Buttons>['buttons']
+  menu?: ComponentProps<typeof Menu>['groups']
   panel?: boolean | undefined
   search?: boolean | undefined
   open?: boolean | undefined
   themeselect?: boolean | undefined
+  cart?: string | undefined
 }
 
 const {
@@ -26,7 +29,9 @@ const {
   buttons,
   search,
   panel,
+  menu,
   themeselect,
+  cart,
   ...rest
 } = Astro.props
 ---
@@ -40,21 +45,25 @@ const {
   {...rest}
 >
   <Logo
-    id={logo}
-    src={logo}
     {company}
+    {...typeof logo === 'string' ? { src: logo } : logo}
   />
   <Buttons
     {buttons}
     variant="link"
   />
-  {search && <Search />}
   {themeselect && <ThemeSelect />}
-  <Button
-    class="menu-button"
-    variant="tertiary"
+  <Drawer
     icon="menu-2"
-    for="sidebar"
+    id="menu"
+    {logo}
+    {company}
+    {buttons}
+    {menu}
+  />
+  <Cart
+    if={cart}
+    heading={cart}
   />
 </Element>
 
@@ -119,10 +128,6 @@ const {
       }
 
       .menu-button {
-        .icon {
-          transform: scale(1.56);
-        }
-
         @media (min-width: 1024px) {
           display: none;
         }

package/src/components/Image.astro

@@ -42,7 +42,6 @@ const image = images[src as keyof typeof images]
   image && (
     <AstroImage
       class:list={['image', position && `position-${position}`]}
-      style={{ '--screen': '100vw' }}
       alt={alt || getAltBySrc()}
       src={image ? image() : src}
       width={width}

package/src/components/Input.astro

@@ -17,6 +17,7 @@ const {
   disabled,
   required,
   placeholder,
+  readonly,
   name = placeholder,
   type = 'text',
   ...rest
@@ -41,6 +42,7 @@ const {
     {value}
     {disabled}
     {required}
+    {readonly}
   />
   <Icon name={icon} />
 </Element>
@@ -97,6 +99,10 @@ const {
           cursor: not-allowed;
           pointer-events: none;
         }
+
+        &[readonly] {
+          pointer-events: none;
+        }
       }
     }
   }

package/src/components/Menu.astro

@@ -0,0 +1,56 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  groups?:
+    | {
+        heading?: ComponentProps<typeof Heading>['text']
+        buttons?: ComponentProps<typeof Button>[]
+      }[]
+    | undefined
+}
+
+const { groups, ...rest } = Astro.props
+---
+
+<Element
+  class:list="menu"
+  {...rest}
+>
+  {
+    groups?.map(({ heading, buttons }) => (
+      <Element class:list="menu-group">
+        <Heading
+          level={6}
+          text={heading}
+        />
+        {buttons?.map((button) => (
+          <Button
+            variant="link"
+            {...button}
+          />
+        ))}
+      </Element>
+    ))
+  }
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-5);
+
+      .menu-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+      }
+    }
+  }
+</style>

package/src/components/Price.astro

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import { formatPrice } from 'fulldev-ui/utils/cart'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
@@ -13,17 +14,12 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
 const { value, ...rest } = Astro.props
 ---
 
-{
-  value && (
-    <Element
-      if={value}
-      class:list="price"
-      {...rest}
-    >
-      €{value?.toFixed(2).replace('.', ',')}
-    </Element>
-  )
-}
+<Element
+  class:list="price"
+  {...rest}
+>
+  {value && <Fragment set:html={formatPrice(value)} />}
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

package/src/components/Search.astro

@@ -1,5 +1,4 @@
 ---
-import Pagefind from 'astro-pagefind/components/Search'
 import Dialog from 'fulldev-ui/components/Dialog.astro'
 
 const { variant = 'secondary', ...rest } = Astro.props
@@ -11,9 +10,7 @@ const { variant = 'secondary', ...rest } = Astro.props
   icon="search"
   {variant}
   {...rest}
->
-  <Pagefind uiOptions={{ showImages: false }} />
-</Dialog>
+/>
 
 <style is:global lang="scss">
   :root {

package/src/components/Section.astro

@@ -148,11 +148,12 @@ const Component =
       --inset-right: var(--gutter);
       --inset-bottom: var(--spacer);
 
+      display: flex;
       position: relative;
+      flex-direction: column;
       align-items: flex-start;
       gap: var(--space-6) var(--space-7);
       padding: var(--spacer) var(--gutter);
-      overflow: auto;
 
       .segment {
         display: flex;