fulldev-ui 0.6.0-beta.9 → 0.6.1

package/src/blocks/Content2.astro

@@ -1,70 +1,47 @@
 ---
-// Content left, image right, centered
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
   Astro.props
 ---
 
 <Section
-  class:list="content-2"
+  class="content-2"
   {...rest}
 >
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Fragment set:html={content} />
-      <slot />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Image {...image} />
+    <Split align="center">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image {...image} />
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-2 {
-      .container {
-        @apply grid items-center gap-x-gutter gap-y-16 lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply max-w-screen-sm;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content3.astro

@@ -1,75 +1,47 @@
 ---
-// Content left, image right, sticky
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
   Astro.props
 ---
 
 <Section
-  class:list="content-3"
+  class="content-3"
   {...rest}
 >
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Fragment set:html={content} />
-      <slot />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Image {...image} />
+    <Split align="sticky">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image {...image} />
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-3 {
-      .container {
-        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
-      }
-
-      .prose,
-      .image {
-        @apply lg:sticky lg:top-sticky-16;
-      }
-
-      .prose {
-        @apply max-w-screen-sm;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content4.astro

@@ -1,68 +1,52 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content, list } =
   Astro.props
 ---
 
-<Section
-  class:list="content-4"
-  {...rest}
->
+<Section class="content-4">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Prose>
-      <Image {...image} />
-      <Fragment set:html={content} />
-      <slot />
-    </Prose>
+    <Split align="sticky">
+      <Prose class="lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <List items={list} />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Prose>
+        <Image {...image} />
+        <Fragment set:html={content} />
+        <slot />
+        <Buttons
+          class="lg:hidden"
+          {buttons}
+        />
+      </Prose>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-4 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-    }
-  }
-</style>

package/src/blocks/Content5.astro

@@ -1,40 +1,29 @@
 ---
-// Content in 2 columns
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content } =
   Astro.props
 ---
 
-<Section
-  class:list="content-5"
-  {...rest}
->
-  <Container>
+<Section class="content-5">
+  <Container class="flex flex-col items-start gap-8">
     <Prose>
       <Tagline text={tagline} />
       <Heading
-        as="h2"
         size="5xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         muted
@@ -42,7 +31,7 @@ const { tagline, heading, paragraph, buttons, image, content, ...rest } =
         text={paragraph}
       />
     </Prose>
-    <Prose class:list="content-5-main">
+    <Prose align="columns">
       <Fragment set:html={content} />
       <slot />
     </Prose>
@@ -52,21 +41,3 @@ const { tagline, heading, paragraph, buttons, image, content, ...rest } =
     <Image {...image} />
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-5 {
-      .container {
-        @apply flex flex-col items-start gap-8;
-      }
-
-      .content-5-main {
-        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content6.astro

@@ -0,0 +1,57 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  headings,
+} = Astro.props
+---
+
+<Container class="content-6 flex items-start justify-between px-0">
+  <Container class="lg:!max-w-[calc(100%-var(--sidebar-width))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+        muted
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Toc
+      size="sm"
+      {heading}
+      {headings}
+    />
+  </Sidebar>
+</Container>

package/src/blocks/Content7.astro

@@ -0,0 +1,65 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  menus,
+  headings,
+} = Astro.props
+---
+
+<Container class="content-7 flex items-start justify-between px-0">
+  <Sidebar>
+    <Menus
+      size="sm"
+      {menus}
+    />
+  </Sidebar>
+  <Container class="lg:!max-w-[calc(100%-(2*var(--sidebar-width)))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        size="4xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Toc
+      size="sm"
+      {heading}
+      {headings}
+    />
+  </Sidebar>
+</Container>

package/src/blocks/Content8.astro

@@ -0,0 +1,48 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth, tagline, heading, paragraph, buttons, image, content, menus } =
+  Astro.props
+---
+
+<Container class="content-8 flex items-start justify-between px-0">
+  <Sidebar>
+    <Menus
+      size="sm"
+      {menus}
+    />
+  </Sidebar>
+  <Container class="lg:!max-w-[calc(100%-var(--sidebar-width))]">
+    <Prose class="max-w-none py-8">
+      <Tagline text={tagline} />
+      <Heading
+        size="4xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+</Container>

package/src/blocks/Cta1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -9,12 +8,13 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Panel from 'fulldev-ui/structures/Panel.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
+  depth = 2,
   tagline,
   heading,
   paragraph,
@@ -22,25 +22,22 @@ const {
   button,
   buttons,
   image,
-  ...rest
 } = Astro.props
 ---
 
-<Section
-  class:list="cta-1"
-  {...rest}
->
+<Section class:list="cta-1">
   <Container>
     <Panel>
-      <Writeup align="center">
+      <Prose align="center">
         <Tagline text={tagline} />
         <Heading
-          size="4xl"
+          size="5xl"
           as="h2"
           text={heading}
+          {depth}
         />
         <Paragraph
-          size="lg"
+          size="xl"
           text={paragraph}
         />
         <Fragment set:html={content} />
@@ -52,7 +49,7 @@ const {
             {buttons}
           />
         </Group>
-      </Writeup>
+      </Prose>
       <Image {...image} />
     </Panel>
   </Container>

package/src/blocks/Cta2.astro

@@ -0,0 +1,52 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Panel from 'fulldev-ui/structures/Panel.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
+---
+
+<Section
+  class="cta-2"
+  {...rest}
+>
+  <Container>
+    <Panel class="p-0">
+      <Split align="center">
+        <Prose class="px-4 sm:px-8 lg:px-16">
+          <Tagline text={tagline} />
+          <Heading
+            size="4xl"
+            text={heading}
+            {depth}
+          />
+          <Paragraph
+            size="lg"
+            text={paragraph}
+          />
+          <Fragment set:html={content} />
+          <slot />
+          <Group>
+            <Buttons
+              size="lg"
+              {buttons}
+            />
+          </Group>
+        </Prose>
+        <Image {...image} />
+      </Split>
+    </Panel>
+  </Container>
+</Section>