fulldev-ui 0.5.0-beta.3 → 0.5.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.3",
+  "version": "0.5.0-beta.5",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Contact.astro

@@ -13,35 +13,6 @@ 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,
@@ -53,7 +24,7 @@ const {
   position,
   image,
   channels,
-  level = 2,
+  level = 1,
   ...rest
 } = Astro.props
 ---
@@ -69,6 +40,7 @@ const {
       text={tagline}
     />
     <Heading
+      size={'sm'}
       level={level}
       text={heading}
     />
@@ -106,6 +78,7 @@ const {
       <Button
         type="submit"
         color="brand"
+        variant="primary"
         text={form.button}
       />
     </Form>
@@ -126,6 +99,10 @@ const {
         align-items: flex-start;
       }
 
+      > .column {
+        gap: var(--space-5);
+      }
+
       .channel + .channel {
         margin-top: var(--space-3) !important;
       }

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/Intro.astro

@@ -8,7 +8,7 @@ const { image, ...rest } = Astro.props
   class:list="intro"
   structure="column"
   size="sm"
-  level={2}
+  level={1}
   {...rest}
 />
 
@@ -16,6 +16,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/Product.astro

@@ -1,9 +1,11 @@
 ---
 import Button from 'fulldev-ui/components/Button.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 List from 'fulldev-ui/components/List.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'
@@ -22,6 +24,7 @@ const {
   button,
   description,
   form,
+  gallery = 'horizontal',
   ...rest
 } = Astro.props
 ---
@@ -31,10 +34,19 @@ const {
   structure="split"
   {...rest}
 >
-  <Image {...image || images?.[0]} />
+  {
+    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
@@ -42,12 +54,17 @@ const {
       text={text || description}
     />
     <Price value={price} />
+    <List
+      items={list}
+      style={{ marginTop: 'var(--space-5)' }}
+    />
     <Element class:list="row">
       <Input
         value={1}
         name={'quantity'}
-        style={{ width: 'var(--space-6)' }}
+        style={{ width: 'var(--space-7)' }}
         type="number"
+        min={1}
       />
       <Button
         color="brand"
@@ -64,14 +81,36 @@ const {
 
 <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>

package/src/components/Card.astro

@@ -9,6 +9,7 @@ import Image from 'fulldev-ui/components/Image.astro'
 import Writeup from 'fulldev-ui/components/Writeup.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Icon from './Icon.astro'
+import Price from './Price.astro'
 
 interface Props
   extends GlobalProps,
@@ -22,9 +23,11 @@ interface Props
   variant?: ComponentProps<typeof Button>['variant']
   align?: ComponentProps<typeof Writeup>['align']
   icon?: ComponentProps<typeof Icon>['name']
+  price?: ComponentProps<typeof Price>['value']
   slug?: CollectionEntry<'pages'>['slug'] | undefined
   id?: any
   panel?: boolean | undefined
+  title?: ComponentProps<typeof Writeup>['heading']
 }
 
 const { slug } = Astro.props
@@ -47,12 +50,14 @@ const {
   heading,
   text,
   variant,
+  price,
   list,
   button,
   buttons,
   panel,
   image,
   icon,
+  title,
   images,
   position,
   ...rest
@@ -81,14 +86,15 @@ const {
   </slot>
   <slot name="writeup">
     <Writeup
+      heading={heading || title}
       {level}
       {rating}
       {badge}
       {tagline}
-      {heading}
       {text}
       {list}
     />
+    <Price value={price} />
   </slot>
   <slot name="buttons">
     <Button
@@ -121,12 +127,12 @@ const {
       &[href] {
         cursor: pointer;
 
-        > .root.image {
-          transition: all;
+        > .image {
+          transition: all 0.2s ease;
         }
 
         &:hover {
-          > .root.image {
+          > .image {
             opacity: 0.8;
           }
         }

package/src/components/Drawer.astro

@@ -1,95 +1,138 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
 import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Heading from './Heading.astro'
 
-interface Props extends Omit<ComponentProps<typeof Card>, 'position'> {
-  label?: string | undefined
-  icon?: string | undefined
-  position?: 'left' | 'right' | undefined
-  panel?: boolean | undefined
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  text?: ComponentProps<typeof Button>['text']
+  icon?: ComponentProps<typeof Button>['icon']
+  heading?: ComponentProps<typeof Heading>['text']
+  logo?: ComponentProps<typeof Logo> | undefined
+  company?: ComponentProps<typeof Logo>['company']
+  menu?: ComponentProps<typeof Menu>['groups']
 }
 
 const {
   id = 'drawer',
-  position = 'left',
-  panel,
-  label,
-  icon,
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  heading,
+  logo,
+  company,
+  menu,
   ...rest
 } = Astro.props
 ---
 
 <Button
-  class:list="drawer-button"
   variant="secondary"
-  id={`${id}-button`}
-  text={label}
-  icon={icon}
+  class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
 />
 
 <Element
+  onclick={`event.target === this && this.close()`}
+  class:list="drawer"
   as="dialog"
-  class="drawer"
   {id}
-  {position}
-  onclick={`event.target === this && this.close()`}
+  {text}
+  {icon}
+  {...rest}
 >
-  <Element
-    class:list={[panel, `position-${position}`]}
-    {...rest}
-  >
-    <slot />
+  <Element class:list="drawer-body">
+    <Element
+      class:list="drawer-header"
+      as="header"
+    >
+      <Logo
+        {company}
+        {...logo}
+      />
+      <Heading
+        level={4}
+        text={heading}
+      />
+      <Button
+        variant="secondary"
+        icon="x"
+        onclick={`document.getElementById('${id}').close()`}
+      />
+      <slot name="header" />
+    </Element>
+    <Element class:list="drawer-content">
+      <Menu groups={menu} />
+      <slot />
+    </Element>
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    body:has(dialog[open]) {
+      overflow: hidden;
+
+      @media (min-width: 768px) {
+        overflow: auto;
+      }
+    }
+
     .drawer {
-      flex-shrink: 0;
-      align-items: stretch;
-      box-sizing: border-box;
-      margin: 0 !important;
-      outline: 0;
-      border: 0;
-      background: var(--color-2);
+      top: 0;
+      bottom: 0;
+      margin: 0;
       padding: 0;
-      padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
-      min-width: 260px;
-      max-width: 360px;
-      height: 100vh;
-      max-height: 100vh;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
 
-      &::backdrop {
-        background: rgba(0, 0, 0, 0.5);
+      @media (min-width: 768px) {
+        width: 360px;
       }
 
-      &.position-left {
-        margin-right: 0;
+      &::backdrop {
+        cursor: pointer;
+        background: rgba(0, 0, 0, 0.5);
       }
 
-      &.position-right {
-        right: 0;
+      .drawer-body {
+        flex-shrink: 1;
+        border-right: 1px solid var(--color-a6);
+        height: 100%;
+        overflow: auto;
       }
 
-      .box {
-        padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
-        min-width: calc(var(--space-7) * 14);
-        height: 100vh;
-        overflow-x: hidden;
-        overflow-y: auto;
+      .drawer-header {
+        display: flex;
+        position: sticky;
+        top: 0;
+        align-items: center;
+        border-bottom: 1px solid var(--color-a6);
+        background-color: var(--base-background);
+        padding: 0 var(--gutter);
+        height: 56px;
 
-        &.position-left {
-          border-right: 1px solid var(--color-a6);
-          padding-left: var(--gutter);
+        .button {
+          margin-left: auto;
         }
+      }
 
-        &.position-right {
-          border-left: 1px solid var(--color-a6);
-          padding-right: var(--gutter);
-        }
+      .drawer-content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--space-6) var(--gutter);
       }
     }
   }

package/src/components/Footer.astro

@@ -53,9 +53,8 @@ const {
 >
   <Element class:list="column">
     <Logo
-      id={logo}
-      src={logo}
       {company}
+      {...typeof logo === 'string' ? { src: logo } : logo}
     />
     <Text
       color="base"
@@ -110,6 +109,7 @@ const {
       align-items: flex-start;
       gap: var(--space-6);
       margin-top: auto;
+      margin-top: auto;
       border-top-width: 1px;
       border-color: var(--base-a6);
       background-color: var(--base-2);
@@ -132,6 +132,10 @@ const {
         flex-direction: column;
       }
 
+      > .column {
+        gap: var(--space-4);
+      }
+
       .socials {
         display: flex;
       }

package/src/components/Header.astro

@@ -1,21 +1,24 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 import Search from 'fulldev-ui/components/Search.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Drawer from './Drawer.astro'
+import type Menu from './Menu.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>['src']
+  logo?: ComponentProps<typeof Logo>
   company?: ComponentProps<typeof Logo>['company']
   buttons?: ComponentProps<typeof Buttons>['buttons']
+  menu?: ComponentProps<typeof Menu>['groups']
   panel?: boolean | undefined
   search?: boolean | undefined
   open?: boolean | undefined
   themeselect?: boolean | undefined
+  cart?: string | undefined
 }
 
 const {
@@ -26,7 +29,9 @@ const {
   buttons,
   search,
   panel,
+  menu,
   themeselect,
+  cart,
   ...rest
 } = Astro.props
 ---
@@ -40,9 +45,8 @@ const {
   {...rest}
 >
   <Logo
-    id={logo}
-    src={logo}
     {company}
+    {...typeof logo === 'string' ? { src: logo } : logo}
   />
   <Buttons
     {buttons}
@@ -50,11 +54,19 @@ const {
   />
   {search && <Search />}
   {themeselect && <ThemeSelect />}
-  <Button
-    class="menu-button"
-    variant="tertiary"
+  <Drawer
     icon="menu-2"
-    for="sidebar"
+    id="menu"
+    {menu}
+    {logo}
+    {company}
+  />
+  <Drawer
+    icon="shopping-cart"
+    class="cart-button"
+    color="brand"
+    id="cart"
+    heading={cart}
   />
 </Element>
 
@@ -119,10 +131,6 @@ const {
       }
 
       .menu-button {
-        .icon {
-          transform: scale(1.56);
-        }
-
         @media (min-width: 1024px) {
           display: none;
         }

package/src/components/Menu.astro

@@ -0,0 +1,56 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  groups?:
+    | {
+        heading?: ComponentProps<typeof Heading>['text']
+        buttons?: ComponentProps<typeof Button>[]
+      }[]
+    | undefined
+}
+
+const { groups, ...rest } = Astro.props
+---
+
+<Element
+  class:list="menu"
+  {...rest}
+>
+  {
+    groups?.map(({ heading, buttons }) => (
+      <Element class:list="menu-group">
+        <Heading
+          level={6}
+          text={heading}
+        />
+        {buttons?.map((button) => (
+          <Button
+            variant="link"
+            {...button}
+          />
+        ))}
+      </Element>
+    ))
+  }
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-5);
+
+      .menu-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+      }
+    }
+  }
+</style>

package/src/components/Section.astro

@@ -148,7 +148,9 @@ const Component =
       --inset-right: var(--gutter);
       --inset-bottom: var(--spacer);
 
+      display: flex;
       position: relative;
+      flex-direction: column;
       align-items: flex-start;
       gap: var(--space-6) var(--space-7);
       padding: var(--spacer) var(--gutter);