fulldev-ui 0.5.0-beta.3 → 0.5.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.3",
+  "version": "0.5.0-beta.4",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Contact.astro

@@ -13,35 +13,6 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Textarea from 'fulldev-ui/components/Textarea.astro'
 
-// interface Channel {
-//   type: 'tel' | 'email' | 'address'
-//   text: string
-//   heading?: string
-//   icon?: string
-//   href?: string
-// }
-
-// interface FormField {
-//   type: 'text' | 'email' | 'tel' | 'textarea'
-//   name: string
-//   label: string
-//   required?: boolean
-// }
-
-// interface Form {
-//   fields: FormField[]
-//   button: string
-// }
-
-// type Props<As extends HTMLTag = 'section'> = ComponentProps<
-//   typeof Section<As>
-// > & {
-//   form: Form
-//   googleMaps?: string
-//   socials?: any
-//   channels: Channel[]
-// }
-
 const {
   heading,
   form,
@@ -53,7 +24,7 @@ const {
   position,
   image,
   channels,
-  level = 2,
+  level = 1,
   ...rest
 } = Astro.props
 ---
@@ -69,6 +40,7 @@ const {
       text={tagline}
     />
     <Heading
+      size={'sm'}
       level={level}
       text={heading}
     />
@@ -106,6 +78,7 @@ const {
       <Button
         type="submit"
         color="brand"
+        variant="primary"
         text={form.button}
       />
     </Form>
@@ -126,6 +99,10 @@ const {
         align-items: flex-start;
       }
 
+      > .column {
+        gap: var(--space-5);
+      }
+
       .channel + .channel {
         margin-top: var(--space-3) !important;
       }

package/src/blocks/Intro.astro

@@ -8,7 +8,7 @@ const { image, ...rest } = Astro.props
   class:list="intro"
   structure="column"
   size="sm"
-  level={2}
+  level={1}
   {...rest}
 />
 
@@ -16,6 +16,8 @@ const { image, ...rest } = Astro.props
   @layer fulldev {
     .intro {
       border-bottom: 1px solid var(--base-6);
+      padding-top: var(--space-7);
+      padding-bottom: var(--space-7);
     }
   }
 </style>

package/src/components/Card.astro

@@ -9,6 +9,7 @@ import Image from 'fulldev-ui/components/Image.astro'
 import Writeup from 'fulldev-ui/components/Writeup.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Icon from './Icon.astro'
+import Price from './Price.astro'
 
 interface Props
   extends GlobalProps,
@@ -22,9 +23,11 @@ interface Props
   variant?: ComponentProps<typeof Button>['variant']
   align?: ComponentProps<typeof Writeup>['align']
   icon?: ComponentProps<typeof Icon>['name']
+  price?: ComponentProps<typeof Price>['value']
   slug?: CollectionEntry<'pages'>['slug'] | undefined
   id?: any
   panel?: boolean | undefined
+  title?: ComponentProps<typeof Writeup>['heading']
 }
 
 const { slug } = Astro.props
@@ -47,12 +50,14 @@ const {
   heading,
   text,
   variant,
+  price,
   list,
   button,
   buttons,
   panel,
   image,
   icon,
+  title,
   images,
   position,
   ...rest
@@ -81,14 +86,15 @@ const {
   </slot>
   <slot name="writeup">
     <Writeup
+      heading={heading || title}
       {level}
       {rating}
       {badge}
       {tagline}
-      {heading}
       {text}
       {list}
     />
+    <Price value={price} />
   </slot>
   <slot name="buttons">
     <Button
@@ -121,12 +127,12 @@ const {
       &[href] {
         cursor: pointer;
 
-        > .root.image {
-          transition: all;
+        > .image {
+          transition: all 0.2s ease;
         }
 
         &:hover {
-          > .root.image {
+          > .image {
             opacity: 0.8;
           }
         }

package/src/components/Footer.astro

@@ -53,9 +53,8 @@ const {
 >
   <Element class:list="column">
     <Logo
-      id={logo}
-      src={logo}
       {company}
+      {...typeof logo === 'string' ? { src: logo } : logo}
     />
     <Text
       color="base"
@@ -110,6 +109,7 @@ const {
       align-items: flex-start;
       gap: var(--space-6);
       margin-top: auto;
+      margin-top: auto;
       border-top-width: 1px;
       border-color: var(--base-a6);
       background-color: var(--base-2);

package/src/components/Header.astro

@@ -40,9 +40,8 @@ const {
   {...rest}
 >
   <Logo
-    id={logo}
-    src={logo}
     {company}
+    {...typeof logo === 'string' ? { src: logo } : logo}
   />
   <Buttons
     {buttons}

package/src/components/Sidebar.astro

@@ -40,8 +40,8 @@ const {
   {open}
 >
   <Logo
-    src={logo}
-    company={company}
+    {company}
+    {...typeof logo === 'string' ? { src: logo } : logo}
   />
   {search && <Search />}
   <Element class:list="buttons">

package/src/components/Social.astro

@@ -26,3 +26,10 @@ const platform = () => {
   {variant}
   {href}
 />
+
+<style is:global lang="scss">
+  .social {
+    padding: 0 var(--space-3);
+    height: calc(var(--text-2) + 2 * var(--space-3));
+  }
+</style>

package/src/components/experimental/Form.astro

@@ -21,6 +21,8 @@ const { structure = 'column', ...rest } = Astro.props
 <style is:global lang="scss">
   .form {
     display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
     width: 100%;
     max-width: calc(var(--space-4) * 44);
   }

package/src/content/presets/docs.yml

@@ -3,6 +3,7 @@ component: DocsLayout
 sidebar: true
 header: false
 banner: false
+toc: true
 
 navigation:
   company: Fulldev UI

package/src/layouts/Layout.astro

@@ -84,10 +84,14 @@ const {
         </slot>
       </main>
       <slot name="toc">
-        <Toc
-          {render}
-          {...toc}
-        />
+        {
+          toc && (
+            <Toc
+              {render}
+              {...toc}
+            />
+          )
+        }
       </slot>
     </div>
     <slot name="footer">
@@ -108,25 +112,28 @@ const {
 
         body {
           --screen: 100vw;
+          display: flex;
+          flex-direction: column;
 
           background-color: var(--base-2);
           width: 100%;
+          min-height: 100vh;
           color: var(--base-11);
 
           .core {
             display: flex;
             position: relative;
+            flex-grow: 1;
+            height: 100%;
 
             main {
               --screen: 1280px;
-
               display: flex;
               flex: 1;
               flex-direction: column;
               background-color: var(--color-background);
               width: 100%;
               max-width: 100vw;
-              min-height: 100vh;
               overflow-x: hidden;
             }
           }

package/src/layouts/OverviewLayout.astro

@@ -23,11 +23,13 @@ const referenceChildren = await getReferenceChildren(slug)
     text={description}
   />
   <Categories
+    component="Categories"
     cards={folderChildren}
     structure="grid"
     panel
   />
   <Products
+    component="Products"
     cards={referenceChildren}
     structure="grid"
   />

package/src/schemas/components/footer.ts

@@ -22,3 +22,4 @@ export default z
     ),
   })
   .partial()
+  .passthrough()

package/src/schemas/components/header.ts

@@ -2,9 +2,12 @@ import { z } from 'astro:content'
 import buttons from './buttons'
 import logo from './logo'
 
-export default z
-  .object({
-    logo,
-    buttons,
-  })
-  .partial()
+export default z.boolean().or(
+  z
+    .object({
+      logo,
+      buttons,
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/pageSchema.ts

@@ -1,6 +1,8 @@
 import { getEntries, getEntry, z } from 'astro:content'
 import { assign } from 'radash'
 import fulldevConfig from 'virtual:fulldev-ui/config'
+import footer from './components/footer'
+import header from './components/header'
 import image from './components/image'
 import images from './components/images'
 import sections from './components/sections'
@@ -63,11 +65,12 @@ export default i18n.pipe(presets).pipe(
       image,
       images,
       sections,
-      header: z.any(),
-      footer: z.any(),
+      header,
+      footer,
       navigation,
       toc: z.any(),
       sidebar: z.any(),
+      banner: z.any(),
     })
     .partial()
     .passthrough()

package/src/schemas/presetSchema.ts

@@ -1,7 +1,10 @@
 import { z } from 'astro:content'
+import footer from './components/footer'
+import header from './components/header'
 import image from './components/image'
 import sections from './components/sections'
 import component from './utils/component'
+import navigation from './utils/navigation'
 import parents from './utils/parents'
 
 export default z
@@ -20,10 +23,11 @@ export default z
     description: z.string().optional(),
     image,
     sections,
-    header: z.any(),
-    footer: z.any(),
-    navigation: z.any(),
+    header,
+    footer,
+    navigation,
     toc: z.any(),
     sidebar: z.any(),
   })
   .partial()
+  .passthrough()

package/src/schemas/utils/navigation.ts

@@ -17,6 +17,7 @@
 // })
 
 import { z } from 'astro:content'
+import logo from '../components/logo'
 import pathSchema from '../utils/pathSchema'
 
 const button = pathSchema('pages').or(
@@ -43,7 +44,7 @@ const group = z
 
 export default z
   .object({
-    logo: z.string(),
+    logo,
     search: z.boolean(),
     sidebar: z.boolean(),
     toc: z.boolean(),

package/src/utils/getReferenceChildren.ts

@@ -8,4 +8,7 @@ export const getReferenceChildren = async (
     await getCollection('pages', (page) =>
       page.data?.parents?.some((p: any) => p.slug === slug)
     )
-  )?.map((page) => page.data)
+  )?.map(({ slug, data }) => ({
+    ...data,
+    href: `/${slug}/`,
+  }))