fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/components/List.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  items?: (string | { text: string })[]
+}
+
+const { as = 'ul', items, ...rest } = Astro.props
+---
+
+<Root
+  class:list="list"
+  {as}
+  {...rest}
+>
+  {items?.map((item) => <li>{typeof item === 'string' ? item : item.text}</li>)}
+</Root>
+
+<style is:global lang="scss">
+  .list {
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--space-5);
+    color: var(--color-11);
+    font-size: var(--text-2);
+    line-height: 1.625;
+    list-style-type: disc;
+
+    li {
+      align-items: center;
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+  }
+</style>

package/src/components/{structure/Masonry.astro → Masonry.astro}

@@ -1,28 +1,25 @@
 ---
 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 = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const { ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['masonry']}
+<Root
+  class:list="masonry"
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('masonry') {
-    --column-width: calc(16 * var(--space-4));
+  .masonry {
+    --column-width: calc(21 * var(--space-4));
     --gap: var(--space-4);
 
     position: relative;
@@ -33,7 +30,8 @@ const { ...rest } = Astro.props
     break-inside: avoid;
     width: 100%;
 
-    & > .full + .full {
+    & > .root + .root,
+    & > * + * {
       break-inside: avoid;
       margin-top: var(--gap);
       margin-bottom: var(--gap);

package/src/components/Rating.astro

@@ -0,0 +1,82 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+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'
+
+type Props = HTMLAttributes<'div'> & {
+  color?: 'base' | 'brand'
+  value?: number
+  size?: string
+  label?: string
+  avatars?: string[]
+  avatar?: string
+}
+
+const { value, label, avatars, avatar, ...rest } = Astro.props
+
+const getIcon = (count: number) => {
+  if (!value) return
+  const difference = value - count
+  if (difference >= -0.25) return 'star-filled'
+  if (difference >= -0.75) return 'star-half-filled'
+  return 'star'
+}
+---
+
+<Root
+  class:list="rating"
+  {...rest}
+>
+  {
+    [avatar, ...(avatars ?? [])]?.filter(Boolean)?.map((avatar) => (
+      <Avatar
+        radius="full"
+        src={avatar}
+      />
+    ))
+  }
+  <Column>
+    <Root
+      class:list={'stars'}
+      {...rest}
+    >
+      {
+        value &&
+          [1, 2, 3, 4, 5].map((_, i) => (
+            <Icon
+              name={getIcon(i + 1)}
+              class:list={'rating-icon-solid'}
+            />
+          ))
+      }
+    </Root>
+    <Label
+      color="base"
+      html={label}
+    />
+  </Column>
+</Root>
+
+<style is:global lang="scss">
+  .rating {
+    display: flex;
+    gap: var(--space-4);
+
+    .avatar + .avatar {
+      margin-left: calc(var(--space-4) * -2.5);
+    }
+
+    .label {
+      margin-top: var(--space-2) !important;
+    }
+
+    .stars {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/components/{_Component.astro → Root.astro}

@@ -5,22 +5,20 @@ type Props<As extends HTMLTag> = {
   as?: As
   slot?: any
   if?: 'content' | any
-  wrapper?: any
   [key: string | number | symbol]: any
 }
 
 const {
   as: As = 'div',
   if: ifProp = 'content',
-  wrapper = true,
   space,
   theme,
-  compact,
   variant,
   underline,
   density,
   size,
   align,
+  justify,
   color,
   position,
   frame,
@@ -32,6 +30,8 @@ const {
   radius,
   level,
   mask,
+  reverse,
+  lead,
   ...rest
 } = Astro.props
 
@@ -48,18 +48,18 @@ const render =
   render && (
     <As
       class:list={[
-        'full',
+        'root',
         structure,
         {
-          compact,
+          lead,
           contrast,
           [`theme-${theme}`]: theme,
           [`level-${level}`]: level,
           [`variant-${variant}`]: variant,
-          [`density-${density}`]: density,
           [`structure-${structure}`]: structure,
           [`size-${size}`]: size,
           [`align-${align}`]: align,
+          [`justify-${justify}`]: justify,
           [`position-${position}`]: position,
           [`frame-${frame}`]: frame,
           [`ratio-${ratio}`]: ratio,
@@ -68,25 +68,23 @@ const render =
           [`radius-${radius}`]: radius,
           [`mask-${mask}`]: mask,
           [`space-${space}`]: space,
+          [`reverse-${reverse}`]: reverse,
         },
       ]}
       {...rest}
     >
       <Fragment set:html={slot} />
-      <Fragment set:text={text} />
-      <Fragment set:html={html} />
     </As>
   )
 }
 
 <style is:global lang="scss">
-  @import '../css/utils.scss';
   @import '../css/color.css';
   @import '../css/styles.css';
-  @import '../css/size.scss';
+  @import '../css/size.css';
   @import '../css/space.css';
 
-  @include component('full') {
+  .root {
     z-index: 1;
     box-sizing: border-box;
   }

package/src/components/{structure/Row.astro → Row.astro}

@@ -1,11 +1,10 @@
 ---
 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 = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
+  size?: 'sm' | 'md' | 'lg'
   align?: 'start' | 'center' | 'end'
   space?: 'none' | 'auto'
 }
@@ -13,19 +12,17 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
 const { space = 'auto', align = 'center', ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['row']}
+<Root
+  class:list="row"
   {align}
   {space}
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('row') {
+  .row {
     display: flex;
 
     &.align-start {

package/src/components/Search.astro

@@ -0,0 +1,62 @@
+---
+import Pagefind from 'astro-pagefind/components/Search'
+import Dialog from './Dialog.astro'
+
+const { variant = 'secondary', icon, ...rest } = Astro.props
+---
+
+<Dialog
+  class:list="search"
+  id="search"
+  {variant}
+  {icon}
+  {...rest}
+>
+  <Pagefind uiOptions={{ showImages: false }} />
+</Dialog>
+
+<style is:global lang="scss">
+  :root {
+    --pagefind-ui-primary: var(--brand-11);
+    --pagefind-ui-text: var(--base-12);
+    --pagefind-ui-background: var(--base-2);
+    --pagefind-ui-border: var(--base-6);
+    --pagefind-ui-tag: var(--base-6);
+  }
+
+  @media (max-width: 123.9999) {
+    .search,
+    #search,
+    #search-button {
+      display: none !important;
+    }
+  }
+
+  .dialog div {
+    width: 100%;
+  }
+
+  .pagefind-ui__search-input {
+    outline: none !important;
+    border: 1px solid var(--base-7);
+    color: var(--base-11);
+
+    &::placeholder {
+      color: var(--base-11);
+    }
+
+    &:hover {
+      outline: none;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--base-8);
+      border-color: var(--base-8);
+    }
+  }
+
+  .pagefind-ui__search-clear {
+    background: transparent !important;
+  }
+</style>

package/src/components/Section.astro

@@ -0,0 +1,274 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import Column from 'fulldev-ui/components/Column.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import Wrap from 'fulldev-ui/components/Wrap.astro'
+import Tagline from './Tagline.astro'
+
+type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
+  position?: 'background' | 'cover' | 'inset'
+  ratio?: 'landscape' | 'portrait' | 'square' | number
+  mask?: 'sm' | 'md' | 'lg'
+  buttons?: ComponentProps<typeof Button<'a'>>[]
+  button?: ComponentProps<typeof Button<'a'>>
+  cards?: ComponentProps<typeof Card<'a'>>[]
+  badge?: string | ComponentProps<typeof Badge<'a'>>
+  image?: ComponentProps<typeof Image>['src']
+  rating?: number
+  pages?: CollectionEntry<'pages'>['data'][]
+  records?: CollectionEntry<'records'>['data'][]
+  heading?: string
+  title?: string
+  text?: string
+  html?: string
+  description?: string
+  label?: string
+  tagline?: string
+  list?: string[]
+  theme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+  frame?: 'none' | 'fill' | 'panel'
+  align?: 'start' | 'center' | 'end'
+  justify?: 'start' | 'center' | 'end'
+  structure?: 'column' | 'split' | 'spread' | 'carousel' | 'grid' | 'masonry'
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  space?: 'auto' | 'none'
+  reverse?: 'odd' | 'even'
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}
+
+const {
+  as = 'section',
+  space = 'auto',
+  frame = 'none',
+  structure = 'column',
+  variant = 'secondary',
+  align = 'start',
+  level = 2,
+  position,
+  label,
+  heading,
+  badge,
+  title,
+  text,
+  list,
+  html,
+  tagline,
+  description,
+  buttons,
+  image,
+  rating,
+  size,
+  button,
+  cards,
+  pages,
+  records,
+  mask,
+  ratio,
+  ...rest
+} = Astro.props
+
+const mergedCards = (pages || records || cards)?.filter(Boolean)
+const hasCards = mergedCards && mergedCards?.length > 0
+
+const buttonVariant = (i: number) => {
+  if (variant === 'primary' && i === 0) return 'primary'
+  else if (variant === 'primary' && i === 1) return 'secondary'
+  else if (variant === 'primary' && i > 1) return 'tertiary'
+  else if (variant === 'secondary' && i === 0) return 'secondary'
+  else if (variant === 'secondary' && i > 0) return 'tertiary'
+  else if (variant === 'tertiary') return 'tertiary'
+}
+---
+
+<Root
+  class:list="section"
+  variant={hasCards ? undefined : variant}
+  structure={structure === 'split' ? 'split' : 'column'}
+  frame={frame === 'panel' && hasCards ? 'none' : frame}
+  {as}
+  {align}
+  {space}
+  {size}
+  {...rest}
+>
+  <Box
+    structure={structure === 'spread' || structure === 'carousel'
+      ? 'spread'
+      : 'column'}
+    align={structure === 'split' ? 'start' : align}
+  >
+    <slot name="segment">
+      <Column
+        style={{ textWrap: 'balance' }}
+        align={structure === 'split' || structure === 'spread'
+          ? 'start'
+          : align}
+      >
+        <slot name="writeup">
+          <Rating
+            color="brand"
+            {...typeof rating === 'number' ? { value: rating } : rating}
+          />
+          <Badge
+            color="base"
+            radius="full"
+            {...typeof badge === 'string' ? { html: badge } : badge}
+          />
+          <Tagline
+            color="brand"
+            html={tagline}
+          />
+          <Heading
+            html={heading || title}
+            {level}
+          />
+          <Text
+            contrast={!hasCards && position === 'background' && true}
+            html={html || text || description}
+            lead={level === 1}
+          />
+          <List items={list} />
+        </slot>
+      </Column>
+      <Wrap>
+        <slot name="actions">
+          {
+            [button, ...(buttons ?? [])]
+              .filter(Boolean)
+              ?.map((button: any, i: number) => (
+                <Button
+                  variant={buttonVariant(i)}
+                  {...button}
+                />
+              ))
+          }
+        </slot>
+      </Wrap>
+    </slot>
+  </Box>
+  <slot>
+    <Box
+      structure={structure === 'split' || structure === 'spread'
+        ? 'column'
+        : structure}
+      position={structure === 'carousel' ? 'inset' : undefined}
+      size={size === 'lg' ? 'md' : 'sm'}
+    >
+      <slot name="deck">
+        {
+          mergedCards?.map(({ ...rest }: any) => (
+            <Card
+              align="start"
+              level={Number(level) + 2}
+              {position}
+              {frame}
+              {variant}
+              {ratio}
+              {mask}
+              {...rest}
+            />
+          ))
+        }
+      </slot>
+    </Box>
+    <Image
+      position={hasCards ? undefined : position}
+      ratio={hasCards ? undefined : ratio}
+      mask={hasCards ? undefined : mask}
+      src={image}
+    />
+  </slot>
+</Root>
+
+<style is:global lang="scss">
+  .section {
+    --inset-top: var(--space-7);
+    --inset-left: var(--gutter-left);
+    --inset-right: var(--gutter-right);
+    --inset-bottom: var(--space-7);
+
+    position: relative;
+
+    &:first-child {
+      --inset-top: var(--space-6);
+      --inset-bottom: var(--space-6);
+    }
+
+    &.frame-none {
+      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+        var(--inset-left);
+    }
+
+    &.frame-fill {
+      background-color: var(--color-2);
+      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+        var(--inset-left);
+    }
+
+    &.frame-panel {
+      --inset-top: var(--space-6);
+      --inset-left: min(var(--gutter), var(--space-7));
+      --inset-right: min(var(--gutter), var(--space-7));
+      --inset-bottom: var(--space-6);
+
+      margin: var(--inset-top) var(--gutter-right) var(--inset-bottom)
+        var(--gutter-left);
+      border: 1px solid var(--base-a6);
+      border-radius: var(--radius-2);
+      background-color: var(--color-2);
+      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+        var(--inset-left);
+      max-width: calc(
+        100vw - var(--sidebar-width) - var(--toc-width) - var(--inset-left) - var(
+            --inset-right
+          )
+      );
+      overflow: hidden;
+
+      @media (min-width: 1024px) {
+        --inset-top: var(--space-7);
+        --inset-bottom: var(--space-7);
+      }
+    }
+
+    &.frame-viewport {
+      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+        var(--inset-left);
+      min-height: 100vh;
+    }
+
+    @media (min-width: 1024px) {
+      &:nth-of-type(odd).split.reverse-odd {
+        > :first-child {
+          order: 999;
+        }
+
+        > :last-child {
+          order: 0;
+        }
+      }
+
+      &:nth-of-type(even).split.reverse-even {
+        > :first-child {
+          order: 0;
+        }
+
+        > :last-child {
+          order: 999;
+        }
+      }
+    }
+  }
+</style>