fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/src/content/pages/{base/card.mdx → docs/components/_card.mdx}

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Card
 ---
 
@@ -15,7 +14,7 @@ import Card from 'fulldev-ui/components/Card.astro'
 
 <Card
   heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 ```
 
@@ -74,13 +73,11 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  color="base"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  color="brand"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />

package/src/content/pages/{base → docs/components}/_dialog.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Dialog
 ---
 

package/src/content/pages/{base → docs/components}/_drawer.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Drawer
 ---
 

package/src/content/pages/{base → docs/components}/_localeswitcher.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: LocaleSwitcher
 ---
 

package/src/content/pages/{base → docs/components}/_switch.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Switch
 ---
 
@@ -27,6 +26,6 @@ import Switch from 'fulldev-ui/components/Switch.astro'
 import Switch from 'fulldev-ui/components/Switch.astro'
 ---
 
-<Switch color="base" trueLabel="On" falseLabel="Off" />
-<Switch color="brand" trueLabel="On" falseLabel="Off" />
+<Switch trueLabel="On" falseLabel="Off" />
+<Switch trueLabel="On" falseLabel="Off" />
 ```

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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Tagline
 ---
 
@@ -19,8 +18,8 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 ---
 
-<Tagline color="base">The quick brown fox jumps</Tagline>
-<Tagline color="brand">The quick brown fox jumps</Tagline>
+<Tagline>The quick brown fox jumps</Tagline>
+<Tagline>The quick brown fox jumps</Tagline>
 ```
 
 Set to `true` by default on Headings, which you can override by setting it to `false`.

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

@@ -0,0 +1,30 @@
+---
+_layout: doc
+title: Toggle
+---
+
+# Toggle
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```

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

@@ -0,0 +1,34 @@
+---
+_layout: doc
+title: Avatar
+---
+
+# Avatar
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+---
+
+<Avatar id="avatar-1.jpeg" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+---
+
+<Avatar id="avatar-1.jpeg" size="sm" />
+<Avatar id="avatar-1.jpeg" size="md" />
+<Avatar id="avatar-1.jpeg" size="lg" />
+```

package/src/content/pages/{base → docs/components}/badge.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Badge
 ---
 
@@ -22,38 +21,57 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 
 ## Examples
 
+### `variant`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge size="sm">Badge</Badge>
-<Badge size="md">Badge</Badge>
-<Badge size="lg">Badge</Badge>
+<Badge variant="primary">Primary</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="outline">Outline</Badge>
 ```
 
+### `size`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge color="base">Badge</Badge>
-<Badge color="brand">Badge</Badge>
+<Badge size="sm">Small</Badge>
+<Badge size="md">Medium</Badge>
+<Badge size="lg">Large</Badge>
 ```
 
+### `icon`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge>Badge</Badge>
-<Badge contrast>Badge</Badge>
+<Badge icon="circle" text="Badge" />
+<Badge icon="circle" />
 ```
 
+### `href`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge icon="circle" text="Badge" />
+<Badge href="#">Link</Badge>
+```
+
+### `text`
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge text="Badge" />
 ```

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

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

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

@@ -0,0 +1,78 @@
+---
+_layout: doc
+title: Button
+---
+
+# Button
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button>Button</Button>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+### `size`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+### `icon`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button icon="confetti" text="Button" />
+<Button icon="confetti" />
+```
+
+### `href`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button href="#">Link</Button>
+```
+
+### `text`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="Button" />
+```

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>
+```
+````