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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.4",
+  "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/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/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/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

@@ -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
 ---
@@ -49,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>
 
@@ -118,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);

package/src/components/Sidebar.astro

@@ -1,151 +1,101 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Search from 'fulldev-ui/components/Search.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Heading from './Heading.astro'
+import Toc from './Toc.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  search?: boolean | undefined
-  logo?: string | undefined
-  company?: string | undefined
-  buttons?: any[] | undefined
-  open?: boolean | undefined
+  menu?: ComponentProps<typeof Menu>['groups']
+  heading?: ComponentProps<typeof Heading>['text']
+  render?: ComponentProps<typeof Toc>['render']
+  logo?: ComponentProps<typeof Logo>
+  toc?: ComponentProps<typeof Toc>['heading']
+  company?: ComponentProps<typeof Logo>['company']
+  themeselect?: boolean | undefined
 }
 
 const {
   size = 'sm',
-  open = false,
   logo,
   company,
-  buttons,
-  search,
+  render,
+  themeselect,
+  menu,
+  toc,
+  heading,
+  ...rest
 } = Astro.props
 ---
 
-<input
-  id="sidebar"
-  class="sidebar-checkbox"
-  type="checkbox"
-/>
-
 <Element
   class:list="sidebar"
   as="aside"
   {size}
-  {open}
+  {...rest}
 >
-  <Logo
-    {company}
-    {...typeof logo === 'string' ? { src: logo } : logo}
-  />
-  {search && <Search />}
-  <Element class:list="buttons">
-    {
-      buttons?.map(({ heading, slug, href, text, buttons }) => (
-        <>
-          <Heading
-            level={6}
-            text={heading}
-          />
-          <Button
-            variant="link"
-            {slug}
-            {href}
-            {text}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </>
-      ))
-    }
-    <ThemeSelect />
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+    />
+    <Heading
+      level={4}
+      text={heading}
+    />
+    <slot name="header" />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Menu groups={menu} />
+    <ThemeSelect if={themeselect} />
+    <slot />
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .sidebar-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.sidebar-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .sidebar {
-      --sidebar-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      bottom: 0;
-      left: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      z-index: 10;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--base-2);
-      padding: var(--space-md-5) var(--gutter);
-      width: 100%;
-      height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.sidebar-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
-        border-right-width: 1px;
-        padding: var(--space-md-6) var(--gutter);
-        width: var(--sidebar-width);
-
-        &.open {
-          display: flex;
-          position: sticky;
-        }
-      }
-
-      .buttons {
         display: flex;
+        position: sticky;
+        top: var(--header-height, 0px);
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-        gap: calc(var(--space-4) + var(--space-1));
+        justify-content: flex-start;
+        z-index: 10;
+        border-right: 1px solid var(--color-a6);
+        width: calc(var(--space-7) * 4);
+        height: calc(100vh - var(--header-height, 0px));
 
-        .theme-select {
-          margin-top: var(--space-5);
+        .sidebar-header {
+          display: flex;
+          position: sticky;
+          align-items: center;
+          border-bottom: 1px solid var(--color-a6);
+          padding: 0 var(--gutter);
+          width: 100%;
+          height: 56px;
         }
 
-        .button + .heading {
-          margin-top: var(--space-5);
+        .sidebar-content {
+          display: flex;
+          top: 0;
+          flex: 1;
+          flex-direction: column;
+          padding: var(--space-6) var(--gutter);
+          width: 100%;
+          overflow-y: auto;
         }
       }
-
-      .logo {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: var(--gutter);
-        align-items: center;
-        height: 56px;
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .header:not(.open) ~ .core .sidebar .logo {
-        display: flex;
-      }
     }
   }
 </style>

package/src/components/ThemeSelect.astro

@@ -1,6 +1,8 @@
 ---
 import Select from 'fulldev-ui/components/Select.astro'
 // const defaultTheme = fulldevConfig.colors.theme || 'light'
+
+const { ...rest } = Astro.props
 ---
 
 <Select
@@ -9,6 +11,7 @@ import Select from 'fulldev-ui/components/Select.astro'
   options={['light', 'dark']}
   value="light"
   onchange="localStorage.setItem('theme', this.value); window.location.reload();"
+  {...rest}
 />
 
 <script>