mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
docs: add new component docs
This commit is contained in:
Eric Liu
parent
c2fb2d213d
commit
2008d0035f
130 changed files with 6662 additions and 3801 deletions
16
docs/src/components/AspectRatio.svelte
Normal file
16
docs/src/components/AspectRatio.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
/**
|
||||
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
|
||||
*/
|
||||
export let ratio = "2x1";
|
||||
</script>
|
||||
|
||||
<div
|
||||
{...$$restProps}
|
||||
class:bx--aspect-ratio="{true}"
|
||||
class="bx--aspect-ratio--{ratio} {$$restProps.class}"
|
||||
>
|
||||
<div class:bx--aspect-ratio--object="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script>
|
||||
export let code = "";
|
||||
|
||||
import copy from "clipboard-copy";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
{...$$restProps}
|
||||
code="{code}"
|
||||
on:click="{() => {
|
||||
copy(code);
|
||||
}}"
|
||||
/>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script>
|
||||
export let segment = undefined;
|
||||
|
||||
import {
|
||||
SkipToContent,
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderUtilities,
|
||||
HeaderActionLink,
|
||||
} from "carbon-components-svelte";
|
||||
import Theme from "./Theme.svelte";
|
||||
</script>
|
||||
|
||||
<Header
|
||||
company="Carbon"
|
||||
platformName="Components Svelte"
|
||||
href="."
|
||||
rel="prefetch"
|
||||
aria-current="{segment === undefined ? 'page' : undefined}"
|
||||
>
|
||||
<SkipToContent />
|
||||
<!-- <HeaderNav>
|
||||
<HeaderNavItem
|
||||
rel="prefetch"
|
||||
href="about"
|
||||
text="About"
|
||||
aria-current={segment === 'about' ? 'page' : undefined} />
|
||||
<HeaderNavItem
|
||||
rel="prefetch"
|
||||
href="components"
|
||||
text="Components"
|
||||
aria-current={segment === 'components' ? 'page' : undefined} />
|
||||
</HeaderNav> -->
|
||||
</Header>
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
<script>
|
||||
import * as Carbon from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import TileCard from "./TileCard.svelte";
|
||||
|
||||
let skeleton = false;
|
||||
let accordionItemOpen = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(.component-grid) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
:global(.component-grid .scope:first-of-type) {
|
||||
border-top: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
:global(.scope) {
|
||||
border-left: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
:global(.scope > .bx--col) {
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
border-right: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Carbon.Row>
|
||||
<Carbon.Column>
|
||||
<Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
<div class="component-grid">
|
||||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Accordion">
|
||||
<Carbon.Accordion
|
||||
count="{3}"
|
||||
skeleton="{skeleton}"
|
||||
open="{accordionItemOpen}"
|
||||
>
|
||||
<Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
|
||||
Content 1
|
||||
</Carbon.AccordionItem>
|
||||
<Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
|
||||
<Carbon.AccordionItem title="Title 3">Content 3</Carbon.AccordionItem>
|
||||
</Carbon.Accordion>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Breadcrumb">
|
||||
<Carbon.Breadcrumb skeleton="{skeleton}">
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
|
||||
</Carbon.Breadcrumb>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Primary button">
|
||||
<Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Secondary button">
|
||||
<Carbon.Button kind="secondary" skeleton="{skeleton}">
|
||||
Secondary
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Tertiary button">
|
||||
<Carbon.Button kind="tertiary" skeleton="{skeleton}">
|
||||
Tertiary
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Ghost button">
|
||||
<Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Danger button">
|
||||
<Carbon.Button kind="danger" skeleton="{skeleton}">
|
||||
Danger
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Primary button with icon">
|
||||
<Carbon.Button icon="{Add16}" skeleton="{skeleton}">
|
||||
With icon
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Icon-only buttons">
|
||||
<Carbon.Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
iconDescription="Primary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
skeleton="{skeleton}"
|
||||
/>
|
||||
<Carbon.Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="secondary"
|
||||
iconDescription="Secondary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
skeleton="{skeleton}"
|
||||
/>
|
||||
<Carbon.Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="tertiary"
|
||||
iconDescription="Tertiary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
skeleton="{skeleton}"
|
||||
/>
|
||||
<Carbon.Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
iconDescription="Ghost"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
skeleton="{skeleton}"
|
||||
/>
|
||||
<Carbon.Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="danger"
|
||||
iconDescription="Danger"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
skeleton="{skeleton}"
|
||||
/>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Checkbox">
|
||||
<fieldset class="bx--fieldset">
|
||||
<legend class="bx--label">Checkbox heading</legend>
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
</fieldset>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Indeterminate Checkboox">
|
||||
<fieldset class="bx--fieldset">
|
||||
<legend class="bx--label">Checkbox heading</legend>
|
||||
<Carbon.Checkbox
|
||||
indeterminate
|
||||
skeleton="{skeleton}"
|
||||
labelText="Checkbox label"
|
||||
/>
|
||||
<Carbon.Checkbox
|
||||
indeterminate
|
||||
skeleton="{skeleton}"
|
||||
labelText="Checkbox label"
|
||||
/>
|
||||
</fieldset>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Inline Code Snippet">
|
||||
<Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
|
||||
{`node -v`}
|
||||
</Carbon.CodeSnippet>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Single-line Code Snippet">
|
||||
<Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
|
||||
{`tsc -c tsconfig.json`}
|
||||
</Carbon.CodeSnippet>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column lg="{8}" noGutter>
|
||||
<TileCard title="Multi-line Code Snippet">
|
||||
<Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
|
||||
{`* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "IBM Plex Sans";
|
||||
lin-height: 1.45;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1rem;
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}`}
|
||||
</Carbon.CodeSnippet>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
</div>
|
||||
176
docs/src/components/Preview.svelte
Normal file
176
docs/src/components/Preview.svelte
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<script>
|
||||
export let code = "";
|
||||
export let codeRaw = "";
|
||||
export let src = "";
|
||||
export let framed = false;
|
||||
|
||||
import { CodeSnippet, Button, InlineLoading } from "carbon-components-svelte";
|
||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||
import copy from "clipboard-copy";
|
||||
import { url, beforeUrlChange } from "@sveltech/routify";
|
||||
import { theme } from "../store";
|
||||
|
||||
let success = false;
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
if (success) success = false;
|
||||
return true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style global>
|
||||
.preview {
|
||||
margin-bottom: var(--cds-layout-04);
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet-container pre {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator {
|
||||
color: #6ea6ff;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.token.language-javascript,
|
||||
.token.attr-value {
|
||||
color: #d4bbff; /* purple 30 */
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #a8a8a8; /* gray 40 */
|
||||
}
|
||||
|
||||
.token.script .token.language-javascript {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #fa75a6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.code-override {
|
||||
border: 1px solid #262626;
|
||||
}
|
||||
|
||||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.preview-viewer:not(.framed) {
|
||||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.preview-viewer.framed {
|
||||
min-height: 22rem;
|
||||
}
|
||||
|
||||
.framed-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preview">
|
||||
{#if framed}
|
||||
<div class="framed-header">
|
||||
<div></div>
|
||||
<Button
|
||||
style="margin-left: auto;"
|
||||
kind="ghost"
|
||||
target="_blank"
|
||||
size="field"
|
||||
href="{src}"
|
||||
icon="{Launch16}"
|
||||
>
|
||||
Open in new tab
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="preview-viewer" class:framed>
|
||||
{#if framed && !success}
|
||||
<div class="loader">
|
||||
<InlineLoading />
|
||||
</div>
|
||||
{/if}
|
||||
{#if framed}
|
||||
<iframe
|
||||
on:load="{() => {
|
||||
success = true;
|
||||
}}"
|
||||
title="{src.split('/').pop()}"
|
||||
src="{$url(`${src}?theme=${$theme}`)}"
|
||||
></iframe>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="code-override">
|
||||
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
|
||||
{@html code}
|
||||
</CodeSnippet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,29 +1,24 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { Select, SelectItem } from "carbon-components-svelte";
|
||||
export let persist = false;
|
||||
export let persistKey = "carbon-theme";
|
||||
export const themes = ["white", "g10", "g90", "g100"];
|
||||
|
||||
let theme = undefined;
|
||||
import { onMount, afterUpdate } from "svelte";
|
||||
import { theme } from "../store";
|
||||
|
||||
const isValidTheme = (value) => themes.includes(value);
|
||||
|
||||
onMount(() => {
|
||||
theme = localStorage.getItem("theme") || "g10";
|
||||
const persisted_theme = localStorage.getItem(persistKey);
|
||||
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
|
||||
});
|
||||
|
||||
$: if (theme) {
|
||||
localStorage.setItem("theme", theme);
|
||||
document.documentElement.setAttribute("carbon-theme", theme);
|
||||
}
|
||||
afterUpdate(() => {
|
||||
if (isValidTheme($theme)) {
|
||||
document.documentElement.setAttribute("theme", $theme);
|
||||
if (persist) localStorage.setItem(persistKey, $theme);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(.bx--select-input) {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Select inline labelText="Theme" bind:selected="{theme}">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,63 +1,86 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let title = "";
|
||||
export let subtitle = "";
|
||||
export let borderRight = false;
|
||||
export let borderBottom = false;
|
||||
|
||||
import { Tile, Button, ButtonSet } from "carbon-components-svelte";
|
||||
import Code16 from "carbon-icons-svelte/lib/Code16";
|
||||
import { ClickableTile, Tile } from "carbon-components-svelte";
|
||||
import AspectRatio from "./AspectRatio.svelte";
|
||||
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
|
||||
import Launch20 from "carbon-icons-svelte/lib/Launch20";
|
||||
|
||||
$: tileComponent = href ? ClickableTile : Tile;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(.tile-card) {
|
||||
.card-wrapper {
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.borderRight {
|
||||
border-right: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.75rem;
|
||||
margin-top: calc(-1 * var(--cds-spacing-02));
|
||||
margin-bottom: var(--cds-spacing-01);
|
||||
}
|
||||
|
||||
.tile-card__preview {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
.subtitle {
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
|
||||
.tile-card__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
@media (max-width: 671px) {
|
||||
.card-wrapper,
|
||||
.borderRight {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<Tile class="tile-card">
|
||||
<div class="title">{title}</div>
|
||||
<div class="tile-card__preview">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="tile-card__actions">
|
||||
<div>
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
size="small"
|
||||
icon="{Code16}"
|
||||
iconDescription="Usage"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top"
|
||||
/>
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
size="small"
|
||||
icon="{Code16}"
|
||||
iconDescription="Usage"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tile>
|
||||
<div class="card-wrapper" class:borderRight class:borderBottom>
|
||||
<AspectRatio>
|
||||
<svelte:component
|
||||
this="{tileComponent}"
|
||||
href="{href}"
|
||||
{...$$restProps}
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div class="card">
|
||||
<div>
|
||||
<h5 class="title">{title}</h5>
|
||||
{#if subtitle}
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<svelte:component
|
||||
this="{LogoGithub32}"
|
||||
style="fill: var(--cds-icon-01)"
|
||||
/>
|
||||
<Launch20 style="fill: var(--cds-icon-01)" />
|
||||
</div>
|
||||
</div>
|
||||
</svelte:component>
|
||||
</AspectRatio>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue