fulldev-ui 0.4.33 → 0.5.0-beta-16

package/src/components/Drawer.astro

@@ -1,101 +1,169 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
-import Box from './Box.astro'
-import Button from './Button.astro'
-import Card from './Card.astro'
-import Root from './Root.astro'
-
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
-  label?: string
-  icon?: string
-  position?: 'left' | 'right'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.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 Buttons from './Buttons.astro'
+import Heading from './Heading.astro'
+
+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']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
 }
 
 const {
   id = 'drawer',
-  frame = 'fill',
-  position = 'left',
-  label,
-  icon,
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  buttons,
+  heading,
+  logo,
+  company,
+  menu,
+  if: ifProp,
   ...rest
 } = Astro.props
+
+const buttonsGroup = { heading: '', buttons: buttons }
+const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
-  class:list="drawer-button"
-  as="button"
   variant="secondary"
-  type="button"
-  id={`${id}-button`}
-  html={label}
-  icon={icon}
+  class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
 />
 
-<Root
+<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}
 >
-  <Box
-    class:list={[`frame-${frame}`, `position-${position}`]}
-    {...rest}
-  >
-    <slot />
-  </Box>
-</Root>
+  <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={mergedMenu} />
+      <slot />
+    </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </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%;
+
+      @media (min-width: 768px) {
+        width: 440px;
+      }
 
       &::backdrop {
+        cursor: pointer;
         background: rgba(0, 0, 0, 0.5);
       }
 
-      &.position-left {
-        margin-right: 0;
+      .drawer-body {
+        display: flex;
+        flex-shrink: 1;
+        flex-direction: column;
+        border-right: 1px solid var(--color-a6);
+        height: 100%;
+        overflow: auto;
       }
 
-      &.position-right {
-        right: 0;
+      .drawer-content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--space-6) var(--gutter);
       }
 
-      .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,
+      .drawer-footer {
+        display: flex;
+        position: sticky;
+        flex-shrink: 0;
+        z-index: 1;
+        border-style: solid;
+        border-color: var(--color-a6);
+        background-color: var(--base-background);
+      }
 
-        &.position-left {
-          border-right: 1px solid var(--color-a6);
-          padding-left: var(--gutter);
-        }
+      .drawer-header {
+        top: 0;
+        align-items: center;
+        border-bottom-width: 1px;
+        padding: 0 var(--gutter);
+        height: 56px;
 
-        &.position-right {
-          border-left: 1px solid var(--color-a6);
-          padding-right: var(--gutter);
+        .button {
+          margin-left: auto;
         }
+      }
 
-        &.frame-fill {
-          background-color: var(--color-2);
-        }
+      .drawer-footer {
+        bottom: 0;
+        flex-direction: column;
+        margin-top: auto;
+        border-top-width: 1px;
+        padding: var(--space-5) var(--gutter);
       }
     }
   }

package/src/components/Element.astro

@@ -0,0 +1,58 @@
+---
+const {
+  as: As = 'div',
+  theme,
+  variant,
+  size,
+  align,
+  color,
+  position,
+  panel,
+  contrast,
+  structure,
+  level,
+  placement,
+  reverse,
+  open,
+  lead,
+  ...rest
+} = Astro.props
+
+const slot = await Astro.slots.render('default')
+const render = 'if' in rest ? rest.if : slot?.trim().length > 0
+---
+
+{
+  render && (
+    <As
+      class:list={[
+        'root',
+        {
+          contrast,
+          panel,
+          open,
+          reverse,
+          lead,
+          [`size-${size}`]: size,
+          [`color-${color}`]: color,
+          [`theme-${theme}`]: theme,
+          [`level-${level}`]: level,
+          [`variant-${variant}`]: variant,
+          [`structure-${structure}`]: structure,
+          [`align-${align}`]: align,
+          [`position-${position}`]: position,
+          [`position-${position}`]: position,
+        },
+      ]}
+      {...rest}
+    >
+      <Fragment set:html={slot} />
+    </As>
+  )
+}
+
+<style is:global lang="scss">
+  @import '@unocss/reset/tailwind.css' layer(fulldev);
+  @import 'fulldev-ui/css/color.css';
+  @import 'fulldev-ui/css/size.css';
+</style>

package/src/components/Footer.astro

@@ -1,143 +1,192 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Column from 'fulldev-ui/components/Column.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+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 Link from 'fulldev-ui/components/Link.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'split' | 'column' | 'stack'
-  variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
-  frame?: 'fill' | 'panel' | 'contain' | 'none'
-  align?: 'start' | 'center' | 'end'
-  size?: 'sm' | 'md' | 'lg'
-  theme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  space?: 'none' | 'auto'
-  logo?: string
-  heading?: string
-  title?: string
-  description?: string
-  text?: string
-  html?: string
+interface Props extends GlobalProps, HTMLAttributes<'footer'> {
+  screen?: number | undefined
+  logo?: ComponentProps<typeof Logo>['src']
+  company?: ComponentProps<typeof Logo>['company']
+  text?: ComponentProps<typeof Text>['text']
+  hours?: any
+  socials?: ComponentProps<typeof Social>['href'][] | undefined
+  buttons?: ComponentProps<typeof Button>[] | undefined
+  panel?: boolean | undefined
+  channels?: ComponentProps<typeof Channels>['channels'] | undefined
   columns?: {
-    heading: string
-    links: ComponentProps<typeof Link<'a'>>[]
+    heading: ComponentProps<typeof Heading>['text']
+    buttons: ComponentProps<typeof Button>[] | undefined
   }[]
 }
 
 const {
-  as = 'footer',
-  space = 'auto',
-  variant = 'subtle',
-  frame = 'fill',
-  structure = 'grid',
   size = 'sm',
+  screen = 1280,
+  hours,
+  panel,
   logo,
-  heading,
+  company,
+  socials,
+  buttons,
   columns,
   text,
   title,
-  description,
-  html,
+  channels,
   ...rest
 } = Astro.props
 ---
 
