mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(palimpsest): support responsive design

Browse source
This commit is contained in:
Eric Liu 2020-01-12 12:03:15 -08:00
commit 01f65cb308
10 changed files with 338 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
palimpsest/public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" href="./favicon.png" /> <link rel="icon" href="./favicon.png" />
<title>carbon-components-svelte</title> <title>Carbon Components Svelte</title>
</head> </head>
<body></body> <body></body>
</html> </html>

109
palimpsest/src/components/ButtonTile.svelte Normal file
View file

@ -0,0 +1,109 @@
<script>
export let href = undefined;
export let kind = 'launch';
export let iconLeft = undefined;
export let iconRight = Launch20;
import Launch20 from 'carbon-icons-svelte/lib/Launch20';
import ArrowRight20 from 'carbon-icons-svelte/lib/ArrowRight20';
$: iconRight = kind === 'link' ? ArrowRight20 : Launch20;
</script>
<style>
.link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1rem;
cursor: pointer;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
@media screen and (max-width: 671px) {
.link {
border-right: 0;
}
}
.link:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
.icon {
position: absolute;
bottom: 1rem;
fill: var(--cds-ui-05);
}
.icon--left {
left: 1rem;
}
.icon--right {
right: 1rem;
}
.bg {
position: absolute;
z-index: -1;
right: 1px;
bottom: 1px;
width: calc(100% - 1px);
height: calc(100% - 1px);
transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
background-color: var(--cds-ui-01);
}
.button-tile:hover .bg {
background-color: var(--cds-ui-03);
}
a {
color: inherit;
text-decoration: none;
}
</style>
<div class="button-tile bx--aspect-ratio bx--aspect-ratio--2x1">
<div class="bx--aspect-ratio--object">
{#if href}
<a
class="link"
on:click
target={kind === 'launch' ? '_blank' : undefined}
rel={kind === 'launch' ? 'noopener noreferrer' : undefined}
{href}>
<div>
<slot />
</div>
{#if iconLeft}
<div class="icon icon--left">
<svelte:component this={iconLeft} />
</div>
{/if}
<div class="icon icon--right">
<svelte:component this={iconRight} />
</div>
</a>
{:else}
<div role="button" tabindex="0" class="link" on:click {href}>
<div>
<slot />
</div>
{#if iconLeft}
<div class="icon icon--left">
<svelte:component this={iconLeft} />
</div>
{/if}
<div class="icon icon--right">
<svelte:component this={iconRight} />
</div>
</div>
{/if}
<div class="bg" />
</div>
</div>

12
palimpsest/src/components/Component/Component.svelte
View file

@ -59,11 +59,17 @@
<style> <style>
main { main {
margin-top: 5.5rem; margin-top: 5rem;
padding-left: 12rem; padding-left: 12rem;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
@media screen and (max-width: 768px) {
main {
padding-left: 0;
}
}
h1 { h1 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -85,7 +91,7 @@
</div> </div>
</header> </header>
<div class="bx--row"> <div class="bx--row">
<div class="bx--col bx--no-gutter--left"> <div class="bx--col bx--no-gutter">
<Tabs <Tabs
type="container" type="container"
bind:selected bind:selected
@ -94,7 +100,7 @@
}}> }}>
<Tab label="Preview" href={baseUrl} /> <Tab label="Preview" href={baseUrl} />
<Tab label="API" href={`${baseUrl}/API`} /> <Tab label="API" href={`${baseUrl}/API`} />
<Tab label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} /> <!-- <Tab disabled label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} /> -->
</Tabs> </Tabs>
</div> </div>
</div> </div>

3
palimpsest/src/components/Component/ComponentPreview.svelte
View file

@ -16,7 +16,6 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
border: 1px solid var(--cds-ui-03); border: 1px solid var(--cds-ui-03);
margin-bottom: 2rem;
} }
.preview.light { .preview.light {
@ -65,7 +64,9 @@
} }
h3 { h3 {
margin-top: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.5rem;
} }
.wrapper { .wrapper {

4
palimpsest/src/components/Component/ComponentTab.svelte
View file

@ -12,9 +12,11 @@
'kitchen-sink': 'KitchenSink' 'kitchen-sink': 'KitchenSink'
}; };
$: tab = paramMap[params.tab || 'Preview']; $: tabName = params.tab || 'Preview';
$: tab = paramMap[tabName];
$: { $: {
set(params.name); set(params.name);
document.title = `${params.name} · ${tabName}`;
} }
</script> </script>

108
palimpsest/src/components/Header.svelte
View file

@ -1,12 +1,17 @@
<script> <script>
import { link } from 'svelte-spa-router'; import { link } from 'svelte-spa-router';
import { Icon } from 'carbon-components-svelte';
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
import Menu20 from 'carbon-icons-svelte/lib/Menu20';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import ThemePicker from '../components/ThemePicker.svelte'; import ThemePicker from '../components/ThemePicker.svelte';
import { sideNavToggled, appSwitcherToggled } from '../store';
</script> </script>
<style> <style>
header { header {
position: fixed; position: fixed;
z-index: 9; z-index: 9999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -19,14 +24,63 @@
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--cds-ui-03);
} }
.app-switcher {
position: fixed;
z-index: 9999;
top: 2.5rem;
right: 0;
width: 16rem;
height: calc(100% - 2.5rem);
padding: 1rem;
background-color: var(--cds-ui-01);
transform: translateX(100%);
}
@media screen and (max-width: 768px) {
.app-switcher {
will-change: transform;
}
.app-switcher.toggled {
transform: translateX(0);
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
will-change: auto;
}
}
.menu {
display: none;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
margin-left: -1rem;
margin-right: 0.5rem;
background: none;
border: 0;
fill: var(--cds-ui-05);
cursor: pointer;
}
.menu--right {
margin-left: auto;
margin-right: -1rem;
}
.menu:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
nav { nav {
display: flex; display: flex;
align-items: baseline; align-items: center;
} }
.bx--link { .bx--link {
font-size: 1rem; font-size: 1rem;
color: var(--cds-text-01); color: var(--cds-text-01);
white-space: nowrap;
} }
.bx--link:hover { .bx--link:hover {
@ -34,23 +88,55 @@
text-decoration: none; text-decoration: none;
} }
.version { @media screen and (max-width: 768px) {
font-size: 0.75rem; .menu {
color: var(--cds-text-02); display: flex;
margin-left: 0.5rem; }
margin-right: 1.5rem;
.theme {
display: none;
}
} }
</style> </style>
<header> <header>
<nav> <nav>
<a class="bx--link" href="/" use:link> <button
class="menu"
on:click={() => {
sideNavToggled.set(!$sideNavToggled);
appSwitcherToggled.set(false);
}}>
<Icon render={$sideNavToggled ? Close20 : Menu20} />
</button>
<a
class="bx--link"
href="/"
use:link
on:click={() => {
if ($sideNavToggled || $appSwitcherToggled) {
sideNavToggled.set(false);
appSwitcherToggled.set(false);
}
window.scrollTo(0, 0);
}}>
Carbon Components Carbon Components
<strong>Svelte</strong> <strong>Svelte</strong>
</a> </a>
<span class="version">v0.2.1</span>
</nav> </nav>
<div> <div class="theme">
<ThemePicker /> <ThemePicker inline />
</div> </div>
<button
class="menu menu--right"
on:click={() => {
appSwitcherToggled.set(!$appSwitcherToggled);
sideNavToggled.set(false);
}}>
<Icon render={$appSwitcherToggled ? Close20 : AppSwitcher20} />
</button>
</header> </header>
<div class="app-switcher" class:toggled={$appSwitcherToggled}>
<ThemePicker />
</div>

47
palimpsest/src/components/Home.svelte
View file

@ -1,30 +1,50 @@
<script> <script>
import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
import Logo from '../assets/logo.png'; import Logo from '../assets/logo.png';
import ButtonTile from './ButtonTile.svelte';
$: {
document.title = `Carbon Components Svelte`;
}
</script> </script>
<style> <style>
main { main {
margin-top: 5.5rem; margin-top: 5rem;
padding-left: 12rem; padding-left: 12rem;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
@media screen and (max-width: 768px) {
main {
padding-left: 0;
}
}
.bx--grid { .bx--grid {
max-width: 66rem; max-width: 66rem;
} }
.logo { .logo {
max-width: 4.5rem; max-width: 4rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
h1 { h1 {
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 2rem;
line-height: 1.2;
} }
h1 span { h1 span {
display: block; display: block;
} }
h3 {
margin-top: 4rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
</style> </style>
<main> <main>
@ -43,11 +63,30 @@
<strong>Svelte</strong> <strong>Svelte</strong>
</span> </span>
</h1> </h1>
<h3>The Carbon Design System implemented in Svelte</h3> <p>The Carbon Design System implemented in Svelte</p>
</div> </div>
</div> </div>
<div class="bx--row"> <div class="bx--row">
<div class="bx--col">1</div> <div class="bx--col">
<h3>Packages</h3>
</div>
</div>
<div class="bx--row bx--no-gutter">
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
Carbon Components Svelte
</ButtonTile>
</div>
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</ButtonTile>
</div>
</div>
<div class="bx--row">
<div class="bx--col">
<h3>Components</h3>
</div>
</div> </div>
</div> </div>
</main> </main>

62
palimpsest/src/components/SideNav.svelte
View file

@ -3,17 +3,31 @@
import { Search } from 'carbon-components-svelte'; import { Search } from 'carbon-components-svelte';
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
import components from '../data/component-registry'; import components from '../data/component-registry';
import { sideNavToggled, appSwitcherToggled } from '../store';
const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] }); const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
let value = ''; let value = '';
$: results = value.length > 1 ? fuse.search(value) : components; $: results = value.length > 1 ? fuse.search(value) : components;
$: {
if ($sideNavToggled || $appSwitcherToggled) {
document.body.classList.add('hidden');
} else {
document.body.classList.remove('hidden');
}
}
</script> </script>
<style> <style>
:global(body.hidden) {
overflow-y: hidden;
}
nav { nav {
position: fixed; position: fixed;
z-index: 9999;
top: 2.5rem; top: 2.5rem;
left: 0; left: 0;
width: 12rem; width: 12rem;
@ -22,6 +36,29 @@
overflow-y: scroll; overflow-y: scroll;
} }
@media screen and (max-width: 768px) {
nav {
transform: translateX(-100%);
will-change: transform;
}
nav.toggled {
transform: translateX(0);
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
will-change: auto;
}
}
.overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--cds-overlay-01);
}
ul { ul {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
@ -64,12 +101,26 @@
} }
</style> </style>
<nav> <svelte:window
on:resize={() => {
if (($sideNavToggled || $appSwitcherToggled) && window.matchMedia('(min-width: 768px)').matches) {
sideNavToggled.set(false);
appSwitcherToggled.set(false);
}
}} />
<nav class:toggled={$sideNavToggled}>
<Search small id="search-components" labelText="Components" bind:value /> <Search small id="search-components" labelText="Components" bind:value />
<ul> <ul>
{#each results as { name }, i (name)} {#each results as { name }, i (name)}
<li> <li>
<a <a
on:click={() => {
if ($sideNavToggled) {
sideNavToggled.set(false);
window.scrollTo(0, 0);
}
}}
class="bx--link" class="bx--link"
class:current={$location.includes(`/c/${name}`)} class:current={$location.includes(`/c/${name}`)}
href={`/c/${name}`} href={`/c/${name}`}
@ -80,3 +131,12 @@
{/each} {/each}
</ul> </ul>
</nav> </nav>
{#if $sideNavToggled || $appSwitcherToggled}
<div
class="overlay"
on:click={() => {
sideNavToggled.set(false);
appSwitcherToggled.set(false);
}} />
{/if}

15
palimpsest/src/components/ThemePicker.svelte
View file

@ -1,16 +1,21 @@
<script> <script>
export let inline = false;
import { Select, SelectItem } from 'carbon-components-svelte'; import { Select, SelectItem } from 'carbon-components-svelte';
import { theme } from '../store'; import { theme } from '../store';
let selected = 'g10';
$: { $: {
theme.set(selected); document.documentElement.setAttribute('carbon-theme', $theme);
document.documentElement.setAttribute('carbon-theme', selected);
} }
</script> </script>
<Select inline labelText="Theme" bind:selected> <Select
{inline}
labelText="Theme"
selected={$theme}
on:change={({ detail }) => {
theme.set(detail);
}}>
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />

4
palimpsest/src/store/index.js
View file

@ -1,3 +1,5 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const theme = writable(); export const sideNavToggled = writable(false);
export const appSwitcherToggled = writable(false);
export const theme = writable('g10');