fulldev-ui 0.3.35 → 0.4.0-beta.0

package/public/favicon/browserconfig.xml

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

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

@@ -0,0 +1,17 @@
+<?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"/>
+</g>
+</svg>

package/public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

package/public/images/logo-placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="40" fill="none" viewBox="0 0 220 40"><path fill="#0E1534" d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"></path><path fill="#0E1534" d="M0 19h8.774c2.002 0 4.076-.122 5.78-1.172a10.018 10.018 0 0 0 3.274-3.274C18.878 12.85 19 10.776 19 8.774V0H6a6 6 0 0 0-6 6v13ZM46.455 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM211.711 12.104c5.591 0 8.289 3.905 8.289 8.428v8.495h-5.851V21.54c0-2.05-.748-3.742-2.893-3.742-2.145 0-2.86 1.692-2.86 3.742v7.486h-5.851V21.54c0-2.05-.715-3.742-2.861-3.742-2.145 0-2.893 1.692-2.893 3.742v7.486h-5.85v-8.495c0-4.523 2.697-8.428 8.288-8.428 3.056 0 5.266 1.204 6.274 3.189 1.072-1.985 3.413-3.19 6.208-3.19ZM180.427 23.82c1.885 0 2.698-1.725 2.698-3.776v-7.29h5.85v8.006c0 4.784-2.795 8.755-8.548 8.755-5.754 0-8.549-3.97-8.549-8.755v-8.006h5.851v7.29c0 2.05.812 3.776 2.698 3.776ZM163.275 29.547c-3.673 0-6.046-1.269-7.444-3.742l4.226-2.376c.585 1.041 1.462 1.562 2.925 1.562 1.203 0 1.755-.423 1.755-.944 0-1.985-8.581.033-8.581-6.28 0-3.06 2.6-5.533 7.021-5.533 3.868 0 5.981 1.887 6.924 3.71l-4.226 2.408c-.357-.976-1.463-1.562-2.568-1.562-.845 0-1.3.358-1.3.846 0 2.018 8.581.163 8.581 6.281 0 3.417-3.348 5.63-7.313 5.63ZM142.833 36.512h-5.851V20.858c0-4.98 3.738-8.592 8.939-8.592 5.071 0 8.939 3.873 8.939 8.592 0 5.207-3.446 8.657-8.614 8.657-1.203 0-2.405-.358-3.413-.912v7.909Zm3.088-12.497c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.124-3.088-3.124s-3.088 1.4-3.088 3.125c0 1.692 1.235 3.124 3.088 3.124ZM131.121 11.03c-1.918 0-3.51-1.595-3.51-3.515 0-1.92 1.592-3.515 3.51-3.515 1.918 0 3.511 1.595 3.511 3.515 0 1.92-1.593 3.515-3.511 3.515Zm-2.925 1.724h5.851v16.273h-5.851V12.754ZM116.97 29.515c-5.071 0-8.939-3.905-8.939-8.657 0-4.719 3.868-8.624 8.939-8.624s8.939 3.905 8.939 8.624c0 4.752-3.868 8.657-8.939 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM96.983 37c-4.03 0-6.956-1.79-8.451-4.98l4.843-2.603c.52 1.107 1.495 2.246 3.51 2.246 2.114 0 3.511-1.335 3.674-3.678-.78.684-2.016 1.204-3.868 1.204-4.519 0-8.16-3.482-8.16-8.364 0-4.718 3.869-8.559 8.94-8.559 5.201 0 8.939 3.613 8.939 8.592v6.444c0 5.858-4.064 9.698-9.427 9.698Zm.39-13.31c1.755 0 3.088-1.205 3.088-2.995 0-1.757-1.332-2.929-3.088-2.929-1.723 0-3.088 1.172-3.088 2.93 0 1.79 1.365 2.993 3.088 2.993ZM78.607 29.515c-5.071 0-8.94-3.905-8.94-8.657 0-4.719 3.869-8.624 8.94-8.624 5.07 0 8.939 3.905 8.939 8.624 0 4.752-3.869 8.657-8.94 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM59.013 7.06v16.434H68.7v5.533H58.2c-3.705 0-5.2-1.953-5.2-5.045V7.06h6.013Z"></path></svg>

package/src/blocks/Categories.astro

@@ -0,0 +1,12 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="categories"
+  structure="grid"
+  position="inset"
+  {...rest}
+/>

package/src/blocks/Colleagues.astro

@@ -0,0 +1,12 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="employees"
+  structure="grid"
+  align="center"
+  {...rest}
+/>

package/src/blocks/Contact.astro

