fulldev-ui 0.4.29 → 0.5.0-beta.1

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,21 @@
+---
+import { getEntry } from 'astro:content'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const currentEntry = await getEntry('pages', slug)
+const render = currentEntry && (await currentEntry.render())
+const { Content } = render || {}
+---
+
+<Section
+  style={{ '--screen': '768px' }}
+  {...rest}
+>
+  <Prose id="prose">
+    {Content && <Content />}
+  </Prose>
+</Section>

package/src/blocks/Banner.astro

@@ -0,0 +1,47 @@
+---
+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%;
+      height: var(--banner-height);
+      overflow: hidden;
+
+      .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,139 @@
 ---
 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'
 
+// interface Channel {
+//   type: 'tel' | 'email' | 'address'
+//   text: string
+//   heading?: string
+//   icon?: string
+//   href?: string
+// }
+
+// interface FormField {
+//   type: 'text' | 'email' | 'tel' | 'textarea'
+//   name: string
+//   label: string
+//   required?: boolean
+// }
+
+// interface Form {
+//   fields: FormField[]
+//   button: string
+// }
+
+// type Props<As extends HTMLTag = 'section'> = ComponentProps<
+//   typeof Section<As>
+// > & {
+//   form: Form
+//   googleMaps?: string
+//   socials?: any
+//   channels: Channel[]
+// }
+
 const {
   heading,
+  form,
   text,
   tagline,
   googleMaps,
   buttons,
-  channels,
   socials,
   position,
   image,
+  channels,
+  level = 2,
   ...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}
+      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"
+        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;
+      }
+
       .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/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

@@ -8,7 +8,7 @@ const { image, ...rest } = Astro.props
   class:list="intro"
   structure="column"
   size="sm"
-  level={1}
+  level={2}
   {...rest}
 />
 

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,12 @@
 ---
 import Button from 'fulldev-ui/components/Button.astro'
-import Column from 'fulldev-ui/components/Column.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 Input from 'fulldev-ui/components/Input.astro'
-import Row from 'fulldev-ui/components/Row.astro'
+import Price from 'fulldev-ui/components/Price.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,
@@ -28,12 +27,12 @@ const {
 ---
 
 <Section
-  class:list={'product'}
+  class:list="product"
   structure="split"
   {...rest}
 >
-  <Image src={image || images?.[0]} />
-  <Column>
+  <Image {...image || images?.[0]} />
+  <Element class:list="column">
     <Heading
       level={1}
       text={heading || title}
@@ -43,7 +42,7 @@ const {
       text={text || description}
     />
     <Price value={price} />
-    <Row>
+    <Element class:list="row">
       <Input
         value={1}
         name={'quantity'}
@@ -54,11 +53,25 @@ const {
         color="brand"
         text={form?.submit}
       />
-    </Row>
+    </Element>
     <Button
       style={{ marginTop: 'var(--space-3)', width: '100%', maxWidth: '400px' }}
-      variant="soft"
+      variant="secondary"
       {...button}
     />
-  </Column>
+  </Element>
 </Section>
+
+<style is:global lang="scss">
+  .product {
+    .column {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .row {
+      display: flex;
+    }
+  }
+</style>

package/src/blocks/Reviews.astro

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

package/src/components/Avatar.astro

@@ -2,17 +2,13 @@
 import type { ComponentProps } from 'astro/types'
 import Image from 'fulldev-ui/components/Image.astro'
 
-type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
-  variant?: 'subtle' | 'outline' | 'ghost'
-  radius?: 'none' | 'auto' | 'full'
-}
+interface Props extends ComponentProps<typeof Image> {}
 
-const { radius = 'auto', ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Image
   class:list={'avatar'}
-  {radius}
   {...rest}
 />
 
@@ -20,24 +16,11 @@ const { radius = 'auto', ...rest } = Astro.props
   @layer fulldev {
     .avatar {
       display: block;
-      border: 1px solid var(--border);
       border: 1px solid var(--base-a6);
-      border-radius: var(--radius-3);
+      border-radius: 999px;
       width: calc(2.8 * var(--space-4));
       height: calc(2.8 * var(--space-4));
       object-fit: cover;
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
-      }
     }
   }
 </style>