diff --git a/palimpsest/public/favicon.png b/palimpsest/public/favicon.png new file mode 100644 index 00000000..43b95c90 Binary files /dev/null and b/palimpsest/public/favicon.png differ diff --git a/palimpsest/public/index.html b/palimpsest/public/index.html index 17b5886d..8b9e4e78 100644 --- a/palimpsest/public/index.html +++ b/palimpsest/public/index.html @@ -3,6 +3,7 @@ + carbon-components-svelte diff --git a/palimpsest/src/App.svelte b/palimpsest/src/App.svelte index e0d283df..0d632e82 100644 --- a/palimpsest/src/App.svelte +++ b/palimpsest/src/App.svelte @@ -1,37 +1,11 @@ - - - -
- - - -
-
- Logo -
-
+ + diff --git a/palimpsest/src/assets/logo.png b/palimpsest/src/assets/logo.png index be993ec3..3cdf1d28 100644 Binary files a/palimpsest/src/assets/logo.png and b/palimpsest/src/assets/logo.png differ diff --git a/palimpsest/src/components/Component/Component.svelte b/palimpsest/src/components/Component/Component.svelte new file mode 100644 index 00000000..11eb98fe --- /dev/null +++ b/palimpsest/src/components/Component/Component.svelte @@ -0,0 +1,105 @@ + + + + + + +
+
+
+
+

{component}