@@ -0,0 +1,152 @@
+---
+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 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 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,
+  text,
+  tagline,
+  googleMaps,
+  buttons,
+  channels,
+  socials,
+  position,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list={'contact'}
+  structure="split"
+  {...rest}
+>
+  <Column>
+    <Tagline text={tagline} />
+    <Heading
+      level={1}
+      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>
+      )
+    }
+
+    <Form
+      action="/bedankt"
+      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"
+      />
+      <Button
+        as="button"
+        type="submit"
+        color="brand"
+        text="Verstuur bericht"
+      />
+    </Form>
+  </Column>
+
+  <!-- <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}
+  />
+</Section>
+
+<style is:global>
+  .contact {
+    .channel + .channel {
+      margin-top: var(--space-3) !important;
+    }
+  }
+</style>

package/src/blocks/Content.astro

@@ -0,0 +1,12 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="content"
+  structure="split"
+  align="center"
+  {...rest}
+/>

package/src/blocks/Cta.astro

@@ -0,0 +1,14 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="cta"
+  variant="primary"
+  align="center"
+  frame="panel"
+  size="lg"
+  {...rest}
+/>

package/src/blocks/Features.astro

@@ -0,0 +1,11 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="features"
+  structure="grid"
+  {...rest}
+/>

package/src/blocks/Footer.astro

@@ -0,0 +1,7 @@
+---
+import FooterComponent from 'fulldev-ui/components/Footer.astro'
+
+const { ...rest } = Astro.props
+---
+
+<FooterComponent {...rest} />

package/src/blocks/Header.astro

@@ -0,0 +1,7 @@
+---
+import HeaderComponent from 'fulldev-ui/components/Header.astro'
+
+const { ...rest } = Astro.props
+---
+
+<HeaderComponent {...rest} />

package/src/blocks/Hero.astro

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

package/src/blocks/Intro.astro

@@ -0,0 +1,19 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="intro"
+  structure="column"
+  size="sm"
+  level={1}
+  {...rest}
+/>
+
+<style is:global>
+  .intro {
+    border-bottom: 1px solid var(--base-6);
+  }
+</style>

package/src/blocks/Jobs.astro

@@ -0,0 +1,12 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="jobs"
+  structure="grid"
+  frame="panel"
+  {...rest}
+/>

package/src/blocks/Posts.astro

@@ -0,0 +1,11 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="posts"
+  structure="grid"
+  {...rest}
+/>

package/src/blocks/Prices.astro

@@ -0,0 +1,22 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="prices"
+  structure="grid"
+  frame="panel"
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  .prices {
+    .card {
+      .wrap {
+        margin-top: auto;
+      }
+    }
+  }
+</style>

package/src/blocks/Product.astro

@@ -0,0 +1,64 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Column from 'fulldev-ui/components/Column.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 Text from 'fulldev-ui/components/Text.astro'
+import Price from 'fulldev-ui/components/experimental/Price.astro'
+
+const {
+  heading,
+  title,
+  list,
+  price,
+  image,
+  images,
+  rating,
+  buttons,
+  text,
+  subheading,
+  button,
+  description,
+  form,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list={'product'}
+  structure="split"
+  {...rest}
+>
+  <Image src={image || images?.[0]} />
+  <Column>
+    <Heading
+      level={1}
+      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}
+    />
+  </Column>
+</Section>

package/src/blocks/Products.astro

@@ -0,0 +1,11 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="products"
+  structure="carousel"
+  {...rest}
+/>

package/src/blocks/Reviews.astro

@@ -0,0 +1,13 @@
+---
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Section
+  class:list="reviews"
+  structure="masonry"
+  align="center"
+  frame="panel"
+  {...rest}
+/>

package/src/components/{base/Avatar.astro → Avatar.astro}

@@ -1,33 +1,29 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import { Image } from 'fulldev-ui'
+import Image from 'fulldev-ui/components/Image.astro'
 
 type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
-  radius?: 'none' | 'auto' | 'full'
   variant?: 'subtle' | 'outline' | 'ghost'
+  radius?: 'none' | 'auto' | 'full'
 }
 
-const { radius = 'auto', variant = 'ghost', ...rest } = Astro.props
+const { radius = 'auto', ...rest } = Astro.props
 ---
 
 <Image
   class:list={'avatar'}
-  {variant}
   {radius}
   {...rest}
 />
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('avatar') {
+  .avatar {
     display: block;
     border: 1px solid var(--border);
+    border: 1px solid var(--base-a6);
     border-radius: var(--radius-3);
-    // width: calc(var(--text-1) + 2 * var(--space-4)) !important;
-    // height: calc(var(--text-1) + 2 * var(--space-4)) !important;
-    width: calc(4.4 * var(--space-3)) !important;
-    height: calc(4.4 * var(--space-3)) !important;
+    width: calc(2.8 * var(--space-4));
+    height: calc(2.8 * var(--space-4));
     object-fit: cover;
 
     &.radius-none {