fulldev-ui 0.4.14 → 0.4.16

package/src/blocks/Features.astro

@@ -6,6 +6,6 @@ const { ...rest } = Astro.props
 
 <Section
   class:list="features"
-  structure="grid"
+  structure="stack"
   {...rest}
 />

package/src/blocks/Prices.astro

@@ -6,7 +6,7 @@ const { ...rest } = Astro.props
 
 <Section
   class:list="prices"
-  structure="grid"
+  structure="stack"
   frame="panel"
   {...rest}
 />

package/src/components/Badge.astro

@@ -34,8 +34,8 @@ const {
   <slot>
     <Fragment set:text={text} />
     <Fragment set:html={html} />
-    <Icon name={icon} />
   </slot>
+  <Icon name={icon} />
 </Root>
 
 <style is:global lang="scss">

package/src/components/Box.astro

@@ -8,6 +8,7 @@ import Masonry from './Masonry.astro'
 import Row from './Row.astro'
 import Split from './Split.astro'
 import Spread from './Spread.astro'
+import Stack from './Stack.astro'
 import Wrap from './Wrap.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
@@ -25,6 +26,7 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
     | 'split'
     | 'spread'
     | 'wrap'
+    | 'stack'
 }
 
 const structuresMap = {
@@ -37,6 +39,7 @@ const structuresMap = {
   split: Split,
   spread: Spread,
   wrap: Wrap,
+  stack: Stack,
 }
 
 const {

package/src/components/Button.astro

@@ -35,9 +35,9 @@ const {
   {radius}
   {...rest}
 >
+  <Avatar src={avatar} />
+  <Icon name={icon} />
   <slot>
-    <Avatar src={avatar} />
-    <Icon name={icon} />
     <Fragment set:html={html} />
     <Fragment set:text={text} />
   </slot>
@@ -57,7 +57,7 @@ const {
       cursor: pointer;
       outline: none;
       box-shadow: none;
-      border: none;
+      border-width: 0px;
       background: none;
       padding: 0 var(--space-4);
       height: calc(var(--text-2) + 2 * var(--space-4));
@@ -111,21 +111,23 @@ const {
       }
 
       &.variant-secondary {
-        box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
+        border-style: solid;
+        border-color: var(--color-7);
         background-color: var(--color-3);
         color: var(--color-11);
 
         &:hover {
+          border-color: var(--color-8);
           background-color: var(--color-4);
         }
 
         &:active {
+          border-color: var(--color-8);
           background-color: var(--color-5);
         }
       }
 
       &.variant-tertiary {
-        box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
         background-color: transparent;
         color: var(--color-11);
 

package/src/components/Card.astro

@@ -12,12 +12,14 @@ import Spread from 'fulldev-ui/components/Spread.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Wrap from 'fulldev-ui/components/Wrap.astro'
+import Badge from './Badge.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   ratio?: 'landscape' | 'portrait' | 'square' | number
   variant?: 'primary' | 'secondary' | 'tertiary'
   position?: 'background' | 'cover' | 'inset'
   align?: 'start' | 'center' | 'end'
+  justify?: 'start' | 'center' | 'end'
   level?: 1 | 2 | 3 | 4 | 5 | 6
   size?: 'sm' | 'md' | 'lg'
   radius?: 'auto' | 'none'
@@ -26,8 +28,11 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   space?: 'auto' | 'none'
   mask?: 'sm' | 'md' | 'lg'
   image?: string
+  images?: string[]
   button?: ComponentProps<typeof Button<'a'>>
   buttons?: ComponentProps<typeof Button<'a'>>[]
+  badge?: string | ComponentProps<typeof Badge<'a'>>
+  badges?: (string | ComponentProps<typeof Badge<'a'>>)[]
   rating?: number | ComponentProps<typeof Rating>
   price?: number
   icon?: string
@@ -48,7 +53,7 @@ const {
   href,
   as = href ? 'a' : 'div',
   space = 'auto',
-  frame = 'panel',
+  frame = 'none',
   radius = 'auto',
   align = 'start',
   variant,
@@ -63,8 +68,11 @@ const {
   description,
   list,
   buttons,
+  badge,
+  badges,
   ratio,
   image,
+  images,
   rating,
   button,
   price,
@@ -101,13 +109,26 @@ const buttonVariant = (i: number) => {
     {position}
     {mask}
     ratio={position === 'background' ? undefined : ratio}
-    src={image}
+    src={image || images?.[0]}
   />
   <Icon name={icon} />
   <Rating
     color="brand"
+    {avatars}
+    {avatar}
+    {label}
     {...typeof rating === 'number' ? { value: rating } : rating}
   />
+  <Wrap>
+    {
+      [badge, ...(badges ?? [])].filter(Boolean)?.map((badge: any) => (
+        <Badge
+          color="base"
+          {...(typeof badge === 'string' ? { html: badge } : badge)}
+        />
+      ))
+    }
+  </Wrap>
   <Tagline
     color="base"
     html={tagline}

package/src/components/Drawer.astro

@@ -59,6 +59,7 @@ const {
       background: var(--color-2);
       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;

package/src/components/Footer.astro

@@ -8,7 +8,7 @@ import Text from 'fulldev-ui/components/Text.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 
 type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'split' | 'column'
+  structure?: 'spread' | 'row' | 'split' | 'column' | 'stack'
   variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
   frame?: 'fill' | 'panel' | 'contain'
   align?: 'start' | 'center' | 'end'

package/src/components/Grid.astro

@@ -24,7 +24,7 @@ const { ...rest } = Astro.props
 
       display: grid;
       position: relative;
-      grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
       gap: var(--space-4);
       width: 100%;
     }

package/src/components/Header.astro

@@ -32,8 +32,7 @@ const {
   structure = 'spread',
   space = 'auto',
   size = 'sm',
-  frame = 'fill',
-  variant = 'base',
+  frame = 'none',
   logo,
   heading,
   links,
@@ -52,7 +51,6 @@ const url = Astro.url.href
   {as}
   {frame}
   {structure}
-  {variant}
   {space}
   {size}
   {...rest}
@@ -86,52 +84,54 @@ const url = Astro.url.href
         />
       ))
     }
-    <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.replace(/\/$/, '').endsWith(link.href)
-                      ? 'brand'
-                      : undefined
-                  }
+    {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.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>
+                {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>
 
@@ -160,6 +160,10 @@ const url = Astro.url.href
       max-width: calc(100% - (2 * var(--outer-x)));
       height: var(--header-height);
 
+      &.frame-none {
+        padding: 0 var(--gutter);
+      }
+
       &.frame-fill {
         background-color: var(--color-2);
         padding: 0 var(--gutter);

package/src/components/Rating.astro

@@ -8,6 +8,7 @@ import Label from './Label.astro'
 
 type Props = HTMLAttributes<'div'> & {
   color?: 'base' | 'brand'
+  align?: 'start' | 'center' | 'end'
   value?: number
   size?: string
   label?: string
@@ -15,7 +16,7 @@ type Props = HTMLAttributes<'div'> & {
   avatar?: string
 }
 
-const { value, label, avatars, avatar, ...rest } = Astro.props
+const { value, label, avatars, avatar, align, ...rest } = Astro.props
 
 const getIcon = (count: number) => {
   if (!value) return
@@ -24,6 +25,8 @@ const getIcon = (count: number) => {
   if (difference >= -0.75) return 'star-half-filled'
   return 'star'
 }
+
+const hasAvatars = avatars && avatars?.length > 0
 ---
 
 <Root
@@ -38,7 +41,7 @@ const getIcon = (count: number) => {
       />
     ))
   }
-  <Column>
+  <Column align={!hasAvatars ? align : undefined}>
     <Root
       class:list={'stars'}
       {...rest}
@@ -64,6 +67,7 @@ const getIcon = (count: number) => {
   @layer fulldev {
     .rating {
       display: flex;
+      align-items: center;
       gap: var(--space-4);
 
       .avatar + .avatar {

package/src/components/Root.astro

@@ -87,7 +87,7 @@ const render =
 
   @layer fulldev {
     .root {
-      z-index: 1;
+      z-index: 0;
       box-sizing: border-box;
     }
   }

package/src/components/Section.astro

@@ -41,7 +41,14 @@ type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
   frame?: 'none' | 'fill' | 'panel'
   align?: 'start' | 'center' | 'end'
   justify?: 'start' | 'center' | 'end'
-  structure?: 'column' | 'split' | 'spread' | 'carousel' | 'grid' | 'masonry'
+  structure?:
+    | 'column'
+    | 'split'
+    | 'spread'
+    | 'carousel'
+    | 'grid'
+    | 'masonry'
+    | 'stack'
   level?: 1 | 2 | 3 | 4 | 5 | 6
   space?: 'auto' | 'none'
   reverse?: 'odd' | 'even'
@@ -75,12 +82,16 @@ const {
   pages,
   records,
   mask,
+  justify,
+  theme,
   ratio,
   ...rest
 } = Astro.props
 
 const mergedCards = (pages || records || cards)?.filter(Boolean)
 const hasCards = mergedCards && mergedCards?.length > 0
+const hasText = text || html || description || list
+const hasButton = button || (buttons && buttons?.length > 0)
 
 const buttonVariant = (i: number) => {
   if (variant === 'primary' && i === 0) return 'primary'
@@ -95,6 +106,8 @@ const buttonVariant = (i: number) => {
 <Root
   class:list="section"
   variant={hasCards ? undefined : variant}
+  justify={hasCards ? undefined : justify}
+  theme={hasCards ? undefined : theme}
   structure={structure === 'split' ? 'split' : 'column'}
   frame={frame === 'panel' && hasCards ? 'none' : frame}
   {as}
@@ -104,7 +117,9 @@ const buttonVariant = (i: number) => {
   {...rest}
 >
   <Box
-    structure={structure === 'spread' || structure === 'carousel'
+    structure={structure === 'spread' ||
+    structure === 'carousel' ||
+    (!hasText && hasButton)
       ? 'spread'
       : 'column'}
     align={structure === 'split' ? 'start' : align}
@@ -119,6 +134,7 @@ const buttonVariant = (i: number) => {
         <slot name="writeup">
           <Rating
             color="brand"
+            {align}
             {...typeof rating === 'number' ? { value: rating } : rating}
           />
           <Badge
@@ -174,6 +190,8 @@ const buttonVariant = (i: number) => {
               level={Number(level) + 2}
               {position}
               {frame}
+              {justify}
+              {theme}
               {variant}
               {ratio}
               {mask}

package/src/components/Stack.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const { ...rest } = Astro.props
+---
+
+<Root
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Root>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .stack {
+      display: grid;
+      position: relative;
+      grid-template-columns: 1fr;
+      align-items: flex-start;
+      gap: var(--space-6);
+      width: 100%;
+
+      @media (min-width: 1024px) {
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+      }
+    }
+  }
+</style>

package/src/components/docs/NavigationButtons.astro

@@ -0,0 +1,59 @@
+---
+import { getCollection } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Section from '../Section.astro'
+import Spread from '../Spread.astro'
+
+const { sidebar = [] } = Astro.props
+
+const allPages = await getCollection('pages')
+const pages = []
+
+for (const item of sidebar as any) {
+  if (item.links) pages.push(...item.links)
+  if (item.folder) {
+    const folderPages = allPages.filter(
+      (page: any) =>
+        page.slug.startsWith(item.folder) && !page.slug.endsWith(item.folder)
+    )
+    pages.push(
+      ...folderPages.map((page: any) => ({
+        href: `/${page.slug}`,
+        text: page.data.title,
+      }))
+    )
+  }
+}
+
+const withoutLeadingOrTrailingSlashes = (path: string) =>
+  path.replace(/^\/+|\/+$/g, '')
+
+const currentIndex = pages.findIndex(
+  (page: any) =>
+    withoutLeadingOrTrailingSlashes(page?.href) ===
+    withoutLeadingOrTrailingSlashes(Astro.url.pathname)
+)
+
+const prevPage = pages[currentIndex - 1]
+const nextPage = pages[currentIndex + 1]
+---
+
+{
+  sidebar && sidebar.length > 0 && (
+    <Section>
+      <Spread>
+        <Button
+          href={prevPage?.href}
+          variant="secondary"
+          text={prevPage ? `← ${prevPage.text}` : undefined}
+        />
+        <Button
+          href={nextPage?.href}
+          variant="secondary"
+          text={nextPage ? `${nextPage.text} →` : undefined}
+          style={{ marginLeft: 'auto' }}
+        />
+      </Spread>
+    </Section>
+  )
+}

package/src/components/experimental/Channel.astro

@@ -51,10 +51,7 @@ const {
       {level}
       set:html={heading}
     />
-    <Text
-      style={{ marginTop: 'var(--space-1)' }}
-      set:html={text}
-    />
+    <Text set:html={text} />
   </Column>
 </Root>