fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/components/Header.astro

@@ -0,0 +1,204 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import { getCollection } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Drawer from 'fulldev-ui/components/Drawer.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
+}
+
+const {
+  as = 'header',
+  align = 'center',
+  structure = 'spread',
+  space = 'auto',
+  size = 'sm',
+  frame = 'fill',
+  variant = 'base',
+  logo,
+  heading,
+  links,
+  buttons,
+  drawer,
+  search,
+  ...rest
+} = Astro.props
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
+const url = Astro.url.href
+---
+
+<Root
+  class:list={'header'}
+  {as}
+  {frame}
+  {structure}
+  {variant}
+  {space}
+  {size}
+  {...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} />
+    <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.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>
+
+<style lang="scss" is:global>
+  :root {
+    --header-height: calc(
+      var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
+    );
+  }
+
+  .header {
+    --screen: 1536px;
+    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
+
+    display: flex;
+    position: relative;
+    top: 0;
+    right: 0;
+    left: 0;
+    align-items: center;
+    z-index: 10;
+    border-bottom: 1px solid var(--color-a6);
+    width: 100%;
+    // TODO: fix this
+    max-width: calc(100% - (2 * var(--outer-x)));
+    height: var(--header-height);
+
+    &.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);
+      border-radius: var(--radius-2);
+      padding: var(--space-4) min(var(--gutter), var(--space-4));
+      width: auto;
+      overflow: hidden;
+    }
+
+    &.position-fixed {
+      position: fixed;
+    }
+
+    &.position-absolute {
+      position: absolute;
+    }
+
+    &.position-sticky {
+      position: sticky;
+      top: -1px;
+    }
+
+    .header-link {
+      display: none;
+      font-size: var(--text-2);
+
+      @media (min-width: 1024px) {
+        display: flex;
+      }
+    }
+
+    .drawer-link {
+      font-size: var(--text-2);
+    }
+
+    .drawer-button {
+      @media (min-width: 1024px) {
+        display: none !important;
+      }
+    }
+  }
+</style>

package/src/components/Heading.astro

