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

Merge pull request #107 from IBM/refactor

Browse source 
feat(palimpsest): add initial component documentation
This commit is contained in:
Eric Liu 2020-01-09 09:54:19 -08:00 • committed by GitHub
commit 0fa791b4b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 300 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

4
palimpsest/package.json
View file

@ -16,6 +16,8 @@
"clipboard-copy": "^3.1.0",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"fuse.js": "^3.4.6",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
@ -25,7 +27,7 @@
"style-loader": "^1.0.0",
"svelte": "^3.12.1",
"svelte-loader": "2.13.6",
"svelte-routing": "^1.4.0",
"svelte-spa-router": "^2.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"

65
palimpsest/src/App.svelte
View file

@ -1,50 +1,37 @@
<script>
import { Router, Link, Route } from 'svelte-routing';
import copy from 'clipboard-copy';
import { Search, Link as CarbonLink, CodeSnippet } from 'carbon-components-svelte';
import ThemePicker from './components/ThemePicker.svelte';
let value = '';
$: code = `
search component "${value}"
`.trim();
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';
</script>
<style>
nav {
position: fixed;
top: 2.5rem;
left: 0;
width: 14rem;
height: calc(100% - 2.5rem);
background-color: var(--cds-ui-01);
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
height: 2.5rem;
padding: 0 1rem;
margin-top: 2.5rem;
padding-left: 16rem;
}
</style>
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="about">About</Link>
</nav>
<div>
<Route path="about" component={ThemePicker} />
<Route path="/">Home</Route>
</div>
</Router>
<Router routes={{ '/c/:name': ComponentLayout }} />
<header>
<CarbonLink href="https://github.com/IBM/carbon-components-svelte">GitHub</CarbonLink>
<div>
<ThemePicker />
<Header />
<nav>
<ComponentSearch />
</nav>
<header class="bx--grid">
<div class="bx--row">
<img src={Logo} alt="Logo" style="width: 4rem;" />
</div>
</header>
<div style="width: 16rem">
<Search id="search-components" labelText="Components" small bind:value />
</div>
<CodeSnippet
on:click={() => {
copy(code);
}}
{code} />

BIN
palimpsest/src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

49
palimpsest/src/components/ComponentLayout.svelte Normal file
View file

@ -0,0 +1,49 @@
<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>

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

@ -1,14 +1,14 @@
<script>
import { Select, SelectItem } from 'carbon-components-svelte';
let selected = 'white';
let selected = 'g100';
$: {
document.documentElement.setAttribute('carbon-theme', selected);
}
</script>
<Select inline labelText="Select Carbon Theme" bind:selected>
<Select inline labelText="Theme" bind:selected>
<SelectItem value="white" text="White (light)" />
<SelectItem value="g10" text="Gray 10 (light)" />
<SelectItem value="g90" text="Gray 90 (dark)" />

64
palimpsest/src/components/carbon-components/CodeSnippet.svelte Normal file
View file

@ -0,0 +1,64 @@
<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}

66
palimpsest/src/containers/ComponentSearch.svelte Normal file
View file

@ -0,0 +1,66 @@
<script>
import { link, location } from 'svelte-spa-router';
import { Search } from 'carbon-components-svelte';
import Fuse from 'fuse.js';
import components from '../data/component-registry';
const fuse = new Fuse(components, { shouldSort: false, keys: ['name'] });
let value = '';
$: results = value.length > 1 ? fuse.search(value) : components;
</script>
<style>
ul {
padding: 0.5rem 0;
}
li {
display: flex;
}
.bx--link {
position: relative;
width: 100%;
height: 100%;
padding: 0.375rem 1rem;
color: var(--cds-text-01);
text-decoration: none;
}
.bx--link:focus {
z-index: 1;
}
.bx--link:hover {
background-color: var(--cds-ui-03);
color: var(--cds-text-01);
}
.bx--link.current {
background-color: var(--cds-ui-03);
font-weight: 600;
}
.bx--link.current:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0.25rem;
height: 100%;
background-color: var(--cds-interactive-01);
}
</style>
<Search small id="search-components" labelText="Components" bind:value />
<ul>
{#each results as { name }, i (name)}
<li>
<a class="bx--link" class:current={$location === `/c/${name}`} href={`/c/${name}`} use:link>
{name}
</a>
</li>
{/each}
</ul>

51
palimpsest/src/containers/Header.svelte Normal file
View file

@ -0,0 +1,51 @@
<script>
import { Link } from 'carbon-components-svelte';
import ThemePicker from '../components/ThemePicker.svelte';
</script>
<style>
header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
left: 0;
width: 100%;
height: 2.5rem;
padding: 0 1rem;
background-color: var(--cds-ui-01);
border-bottom: 1px solid var(--cds-ui-03);
}
nav {
display: flex;
align-items: baseline;
}
.bx--link {
font-size: 1rem;
color: var(--cds-text-01);
}
.version {
font-size: 0.75rem;
color: var(--cds-text-02);
margin-left: 0.5rem;
margin-right: 1.5rem;
}
</style>
<header>
<nav>
<a class="bx--link" href="/">
Carbon Components
<strong>Svelte</strong>
</a>
<span class="version">v0.2.1</span>
<Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
</nav>
<div>
<ThemePicker />
</div>
</header>

