+
diff --git a/docs/src/components/Portfolio.svelte b/docs/src/components/Portfolio.svelte
new file mode 100644
index 00000000..b006aeae
--- /dev/null
+++ b/docs/src/components/Portfolio.svelte
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Accordion
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+ Actions
+
+
+
+
+ Breadcrumb
+
+
+ Breadcrumb 1
+ Breadcrumb 2
+ Breadcrumb 3
+
+
+ Actions
+
+
+
+
+
+
+
+ Primary button
+
+ Primary
+
+ Actions
+
+
+
+
+ Secondary button
+
+ Secondary
+
+ Actions
+
+
+
+
+ Tertiary button
+
+ Tertiary
+
+ Actions
+
+
+
+
+ Ghost button
+
+ Ghost
+
+ Actions
+
+
+
+
+ Danger button
+
+ Danger
+
+ Actions
+
+
+
+
+
+
+
+ Primary button with icon
+
+ With icon
+
+ Actions
+
+
+
+
+ Icon-only buttons
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+ Checkbox
+
+
+
+ Actions
+
+
+
+
+ Code Snippet
+
+
+ {`body { margin: 0; padding: 0; }`}
+
+
+ Actions
+
+
+
+
-
-
+
+
Home
- {#if segment}
+ {#if segment && $tail}
{urlIds[segment]}
{/if}
- {#if segment && $tail}
-
- {$tail.title}
-
- {/if}
-
+
+
+
+
{:else}
diff --git a/docs/src/routes/about.svelte b/docs/src/routes/about.svelte
deleted file mode 100644
index e708243c..00000000
--- a/docs/src/routes/about.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-About
-
-
- carbon-components-svelte
- is the Svelte implementation of the Carbon Design System
-
diff --git a/docs/src/routes/components/[slug].json.js b/docs/src/routes/components/[slug].json.js
index 1f4ade0e..3eb82f28 100644
--- a/docs/src/routes/components/[slug].json.js
+++ b/docs/src/routes/components/[slug].json.js
@@ -2,8 +2,8 @@ import components from "./_components.js";
const componentsMap = new Map();
-components.forEach((post) => {
- componentsMap.set(post.slug, JSON.stringify(post));
+components.forEach(($) => {
+ componentsMap.set($.slug, JSON.stringify($));
});
export function get(req, res, next) {
diff --git a/docs/src/routes/components/[slug].svelte b/docs/src/routes/components/[slug].svelte
index 3bfb7173..2278c99e 100644
--- a/docs/src/routes/components/[slug].svelte
+++ b/docs/src/routes/components/[slug].svelte
@@ -15,10 +15,35 @@
export let data = {};
import { onMount, getContext } from "svelte";
+ import {
+ Grid,
+ Row,
+ Column,
+ CodeSnippet,
+ FormGroup,
+ RadioButtonGroup,
+ RadioButton,
+ } from "carbon-components-svelte";
+ import copy from "clipboard-copy";
const ctx = getContext("navigation");
let component = undefined;
+ let defaultProps = {};
+
+ $: props = data.props || {};
+ $: {
+ if (data.props) {
+ Object.keys(data.props).forEach((prop) => {
+ if (!(prop in defaultProps)) {
+ defaultProps = {
+ ...defaultProps,
+ [prop]: data.props[prop].default,
+ };
+ }
+ });
+ }
+ }
onMount(async () => {
ctx.setTail(data);
@@ -37,20 +62,24 @@
@@ -58,9 +87,44 @@
{data.title}
-{data.title}
-
- {#if component}
-
- {/if}
-
+
+
+ {data.title}
+
+
+
+
+
+ {#if component}
+
+ {/if}
+
+
+
+
+
+ {#each Object.keys(props) as key}
+ {#if Array.isArray(props[key].values)}
+
+ {
+ defaultProps = { ...defaultProps, [key]: detail };
+ }}>
+ {#each props[key].values as value}
+
+ {/each}
+
+
+ {/if}
+ {/each}
+
+
+ {
+ copy(data.source);
+ }} />
+
+
diff --git a/docs/src/routes/components/_components.js b/docs/src/routes/components/_components.js
index 1588fc53..4ad36c7d 100644
--- a/docs/src/routes/components/_components.js
+++ b/docs/src/routes/components/_components.js
@@ -1,6 +1,19 @@
+import fs from "fs";
+import path from "path";
+
const components = [
{
title: "Button",
+ source: fs.readFileSync(
+ path.resolve(process.cwd(), "./src/routes/examples/Button.svelte"),
+ "utf8"
+ ),
+ props: {
+ size: {
+ values: ["default", "field", "small"],
+ default: "default",
+ },
+ },
},
].map((post) => ({
...post,
diff --git a/docs/src/routes/components/index.svelte b/docs/src/routes/components/index.svelte
index 5a048cda..19dba046 100644
--- a/docs/src/routes/components/index.svelte
+++ b/docs/src/routes/components/index.svelte
@@ -10,7 +10,13 @@
export let data = [];
import { getContext, onMount } from "svelte";
- import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+ import {
+ Row,
+ Column,
+ UnorderedList,
+ ListItem,
+ Link,
+ } from "carbon-components-svelte";
const ctx = getContext("navigation");
@@ -31,22 +37,19 @@
});
-
-
Components
-Components
-
- {#each data as data, i (data.title)}
-
- {data.title}
-
- {/each}
-
+
+
+ Components
+
+ {#each data as data, i (data.title)}
+
+ {data.title}
+
+ {/each}
+
+
+
diff --git a/docs/src/routes/examples/Button.svelte b/docs/src/routes/examples/Button.svelte
index 929f60a2..db6bc8bf 100644
--- a/docs/src/routes/examples/Button.svelte
+++ b/docs/src/routes/examples/Button.svelte
@@ -4,8 +4,9 @@
+
Buttons
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
Buttons with Icons
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
Icon-only Buttons
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/routes/getting-started/index.svelte b/docs/src/routes/getting-started/index.svelte
new file mode 100644
index 00000000..ae78578d
--- /dev/null
+++ b/docs/src/routes/getting-started/index.svelte
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Getting Started
+
+
+
+ Getting Started
+
+
+ can be installed as a development dependency.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/routes/index.svelte b/docs/src/routes/index.svelte
index 57459dc5..1d6f28a8 100644
--- a/docs/src/routes/index.svelte
+++ b/docs/src/routes/index.svelte
@@ -1,7 +1,13 @@
-Welcome
+
-
+Component Grid
+
+
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 8bb4aa71..8ad6e728 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -876,6 +876,11 @@ cli-truncate@^0.2.1:
slice-ansi "0.0.4"
string-width "^1.0.1"
+clipboard-copy@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
+ integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
+
cliui@^5.0.0:
version "5.0.0"
resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"