fulldev-ui 0.4.28 → 0.5.0-beta.0

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>

package/src/components/Badge.astro

@@ -1,82 +1,45 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import Button from './Button.astro'
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  radius?: 'none' | 'auto' | 'full'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
-  icon?: string
-}
+interface Props extends ComponentProps<typeof Button> {}
 
 const {
+  variant = 'tertiary',
+  color = 'base',
   href,
-  html,
   text,
-  as = href ? 'a' : 'div',
-  radius = 'full',
   icon,
   ...rest
 } = Astro.props
 ---
 
-<Root
+<Button
   class:list="badge"
-  {radius}
-  {as}
+  {variant}
   {href}
+  {color}
   {...rest}
 >
-  <slot>
-    <Fragment set:text={text} />
-    <Fragment set:html={html} />
-  </slot>
+  <slot />
+  <Fragment set:html={text} />
   <Icon name={icon} />
-</Root>
+</Button>
 
 <style is:global lang="scss">
   @layer fulldev {
-    .badge {
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      vertical-align: top;
+    .button.badge {
       gap: var(--space-2);
-      transition: var(--transition);
-      border: 1px solid var(--color-a6);
+      transition: all 0.15s ease;
+      border: 1px solid var(--color-a7);
+      border-radius: 999px;
       padding: 0 var(--space-3);
       height: calc(var(--text-1) + 2 * var(--space-2));
-      color: var(--color-11);
-      font-weight: 500;
       font-size: var(--text-1);
-      line-height: 1;
-      text-align: center;
-      text-decoration: none;
-      white-space: nowrap;
 
-      &[href] {
-        border-color: var(--color-7);
-
-        &:hover {
-          border-color: var(--color-8);
-        }
-      }
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
+      &:hover {
+        border-color: var(--color-a8);
       }
     }
   }

package/src/components/Badges.astro

@@ -0,0 +1,50 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Badge from './Badge.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  badges?: ComponentProps<typeof Badge>[] | undefined
+}
+
+const { variant = 'secondary', badges, ...rest } = Astro.props
+
+const buttonVariant = (i: number) => {
+  if (variant === 'primary' && i === 0) return 'primary'
+  else if (variant === 'primary' && i === 1) return 'secondary'
+  else if (variant === 'primary' && i > 1) return 'tertiary'
+  else if (variant === 'secondary' && i === 0) return 'secondary'
+  else if (variant === 'secondary' && i > 0) return 'tertiary'
+  else if (variant === 'tertiary') return 'tertiary'
+  else return 'tertiary'
+}
+---
+
+<Element
+  class:list="badges"
+  {...rest}
+>
+  {
+    badges?.map((badge, i) => (
+      <Badge
+        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        {...badge}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .badges {
+      display: inline-flex;
+      flex-wrap: wrap;
+      justify-content: stretch;
+      gap: var(--space-2);
+      width: auto;
+    }
+  }
+</style>