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

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

@@ -15,7 +15,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 +74,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}/_switch.mdx

@@ -27,6 +27,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

@@ -19,8 +19,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,31 @@
+---
+presets: [docs]
+
+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,35 @@
+---
+presets: [docs]
+
+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

@@ -22,38 +22,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,47 @@
+---
+presets: [docs]
+
+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/{base → docs/components}/button.mdx

@@ -13,7 +13,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button color="brand">Button</Button>
+<Button>Button</Button>
 ```
 
 ## Props
@@ -22,39 +22,58 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 ## 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 variant="primary">Button</Button>
-<Button variant="secondary">Button</Button>
-<Button variant="tertiary">Button</Button>
+<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="circle" text="Button" text="Buttontje" />
+<Button icon="confetti" text="Button" />
+<Button icon="confetti" />
 ```
 
+### `href`
+
 ```astro live
 ---
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button size="sm" text="Button" />
-<Button size="md" text="Button" />
-<Button size="lg" text="Button" />
+<Button href="#">Link</Button>
 ```
 
+### `text`
+
 ```astro live
 ---
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button color="base" text="Button" />
-<Button color="brand" text="Button" />
+<Button text="Button" />
 ```

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

@@ -0,0 +1,52 @@
+---
+presets: [docs]
+
+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,92 @@
+---
+presets: [docs]
+
+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,90 @@
+---
+presets: [docs]
+
+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/{base → docs/components}/checkbox.mdx

@@ -8,35 +8,28 @@ title: Checkbox
 
 import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 
-## Props
-
-<PropsTable />
-
-## Examples
-
 ```astro live
 ---
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox label="My Checkbox" color="base" />
+<Checkbox label="Checkbox" />
 ```
 
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
+## Props
 
-<Checkbox label="Base" color="base" />
-<Checkbox label="Brand" color="brand" />
-```
+<PropsTable />
+
+## Examples
+
+### `size`
 
 ```astro live
 ---
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox label="Small" size="sm" />
-<Checkbox label="Medium" size="md" />
-<Checkbox label="Large" size="lg" />
+<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,46 @@
+---
+presets: [docs]
+
+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,60 @@
+---
+presets: [docs]
+
+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" />
+```