8
palimpsest/src/data/component-registry.js Normal file
View file

@ -0,0 +1,8 @@
const components = [
{ name: 'CodeSnippet' },
{ name: 'DataTable' },
{ name: 'Dropdown' },
{ name: 'MultiSelect' }
];
export default components;

6
palimpsest/src/style.scss
View file

@ -34,8 +34,4 @@ $css--plex: true;
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
@import 'carbon-components/scss/globals/scss/_css--body.scss';
@import 'carbon-components/scss/globals/grid/_grid.scss';
@import 'carbon-components/scss/components/search/_search.scss';
@import 'carbon-components/scss/components/select/_select.scss';
@import 'carbon-components/scss/components/copy-button/_copy-button.scss';
@import 'carbon-components/scss/components/code-snippet/_code-snippet.scss';
@import 'carbon-components/scss/globals/scss/styles.scss';

4
palimpsest/webpack.config.js
View file

@ -41,6 +41,10 @@ module.exports = {
},
'sass-loader'
]
},
{
test: /\.(png|jpe?g|svg)$/i,
use: [{ loader: 'file-loader' }]
}
]
},

32
palimpsest/yarn.lock
View file

@ -1479,7 +1479,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001012, caniuse-lite@^1.0.30001015:
integrity sha512-EDnZyOJ6eYh6lHmCvCdHAFbfV4KJ9lSdfv4h/ppEhrU/Yudkl7jujwMZ1we6RX7DXqBfT04pVMQ4J+1wcTlsKA==
carbon-components-svelte@../:
version "0.1.0"
version "0.2.1"
dependencies:
carbon-icons-svelte "^10.8.2"
flatpickr "^4.6.3"
@ -2683,6 +2683,14 @@ figgy-pudding@^3.5.1:
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
file-loader@^5.0.2:
version "5.0.2"
resolved "https://registry.npmjs.org/file-loader/-/file-loader-5.0.2.tgz#7f3d8b4ac85a5e8df61338cfec95d7405f971caa"
integrity sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==
dependencies:
loader-utils "^1.2.3"
schema-utils "^2.5.0"
file-uri-to-path@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@ -2852,6 +2860,11 @@ function-bind@^1.1.1:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
fuse.js@^3.4.6:
version "3.4.6"
resolved "https://registry.npmjs.org/fuse.js/-/fuse.js-3.4.6.tgz#545c3411fed88bf2e27c457cab6e73e7af697a45"
integrity sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg==
gauge@~2.7.3:
version "2.7.4"
resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@ -5451,6 +5464,11 @@ regexp.prototype.flags@^1.2.0:
define-properties "^1.1.3"
es-abstract "^1.17.0-next.1"
regexparam@^1.3.0:
version "1.3.0"
resolved "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
regexpu-core@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
@ -5690,7 +5708,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.6.0:
schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.5.0, schema-utils@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f"
integrity sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==
@ -6252,10 +6270,12 @@ svelte-loader@2.13.6:
loader-utils "^1.1.0"
svelte-dev-helper "^1.1.9"
svelte-routing@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.4.0.tgz#09285f3c7b19f509dfb1289fbc1235b348aa7d80"
integrity sha512-09ypn0/vD2PcuyZEEocUHFgi7kvLOxSoUUuJZ4j3p4Y4sT/kMIWtHIRpnLdsr8bQ+sGo77sbEkO+av6yd1RjPg==
svelte-spa-router@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-2.0.0.tgz#704e0d2a72e43f146b0c4ba67f8c6fd695132ec9"
integrity sha512-cIzRfHisJ87IzI9gyufkEXwaXT5hJrejMa3ryeClIzGLC2LzmKECfBhbitmYJ8gDfkto9tfZVXGvgQ9i7lmxXA==
dependencies:
regexparam "^1.3.0"
svelte@^3.12.1:
version "3.16.7"