fulldev-ui 0.4.29 → 0.5.0-beta.0

package/src/components/Input.astro

@@ -1,25 +1,21 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'input'> & {
-  variant?: 'outline'
-  color?: 'base' | 'brand'
-  label?: string
-  icon?: string
-  radius?: 'none' | 'auto' | 'full'
+interface Props extends GlobalProps, HTMLAttributes<'input'> {
+  label?: ComponentProps<typeof Label>['text']
+  icon?: ComponentProps<typeof Icon>['name']
 }
 
 const {
-  variant = 'outline',
   label,
   icon,
   value,
   disabled,
   required,
-  radius = 'auto',
   placeholder,
   name = placeholder,
   type = 'text',
@@ -27,29 +23,27 @@ const {
 } = Astro.props
 ---
 
-<Root
+<Element
   class:list="input"
   {...rest}
 >
   <Label
     for={name}
-    html={label}
+    text={label}
   />
-  <Root
+  <Element
     as="input"
     if={name}
     id={name}
     {name}
-    {variant}
     {placeholder}
-    {radius}
     {type}
     {value}
     {disabled}
     {required}
   />
   <Icon name={icon} />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -84,18 +78,6 @@ const {
         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);
         }

package/src/components/Label.astro

@@ -1,28 +1,26 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
+interface Props extends GlobalProps, HTMLAttributes<'label'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  color?: 'base' | 'brand' | undefined
+  contrast?: boolean | undefined
+  text?: string | undefined
 }
 
-const { as = 'label', html, text, ...rest } = Astro.props
+const { text, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="label"
-  {as}
+  as="label"
   {...rest}
 >
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:text={text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -32,7 +30,6 @@ const { as = 'label', html, text, ...rest } = Astro.props
       color: var(--color-11);
       font-size: var(--text-2);
       line-height: 1;
-      font-family: var(--font-family);
       text-align: left;
       white-space: nowrap;
     }

package/src/components/Link.astro

@@ -1,30 +1,29 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  underline?: 'auto' | 'always' | 'hover' | 'none'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
+import type { HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'a'> {
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  text?: string | undefined
 }
 
-const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
+const { slug, href, text, ...rest } = Astro.props
+
+const entry = slug && (await getEntry('pages', slug))
 ---
 
-<Root
+<Element
   class:list="link"
-  {as}
-  {underline}
+  href={slug ? `/${slug}/` : href}
+  as="a"
   {...rest}
 >
-  <slot>
-    <Fragment set:text={text} />
-    <Fragment set:html={html} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:html={entry?.data?.title ?? text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -37,38 +36,17 @@ const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
       border: none;
       background: none;
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
-      font-family: var(--font-family);
       text-decoration-color: var(--border); // FIXME, werkt niet
+      text-decoration: none;
       white-space: nowrap;
 
-      &:hover {
-        color: var(--color-12);
-      }
-
-      &.underline-auto {
-        text-decoration: none;
-
-        &:is(p > &) {
-          text-decoration: underline;
-        }
-      }
-
-      &.underline-always {
+      &:is(p > &) {
         text-decoration: underline;
       }
 
-      &.underline-hover {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &.underline-none {
-        text-decoration: none;
+      &:hover {
+        color: var(--color-12);
       }
     }
   }

package/src/components/List.astro

@@ -1,24 +1,26 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  items?: (string | { text: string })[]
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'ul'>,
+    HTMLAttributes<'ol'> {
+  items?: string[] | undefined
+  as?: 'ul' | 'ol'
 }
 
 const { as = 'ul', items, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="list"
   {as}
   {...rest}
 >
-  {items?.map((item) => <li>{typeof item === 'string' ? item : item.text}</li>)}
-</Root>
+  {items?.map((item) => <li set:html={item} />)}
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

package/src/components/LocaleSwitcher.astro

@@ -0,0 +1,25 @@
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+{
+  Astro.props.locales && (
+    <Select
+      name="locale-switcher"
+      options={Astro.props.locales}
+      value={Astro.props.lang as string}
+      placeholder={Astro.props.lang as string}
+    />
+  )
+}
+
+<script>
+  const select = document.querySelector('.theme-switcher select')
+  select?.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement
+    const selectedLocale = target.value
+    const currentUrl = new URL(window.location.href)
+    currentUrl.pathname = '/' + selectedLocale + currentUrl.pathname
+    window.location.href = currentUrl.toString()
+  })
+</script>

package/src/components/Price.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  color?: 'base' | 'brand' | undefined
+  contrast?: boolean | undefined
+  value?: number | undefined
+}
+
+const { value, ...rest } = Astro.props
+---
+
+{
+  value && (
+    <Element
+      if={value}
+      class:list="price"
+      {...rest}
+    >
+      €{value?.toFixed(2).replace('.', ',')}
+    </Element>
+  )
+}
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .price {
+      margin: 0;
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-12);
+      font-size: var(--text-5);
+      line-height: 1.25;
+    }
+  }
+</style>

package/src/components/Rating.astro

@@ -1,19 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Avatar from './Avatar.astro'
-import Column from './Column.astro'
-import Label from './Label.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'div'> & {
-  color?: 'base' | 'brand'
-  align?: 'start' | 'center' | 'end'
-  value?: number
-  size?: string
-  label?: string
-  avatars?: string[]
-  avatar?: string
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  align?: 'start' | 'center' | 'end' | undefined
+  value?: number | undefined
+  label?: string | undefined
+  avatars?: string[] | undefined
+  avatar?: string | undefined
 }
 
 const { value, label, avatars, avatar, align, ...rest } = Astro.props
@@ -29,20 +27,20 @@ const getIcon = (count: number) => {
 const hasAvatars = avatars && avatars?.length > 0
 ---
 
-<Root
+<Element
   class:list="rating"
   {...rest}
 >
   {
-    [avatar, ...(avatars ?? [])]?.filter(Boolean)?.map((avatar) => (
-      <Avatar
-        radius="full"
-        src={avatar}
-      />
-    ))
+    [avatar, ...(avatars ?? [])]
+      ?.filter(Boolean)
+      ?.map((avatar) => <Avatar src={avatar} />)
   }
-  <Column align={!hasAvatars ? align : undefined}>
-    <Root
+  <Element
+    class:list="column"
+    align={!hasAvatars ? align : undefined}
+  >
+    <Element
       class:list={'stars'}
       {...rest}
     >
@@ -55,13 +53,13 @@ const hasAvatars = avatars && avatars?.length > 0
             />
           ))
       }
-    </Root>
+    </Element>
     <Label
       color="base"
-      html={label}
+      text={label}
     />
-  </Column>
-</Root>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -70,6 +68,12 @@ const hasAvatars = avatars && avatars?.length > 0
       align-items: center;
       gap: var(--space-4);
 
+      .column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
       .avatar + .avatar {
         margin-left: calc(var(--space-4) * -2.5);
       }

package/src/components/Search.astro

@@ -1,15 +1,15 @@
 ---
 import Pagefind from 'astro-pagefind/components/Search'
-import Dialog from './Dialog.astro'
+import Dialog from 'fulldev-ui/components/Dialog.astro'
 
-const { variant = 'secondary', icon, ...rest } = Astro.props
+const { variant = 'secondary', ...rest } = Astro.props
 ---
 
 <Dialog
   class:list="search"
   id="search"
+  icon="search"
   {variant}
-  {icon}
   {...rest}
 >
   <Pagefind uiOptions={{ showImages: false }} />