-<Root
+<Element
   class:list="footer"
-  {structure}
-  {as}
-  {variant}
-  {frame}
-  {space}
+  style={{ '--screen': `${screen}px` }}
+  structure="stack"
+  {panel}
   {size}
   {...rest}
 >
-  <Column>
-    <Column
-      style={{ textDecoration: 'none' }}
-      as="a"
-      href="/"
-    >
-      <Logo src={logo} />
-      <Heading
-        level={4}
-        color="base"
-        html={heading || title}
-      />
-    </Column>
+  <Element class:list="column">
+    <Logo
+      {company}
+      {...typeof logo === 'string' ? { src: logo } : logo}
+    />
     <Text
       color="base"
-      html={html || text || description}
+      {text}
     />
-  </Column>
-
-  {
-    columns?.map(({ heading, links }) => (
-      <Column>
-        <Heading
-          html={heading}
-          level={4}
-        />
-        {links.map((link) => (
-          <Link {...link} />
-        ))}
-      </Column>
-    ))
-  }
-</Root>
+    <Socials {socials} />
+  </Element>
+  <Channels {channels} />
+  <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 class:list="buttons column">
+    {
+      columns?.map(({ heading, buttons }: any) => (
+        <Element class:list="column">
+          <Heading
+            level={5}
+            text={heading}
+          />
+          {buttons?.map((button: any) => (
+            <Button
+              variant="link"
+              {...button}
+            />
+          ))}
+        </Element>
+      ))
+    }
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
     .footer {
-      --inset-top: var(--space-7);
-      --inset-left: var(--gutter-left);
-      --inset-right: var(--gutter-right);
-      --inset-bottom: var(--space-7);
-
+      display: grid;
+      position: relative;
+      grid-template-columns: 1fr;
+      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);
+      padding: var(--space-7) var(--gutter);
       width: 100%;
 
-      &.frame-none {
-        border-top: 1px solid var(--base-a6);
-        padding: var(--space-7) var(--gutter);
+      @media (min-width: 1024px) {
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+      }
+
+      .spread {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .column {
+        display: flex;
+        flex-direction: column;
+      }
+
+      > .column {
+        gap: var(--space-4);
       }
 
-      &.frame-fill {
-        border-top: 1px solid var(--base-a6);
-        background-color: var(--color-2);
-        padding: var(--space-7) var(--gutter);
+      .socials {
+        display: flex;
       }
 
-      &.frame-panel {
-        margin: var(--space-7) var(--gutter);
-        border: 1px solid var(--base-a6);
+      .column {
+        h5 + * {
+          margin-top: var(--space-4);
+        }
+
+        .button.variant-link + .button.variant-link {
+          margin-top: var(--space-4);
+        }
+      }
+
+      &.panel {
+        margin: var(--spacer) var(--gutter);
+        border-width: 1px;
         border-radius: var(--radius-2);
-        background-color: var(--color-2);
-        padding: var(--space-6) min(var(--gutter), var(--space-7));
-        max-width: calc(100vw - 2 * var(--gutter));
         overflow: hidden;
+      }
 
-        @media (min-width: 1024px) {
-          padding-top: var(--space-7);
-          padding-bottom: var(--space-7);
-        }
+      .channels {
+        gap: var(--space-3);
       }
 
-      &.align-start {
+      .buttons {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
         align-items: flex-start;
-        text-align: left;
+        gap: var(--space-3);
+        gap: var(--space-6);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-auto-columns: 1fr;
+          grid-auto-flow: column;
+        }
       }
 
-      &.align-center {
-        align-items: center;
+      .text {
+        max-width: calc(5 * var(--space-7));
       }
 
-      &.align-end {
-        align-items: flex-end;
+      .hours {
+        .column {
+          gap: 0;
+
+          .text {
+            font-size: var(--text-2);
+          }
+        }
       }
     }
   }

package/src/components/Form.astro

@@ -0,0 +1,49 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'form'> {
+  fields: (
+    | ComponentProps<typeof Input>
+    | ComponentProps<typeof Select>
+    | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+  )[]
+  submit?: ComponentProps<typeof Button>['text']
+}
+
+const { fields, submit, ...rest } = Astro.props
+---
+
+<Element
+  class:list="form"
+  as="form"
+  {...rest}
+>
+  {
+    fields.map((field) => {
+      if ('options' in field) return <Select {...field} />
+      if ('type' in field && field.type === 'textarea')
+        return <Textarea {...field} />
+      return <Input {...(field as any)} />
+    })
+  }
+  <Button
+    type="submit"
+    text={submit}
+  />
+</Element>
+
+<style is:global lang="scss">
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    width: 100%;
+    max-width: calc(var(--space-4) * 44);
+  }
+</style>