fulldev-ui 0.4.33 → 0.5.0-beta-16

package/public/favicon/browserconfig.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/favicon/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicon/mstile-150x150.png"/>
+      <TileColor>#fff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/public/favicon/favicon.svg

@@ -0,0 +1,16 @@
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/public/favicon/manifest.webmanifest

@@ -0,0 +1,26 @@
+{
+  "name": "Fulldev UI",
+  "short_name": "Fulldev UI",
+  "description": "A Multi-platform Favicon generator for Astro Project.",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

package/public/favicon/safari-pinned-tab.svg

@@ -1,17 +1,16 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="525.000000pt" height="525.000000pt" viewBox="0 0 525.000000 525.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,525.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M81 5237 c-19 -7 -44 -25 -55 -40 l-21 -28 0 -2543 c0 -2445 1 -2543
-18 -2570 40 -60 -141 -56 2599 -55 1920 0 2521 3 2547 12 19 7 44 25 55 40
-l21 28 0 2543 c0 2445 -1 2543 -18 2570 -40 60 141 56 -2599 55 -1920 0 -2521
--3 -2547 -12z"/>
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
 </g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/public/favicon/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0",
+  "api_version": 1,
+  "layout": {
+    "logo": "/favicon/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

package/src/blocks/Article.astro

@@ -0,0 +1,40 @@
+---
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+
+const { toc = 'Op deze pagina', render } = Astro.props
+const { Content } = (render && (await render())) || {}
+---
+
+<Section class:list="article">
+  <Prose>
+    {Content && <Content />}
+    <slot />
+  </Prose>
+  <Toc
+    {render}
+    heading={toc}
+  />
+</Section>
+
+<style is:global lang="scss">
+  .article {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+    flex-direction: row;
+    align-items: start;
+    height: 100%;
+
+    &:first-child {
+      padding-top: var(--space-6);
+    }
+
+    .prose {
+      margin-right: auto;
+      margin-left: auto;
+      max-width: 768px;
+    }
+  }
+</style>

package/src/blocks/Banner.astro

@@ -0,0 +1,48 @@
+---
+import Element from 'fulldev-ui/components/Element.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+
+type Props = {
+  color?: 'base' | 'brand' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+}
+
+const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list={'banner'}
+  as="header"
+  {size}
+  {color}
+  {...rest}
+>
+  <Text text={text} />
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .banner {
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--color-9);
+      padding: 0 var(--gutter);
+      width: 100%;
+      min-height: var(--banner-height);
+      overflow: hidden;
+      text-align: center;
+
+      .text {
+        color: var(--color-contrast);
+      }
+
+      &,
+      & ~ * {
+        --banner-height: 32px;
+      }
+    }
+  }
+</style>

package/src/blocks/Colleagues.astro

@@ -5,8 +5,9 @@ const { ...rest } = Astro.props
 ---
 
 <Section
-  class:list="employees"
+  class:list="colleagues"
   structure="grid"
   align="center"
+  position="inset"
   {...rest}
 />

package/src/blocks/Contact.astro

@@ -1,154 +1,116 @@
 ---
 import Button from 'fulldev-ui/components/Button.astro'
-import Column from 'fulldev-ui/components/Column.astro'
-import Channel from 'fulldev-ui/components/experimental/Channel.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Form from 'fulldev-ui/components/experimental/Form.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Input from 'fulldev-ui/components/Input.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Section from 'fulldev-ui/components/Section.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Textarea from 'fulldev-ui/components/Textarea.astro'
 
 const {
   heading,
+  form,
   text,
   tagline,
   googleMaps,
   buttons,
-  channels,
   socials,
   position,
   image,
+  channels,
+  level = 1,
   ...rest
 } = Astro.props
 ---
 
 <Section
-  class:list={'contact'}
+  class:list="contact"
   structure="split"
   {...rest}
 >
-  <Column>
-    <Tagline text={tagline} />
+  <Element class:list="column">
+    <Tagline
+      color="brand"
+      text={tagline}
+    />
     <Heading
-      level={1}
+      size={'sm'}
+      level={level}
       text={heading}
     />
     <Text text={text} />
-    <Row>
-      {buttons?.map((button: any) => <Button {...button} />)}
-    </Row>
-    <Column>
-      <Channel
-        if={channels?.phone}
-        icon="phone"
-        heading="Telefoon"
-        text={channels?.phone}
-        href={`tel:${channels?.phone}`}
-      />
-      <Channel
-        if={channels?.email}
-        icon="mail"
-        heading="Email"
-        text={channels?.email}
-        href={`mailto:${channels?.email}`}
-      />
-      {
-        channels?.address && (
-          <Channel
-            if={channels?.address}
-            icon="pin"
-            heading="Adres"
-            text={channels?.address}
-          />
-        )
-      }
-    </Column>
-    {
-      socials && (
-        <Row size="sm">
-          {socials?.facebook && (
-            <Button
-              href={socials?.facebook}
-              variant="secondary"
-              icon="brand-facebook"
-            />
-          )}
-          {socials?.instagram && (
-            <Button
-              href={socials?.instagram}
-              variant="secondary"
-              href={socials?.instagram}
-              icon="brand-instagram"
-            />
-          )}
-        </Row>
-      )
-    }
-
+    <Buttons {buttons} />
+    <Channels {channels} />
+    <Socials {socials} />
     <Form
-      action="/bedankt"
+      action="/thank-you"
       method="POST"
     >
