fulldev-ui 0.5.0-beta.9 → 0.6.0-beta.0

package/public/favicon/manifest.webmanifest

@@ -1,10 +1,14 @@
 {
   "name": "Fulldev UI",
   "short_name": "Fulldev UI",
-  "description": "A Multi-platform Favicon generator for Astro Project.",
+  "description": "Fulldev UI",
   "dir": "auto",
-  "lang": "en-US",
+  "lang": "en-GB",
   "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "standalone"
+  ],
   "orientation": "any",
   "start_url": "/?homescreen=1",
   "background_color": "#fff",
@@ -20,7 +24,7 @@
       "src": "/favicon/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable"
     }
   ]
 }

package/src/blocks/Banner.astro

@@ -1,43 +1,30 @@
 ---
+import type { ComponentProps } from 'astro/types'
 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
+  text?: ComponentProps<typeof Text>['text']
 }
 
-const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
+const { size = 'sm', text, ...rest } = Astro.props
 ---
 
 <Element
   class:list={'banner'}
   as="header"
   {size}
-  {color}
   {...rest}
 >
   <Text text={text} />
 </Element>
 
-<style lang="scss" is:global>
+<style 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);
-      }
+      @apply relative z-50 flex w-full items-center justify-center overflow-hidden bg-primary px-gutter text-center text-sm text-primary-foreground;
+      height: var(--banner-height);
 
       &,
       & ~ * {

package/src/blocks/Colleagues.astro

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

package/src/blocks/Contact.astro

@@ -1,24 +1,23 @@
 ---
-import Button from 'fulldev-ui/components/Button.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 Form from 'fulldev-ui/components/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 Section from 'fulldev-ui/components/Section.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.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 {
+  as = 'section',
+  size = 'md',
+  variant = 1,
   heading,
   form,
   text,
   tagline,
   googleMaps,
+  paragraph,
   buttons,
   socials,
   position,
@@ -29,87 +28,89 @@ const {
 } = Astro.props
 ---
 
-<Section
+<Element
   class:list="contact"
-  structure="split"
+  {as}
+  {size}
+  {variant}
   {...rest}
 >
-  <Element class:list="column">
-    <Tagline
-      color="brand"
-      text={tagline}
-    />
-    <Heading
-      size={'sm'}
-      level={level}
-      text={heading}
-    />
-    <Text text={text} />
-    <Buttons {buttons} />
-    <Channels {channels} />
-    <Socials {socials} />
-    <Form
-      action="/thank-you"
-      method="POST"
-    >
-      {
-        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
-        type="submit"
-        color="brand"
-        variant="primary"
-        text={form.button}
+  <Element class:list="contact-container">
+    <Element class:list="contact-segment">
+      <Element class:list="contact-content">
+        <Tagline text={tagline} />
+        <Heading
+          size={'sm'}
+          level={level}
+          text={heading}
+        />
+        <Paragraph text={paragraph} />
+      </Element>
+      <Channels {channels} />
+      <Socials {socials} />
+      <Form
+        action="/thank-you"
+        method="POST"
+        {...form}
       />
-    </Form>
+    </Element>
+    <Image
+      class:list="contact-image"
+      {position}
+      {...image}
+    />
   </Element>
+</Element>
 
-  <Image
-    {position}
-    {...image}
-  />
-</Section>
-
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .contact {
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
+      @apply relative w-full;
+
+      .contact-container {
+        @apply mx-auto flex h-full w-full flex-col;
+      }
+
+      .contact-segment {
+        @apply z-10 flex flex-col items-start gap-8;
       }
 
-      > .column {
-        gap: var(--space-5);
+      .contact-content {
+        @apply flex max-w-screen-md flex-col gap-6;
       }
 
-      .channel + .channel {
-        margin-top: var(--space-3) !important;
+      &.dark {
+        @apply bg-background;
       }
 
-      .socials {
-        display: flex;
-        gap: var(--space-2);
+      /* Narrow left aligned */
+      &.variant-1 {
+        .contact-container {
+          @apply max-w-screen-md px-gutter py-8;
+        }
+
+        .contact-segment {
+          @apply gap-8 py-16;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+
+      /* Split */
+      &.variant-2 {
+        .contact-container {
+          @apply container gap-x-gutter gap-y-16 py-20 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .contact-segment {
+          @apply max-w-xl;
+        }
+
+        .contact-image {
+          @apply rounded-lg;
+        }
       }
     }
   }

package/src/blocks/Content.astro

@@ -1,12 +1,130 @@
 ---
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Buttons from 'fulldev-ui/components/Buttons.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 Lead from 'fulldev-ui/components/Lead.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'section'> {
+  rating?: ComponentProps<typeof Rating> | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: ComponentProps<typeof Tagline>['text']
+  heading?: ComponentProps<typeof Heading>['text']
+  lead?: ComponentProps<typeof Lead>['text']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  image?: ComponentProps<typeof Image>['id']
+  level?: ComponentProps<typeof Heading>['level']
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+}
+
+const {
+  as = 'section',
+  size = 'md',
+  variant = 1,
+  level = 2,
+  rating,
+  tagline,
+  badge,
+  heading,
+  lead,
+  paragraph,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
-<Section
+<Element
   class:list="content"
-  structure="split"
-  align="center"
+  {as}
+  {size}
+  {variant}
   {...rest}
-/>
+>
+  <Element class:list="content-container">
+    <Element class:list="content-segment">
+      <Element class:list="content-content">
+        <Rating
+          {size}
+          {...rating}
+        />
+        <Tagline
+          text={tagline}
+          {size}
+        />
+        <Badge
+          {size}
+          {...badge}
+        />
+        <Heading
+          text={heading}
+          {level}
+          {size}
+        />
+        <Lead
+          text={lead}
+          {size}
+        />
+        <Paragraph
+          text={paragraph}
+          {size}
+        />
+        <slot name="content" />
+      </Element>
+      <Buttons
+        variant="secondary"
+        {size}
+        {buttons}
+      />
+      <slot name="segment" />
+    </Element>
+    <Image
+      class:list="content-image"
+      {...image}
+    />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .content {
+      @apply relative w-full;
+
+      .content-container {
+        @apply flex h-full flex-col;
+      }
+
+      .content-segment {
+        @apply z-10 flex flex-col items-start gap-8;
+      }
+
+      .content-content {
+        @apply flex max-w-screen-md flex-col gap-6;
+      }
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      /* Split */
+      &.variant-1 {
+        .content-container {
+          @apply container py-16 lg:grid lg:grid-cols-2 lg:items-center;
+        }
+
+        .content-image {
+          @apply rounded-lg;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Cta.astro

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

package/src/blocks/Excerpt.astro

@@ -7,8 +7,6 @@ const { ...rest } = Astro.props
 <Section
   level={1}
   size="lg"
-  align="center"
   variant="primary"
-  color="brand"
   {...rest}
 />

package/src/blocks/Footer.astro

@@ -1,7 +1,111 @@
 ---
-import FooterComponent from 'fulldev-ui/components/Footer.astro'
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-const { ...rest } = Astro.props
+interface Props extends GlobalProps, HTMLAttributes<'footer'> {
+  as?: HTMLTag
+  variant?: 1 | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  logo?: ComponentProps<typeof Logo>['src']
+  company?: ComponentProps<typeof Logo>['company']
+  paragraph?: ComponentProps<typeof Paragraph>['text']
+  socials?: ComponentProps<typeof Socials>['socials']
+  channels?: ComponentProps<typeof Channels>['channels']
+  hours?: any
+  menu?: ComponentProps<typeof Menu>['groups']
+  html?: any
+}
+
+const {
+  as = 'footer',
+  size = 'sm',
+  variant = 1,
+  logo,
+  company,
+  paragraph,
+  socials,
+  channels,
+  hours,
+  menu,
+  html,
+  ...rest
+} = Astro.props
 ---
 
-<FooterComponent {...rest} />
+<Element
+  class:list="footer"
+  {as}
+  {size}
+  {variant}
+  {...rest}
+>
+  <Element class:list="footer-container">
+    <Element class:list="footer-content">
+      <Logo
+        {size}
+        {company}
+        {...typeof logo === 'string' ? { src: logo } : logo}
+      />
+      <Paragraph
+        {size}
+        text={paragraph}
+      />
+      <Socials
+        {size}
+        {socials}
+      />
+    </Element>
+    <Channels {channels} />
+    <Fragment set:html={html} />
+    <!-- <Hours {hours} /> -->
+    <Menu
+      direction="row"
+      groups={menu}
+      {size}
+    />
+    <Element class:list="hours column">
+      <Heading
+        text={hours?.heading}
+        level={5}
+      />
+      <Element>
+        {
+          Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
+            <Element class:list="spread">
+              <Text text={key} />
+              <Text text={value} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Element>
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .footer {
+      @apply relative mt-auto w-full;
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      .footer-container {
+        @apply container flex flex-wrap justify-between gap-12 py-12;
+      }
+
+      .footer-content {
+        @apply flex max-w-60 flex-col gap-4;
+      }
+    }
+  }
+</style>