@@ -0,0 +1,79 @@
+---
+import type { Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'> =
+  Polymorphic<{
+    as: As
+  }> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    size?: 'sm' | 'md' | 'lg'
+    color?: 'base' | 'brand'
+    contrast?: boolean
+    html?: string
+    text?: string
+  }
+
+const {
+  level = 2,
+  as = `h${level}`,
+  color = 'base',
+  contrast = true,
+  html,
+  text,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="heading"
+  {as}
+  {contrast}
+  {color}
+  {level}
+  {...rest}
+>
+  <slot>
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
+</Root>
+
+<style is:global lang="scss">
+  .heading {
+    margin: 0;
+    max-width: calc(var(--space-4) * 44);
+    scroll-margin: var(--space-5);
+    color: var(--color-11);
+    font-weight: var(--heading-font-weight);
+    font-weight: 700;
+    line-height: 1.1;
+    font-family: var(--heading-font-family);
+    letter-spacing: -0.025em;
+    text-decoration: none;
+
+    &.level-1 {
+      font-size: var(--text-8);
+    }
+
+    &.level-2 {
+      font-size: var(--text-7);
+    }
+
+    &.level-3 {
+      font-size: var(--text-6);
+    }
+
+    &.level-4 {
+      font-size: var(--text-5);
+    }
+
+    &.level-5 {
+      font-size: var(--text-4);
+    }
+
+    &.level-6 {
+      font-size: var(--text-3);
+    }
+  }
+</style>

package/src/components/{base/Icon.astro → Icon.astro}

@@ -1,7 +1,7 @@
 ---
 import tablerIcons from '@iconify-json/tabler/icons.json'
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'i'> = Polymorphic<{ as: As }> & {
   name?: string
@@ -16,8 +16,8 @@ const icon = trimmedName
   : undefined
 ---
 
-<Component
-  class:list={['icon']}
+<Root
+  class:list="icon"
   if={icon}
   {as}
   {...rest}
@@ -31,20 +31,18 @@ const icon = trimmedName
       />
     )
   }
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('icon') {
+  .icon {
     display: inline-flex;
     position: relative;
     justify-content: center;
     align-items: center;
     width: 1em;
     height: 1em;
-    color: var(--text);
-    font-size: var(--text-2);
+    color: var(--color-11);
+    font-size: inherit;
 
     svg {
       position: absolute;

package/src/components/{base/Image.astro → Image.astro}

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
+import Root from 'fulldev-ui/components/Root.astro'
 import { isString } from 'remeda'
-import Component from '../_Component.astro'
 
 type Props = HTMLAttributes<'img'> & {
   position?: 'background' | 'cover' | 'inset'
@@ -33,14 +33,18 @@ const {
   height,
   ...rest
 } = Astro.props
+
+// TODO get alt from image collection with yaml files
+// const imageEntry =
+//   src && (await getEntry('images', src?.replace('/images/', '')))
 ---
 
 {
   src && (
     <>
       {!width && !height && (
-        <Component
-          class:list={['image']}
+        <Root
+          class:list="image"
           if={src}
           {src}
           {alt}
@@ -53,7 +57,7 @@ const {
       )}
       {width && height && (
         <AstroImage
-          class:list={['image']}
+          class:list="image"
           {src}
           {alt}
           width={width}
@@ -67,9 +71,7 @@ const {
 }
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('image') {
+  .image {
     display: block;
     width: 100%;
     height: auto;
@@ -111,10 +113,10 @@ const {
       margin: 0 !important;
       border-radius: 0;
       width: 100%;
+      max-width: none;
       height: 100%;
       max-height: 100%;
       object-fit: cover;
-      max-width: none;
     }
 
     &.position-cover {
@@ -131,55 +133,55 @@ const {
     }
 
     &.position-inset {
-      object-fit: cover;
       max-width: none;
+      object-fit: cover;
 
       &:is(.structure-column > &) {
-        margin-right: calc(var(--inner-x) * -1);
-        margin-left: calc(var(--inner-x) * -1);
-        width: calc(100% + var(--inner-x) * 2);
+        margin-right: calc(var(--inset-right) * -1);
+        margin-left: calc(var(--inset-left) * -1);
+        width: calc(100% + var(--inset-left) + var(--inset-right));
 
         &.image:first-child {
-          margin-top: calc(var(--inner-y) * -1);
-          height: calc(100% + var(--inner-y) * 1);
+          margin-top: calc(var(--inset-top) * -1);
+          height: calc(100% + var(--inset-top) * 1);
         }
 
         &.image:last-child {
-          margin-bottom: calc(var(--inner-y) * -1);
-          height: calc(100% + var(--inner-y) * 1);
+          margin-bottom: calc(var(--inset-bottom) * -1);
+          height: calc(100% + var(--inset-bottom) * 1);
         }
       }
 
       &:is(.structure-split > &) {
         @media (max-width: 1023.999px) {
-          margin-right: calc(var(--inner-x) * -1);
-          margin-left: calc(var(--inner-x) * -1);
-          width: calc(100% + var(--inner-x) * 2);
+          margin-right: calc(var(--inset-right) * -1);
+          margin-left: calc(var(--inset-left) * -1);
+          width: calc(100% + var(--inset-left) + var(--inset-right));
 
           &.image:first-child {
-            margin-top: calc(var(--inner-y) * -1);
-            height: calc(100% + var(--inner-y) * 1);
+            margin-top: calc(var(--inset-top) * -1);
+            height: calc(100% + var(--inset-top) * 1);
           }
 
           &.image:last-child {
-            margin-bottom: calc(var(--inner-y) * -1);
-            height: calc(100% + var(--inner-y) * 1);
+            margin-bottom: calc(var(--inset-bottom) * -1);
+            height: calc(100% + var(--inset-bottom) * 1);
           }
         }
 
         @media (min-width: 1024px) {
-          margin-top: calc(var(--inner-y) * -1);
-          margin-bottom: calc(var(--inner-y) * -1);
-          height: calc(100% + var(--inner-y) * 2);
+          margin-top: calc(var(--inset-top) * -1);
+          margin-bottom: calc(var(--inset-bottom) * -1);
+          height: calc(100% + var(--inset-top) * 1 + var(--inset-bottom) * 1);
 
           &.image:first-child {
-            margin-left: calc(var(--inner-x) * -1);
-            width: calc(100% + var(--inner-x) * 1);
+            margin-left: calc(var(--inset-left) * -1);
+            width: calc(100% + var(--inset-left) * 1);
           }
 
           &.image:last-child {
-            margin-right: calc(var(--inner-x) * -1);
-            width: calc(100% + var(--inner-x) * 1);
+            margin-right: calc(var(--inset-right) * -1);
+            width: calc(100% + var(--inset-right) * 1);
           }
         }
       }

package/src/components/Input.astro

@@ -0,0 +1,119 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props = HTMLAttributes<'input'> & {
+  variant?: 'outline'
+  color?: 'base' | 'brand'
+  label?: string
+  icon?: string
+  radius?: 'none' | 'auto' | 'full'
+}
+
+const {
+  variant = 'outline',
+  label,
+  icon,
+  value,
+  disabled,
+  required,
+  radius = 'auto',
+  placeholder,
+  name = placeholder,
+  type = 'text',
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="input"
+  {...rest}
+>
+  <Label
+    for={name}
+    html={label}
+  />
+  <Root
+    as="input"
+    if={name}
+    id={name}
+    {name}
+    {variant}
+    {placeholder}
+    {radius}
+    {type}
+    {value}
+    {disabled}
+    {required}
+  />
+  <Icon name={icon} />
+</Root>
+
+<style is:global lang="scss">
+  .input {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: var(--space-1);
+    width: 100%;
+
+    .icon {
+      position: absolute;
+      right: var(--space-4);
+      bottom: var(--space-4);
+      pointer-events: none;
+    }
+
+    input {
+      display: flex;
+      position: relative;
+      align-items: center;
+      outline: none;
+      border: 1px solid var(--color-6);
+      border-radius: var(--radius-1);
+      background-color: transparent;
+      padding: var(--space-4);
+      padding-right: calc(var(--text-2) + 2 * var(--space-4));
+      width: 100%;
+      min-width: var(--space-4);
+      height: calc(var(--text-2) + 2 * var(--space-4));
+      color: var(--text);
+      font-size: var(--text-2);
+      line-height: 1.25;
+
+      &.radius-none {
+        border-radius: 0;
+      }
+
+      &.radius-auto {
+        border-radius: var(--radius-1);
+      }
+
+      &.radius-full {
+        border-radius: 9999px;
+      }
+
+      &::placeholder {
+        color: var(--color-11);
+      }
+
+      &:hover {
+        outline: none;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--color-7);
+        border-color: var(--color-7);
+      }
+
+      &:disabled {
+        opacity: 50%;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+</style>

package/src/components/{typography/Label.astro → Label.astro}

@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
   size?: 'sm' | 'md' | 'lg'
@@ -10,26 +10,26 @@ type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
   text?: string
 }
 
-const { as = 'label', ...rest } = Astro.props
+const { as = 'label', html, text, ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['label']}
+<Root
+  class:list="label"
   {as}
   {...rest}
 >
-  <slot />
-</Component>
+  <slot>
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('label') {
+  .label {
     display: flex;
     flex-direction: column;
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-1);
+    color: var(--color-11);
+    font-size: var(--text-2);
     line-height: 1;
     font-family: var(--font-family);
     text-align: left;

package/src/components/{typography/Link.astro → Link.astro}

@@ -1,32 +1,33 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'base' | 'brand'
   underline?: 'auto' | 'always' | 'hover' | 'none'
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
   contrast?: boolean
   html?: string
   text?: string
 }
 
-const { as = 'a', underline = 'auto', ...rest } = Astro.props
+const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['link']}
+<Root
+  class:list="link"
   {as}
   {underline}
   {...rest}
 >
-  <slot />
-</Component>
+  <slot>
+    <Fragment set:text={text} />
+    <Fragment set:html={html} />
+  </slot>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('link') {
+  .link {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -34,9 +35,9 @@ const { as = 'a', underline = 'auto', ...rest } = Astro.props
     cursor: pointer;
     border: none;
     background: none;
-    color: var(--text);
+    color: var(--color-11);
     font-weight: var(--font-weight);
-    font-size: var(--text-2);
+    font-size: var(--text-3);
     font-family: var(--font-family);
     text-decoration-color: var(--border); // FIXME, werkt niet
     white-space: nowrap;
@@ -59,6 +60,7 @@ const { as = 'a', underline = 'auto', ...rest } = Astro.props
 
     &.underline-hover {
       text-decoration: none;
+
       &:hover {
         text-decoration: underline;
       }