mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
docs(palimpsest): add static side nav with components
This commit is contained in:
Eric Liu
parent
74b6aeafe8
commit
88ee01184b
22 changed files with 718 additions and 165 deletions
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue