fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/content/pages/docs/components/buttons.mdx

@@ -0,0 +1,51 @@
+---
+_layout: doc
+title: Buttons
+---
+
+# Buttons
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+---
+
+<Buttons buttons={[{ text: 'First' }, { text: 'Second' }]} />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+---
+
+<Buttons
+  variant="primary"
+  buttons={[{ text: 'First' }, { text: 'Second' }, { text: 'Third' }]}
+/>
+<Buttons
+  variant="secondary"
+  buttons={[{ text: 'First' }, { text: 'Second' }]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+---
+
+<Buttons size="sm" buttons={[{ text: 'First' }, { text: 'Second' }]} />
+<Buttons size="md" buttons={[{ text: 'First' }, { text: 'Second' }]} />
+<Buttons size="lg" buttons={[{ text: 'First' }, { text: 'Second' }]} />
+```

package/src/content/pages/docs/components/channel.mdx

@@ -0,0 +1,91 @@
+---
+_layout: doc
+title: Channel
+---
+
+# Channel
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Channel from 'fulldev-ui/components/Channel.astro'
+---
+
+<Channel
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Channel from 'fulldev-ui/components/Channel.astro'
+---
+
+<Channel
+  variant="primary"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+
+<Channel
+  variant="secondary"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+
+<Channel
+  variant="outline"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Channel from 'fulldev-ui/components/Channel.astro'
+---
+
+<Channel
+  size="sm"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+
+<Channel
+  size="md"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+
+<Channel
+  size="lg"
+  heading="Email"
+  text="info@full.dev"
+  icon="mail"
+  href="mailto:info@full.dev"
+/>
+```

package/src/content/pages/docs/components/channels.mdx

@@ -0,0 +1,89 @@
+---
+_layout: doc
+title: Channels
+---
+
+# Channels
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Channels from 'fulldev-ui/components/Channels.astro'
+---
+
+<Channels
+  channels={[
+    {
+      icon: 'mail',
+      heading: 'Mail',
+      text: 'info@full.dev',
+      href: 'mailto:info@full.dev',
+    },
+    {
+      icon: 'phone',
+      heading: 'Phone',
+      text: '+316 83485163',
+      href: 'tel:+31683485163',
+    },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Channels from 'fulldev-ui/components/Channels.astro'
+---
+
+<Channels
+  variant="primary"
+  channels={[
+    {
+      icon: 'mail',
+      heading: 'Mail',
+      text: 'info@full.dev',
+      href: 'mailto:info@full.dev',
+    },
+    {
+      icon: 'phone',
+      heading: 'Phone',
+      text: '+316 83485163',
+      href: 'tel:+31683485163',
+    },
+  ]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Channels from 'fulldev-ui/components/Channels.astro'
+---
+
+<Channels
+  size="sm"
+  channels={[
+    {
+      icon: 'mail',
+      heading: 'Mail',
+      text: 'info@full.dev',
+      href: 'mailto:info@full.dev',
+    },
+    {
+      icon: 'phone',
+      heading: 'Phone',
+      text: '+316 83485163',
+      href: 'tel:+31683485163',
+    },
+  ]}
+/>
+```

package/src/content/pages/docs/components/checkbox.mdx

@@ -0,0 +1,34 @@
+---
+_layout: doc
+title: Checkbox
+---
+
+# Checkbox
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Checkbox from 'fulldev-ui/components/Checkbox.astro'
+---
+
+<Checkbox label="Checkbox" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Checkbox from 'fulldev-ui/components/Checkbox.astro'
+---
+
+<Checkbox size="sm" label="Small" />
+<Checkbox size="md" label="Medium" />
+<Checkbox size="lg" label="Large" />
+```

package/src/content/pages/docs/components/code.mdx

@@ -0,0 +1,45 @@
+---
+_layout: doc
+title: Code
+---
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Code from 'fulldev-ui/components/Code.astro'
+
+# Code
+
+Enhanced code component with live preview.
+
+```astro live
+<h1>I'm a live preview</h1>
+```
+
+## Usage in html
+
+Use it in the same way as the native Astro `<Code/>` component, which is documented [here](https://docs.astro.build/en/reference/components-reference/#code-).
+
+The following code will translate to the example at the top of this page:
+
+```astro
+---
+import Code from 'fulldev-ui/components/Code.astro'
+---
+
+<Code code={`<h1>I'm a live preview</h1>`} />
+```
+
+Will render as:
+
+<Code code={`<h1>I'm a live preview</h1>`} />
+
+## Usage in markdown
+
+Thanks to [this great plugin](https://github.com/mattjennings/astro-live-code) you can also use it directly in markdown files.
+
+The following code will translate to the example at the top of this page:
+
+````html
+```astro live
+<h1>I'm a live preview</h1>
+```
+````

package/src/content/pages/docs/components/heading.mdx

@@ -0,0 +1,59 @@
+---
+_layout: doc
+title: Heading
+---
+
+# Heading
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading>The quick brown fox jumps</Heading>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `level`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading level={1}>The quick brown fox jumps</Heading>
+<Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
+<Heading level={5}>The quick brown fox jumps over the lazy dog again</Heading>
+<Heading level={6}>The quick brown fox jumps over the lazy dog again</Heading>
+```
+
+### `size`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading size="sm">The quick brown fox jumps over the lazy dog</Heading>
+<Heading size="md">The quick brown fox jumps over the lazy dog</Heading>
+<Heading size="lg">The quick brown fox jumps</Heading>
+```
+
+### `text`
+
+```astro live
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Heading text="The quick brown fox jumps" />
+```

package/src/content/pages/docs/components/icon.mdx

@@ -0,0 +1,48 @@
+---
+_layout: doc
+title: Icon
+---
+
+# Icon
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" />
+```
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `name`
+
+Accepts any icon name supported by [Tabler Icons](https://tabler.io/icons).
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" />
+<Icon name="brand-x" />
+<Icon name="brand-github" />
+```
+
+### `size`
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="confetti" size="sm" />
+<Icon name="confetti" size="md" />
+<Icon name="confetti" size="lg" />
+```

package/src/content/pages/docs/components/image.mdx

@@ -0,0 +1,25 @@
+---
+_layout: doc
+title: Image
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+# Image
+
+Enhanced image built to work with the [images collections](/docs/collections/images/).
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image id="placeholder-landscape.webp" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples

package/src/content/pages/docs/components/input.mdx

@@ -0,0 +1,40 @@
+---
+_layout: doc
+title: Input
+---
+
+# Input
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input
+  label="Email"
+  icon="mail"
+  name="input"
+  type="email"
+  placeholder="Enter your email.."
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input size="sm" icon="mail" label="Small" />
+<Input size="md" icon="mail" label="Medium" />
+<Input size="lg" icon="mail" label="Large" />
+```

package/src/content/pages/{typography → docs/components}/label.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Label
 ---
 
@@ -22,20 +21,24 @@ import Label from 'fulldev-ui/components/Label.astro'
 
 ## Examples
 
+### `size`
+
 ```astro live
 ---
 import Label from 'fulldev-ui/components/Label.astro'
 ---
 
-<Label color="base">Label</Label>
-<Label color="brand">Label</Label>
+<Label size="sm">Small</Label>
+<Label size="md">Medium</Label>
+<Label size="lg">Large</Label>
 ```
 
+### `text`
+
 ```astro live
 ---
 import Label from 'fulldev-ui/components/Label.astro'
 ---
 
-<Label>Label</Label>
-<Label contrast>Label</Label>
+<Label text="Label" />
 ```

package/src/content/pages/{typography → docs/components}/link.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Link
 ---
 
@@ -13,7 +12,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link">Link</Link>
+<Link href="#">Link</Link>
 ```
 
 ## Props
@@ -22,30 +21,45 @@ import Link from 'fulldev-ui/components/Link.astro'
 
 ## Examples
 
+### `variant`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link" size="sm">Link</Link>
-<Link href="/base/link" size="md">Link</Link>
-<Link href="/base/link" size="lg">Link</Link>
+<Link href="#" variant="primary">Primary</Link>
+<Link href="#" variant="muted">Muted</Link>
 ```
 
+### `size`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="#">Link</Link>
-<Link href="#" contrast>Link</Link>
+<Link href="#" size="sm">Small</Link>
+<Link href="#" size="md">Medium</Link>
+<Link href="#" size="lg">Large</Link>
+```
+
+### `icon`
+
+```astro live
+---
+import Link from 'fulldev-ui/components/Link.astro'
+---
+
+<Link href="#" icon="arrow-right" text="Link" />
 ```
 
+### `text`
+
 ```astro live
 ---
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link color="base">Link</Link>
-<Link color="brand">Link</Link>
+<Link href="#" text="Link" />
 ```

package/src/content/pages/docs/components/links.mdx

@@ -0,0 +1,99 @@
+---
+_layout: doc
+title: Links
+---
+
+# Links
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `direction`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  direction="column"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+### `variant`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  variant="primary"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  variant="muted"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Links from 'fulldev-ui/components/Links.astro'
+---
+
+<Links
+  size="sm"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  size="md"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+
+<Links
+  size="lg"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+  ]}
+/>
+```