mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Merge pull request #109 from IBM/refactor
refactor: continue development of palimpsest
This commit is contained in:
Eric Liu
GitHub
commit
f1ea66158b
28 changed files with 811 additions and 226 deletions
BIN
palimpsest/public/favicon.png
Normal file
BIN
palimpsest/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<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" />
|
||||||
<title>carbon-components-svelte</title>
|
<title>carbon-components-svelte</title>
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body></body>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import ComponentLayout from './components/ComponentLayout.svelte';
|
|
||||||
import ComponentSearch from './containers/ComponentSearch.svelte';
|
|
||||||
import Header from './containers/Header.svelte';
|
|
||||||
import Logo from './assets/logo.png';
|
|
||||||
import Router from 'svelte-spa-router';
|
import Router from 'svelte-spa-router';
|
||||||
|
import Component from './components/Component';
|
||||||
|
import Header from './components/Header.svelte';
|
||||||
|
import Home from './components/Home.svelte';
|
||||||
|
import SideNav from './components/SideNav.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
nav {
|
|
||||||
position: fixed;
|
|
||||||
top: 2.5rem;
|
|
||||||
left: 0;
|
|
||||||
width: 14rem;
|
|
||||||
height: calc(100% - 2.5rem);
|
|
||||||
background-color: var(--cds-ui-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
margin-top: 2.5rem;
|
|
||||||
padding-left: 16rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<Router routes={{ '/c/:name': ComponentLayout }} />
|
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
<SideNav />
|
||||||
<nav>
|
<Router routes={{ '/': Home, '/c': Component, '/c/*': Component }} />
|
||||||
<ComponentSearch />
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<header class="bx--grid">
|
|
||||||
<div class="bx--row">
|
|
||||||
<img src={Logo} alt="Logo" style="width: 4rem;" />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 14 KiB |
105
palimpsest/src/components/Component/Component.svelte
Normal file
105
palimpsest/src/components/Component/Component.svelte
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
<script context="module">
|
||||||
|
import Accordion from '../carbon-components/Accordion';
|
||||||
|
import CodeSnippet from '../carbon-components/CodeSnippet';
|
||||||
|
|
||||||
|
export const components = {
|
||||||
|
Accordion,
|
||||||
|
CodeSnippet
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { afterUpdate, setContext } from 'svelte';
|
||||||
|
import { Tabs, Tab } from 'carbon-components-svelte';
|
||||||
|
import { push, location } from 'svelte-spa-router';
|
||||||
|
import Router from 'svelte-spa-router';
|
||||||
|
import ComponentTab from './ComponentTab.svelte';
|
||||||
|
|
||||||
|
const prefix = '/c';
|
||||||
|
const urls = [{ path: '' }, { path: '/API' }, { path: '/kitchen-sink' }];
|
||||||
|
|
||||||
|
let selected = 0;
|
||||||
|
let component = undefined;
|
||||||
|
let prevComponent = undefined;
|
||||||
|
|
||||||
|
setContext('Component', {
|
||||||
|
set: name => {
|
||||||
|
component = name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
if (component !== prevComponent && prevComponent !== undefined) {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
prevComponent = component;
|
||||||
|
});
|
||||||
|
|
||||||
|
$: baseUrl = component ? `#${prefix}/${component}` : $location;
|
||||||
|
$: {
|
||||||
|
switch (
|
||||||
|
$location
|
||||||
|
.split('/')
|
||||||
|
.pop()
|
||||||
|
.toLowerCase()
|
||||||
|
) {
|
||||||
|
case 'api':
|
||||||
|
selected = 1;
|
||||||
|
break;
|
||||||
|
case 'kitchen-sink':
|
||||||
|
selected = 2;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
selected = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
margin-top: 5.5rem;
|
||||||
|
padding-left: 12rem;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--grid {
|
||||||
|
max-width: 66rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(body) {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="bx--grid">
|
||||||
|
<header class="bx--row">
|
||||||
|
<div class="bx--col">
|
||||||
|
<h1>{component}</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col bx--no-gutter--left">
|
||||||
|
<Tabs
|
||||||
|
type="container"
|
||||||
|
bind:selected
|
||||||
|
on:change={({ detail }) => {
|
||||||
|
push(`${prefix}/${component}${urls[detail].path}`);
|
||||||
|
}}>
|
||||||
|
<Tab label="Preview" href={baseUrl} />
|
||||||
|
<Tab label="API" href={`${baseUrl}/API`} />
|
||||||
|
<Tab label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} />
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="bx--grid">
|
||||||
|
<Router {prefix} routes={{ '/:name': ComponentTab, '/:name/:tab': ComponentTab }} />
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
96
palimpsest/src/components/Component/ComponentAPI.svelte
Normal file
96
palimpsest/src/components/Component/ComponentAPI.svelte
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
<script>
|
||||||
|
export let props = [];
|
||||||
|
|
||||||
|
import {
|
||||||
|
StructuredList,
|
||||||
|
StructuredListBody,
|
||||||
|
StructuredListHead,
|
||||||
|
StructuredListRow,
|
||||||
|
StructuredListCell,
|
||||||
|
Tag,
|
||||||
|
CodeSnippet
|
||||||
|
} from 'carbon-components-svelte';
|
||||||
|
import copy from 'clipboard-copy';
|
||||||
|
|
||||||
|
const propTypeColor = {
|
||||||
|
string: 'green',
|
||||||
|
number: 'blue',
|
||||||
|
boolean: 'purple'
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatValue(value) {
|
||||||
|
return typeof value === 'string' ? `"${value}"` : value;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bx--row {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.values {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.value) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.value:not(:first-of-type)) {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
color: var(--cds-text-03);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="bx--row">
|
||||||
|
<StructuredList>
|
||||||
|
<StructuredListHead>
|
||||||
|
<StructuredListRow head>
|
||||||
|
<StructuredListCell head>Prop</StructuredListCell>
|
||||||
|
<StructuredListCell head>Type</StructuredListCell>
|
||||||
|
<StructuredListCell head>Value</StructuredListCell>
|
||||||
|
<StructuredListCell head>Description</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListHead>
|
||||||
|
<StructuredListBody>
|
||||||
|
{#each props as prop, i (prop.name)}
|
||||||
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>{prop.name}</StructuredListCell>
|
||||||
|
<StructuredListCell noWrap>
|
||||||
|
<Tag type={propTypeColor[prop.type]}>
|
||||||
|
<code>{prop.type}</code>
|
||||||
|
</Tag>
|
||||||
|
</StructuredListCell>
|
||||||
|
<StructuredListCell>
|
||||||
|
<div class="values">
|
||||||
|
{#each prop.value as value, j (value)}
|
||||||
|
<CodeSnippet
|
||||||
|
class="value"
|
||||||
|
type="inline"
|
||||||
|
code={formatValue(value)}
|
||||||
|
on:click={() => {
|
||||||
|
copy(formatValue(value));
|
||||||
|
}} />
|
||||||
|
{#if j < prop.value.length - 1}
|
||||||
|
<span class="separator">|</span>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{#if prop.defaultValue}
|
||||||
|
<div style="margin-top: .75rem">
|
||||||
|
<strong>Default:</strong>
|
||||||
|
<code>{formatValue(prop.defaultValue.value)}</code>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</StructuredListCell>
|
||||||
|
<StructuredListCell>
|
||||||
|
{@html prop.description}
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
{/each}
|
||||||
|
</StructuredListBody>
|
||||||
|
</StructuredList>
|
||||||
|
</div>
|
||||||
109
palimpsest/src/components/Component/ComponentPreview.svelte
Normal file
109
palimpsest/src/components/Component/ComponentPreview.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
<script>
|
||||||
|
export let minHeight = '11.5rem';
|
||||||
|
export let light = false;
|
||||||
|
export let code = '';
|
||||||
|
|
||||||
|
import copy from 'clipboard-copy';
|
||||||
|
import { CodeSnippet } from 'carbon-components-svelte';
|
||||||
|
import { theme } from '../../store';
|
||||||
|
|
||||||
|
$: code = code.trim().replace(/< \//g, '</');
|
||||||
|
$: light = light && ['white', 'g10'].includes($theme);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.preview {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border: 1px solid var(--cds-ui-03);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview.light {
|
||||||
|
background-color: var(--cds-ui-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--row {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col:not(:last-of-type) {
|
||||||
|
border-right: 1px dashed var(--cds-ui-03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col.light {
|
||||||
|
background-color: var(--cds-ui-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col--outer {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col--inner {
|
||||||
|
flex: 1;
|
||||||
|
background-color: var(--cds-ui-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col--inner {
|
||||||
|
border-left: 1px dashed var(--cds-ui-03);
|
||||||
|
border-right: 1px dashed var(--cds-ui-03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid--col--inner.light {
|
||||||
|
background-color: var(--cds-ui-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 9rem;
|
||||||
|
padding: 2rem 0 2rem 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="preview bx--row" class:light>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="grid--row">
|
||||||
|
{#each Array.from({ length: 8 }, (_, i) => i) as item, i (item)}
|
||||||
|
<div class="grid--col bx--col" class:light>
|
||||||
|
<div class="grid--col--outer">
|
||||||
|
<div class="grid--col--inner" class:light />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--col bx--no-gutter--left">
|
||||||
|
<div class="wrapper" style={`min-height: ${minHeight}`}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col-lg-4">
|
||||||
|
<h3>Props</h3>
|
||||||
|
<slot name="props" />
|
||||||
|
</div>
|
||||||
|
<div class="bx--col">
|
||||||
|
<h3>Code</h3>
|
||||||
|
<CodeSnippet type="multi" on:click={() => copy(code)} {code} />
|
||||||
|
<slot name="code" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
21
palimpsest/src/components/Component/ComponentTab.svelte
Normal file
21
palimpsest/src/components/Component/ComponentTab.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
export let params = {};
|
||||||
|
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { components } from './Component.svelte';
|
||||||
|
|
||||||
|
const { set } = getContext('Component');
|
||||||
|
|
||||||
|
const paramMap = {
|
||||||
|
Preview: 'Preview',
|
||||||
|
API: 'API',
|
||||||
|
'kitchen-sink': 'KitchenSink'
|
||||||
|
};
|
||||||
|
|
||||||
|
$: tab = paramMap[params.tab || 'Preview'];
|
||||||
|
$: {
|
||||||
|
set(params.name);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:component this={components[params.name][tab]} />
|
||||||
5
palimpsest/src/components/Component/index.js
Normal file
5
palimpsest/src/components/Component/index.js
Normal file
|
|
@ -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';
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<script>
|
|
||||||
export let params = {};
|
|
||||||
|
|
||||||
import { Tabs, Tab } from 'carbon-components-svelte';
|
|
||||||
import CodeSnippet from './carbon-components/CodeSnippet.svelte';
|
|
||||||
|
|
||||||
const registry = {
|
|
||||||
CodeSnippet
|
|
||||||
};
|
|
||||||
|
|
||||||
let selected = 0;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
main {
|
|
||||||
margin-top: 2.5rem;
|
|
||||||
padding-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
border-bottom: 1px solid var(--cds-ui-03);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--grid {
|
|
||||||
padding-left: 16rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="bx--grid">
|
|
||||||
<header class="bx--row">
|
|
||||||
<div class="bx--col">
|
|
||||||
<h1>{params.name}</h1>
|
|
||||||
</div>
|
|
||||||
<Tabs type="container" bind:selected>
|
|
||||||
<Tab label="Overview" />
|
|
||||||
<Tab label="API" />
|
|
||||||
<Tab label="Kitchen Sink" />
|
|
||||||
</Tabs>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
<section class="bx--grid">
|
|
||||||
<svelte:component this={registry[params.name]} {selected} />
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
import { Link } from 'carbon-components-svelte';
|
import { link } from 'svelte-spa-router';
|
||||||
import ThemePicker from '../components/ThemePicker.svelte';
|
import ThemePicker from '../components/ThemePicker.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -28,6 +29,11 @@
|
||||||
color: var(--cds-text-01);
|
color: var(--cds-text-01);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bx--link:hover {
|
||||||
|
color: var(--cds-text-01);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.version {
|
.version {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--cds-text-02);
|
color: var(--cds-text-02);
|
||||||
|
|
@ -38,12 +44,11 @@
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a class="bx--link" href="/">
|
<a class="bx--link" href="/" use:link>
|
||||||
Carbon Components
|
Carbon Components
|
||||||
<strong>Svelte</strong>
|
<strong>Svelte</strong>
|
||||||
</a>
|
</a>
|
||||||
<span class="version">v0.2.1</span>
|
<span class="version">v0.2.1</span>
|
||||||
<Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div>
|
||||||
<ThemePicker />
|
<ThemePicker />
|
||||||
53
palimpsest/src/components/Home.svelte
Normal file
53
palimpsest/src/components/Home.svelte
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script>
|
||||||
|
import Logo from '../assets/logo.png';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
margin-top: 5.5rem;
|
||||||
|
padding-left: 12rem;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--grid {
|
||||||
|
max-width: 66rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
max-width: 4.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="bx--grid">
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col">
|
||||||
|
<img src={Logo} alt="Logo" class="logo" />
|
||||||
|
<h1>
|
||||||
|
<span>
|
||||||
|
<strong>Carbon</strong>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<strong>Components</strong>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<strong>Svelte</strong>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<h3>The Carbon Design System implemented in Svelte</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bx--row">
|
||||||
|
<div class="bx--col">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
import Fuse from 'fuse.js';
|
import Fuse from 'fuse.js';
|
||||||
import components from '../data/component-registry';
|
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 = '';
|
let value = '';
|
||||||
|
|
||||||
|
|
@ -12,6 +12,16 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 2.5rem;
|
||||||
|
left: 0;
|
||||||
|
width: 12rem;
|
||||||
|
height: calc(100% - 2.5rem);
|
||||||
|
background-color: var(--cds-ui-01);
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
@ -54,13 +64,19 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<Search small id="search-components" labelText="Components" bind:value />
|
<nav>
|
||||||
<ul>
|
<Search small id="search-components" labelText="Components" bind:value />
|
||||||
|
<ul>
|
||||||
{#each results as { name }, i (name)}
|
{#each results as { name }, i (name)}
|
||||||
<li>
|
<li>
|
||||||
<a class="bx--link" class:current={$location === `/c/${name}`} href={`/c/${name}`} use:link>
|
<a
|
||||||
|
class="bx--link"
|
||||||
|
class:current={$location.includes(`/c/${name}`)}
|
||||||
|
href={`/c/${name}`}
|
||||||
|
use:link>
|
||||||
{name}
|
{name}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
@ -1,16 +1,18 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||||
|
import { theme } from '../store';
|
||||||
|
|
||||||
let selected = 'g100';
|
let selected = 'g10';
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
theme.set(selected);
|
||||||
document.documentElement.setAttribute('carbon-theme', selected);
|
document.documentElement.setAttribute('carbon-theme', selected);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Select inline labelText="Theme" bind:selected>
|
<Select inline labelText="Theme" bind:selected>
|
||||||
<SelectItem value="white" text="White (light)" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10 (light)" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g90" text="Gray 90 (dark)" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100 (dark)" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script>
|
||||||
|
import { ComponentAPI } from '../../Component';
|
||||||
|
|
||||||
|
const props = [
|
||||||
|
{
|
||||||
|
name: 'type',
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
value: ['inline', 'single', 'multi'],
|
||||||
|
defaultValue: { value: 'single' },
|
||||||
|
description: `
|
||||||
|
<div>
|
||||||
|
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'light',
|
||||||
|
type: 'boolean',
|
||||||
|
required: false,
|
||||||
|
value: [],
|
||||||
|
defaultValue: { value: false },
|
||||||
|
description: `
|
||||||
|
<div>Light variant</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'code',
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
value: [],
|
||||||
|
defaultValue: { value: undefined },
|
||||||
|
description: `
|
||||||
|
<div>Light variant</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ComponentAPI {props} />
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionItem,
|
||||||
|
ToggleSmall,
|
||||||
|
NumberInput,
|
||||||
|
FormGroup
|
||||||
|
} from 'carbon-components-svelte';
|
||||||
|
import { ComponentPreview } from '../../Component';
|
||||||
|
|
||||||
|
$: items = [1, 2, 3, 4].map(id => ({ id, open: false }));
|
||||||
|
|
||||||
|
$: props = {
|
||||||
|
count: 4,
|
||||||
|
open: false,
|
||||||
|
skeleton: false
|
||||||
|
};
|
||||||
|
|
||||||
|
$: if (props.skeleton) {
|
||||||
|
items = items.map(_ => ({ ..._, open: false }));
|
||||||
|
}
|
||||||
|
|
||||||
|
$: code = `
|
||||||
|
<script>
|
||||||
|
import { Accordion, AccordionItem } from 'carbon-components-svelte';
|
||||||
|
< /script>
|
||||||
|
|
||||||
|
<Accordion${props.skeleton ? ' skeleton' : ''}${props.skeleton ? ` count={${props.count}}` : ''}${
|
||||||
|
props.open ? ` open` : ''
|
||||||
|
}>
|
||||||
|
${items
|
||||||
|
.map(item => {
|
||||||
|
return ` <AccordionItem title="Item ${item.id}"${item.open ? ' open' : ''}>Item ${
|
||||||
|
item.id
|
||||||
|
} content</AccordionItem>`;
|
||||||
|
})
|
||||||
|
.join('\n')}
|
||||||
|
</Accordion>
|
||||||
|
`;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ComponentPreview {code} minHeight="16rem">
|
||||||
|
<Accordion {...props}>
|
||||||
|
{#each items as { id }, i (id)}
|
||||||
|
<AccordionItem title={`Item ${id}`} bind:open={items[i].open}>
|
||||||
|
Item {id} content
|
||||||
|
</AccordionItem>
|
||||||
|
{/each}
|
||||||
|
</Accordion>
|
||||||
|
<div slot="props">
|
||||||
|
<FormGroup legendText="Skeleton">
|
||||||
|
<ToggleSmall id="toggle-skeleton" bind:toggled={props.skeleton} />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Skeleton row count">
|
||||||
|
<NumberInput disabled={!props.skeleton} bind:value={props.count} />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Skeleton first item open">
|
||||||
|
<ToggleSmall id="toggle-open" disabled={!props.skeleton} bind:toggled={props.open} />
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
</ComponentPreview>
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<script>
|
|
||||||
export let selected = 0;
|
|
||||||
|
|
||||||
import copy from 'clipboard-copy';
|
|
||||||
import {
|
|
||||||
ToggleSmall,
|
|
||||||
CodeSnippet,
|
|
||||||
FormGroup,
|
|
||||||
RadioButtonGroup,
|
|
||||||
RadioButton
|
|
||||||
} from 'carbon-components-svelte';
|
|
||||||
|
|
||||||
$: code = `
|
|
||||||
<CodeSnippet />
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
$: props = {
|
|
||||||
light: false,
|
|
||||||
type: 'single'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bx--row {
|
|
||||||
background-color: var(--cds-ui-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
background-color: var(--cds-ui-background);
|
|
||||||
border-left: 1px solid var(--cds-ui-03);
|
|
||||||
border-right: 1px solid var(--cds-ui-03);
|
|
||||||
border-bottom: 1px solid var(--cds-ui-03);
|
|
||||||
flex: 1;
|
|
||||||
display: inline-flex;
|
|
||||||
min-height: 11.5rem;
|
|
||||||
padding: 2.5rem 0.9375rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{#if selected === 0}
|
|
||||||
<div class="bx--row">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div>
|
|
||||||
<CodeSnippet {...props} on:click={() => copy(code)} {code} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bx--row">
|
|
||||||
<div class="bx--col">
|
|
||||||
<h4 style="padding: 1rem 0;">Props</h4>
|
|
||||||
<FormGroup legendText="Light variant (light)">
|
|
||||||
<ToggleSmall id="toggle-light" bind:toggled={props.light} />
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup legendText="Type (type)">
|
|
||||||
<RadioButtonGroup orientation="vertical" legend="Group Legend" bind:selected={props.type}>
|
|
||||||
<RadioButton value="inline" id="inline" labelText="inline" />
|
|
||||||
<RadioButton value="single" id="single" labelText="single" />
|
|
||||||
<RadioButton value="multi" id="multi" labelText="multi" />
|
|
||||||
</RadioButtonGroup>
|
|
||||||
</FormGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script>
|
||||||
|
import { ComponentAPI } from '../../Component';
|
||||||
|
|
||||||
|
const props = [
|
||||||
|
{
|
||||||
|
name: 'type',
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
value: ['inline', 'single', 'multi'],
|
||||||
|
defaultValue: { value: 'single' },
|
||||||
|
description: `
|
||||||
|
<div>
|
||||||
|
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'light',
|
||||||
|
type: 'boolean',
|
||||||
|
required: false,
|
||||||
|
value: [],
|
||||||
|
defaultValue: { value: false },
|
||||||
|
description: `
|
||||||
|
<div>Light variant</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'code',
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
value: [],
|
||||||
|
defaultValue: { value: undefined },
|
||||||
|
description: `
|
||||||
|
<div>Light variant</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ComponentAPI {props} />
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
TextArea,
|
||||||
|
TextInput,
|
||||||
|
ToggleSmall,
|
||||||
|
CodeSnippet,
|
||||||
|
FormGroup,
|
||||||
|
RadioButtonGroup,
|
||||||
|
RadioButton
|
||||||
|
} from 'carbon-components-svelte';
|
||||||
|
import { ComponentPreview } from '../../Component';
|
||||||
|
|
||||||
|
$: props = {
|
||||||
|
code: `
|
||||||
|
This is a <CodeSnippet />
|
||||||
|
`.trim(),
|
||||||
|
light: false,
|
||||||
|
type: 'single',
|
||||||
|
skeleton: false,
|
||||||
|
feedback: 'Copied!'
|
||||||
|
};
|
||||||
|
|
||||||
|
$: code = `
|
||||||
|
<script>
|
||||||
|
import { CodeSnippet } from 'carbon-components-svelte';
|
||||||
|
|
||||||
|
$: code = \`${props.code}\`;
|
||||||
|
< /script>
|
||||||
|
|
||||||
|
<CodeSnippet type="${props.type}"${props.light ? ' light' : ''} {code}${
|
||||||
|
props.skeleton ? ' skeleton' : ''
|
||||||
|
} feedback="${props.feedback}" />
|
||||||
|
`;
|
||||||
|
|
||||||
|
$: if (props.type === 'inline') {
|
||||||
|
props.skeleton = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ComponentPreview light={props.light} {code}>
|
||||||
|
<div>
|
||||||
|
<CodeSnippet {...props} />
|
||||||
|
</div>
|
||||||
|
<div slot="props">
|
||||||
|
<FormGroup legendText="Type">
|
||||||
|
<RadioButtonGroup legend="Type" bind:selected={props.type}>
|
||||||
|
<RadioButton value="inline" id="inline" labelText="inline" />
|
||||||
|
<RadioButton value="single" id="single" labelText="single" />
|
||||||
|
<RadioButton value="multi" id="multi" labelText="multi" />
|
||||||
|
</RadioButtonGroup>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Light variant">
|
||||||
|
<ToggleSmall id="toggle-light" bind:toggled={props.light} />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Code">
|
||||||
|
{#if props.type === 'multi'}
|
||||||
|
<TextArea bind:value={props.code} />
|
||||||
|
{:else}
|
||||||
|
<TextInput bind:value={props.code} />
|
||||||
|
{/if}
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Skeleton">
|
||||||
|
<ToggleSmall
|
||||||
|
id="toggle-skeleton"
|
||||||
|
disabled={props.type === 'inline'}
|
||||||
|
bind:toggled={props.skeleton} />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup legendText="Feedback text">
|
||||||
|
<TextInput placeholder="Enter text" bind:value={props.feedback} />
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
</ComponentPreview>
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -1,8 +1,50 @@
|
||||||
const components = [
|
const components = [
|
||||||
|
{ name: 'Accordion' },
|
||||||
|
{ name: 'Breadcrumb' },
|
||||||
|
{ name: 'Button' },
|
||||||
|
{ name: 'Checkbox' },
|
||||||
{ name: 'CodeSnippet' },
|
{ name: 'CodeSnippet' },
|
||||||
|
{ name: 'ComboBox' },
|
||||||
|
{ name: 'ComposedModal' },
|
||||||
|
{ name: 'ContentSwitcher' },
|
||||||
|
{ name: 'CopyButton' },
|
||||||
{ name: 'DataTable' },
|
{ name: 'DataTable' },
|
||||||
|
{ name: 'DatePicker' },
|
||||||
{ name: 'Dropdown' },
|
{ name: 'Dropdown' },
|
||||||
{ name: 'MultiSelect' }
|
{ name: 'FileUploader' },
|
||||||
|
{ name: 'Form' },
|
||||||
|
{ name: 'Icon' },
|
||||||
|
{ name: 'InlineLoading' },
|
||||||
|
{ name: 'Link' },
|
||||||
|
{ name: 'Loading' },
|
||||||
|
{ name: 'Modal' },
|
||||||
|
{ name: 'MultiSelect' },
|
||||||
|
{ name: 'Notification' },
|
||||||
|
{ name: 'NumberInput' },
|
||||||
|
{ name: 'OrderedList' },
|
||||||
|
{ name: 'OverflowMenu' },
|
||||||
|
{ name: 'Pagination' },
|
||||||
|
{ name: 'ProgressIndicator' },
|
||||||
|
{ name: 'RadioButton' },
|
||||||
|
{ name: 'RadioButtonGroup' },
|
||||||
|
{ name: 'Search' },
|
||||||
|
{ name: 'Select' },
|
||||||
|
{ name: 'SkeletonPlaceholder' },
|
||||||
|
{ name: 'SkeletonText' },
|
||||||
|
{ name: 'Slider' },
|
||||||
|
{ name: 'StructuredList' },
|
||||||
|
{ name: 'Tabs' },
|
||||||
|
{ name: 'Tag' },
|
||||||
|
{ name: 'TextArea' },
|
||||||
|
{ name: 'TextInput' },
|
||||||
|
{ name: 'Tile' },
|
||||||
|
{ name: 'TimePicker' },
|
||||||
|
{ name: 'Toggle' },
|
||||||
|
{ name: 'ToggleSmall' },
|
||||||
|
{ name: 'Tooltip' },
|
||||||
|
{ name: 'TooltipDefinition' },
|
||||||
|
{ name: 'TooltipIcon' },
|
||||||
|
{ name: 'UnorderedList' }
|
||||||
];
|
];
|
||||||
|
|
||||||
export default components;
|
export default components;
|
||||||
|
|
|
||||||
3
palimpsest/src/store/index.js
Normal file
3
palimpsest/src/store/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const theme = writable();
|
||||||
|
|
@ -3,9 +3,26 @@
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
|
export let skeleton = false;
|
||||||
|
export let count = 4;
|
||||||
|
export let open = true;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
import AccordionSkeleton from './Accordion.Skeleton.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul on:click on:mouseover on:mouseenter on:mouseleave class={cx('--accordion', className)} {style}>
|
{#if skeleton}
|
||||||
|
<AccordionSkeleton {count} {open} class={className} {style} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !skeleton}
|
||||||
|
<ul
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
class={cx('--accordion', className)}
|
||||||
|
{style}>
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
export let light = false;
|
export let light = false;
|
||||||
export let showLessText = 'Show less';
|
export let showLessText = 'Show less';
|
||||||
export let showMoreText = 'Show more';
|
export let showMoreText = 'Show more';
|
||||||
|
export let skeleton = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
export let type = 'single';
|
export let type = 'single';
|
||||||
|
|
||||||
|
|
@ -19,19 +20,27 @@
|
||||||
import Button from '../Button';
|
import Button from '../Button';
|
||||||
import Copy from '../Copy';
|
import Copy from '../Copy';
|
||||||
import CopyButton from '../CopyButton';
|
import CopyButton from '../CopyButton';
|
||||||
|
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
|
||||||
|
|
||||||
let codeRef = undefined;
|
let codeRef = undefined;
|
||||||
let expanded = false;
|
let expanded = false;
|
||||||
let showMoreLess = false;
|
let showMoreLess = false;
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
|
if (type === 'multi' && codeRef) {
|
||||||
|
showMoreLess = codeRef.getBoundingClientRect().height > 255;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$: expandText = expanded ? showLessText : showMoreText;
|
$: expandText = expanded ? showLessText : showMoreText;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if type === 'inline'}
|
{#if skeleton}
|
||||||
|
<CodeSnippetSkeleton class={className} {type} {style} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !skeleton}
|
||||||
|
{#if type === 'inline'}
|
||||||
<Copy
|
<Copy
|
||||||
aria-label={$$props['aria-label'] || copyLabel}
|
aria-label={$$props['aria-label'] || copyLabel}
|
||||||
aria-describedby={id}
|
aria-describedby={id}
|
||||||
|
|
@ -47,7 +56,7 @@
|
||||||
<slot>{code}</slot>
|
<slot>{code}</slot>
|
||||||
</code>
|
</code>
|
||||||
</Copy>
|
</Copy>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
|
|
@ -86,4 +95,5 @@
|
||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
export let triggerHref = '#';
|
export let triggerHref = '#';
|
||||||
export let type = 'default';
|
export let type = 'default';
|
||||||
|
|
||||||
import { createEventDispatcher, setContext } from 'svelte';
|
import { createEventDispatcher, afterUpdate, setContext } from 'svelte';
|
||||||
import { writable, derived } from 'svelte/store';
|
import { writable, derived } from 'svelte/store';
|
||||||
import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
|
import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
@ -62,10 +62,14 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
selected = currentIndex;
|
||||||
|
});
|
||||||
|
|
||||||
|
$: currentIndex = selected;
|
||||||
$: currentTab = $tabs[currentIndex] || undefined;
|
$: currentTab = $tabs[currentIndex] || undefined;
|
||||||
$: currentContent = $content[currentIndex] || undefined;
|
$: currentContent = $content[currentIndex] || undefined;
|
||||||
$: {
|
$: {
|
||||||
selected = currentIndex;
|
|
||||||
dispatch('change', currentIndex);
|
dispatch('change', currentIndex);
|
||||||
|
|
||||||
if (currentTab) {
|
if (currentTab) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue