fulldev-ui 0.4.29 → 0.5.0-beta.1

package/src/components/Footer.astro

@@ -1,143 +1,189 @@
 ---
-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
+      id={logo}
+      src={logo}
+      {company}
+    />
     <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;
+      border-top-width: 1px;
+      border-color: var(--base-a6);
+      background-color: var(--base-2);
+      padding: var(--space-7) var(--gutter);
       width: 100%;
+      overflow: auto;
+
+      @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;
+      }
 
-      &.frame-none {
-        border-top: 1px solid var(--base-a6);
-        padding: var(--space-7) var(--gutter);
+      .socials {
+        display: flex;
       }
 
-      &.frame-fill {
-        border-top: 1px solid var(--base-a6);
-        background-color: var(--color-2);
-        padding: var(--space-7) var(--gutter);
+      .column {
+        h5 + * {
+          margin-top: var(--space-4);
+        }
+
+        .button.variant-link + .button.variant-link {
+          margin-top: var(--space-4);
+        }
       }
 
-      &.frame-panel {
-        margin: var(--space-7) var(--gutter);
-        border: 1px solid var(--base-a6);
+      &.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/Head.astro

@@ -1,12 +1,12 @@
 ---
 import { AstroSeo } from '@astrolib/seo'
-import type { CollectionEntry } from 'astro:content'
+import type { ComponentProps } from 'astro/types'
 import { ViewTransitions } from 'astro:transitions'
+import type Layout from 'fulldev-ui/layouts/Layout.astro'
 
-type Props = Partial<CollectionEntry<'pages'>>
+type Props = ComponentProps<typeof Layout>
 
-const { data, render } = Astro.props
-const { title, description, image, seo, code } = data || {}
+const { title, description, image, seo, code, render } = Astro.props
 
 const renderTitle = render && (await render()).headings[0]?.text
 const mergedTitle = seo?.title || title || renderTitle
@@ -27,8 +27,8 @@ const mergedImage =
   />
   <ViewTransitions />
   <AstroSeo
-    title={mergedTitle}
-    description={mergedDescription}
+    title={mergedTitle ?? ''}
+    description={mergedDescription ?? ''}
     openGraph={{
       title: mergedTitle,
       description: mergedDescription,
@@ -40,45 +40,7 @@ const mergedImage =
             },
           ]
         : undefined,
-    }}
+    } as any}
   />
-  <link
-    rel="apple-touch-icon"
-    sizes="76x76"
-    href="/favicon/apple-touch-icon.png"
-  />
-  <link
-    rel="icon"
-    type="image/png"
-    sizes="32x32"
-    href="/favicon/favicon-32x32.png"
-  />
-  <link
-    rel="icon"
-    type="image/png"
-    sizes="16x16"
-    href="/favicon/favicon-16x16.png"
-  />
-  <link
-    rel="manifest"
-    href="/favicon/site.webmanifest"
-  />
-  <link
-    rel="mask-icon"
-    href="/favicon/safari-pinned-tab.svg"
-  />
-  <link
-    rel="shortcut icon"
-    href="/favicon/favicon.ico"
-  />
-  <meta
-    name="msapplication-config"
-    content="/favicon/browserconfig.xml"
-  />
-  <meta
-    name="theme-color"
-    content="#000000"
-  />
-  <slot name="head" />
   <Fragment set:html={code?.head} />
 </head>

package/src/components/Header.astro

@@ -1,212 +1,130 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import { getCollection } from 'astro:content'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Drawer from 'fulldev-ui/components/Drawer.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 Heading from 'fulldev-ui/components/Heading.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Search from 'fulldev-ui/components/Search.astro'
-
-type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'column'
-  position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-  variant?: 'ghost' | 'base' | 'subtle' | 'soft' | 'surface' | 'outline'
-  size?: 'sm' | 'md' | 'lg'
-  frame?: 'fill' | 'panel'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-  logo?: string
-  heading?: string
-  links?: any[]
-  buttons?: any[]
-  drawer?: any[]
-  search?: any
+import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'header'> {
+  logo?: ComponentProps<typeof Logo>['src']
+  company?: ComponentProps<typeof Logo>['company']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  panel?: boolean | undefined
+  search?: boolean | undefined
+  open?: boolean | undefined
+  themeselect?: boolean | undefined
 }
 
 const {
-  as = 'header',
-  align = 'center',
-  structure = 'spread',
-  space = 'auto',
   size = 'sm',
-  frame = 'none',
+  open = true,
   logo,
-  heading,
-  links,
+  company,
   buttons,
-  drawer,
   search,
+  panel,
+  themeselect,
   ...rest
 } = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
-const url = Astro.url.href
 ---
 
-<Root
-  class:list={'header'}
-  {as}
-  {frame}
-  {structure}
-  {space}
+<Element
+  class:list={['header']}
+  as="header"
+  {panel}
   {size}