-      <Input
-        label="Naam"
-        id="Naam"
-        name="Naam"
-        type="text"
-        required
-      />
-      <Input
-        label="Email"
-        id="Email"
-        name="Email"
-        type="email"
-        required
-      />
-      <Input
-        label="Telefoon"
-        id="Telefoon"
-        name="Telefoon"
-        type="tel"
-        required
-      />
-      <Textarea
-        label="Bericht"
-        id="Bericht"
-        name="Bericht"
-      />
+      {
+        form.fields.map((field: any) => {
+          if (field.type === 'textarea') {
+            return (
+              <Textarea
+                label={field.label}
+                id={field.name}
+                name={field.name}
+                required={field.required}
+              />
+            )
+          }
+          return (
+            <Input
+              label={field.label}
+              id={field.name}
+              name={field.name}
+              type={field.type}
+              required={field.required}
+            />
+          )
+        })
+      }
       <Button
-        as="button"
         type="submit"
         color="brand"
-        text="Verstuur bericht"
+        variant="primary"
+        text={form.button}
       />
     </Form>
-  </Column>
+  </Element>
 
-  <!-- <iframe
-    src={googleMaps}
-    width="100%"
-    height="450"
-    style="border:0; margin-top: var(--space-6);"
-    allowfullscreen="false"
-    loading="lazy"
-    referrerpolicy="no-referrer-when-downgrade"
-  ></iframe> -->
   <Image
     {position}
-    src={image}
+    {...image}
   />
 </Section>
 
 <style is:global lang="scss">
   @layer fulldev {
     .contact {
+      .column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      > .column {
+        gap: var(--space-5);
+      }
+
       .channel + .channel {
         margin-top: var(--space-3) !important;
       }
+
+      .socials {
+        display: flex;
+        gap: var(--space-2);
+      }
     }
   }
 </style>

package/src/blocks/Cta.astro

@@ -8,7 +8,8 @@ const { ...rest } = Astro.props
   class:list="cta"
   variant="primary"
   align="center"
-  frame="panel"
   size="lg"
+  color="brand"
+  panel
   {...rest}
 />

package/src/blocks/Excerpt.astro

@@ -0,0 +1,14 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  level={1}
+  size="lg"
+  align="center"
+  variant="primary"
+  color="brand"
+  {...rest}
+/>

package/src/blocks/Hero.astro

@@ -6,9 +6,8 @@ const { ...rest } = Astro.props
 
 <Section
   class:list="hero"
-  structure="column"
-  size="lg"
   level={1}
+  size="lg"
   align="center"
   variant="primary"
   color="brand"

package/src/blocks/Intro.astro

@@ -1,7 +1,7 @@
 ---
 import Section from 'fulldev-ui/components/Section.astro'
 
-const { image, ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Section
@@ -9,6 +9,7 @@ const { image, ...rest } = Astro.props
   structure="column"
   size="sm"
   level={1}
+  position="background"
   {...rest}
 />
 
@@ -16,6 +17,8 @@ const { image, ...rest } = Astro.props
   @layer fulldev {
     .intro {
       border-bottom: 1px solid var(--base-6);
+      padding-top: var(--space-7);
+      padding-bottom: var(--space-7);
     }
   }
 </style>

package/src/blocks/Jobs.astro

@@ -7,6 +7,6 @@ const { ...rest } = Astro.props
 <Section
   class:list="jobs"
   structure="grid"
-  frame="panel"
+  panel
   {...rest}
 />

package/src/blocks/Prices.astro

@@ -7,7 +7,7 @@ const { ...rest } = Astro.props
 <Section
   class:list="prices"
   structure="stack"
-  frame="panel"
+  panel
   {...rest}
 />
 

package/src/blocks/Product.astro

@@ -1,13 +1,13 @@
 ---
-import Button from 'fulldev-ui/components/Button.astro'
-import Column from 'fulldev-ui/components/Column.astro'
+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 Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Row from 'fulldev-ui/components/Row.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 Price from 'fulldev-ui/components/experimental/Price.astro'
 
 const {
   heading,
@@ -20,45 +20,93 @@ const {
   buttons,
   text,
   subheading,
+  variants,
   button,
   description,
   form,
+  gallery = 'horizontal',
   ...rest
 } = Astro.props
+
+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
-  class:list={'product'}
+  class:list="product"
   structure="split"
   {...rest}
 >
-  <Image src={image || images?.[0]} />
-  <Column>
+  {
+    images && images.length > 1 ? (
+      <Gallery
+        {images}
+        direction={gallery}
+      />
+    ) : (
+      <Image {...(image || images?.[0])} />
+    )
+  }
+  <Element class:list="column">
     <Heading
-      level={1}
+      level={2}
       text={heading || title}
     />
     <Text
       style={{ maxWidth: '420px' }}
       text={text || description}
     />
-    <Price value={price} />
-    <Row>
-      <Input
-        value={1}
-        name={'quantity'}
-        style={{ width: 'var(--space-6)' }}
-        type="number"
-      />
-      <Button
-        color="brand"
-        text={form?.submit}
-      />
-    </Row>
-    <Button
-      style={{ marginTop: 'var(--space-3)', width: '100%', maxWidth: '400px' }}
-      variant="soft"
-      {...button}
+    <List
+      items={list}
+      style={{ marginTop: 'var(--space-5)' }}
+    />
+    <CartForm
+      image={gotImage?.src}
+      {title}
+      {price}
+      {slug}
+      {variants}
     />
-  </Column>
+  </Element>
 </Section>
+
+<style is:global lang="scss">
+  .product {
+    padding-top: 0px;
+
+    @media (min-width: 1024px) {
+      padding-top: var(--space-6);
+    }
+
+    .column {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-5);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: var(--space-5);
+    }
+
+    @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);
+        }
+      }
+    }
+  }
+</style>