+
+
+
+
+ { + push(`${prefix}/${component}${urls[detail].path}`); + }}> + + + + +
+
+
+
+ +
+
diff --git a/palimpsest/src/components/Component/ComponentAPI.svelte b/palimpsest/src/components/Component/ComponentAPI.svelte new file mode 100644 index 00000000..44d29638 --- /dev/null +++ b/palimpsest/src/components/Component/ComponentAPI.svelte @@ -0,0 +1,96 @@ + + + + +
+ + + + Prop + Type + Value + Description + + + + {#each props as prop, i (prop.name)} + + {prop.name} + + + {prop.type} + + + +
+ {#each prop.value as value, j (value)} + { + copy(formatValue(value)); + }} /> + {#if j < prop.value.length - 1} + | + {/if} + {/each} +
+ {#if prop.defaultValue} +
+ Default: + {formatValue(prop.defaultValue.value)} +
+ {/if} + + + {@html prop.description} + + + {/each} + + +
diff --git a/palimpsest/src/components/Component/ComponentPreview.svelte b/palimpsest/src/components/Component/ComponentPreview.svelte new file mode 100644 index 00000000..dc845da5 --- /dev/null +++ b/palimpsest/src/components/Component/ComponentPreview.svelte @@ -0,0 +1,109 @@ + + + + +
+
+
+ {#each Array.from({ length: 8 }, (_, i) => i) as item, i (item)} +
+
+
+
+
+ {/each} +
+
+
+
+ +
+
+
+ +
+
+

Props

+ +
+
+

Code

+ copy(code)} {code} /> + +
+
diff --git a/palimpsest/src/components/Component/ComponentTab.svelte b/palimpsest/src/components/Component/ComponentTab.svelte new file mode 100644 index 00000000..732ee29e --- /dev/null +++ b/palimpsest/src/components/Component/ComponentTab.svelte @@ -0,0 +1,21 @@ + + + diff --git a/palimpsest/src/components/Component/index.js b/palimpsest/src/components/Component/index.js new file mode 100644 index 00000000..afe07424 --- /dev/null +++ b/palimpsest/src/components/Component/index.js @@ -0,0 +1,5 @@ +import Component from './Component.svelte'; + +export default Component; +export { default as ComponentPreview } from './ComponentPreview.svelte'; +export { default as ComponentAPI } from './ComponentAPI.svelte'; diff --git a/palimpsest/src/components/ComponentLayout.svelte b/palimpsest/src/components/ComponentLayout.svelte deleted file mode 100644 index 8ae8868e..00000000 --- a/palimpsest/src/components/ComponentLayout.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - - - -
-
-
-
-

{params.name}

-
- - - - - -
-
-
- -
-
diff --git a/palimpsest/src/containers/Header.svelte b/palimpsest/src/components/Header.svelte similarity index 81% rename from palimpsest/src/containers/Header.svelte rename to palimpsest/src/components/Header.svelte index ebfd5935..f9792d60 100644 --- a/palimpsest/src/containers/Header.svelte +++ b/palimpsest/src/components/Header.svelte @@ -1,11 +1,12 @@ + +
+
+
+
+ +

+ + Carbon + + + Components + + + Svelte + +

+

The Carbon Design System implemented in Svelte

+
+
+
+
1
+
+
+
diff --git a/palimpsest/src/containers/ComponentSearch.svelte b/palimpsest/src/components/SideNav.svelte similarity index 60% rename from palimpsest/src/containers/ComponentSearch.svelte rename to palimpsest/src/components/SideNav.svelte index cdf11437..9410d00b 100644 --- a/palimpsest/src/containers/ComponentSearch.svelte +++ b/palimpsest/src/components/SideNav.svelte @@ -4,7 +4,7 @@ import Fuse from 'fuse.js'; import components from '../data/component-registry'; - const fuse = new Fuse(components, { shouldSort: false, keys: ['name'] }); + const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] }); let value = ''; @@ -12,6 +12,16 @@ - -
    - {#each results as { name }, i (name)} -
  • - - {name} - -
    • - {/each} -
+ diff --git a/palimpsest/src/components/ThemePicker.svelte b/palimpsest/src/components/ThemePicker.svelte index 30b804df..de3745d0 100644 --- a/palimpsest/src/components/ThemePicker.svelte +++ b/palimpsest/src/components/ThemePicker.svelte @@ -1,16 +1,18 @@ diff --git a/palimpsest/src/components/carbon-components/Accordion/API.svelte b/palimpsest/src/components/carbon-components/Accordion/API.svelte new file mode 100644 index 00000000..f7794a89 --- /dev/null +++ b/palimpsest/src/components/carbon-components/Accordion/API.svelte @@ -0,0 +1,40 @@ + + + diff --git a/palimpsest/src/components/carbon-components/Accordion/KitchenSink.svelte b/palimpsest/src/components/carbon-components/Accordion/KitchenSink.svelte new file mode 100644 index 00000000..e69de29b diff --git a/palimpsest/src/components/carbon-components/Accordion/Preview.svelte b/palimpsest/src/components/carbon-components/Accordion/Preview.svelte new file mode 100644 index 00000000..6d38d364 --- /dev/null +++ b/palimpsest/src/components/carbon-components/Accordion/Preview.svelte @@ -0,0 +1,61 @@ + + + + + {#each items as { id }, i (id)} + + Item {id} content + + {/each} + +
+ + + + + + + + + +
+ diff --git a/palimpsest/src/components/carbon-components/Accordion/index.js b/palimpsest/src/components/carbon-components/Accordion/index.js new file mode 100644 index 00000000..7075540b --- /dev/null +++ b/palimpsest/src/components/carbon-components/Accordion/index.js @@ -0,0 +1,11 @@ +import Preview from './Preview.svelte'; +import API from './API.svelte'; +import KitchenSink from './KitchenSink.svelte'; + +const tabs = { + Preview, + API, + KitchenSink +}; + +export default tabs; diff --git a/palimpsest/src/components/carbon-components/CodeSnippet.svelte b/palimpsest/src/components/carbon-components/CodeSnippet.svelte deleted file mode 100644 index 99f8314d..00000000 --- a/palimpsest/src/components/carbon-components/CodeSnippet.svelte +++ /dev/null @@ -1,64 +0,0 @@ - - - - -{#if selected === 0} -
-
-
- copy(code)} {code} /> -
-
-
- -
-
-

Props

- - - - - - - - - - -
-
-{/if} diff --git a/palimpsest/src/components/carbon-components/CodeSnippet/API.svelte b/palimpsest/src/components/carbon-components/CodeSnippet/API.svelte new file mode 100644 index 00000000..f7794a89 --- /dev/null +++ b/palimpsest/src/components/carbon-components/CodeSnippet/API.svelte @@ -0,0 +1,40 @@ + + + diff --git a/palimpsest/src/components/carbon-components/CodeSnippet/KitchenSink.svelte b/palimpsest/src/components/carbon-components/CodeSnippet/KitchenSink.svelte new file mode 100644 index 00000000..e69de29b diff --git a/palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte b/palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte new file mode 100644 index 00000000..d015d878 --- /dev/null +++ b/palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte @@ -0,0 +1,72 @@ + + + +
+ +
+
+ + + + + + + + + + + + {#if props.type === 'multi'} +