+  {open}
   {...rest}
 >
-  <Row
-    style={{ textDecoration: 'none', height: '100%' }}
-    as="a"
-    href="/"
-  >
-    <Logo src={logo} />
-    <Heading
-      as="p"
-      level={3}
-      html={heading}
-    />
-  </Row>
-  <Row>
-    {
-      links?.map((link) => (
-        <Link
-          class={'header-link'}
-          {...link}
-        />
-      ))
-    }
-    {
-      buttons?.map((button) => (
-        <Button
-          variant="secondary"
-          {...button}
-        />
-      ))
-    }
-    {search && <Search {...search} />}
-    {
-      drawer && (
-        <Drawer
-          icon="menu-2"
-          id="navigation-drawer"
-        >
-          {drawer &&
-            drawer.length > 0 &&
-            drawer.map((item: any) => (
-              <>
-                <Heading
-                  level={6}
-                  html={item.heading}
-                />
-                {item.links?.map((link: any) => (
-                  <Link
-                    {...link}
-                    class="sidebar-link"
-                    color={
-                      url.replace(/\/$/, '').endsWith(link.href)
-                        ? 'brand'
-                        : undefined
-                    }
-                  />
-                ))}
-                {item.folder &&
-                  (async () => {
-                    const pages = await getCollection(
-                      'pages',
-                      (entry: any) =>
-                        entry.slug.startsWith(item.folder) &&
-                        !entry.slug.endsWith(item.folder)
-                    )
-                    return pages.map((page: any) => (
-                      <Link
-                        href={`/${page.slug}`}
-                        class="sidebar-link"
-                        color={slug === page.slug ? 'brand' : undefined}
-                        html={page.data.title}
-                      />
-                    ))
-                  })()}
-              </>
-            ))}
-        </Drawer>
-      )
-    }
-  </Row>
-</Root>
+  <Logo
+    id={logo}
+    src={logo}
+    {company}
+  />
+  <Buttons
+    {buttons}
+    variant="link"
+  />
+  {search && <Search />}
+  {themeselect && <ThemeSelect />}
+  <Button
+    class="menu-button"
+    variant="tertiary"
+    icon="menu-2"
+    for="sidebar"
+  />
+</Element>
 
 <style lang="scss" is:global>
-  :root {
-    --header-height: calc(
-      var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
-    );
-  }
-
   @layer fulldev {
     .header {
-      --screen: 1536px;
-      --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-
       display: flex;
-      position: relative;
+      position: sticky;
       top: 0;
-      right: 0;
       left: 0;
+      justify-content: flex-end;
       align-items: center;
-      z-index: 10;
-      border-bottom: 1px solid var(--color-a6);
+      gap: var(--space-4);
+      z-index: 20;
+      border-bottom-width: 1px;
+      border-style: solid;
+      border-color: var(--base-a6);
+      background-color: var(--base-2);
+      padding: 0 var(--gutter);
       width: 100%;
-      // TODO: fix this
-      max-width: calc(100% - (2 * var(--outer-x)));
       height: var(--header-height);
+      overflow: hidden;
 
-      &.frame-none {
-        padding: 0 var(--gutter);
+      &,
+      & ~ * {
+        --header-height: 56px;
       }
 
-      &.frame-fill {
-        background-color: var(--color-2);
-        padding: 0 var(--gutter);
-      }
-
-      &.frame-panel {
-        margin: var(--space-3) var(--gutter);
-        border: 1px solid var(--color-a6);
+      &.panel {
+        margin: var(--space-4) var(--gutter);
+        border-width: 1px solid;
         border-radius: var(--radius-2);
-        padding: var(--space-4) min(var(--gutter), var(--space-4));
+        padding: var(--sapce-4) min(var(--gutter), var(--space-4));
         width: auto;
-        overflow: hidden;
       }
 
-      &.position-fixed {
-        position: fixed;
+      .logo {
+        margin-right: auto;
       }
 
-      &.position-absolute {
-        position: absolute;
-      }
+      @media (min-width: 1024px) {
+        &:not(.open) {
+          display: none;
 
-      &.position-sticky {
-        position: sticky;
-        top: -1px;
+          & ~ * {
+            --header-height: 0px;
+          }
+        }
       }
 
-      .header-link {
+      .buttons {
         display: none;
-        font-size: var(--text-2);
 
         @media (min-width: 1024px) {
           display: flex;
+          gap: var(--space-2);
+
+          .button.variant-link + .button {
+            margin-left: var(--space-3);
+          }
         }
       }
 
-      .drawer-link {
-        font-size: var(--text-2);
-      }
+      .menu-button {
+        .icon {
+          transform: scale(1.56);
+        }
 
-      .drawer-button {
         @media (min-width: 1024px) {
-          display: none !important;
+          display: none;
         }
       }
     }