From 01f65cb3082d654e64dc87cc9f0ec44b7bbe2886 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 12 Jan 2020 12:03:15 -0800 Subject: [PATCH] docs(palimpsest): support responsive design --- palimpsest/public/index.html | 2 +- palimpsest/src/components/ButtonTile.svelte | 109 ++++++++++++++++++ .../src/components/Component/Component.svelte | 12 +- .../Component/ComponentPreview.svelte | 3 +- .../components/Component/ComponentTab.svelte | 4 +- palimpsest/src/components/Header.svelte | 108 +++++++++++++++-- palimpsest/src/components/Home.svelte | 47 +++++++- palimpsest/src/components/SideNav.svelte | 62 +++++++++- palimpsest/src/components/ThemePicker.svelte | 15 ++- palimpsest/src/store/index.js | 4 +- 10 files changed, 338 insertions(+), 28 deletions(-) create mode 100644 palimpsest/src/components/ButtonTile.svelte diff --git a/palimpsest/public/index.html b/palimpsest/public/index.html index 8b9e4e78..cef29e93 100644 --- a/palimpsest/public/index.html +++ b/palimpsest/public/index.html @@ -4,7 +4,7 @@ - carbon-components-svelte + Carbon Components Svelte diff --git a/palimpsest/src/components/ButtonTile.svelte b/palimpsest/src/components/ButtonTile.svelte new file mode 100644 index 00000000..c4555751 --- /dev/null +++ b/palimpsest/src/components/ButtonTile.svelte @@ -0,0 +1,109 @@ + + + + +
+
+ {#if href} + +
+ +
+ {#if iconLeft} +
+ +
+ {/if} +
+ +
+ + {:else} +
+
+ +
+ {#if iconLeft} +
+ +
+ {/if} +
+ +
+
+ {/if} +
+
+
diff --git a/palimpsest/src/components/Component/Component.svelte b/palimpsest/src/components/Component/Component.svelte index 11eb98fe..87d05cd1 100644 --- a/palimpsest/src/components/Component/Component.svelte +++ b/palimpsest/src/components/Component/Component.svelte @@ -59,11 +59,17 @@
-
- +
+
+
+ +
+ +
diff --git a/palimpsest/src/components/Home.svelte b/palimpsest/src/components/Home.svelte index 3f441246..7da77956 100644 --- a/palimpsest/src/components/Home.svelte +++ b/palimpsest/src/components/Home.svelte @@ -1,30 +1,50 @@
@@ -43,11 +63,30 @@ Svelte -

The Carbon Design System implemented in Svelte

+

The Carbon Design System implemented in Svelte

-
1
+
+

Packages

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

Components

+
diff --git a/palimpsest/src/components/SideNav.svelte b/palimpsest/src/components/SideNav.svelte index 9410d00b..cc9438b1 100644 --- a/palimpsest/src/components/SideNav.svelte +++ b/palimpsest/src/components/SideNav.svelte @@ -3,17 +3,31 @@ import { Search } from 'carbon-components-svelte'; import Fuse from 'fuse.js'; import components from '../data/component-registry'; + import { sideNavToggled, appSwitcherToggled } from '../store'; const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] }); let value = ''; $: results = value.length > 1 ? fuse.search(value) : components; + + $: { + if ($sideNavToggled || $appSwitcherToggled) { + document.body.classList.add('hidden'); + } else { + document.body.classList.remove('hidden'); + } + } -