mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01: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
|
|
@ -8,3 +8,4 @@
|
|||
/**/client
|
||||
/**/build
|
||||
.storybook
|
||||
*.svx
|
||||
|
|
@ -5,6 +5,12 @@
|
|||
|
||||
> Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
|
||||
|
||||
`carbon-components-svelte` is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
|
||||
A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
|
||||
|
||||
## [Documentation](https://carbon-components-svelte.mybluemix.net/)
|
||||
|
||||
## Getting started
|
||||
|
||||
Install `carbon-components-svelte` as a development dependency.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
*
|
||||
!Staticfile
|
||||
!public
|
||||
!dist
|
||||
12
docs/.gitignore
vendored
12
docs/.gitignore
vendored
|
|
@ -1,9 +1,3 @@
|
|||
.DS_Store
|
||||
/public/
|
||||
/node_modules/
|
||||
/src/node_modules/@sapper/
|
||||
yarn-error.log
|
||||
/cypress/screenshots/
|
||||
/cypress/fixtures/
|
||||
/__sapper__/
|
||||
static/style.css
|
||||
/node_modules
|
||||
/dist
|
||||
/.routify
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
# docs
|
||||
|
||||
This application was scaffolded using the default webpack [Sapper](https://github.com/sveltejs/sapper) template.
|
||||
|
||||
**Purpose**
|
||||
|
||||
- Write integration/end-to-end tests using Cypress
|
||||
- Serve as an alternative component development environment to Storybook
|
||||
- Build components in a Server-side Rendering (SSR) environment
|
||||
|
||||
## Getting Started
|
||||
|
||||
`carbon-components-svelte` must be linked in order to reflect live updates during component development.
|
||||
|
||||
In the root folder of this project, run the following:
|
||||
|
||||
```sh
|
||||
# carbon-components-svelte/
|
||||
yarn link
|
||||
```
|
||||
|
||||
Then, in this folder, link the package and install the dependencies:
|
||||
|
||||
```sh
|
||||
cd docs
|
||||
|
||||
# carbon-components-svelte/docs/
|
||||
yarn link "carbon-components-svelte"
|
||||
yarn install
|
||||
```
|
||||
|
||||
Before starting development, you will need to build the Carbon-themed CSS StyleSheet once.
|
||||
|
||||
```sh
|
||||
node scripts/carbon-theme
|
||||
```
|
||||
|
||||
A file containing the four Carbon themes will be outputted to `static/style.css`. Do not check this file into source control.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
### `yarn dev`
|
||||
|
||||
Runs the Sapper app in development mode.
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app for production (static export only).
|
||||
|
||||
### `yarn test`
|
||||
|
||||
Runs Cypress integration tests in a headless browser (i.e. CLI only).
|
||||
|
||||
### `yarn:test:tdd`
|
||||
|
||||
Runs Cypress tests in the Cypress GUI. This is helpful when authoring new tests.
|
||||
|
||||
## Deploying to IBM Cloud
|
||||
|
||||
Deploy to IBM Cloud using the Staticfile buildpack.
|
||||
|
||||
### Log in
|
||||
|
||||
Log in using the IBM Cloud CLI:
|
||||
|
||||
```sh
|
||||
ibmcloud login
|
||||
|
||||
# or if using Single-Sign On (SSO):
|
||||
ibmcloud login --sso
|
||||
```
|
||||
|
||||
### Deploy
|
||||
|
||||
Build and deploy the app:
|
||||
|
||||
```sh
|
||||
yarn build
|
||||
ibmcloud target --cf
|
||||
ibmcloud cf push
|
||||
```
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
root: public
|
||||
location_include: includes/*.conf
|
||||
root: dist
|
||||
force_https: true
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"baseUrl": "http://localhost:3000",
|
||||
"video": false,
|
||||
"defaultCommandTimeout": 20
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
describe("Button", () => {
|
||||
beforeEach(() => {
|
||||
cy.examples("Button");
|
||||
});
|
||||
|
||||
it("clicks", () => {
|
||||
cy.get(".bx--btn--primary").first().as("btn").contains("Primary button");
|
||||
|
||||
cy.get("@btn").trigger("click");
|
||||
cy.get("@log").should("be.calledWith", "click");
|
||||
|
||||
cy.get("@btn").trigger("mouseover");
|
||||
cy.get("@log").should("be.calledWith", "mouseover");
|
||||
|
||||
cy.get("@btn").trigger("mouseenter");
|
||||
cy.get("@log").should("be.calledWith", "mouseenter");
|
||||
|
||||
cy.get("@btn").trigger("mouseleave");
|
||||
cy.get("@log").should("be.calledWith", "mouseleave");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
Cypress.Commands.add("examples", (component) => {
|
||||
cy.visit(`/examples/${component}`, {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, "log").as("log");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
import "./commands";
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
location ~* ((service-worker)\.js)$ {
|
||||
add_header 'Cache-Control' 'no-store';
|
||||
expires off;
|
||||
proxy_no_cache 1;
|
||||
}
|
||||
13
docs/index.html
Normal file
13
docs/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Carbon Components Svelte</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
applications:
|
||||
- name: carbon-svelte
|
||||
memory: 32M
|
||||
disk_quota: 32M
|
||||
- name: carbon-components-svelte
|
||||
memory: 64M
|
||||
disk_quota: 64M
|
||||
buildpacks:
|
||||
- https://github.com/cloudfoundry/staticfile-buildpack.git
|
||||
|
|
|
|||
|
|
@ -1,33 +1,43 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "sapper dev",
|
||||
"build": "shx rm -rf public && sapper export && shx mv __sapper__/export public",
|
||||
"cy:run": "cypress run",
|
||||
"cy:open": "cypress open",
|
||||
"test": "run-p --race dev cy:run",
|
||||
"test:tdd": "run-p --race dev cy:open"
|
||||
},
|
||||
"dependencies": {
|
||||
"polka": "next",
|
||||
"sirv": "^1.0.1"
|
||||
"dev": "run-p dev:*",
|
||||
"dev:routify": "NODE_ENV=development routify run",
|
||||
"dev:svite": "svite",
|
||||
"build": "run-s build:*",
|
||||
"build:routify": "routify run -b",
|
||||
"build:svite": "svite build --assetsDir=assets",
|
||||
"postbuild": "node scripts/postbuild",
|
||||
"deploy": "npx gh-pages -d dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.8.5",
|
||||
"carbon-components": "^10.17.0",
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"carbon-components-svelte": "../",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"cypress": "^4.10.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"mdsvex": "^0.8.8",
|
||||
"node-sass": "^4.14.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^7.0.32",
|
||||
"sapper": "^0.27.16",
|
||||
"shx": "^0.3.2",
|
||||
"svelte": "^3.24.0",
|
||||
"svelte-loader": "^2.9.0",
|
||||
"webpack": "^4.7.0"
|
||||
"playwright": "^1.4.2",
|
||||
"polka": "^0.5.2",
|
||||
"posthtml": "^0.13.3",
|
||||
"prettier": "^2.1.2",
|
||||
"prettier-plugin-svelte": "^1.4.0",
|
||||
"prism-svelte": "^0.4.7",
|
||||
"prismjs": "^1.21.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
"sirv": "^1.0.6",
|
||||
"svelte": "3.29.0",
|
||||
"svelte-hmr": "0.11.1",
|
||||
"svelte-preprocess": "^4.3.2",
|
||||
"svite": "0.7.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"**/lodash": ">=4.17.19 "
|
||||
"routify": {
|
||||
"routifyDir": ".routify",
|
||||
"dynamicImports": true,
|
||||
"extensions": [
|
||||
"svelte",
|
||||
"svx"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
docs/public/favicon.ico
Normal file
BIN
docs/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,55 +0,0 @@
|
|||
const fs = require("fs");
|
||||
const sass = require("node-sass");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const postcss = require("postcss");
|
||||
const { promisify } = require("util");
|
||||
|
||||
const writeFile = promisify(fs.writeFile);
|
||||
const outFile = "./static/style.css";
|
||||
|
||||
async function generateCss() {
|
||||
sass.render(
|
||||
{
|
||||
outFile,
|
||||
omitSourceMapUrl: true,
|
||||
data: `
|
||||
$feature-flags: (
|
||||
enable-css-custom-properties: true,
|
||||
grid-columns-16: true,
|
||||
);
|
||||
|
||||
@import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss";
|
||||
|
||||
:root[carbon-theme="white"] { @include carbon--theme($carbon--theme--white, true); }
|
||||
:root { @include carbon--theme($carbon--theme--g10, true); }
|
||||
:root[carbon-theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
|
||||
:root[carbon-theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "node_modules/carbon-components/scss/globals/scss/_css--reset.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/scss/_css--font-face.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/scss/_css--body.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/grid/_grid.scss";
|
||||
@import "node_modules/carbon-components/scss/globals/scss/styles.scss";`,
|
||||
},
|
||||
async (error, result) => {
|
||||
if (!error) {
|
||||
const prefixed = await postcss([autoprefixer]).process(result.css, {
|
||||
from: undefined,
|
||||
});
|
||||
await writeFile(outFile, prefixed.css);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
generateCss();
|
||||
145
docs/scripts/postbuild.js
Normal file
145
docs/scripts/postbuild.js
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
const sirv = require("sirv");
|
||||
const polka = require("polka");
|
||||
const { chromium } = require("playwright");
|
||||
const fs = require("fs-extra");
|
||||
const posthtml = require("posthtml");
|
||||
const path = require("path");
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
const OUT_DIR = "dist";
|
||||
|
||||
async function scrape(page, url = "") {
|
||||
await page.goto(`http://localhost:${PORT}/${url}`);
|
||||
await page.waitForLoadState("networkidle");
|
||||
const $html = await page.$("html");
|
||||
const html = await page.evaluate(([html]) => html.innerHTML, [$html]);
|
||||
await $html.dispose();
|
||||
return html;
|
||||
}
|
||||
|
||||
function relativePaths(depth = 0) {
|
||||
const asset_extension = new RegExp(/.(js|css|ico)$/);
|
||||
let relative_path =
|
||||
depth > 0
|
||||
? Array.from({ length: depth }, (_, i) => "../")
|
||||
.join("")
|
||||
.slice(0, -1)
|
||||
: ".";
|
||||
|
||||
return (tree) => {
|
||||
tree.match(
|
||||
[
|
||||
{ attrs: { href: asset_extension } },
|
||||
{ attrs: { src: asset_extension } },
|
||||
],
|
||||
(node) => {
|
||||
if ("href" in node.attrs) {
|
||||
node.attrs.href = relative_path + node.attrs.href;
|
||||
}
|
||||
|
||||
if ("src" in node.attrs) {
|
||||
node.attrs.src = relative_path + node.attrs.src;
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
);
|
||||
|
||||
tree.match({ attrs: { id: "__routify_iframes" } }, (node) => {});
|
||||
};
|
||||
}
|
||||
|
||||
async function processHtml(html, { dir, outfilePath, depth }) {
|
||||
const processed = await posthtml().use(relativePaths(depth)).process(html);
|
||||
if (dir) {
|
||||
await fs.ensureDir(outfilePath);
|
||||
await fs.writeFile(
|
||||
path.join(outfilePath, "index.html"),
|
||||
await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
|
||||
);
|
||||
} else {
|
||||
await fs.writeFile(
|
||||
path.join(outfilePath),
|
||||
await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
|
||||
);
|
||||
}
|
||||
|
||||
console.log("Prerendered:", outfilePath);
|
||||
}
|
||||
|
||||
const app = polka()
|
||||
.use(sirv("dist", { single: true }))
|
||||
.listen(PORT, async (error) => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
|
||||
const components = await fs.readdir("src/pages/components");
|
||||
|
||||
for await (const component of components) {
|
||||
const [file] = component.split(".svx");
|
||||
const filePath = `components/${file}`;
|
||||
const result = await scrape(page, filePath);
|
||||
|
||||
await processHtml(result, {
|
||||
dir: true,
|
||||
outfilePath: `${OUT_DIR}/${filePath}`,
|
||||
depth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
await fs.ensureDir(`${OUT_DIR}/framed/`);
|
||||
await fs.ensureDir(`${OUT_DIR}/framed/Grid`);
|
||||
|
||||
const framed = [
|
||||
{
|
||||
folder: "Grid",
|
||||
paths: fs.readdirSync("src/pages/framed/Grid"),
|
||||
},
|
||||
{
|
||||
folder: "Loading",
|
||||
paths: fs.readdirSync("src/pages/framed/Loading"),
|
||||
},
|
||||
{
|
||||
folder: "Modal",
|
||||
paths: fs.readdirSync("src/pages/framed/Modal"),
|
||||
},
|
||||
{
|
||||
folder: "UIShell",
|
||||
paths: fs.readdirSync("src/pages/framed/UIShell"),
|
||||
},
|
||||
];
|
||||
|
||||
for await (const frame of framed) {
|
||||
const { folder, paths } = frame;
|
||||
|
||||
for await (framePath of paths) {
|
||||
const { name } = path.parse(framePath);
|
||||
await fs.ensureDir(`${OUT_DIR}/framed/${folder}/${name}`);
|
||||
|
||||
const filePath = `framed/${folder}/${name}`;
|
||||
const result = await scrape(page, filePath);
|
||||
|
||||
await processHtml(result, {
|
||||
dir: true,
|
||||
outfilePath: `${OUT_DIR}/${filePath}`,
|
||||
depth: 3,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const __404 = await scrape(page, "404");
|
||||
await processHtml(__404, { outfilePath: `${OUT_DIR}/404.html` });
|
||||
|
||||
const __index = await scrape(page);
|
||||
await processHtml(__index, { outfilePath: `${OUT_DIR}/index.html` });
|
||||
|
||||
await browser.close();
|
||||
await app.server.close();
|
||||
process.exit(0);
|
||||
});
|
||||
10
docs/src/App.svelte
Normal file
10
docs/src/App.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import { Router } from "@sveltech/routify";
|
||||
import { routes } from "../.routify/routes";
|
||||
</script>
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "carbon-components-svelte/css/all";
|
||||
</style>
|
||||
|
||||
<Router routes="{routes}" />
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import * as sapper from "@sapper/app";
|
||||
|
||||
sapper.start({ target: document.querySelector("#sapper") });
|
||||
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>
|
||||
|
|
|
|||
8
docs/src/index.js
Normal file
8
docs/src/index.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("app"),
|
||||
hydrate: process.env.NODE_ENV === "production",
|
||||
});
|
||||
|
||||
export default app;
|
||||
133
docs/src/layouts/ComponentLayout.svelte
Normal file
133
docs/src/layouts/ComponentLayout.svelte
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<script>
|
||||
import {
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
Content,
|
||||
Button,
|
||||
Select,
|
||||
SelectItem,
|
||||
} from "carbon-components-svelte";
|
||||
import Code16 from "carbon-icons-svelte/lib/Code16";
|
||||
import { page, metatags } from "@sveltech/routify";
|
||||
import { theme } from "../store";
|
||||
|
||||
export let component = $page.title;
|
||||
export let source = "";
|
||||
|
||||
metatags.title = $page.title;
|
||||
|
||||
// TODO: [refactor] read from package.json value
|
||||
$: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
|
||||
source || `${$page.title}/${$page.title}.svelte`
|
||||
}`;
|
||||
</script>
|
||||
|
||||
<style global>
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<Content data-components>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>{component}</h1>
|
||||
<div class="bar">
|
||||
<Select
|
||||
id="select-theme"
|
||||
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>
|
||||
<Button
|
||||
kind="ghost"
|
||||
target="_blank"
|
||||
size="field"
|
||||
href="{sourceCode}"
|
||||
icon="{Code16}"
|
||||
>
|
||||
Source code
|
||||
</Button>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column class="prose">
|
||||
<div class="toc mobile">
|
||||
<h5>Table of Contents</h5>
|
||||
<slot name="aside" />
|
||||
</div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<slot />
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<Column class="table" xlg="{4}" lg="{5}">
|
||||
<div class="toc">
|
||||
<h5>Table of Contents</h5>
|
||||
<slot name="aside" />
|
||||
</div>
|
||||
</Column>
|
||||
</Content>
|
||||
20
docs/src/pages/_fallback.svelte
Normal file
20
docs/src/pages/_fallback.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
|
||||
import { url, metatags } from "@sveltech/routify";
|
||||
|
||||
metatags.title = "404";
|
||||
</script>
|
||||
|
||||
<Content>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>404</h1>
|
||||
<div>
|
||||
Page not found.
|
||||
<Link href="{$url('/')}">Return home</Link>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Content>
|
||||
243
docs/src/pages/_layout.svelte
Normal file
243
docs/src/pages/_layout.svelte
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<script context="module">
|
||||
const fetched = new Set();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderActionLink,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelLink,
|
||||
HeaderPanelDivider,
|
||||
SkipToContent,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
} from "carbon-components-svelte";
|
||||
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
|
||||
import Theme from "../components/Theme.svelte";
|
||||
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = true;
|
||||
let innerWidth = 2048;
|
||||
|
||||
$: isMobile = innerWidth < 1056;
|
||||
$: components = $layout.children.filter(
|
||||
(child) => child.title === "components"
|
||||
)[0];
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
if (isMobile) isSideNavOpen = false;
|
||||
return true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style global>
|
||||
.bx--col > h1 {
|
||||
font-size: var(--cds-productive-heading-07-font-size);
|
||||
font-weight: var(--cds-productive-heading-07-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-07-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-07-line-height);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--cds-productive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-03-line-height);
|
||||
margin-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-05);
|
||||
}
|
||||
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--cds-productive-heading-03-font-size);
|
||||
font-weight: var(--cds-productive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.big-link {
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--cds-productive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--col > p > code {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
font-weight: var(--cds-code-02-font-weight);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
background-color: var(--cds-ui-03);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.bx--col > h2 {
|
||||
font-size: var(--cds-productive-heading-06-font-size);
|
||||
font-weight: var(--cds-productive-heading-06-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-06-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-06-line-height);
|
||||
padding-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h3 {
|
||||
font-size: var(--cds-productive-heading-04-font-size);
|
||||
font-weight: var(--cds-productive-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-04-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-04-line-height);
|
||||
padding-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--cds-productive-heading-02-font-size);
|
||||
font-weight: var(--cds-productive-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-productive-heading-02-letter-spacing);
|
||||
line-height: var(--cds-productive-heading-02-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
.bx--content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.bx--side-nav ~ .bx--content {
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bx--side-nav--expanded ~ .bx--content {
|
||||
white-space: nowrap;
|
||||
min-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-name {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.platform-name code {
|
||||
margin-left: var(--cds-spacing-02);
|
||||
font-size: var(--cds-code-01-font-size);
|
||||
font-weight: var(--cds-code-01-font-weight);
|
||||
letter-spacing: var(--cds-code-01-letter-spacing);
|
||||
line-height: var(--cds-code-01-line-height);
|
||||
color: #c6c6c6;
|
||||
}
|
||||
|
||||
@media (max-width: 580px) {
|
||||
.platform-name code {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1057px) {
|
||||
.bx--side-nav__navigation {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||
max-height: 120rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:body
|
||||
on:mouseover="{async (e) => {
|
||||
return;
|
||||
if (process.env.NODE_ENV === 'development') return;
|
||||
if (!e.target.href || !e.target
|
||||
.getAttribute('class')
|
||||
.includes('bx--side-nav__link')) return;
|
||||
if (fetched.has(e.target.href)) return;
|
||||
fetched.add(e.target.href);
|
||||
await fetch(e.target.href);
|
||||
}}" />
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<Theme persist>
|
||||
<Header
|
||||
aria-label="Navigation"
|
||||
href="/"
|
||||
expandedByDefault="{true}"
|
||||
bind:isSideNavOpen
|
||||
>
|
||||
<div slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
<span slot="platform" class="platform-name">
|
||||
Carbon Components Svelte <code>v{process.env.VERSION || ''}</code>
|
||||
</span>
|
||||
|
||||
<HeaderUtilities>
|
||||
<HeaderActionLink
|
||||
icon="{{ render: LogoGithub20 }}"
|
||||
href="https://github.com/IBM/carbon-components-svelte"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
/>
|
||||
<HeaderAction bind:isOpen>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
|
||||
Carbon Icons Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/IBM/carbon-pictograms-svelte"
|
||||
>
|
||||
Carbon Pictograms Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
|
||||
>
|
||||
Carbon Charts Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Resources</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
|
||||
Carbon Design System
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink href="https://www.ibm.com/design/language/">
|
||||
IBM Design Language
|
||||
</HeaderPanelLink>
|
||||
</HeaderPanelLinks>
|
||||
</HeaderAction>
|
||||
</HeaderUtilities>
|
||||
</Header>
|
||||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu expanded text="Components">
|
||||
{#each components.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
<slot />
|
||||
</Theme>
|
||||
72
docs/src/pages/components/Accordion.svx
Normal file
72
docs/src/pages/components/Accordion.svx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script>
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem title="Title 1">
|
||||
Content 1
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 2">
|
||||
Content 2
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 3">
|
||||
Content 3
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Chevron aligned left
|
||||
|
||||
<Accordion align="start">
|
||||
<AccordionItem title="Title 1">
|
||||
Content 1
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 2">
|
||||
Content 2
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 3">
|
||||
Content 3
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Custom title slot
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem>
|
||||
<h5 slot="title" style="color: red;">Custom title slot</h5>
|
||||
Content 1
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 2">
|
||||
Content 2
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 3">
|
||||
Content 3
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### First item open
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem title="Title 1" open>
|
||||
Content 1
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 2">
|
||||
Content 2
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Title 3">
|
||||
Content 3
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Accordion skeleton count={3} />
|
||||
|
||||
### Skeleton (closed)
|
||||
|
||||
<Accordion skeleton open={false} count={3} />
|
||||
26
docs/src/pages/components/Breadcrumb.svx
Normal file
26
docs/src/pages/components/Breadcrumb.svx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### No trailing slash
|
||||
|
||||
<Breadcrumb noTrailingSlash>
|
||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Breadcrumb skeleton count={3} />
|
||||
71
docs/src/pages/components/Button.svx
Normal file
71
docs/src/pages/components/Button.svx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
description: High-level description
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Button } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Primary button
|
||||
|
||||
<Button>Primary button</Button>
|
||||
|
||||
### Secondary button
|
||||
|
||||
<Button kind="secondary">Secondary button</Button>
|
||||
|
||||
### Tertiary button
|
||||
|
||||
<Button kind="tertiary">Tertiary button</Button>
|
||||
|
||||
### Ghost button
|
||||
|
||||
<Button kind="ghost">Ghost button</Button>
|
||||
|
||||
### Danger button
|
||||
|
||||
<Button kind="danger">Danger button</Button>
|
||||
|
||||
### Button with icon
|
||||
|
||||
<Button icon={Add16}>With icon</Button>
|
||||
|
||||
### Icon-only button
|
||||
|
||||
<Button icon={Add16} hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" />
|
||||
|
||||
### Link button
|
||||
|
||||
<Button href="#">Link button</Button>
|
||||
|
||||
### Custom element
|
||||
|
||||
<Button as let:props>
|
||||
<p {...props}>Custom element</p>
|
||||
</Button>
|
||||
|
||||
### Field button
|
||||
|
||||
<Button size="field">Primary</Button>
|
||||
<Button size="field" kind="secondary">Secondary</Button>
|
||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||
<Button size="field" kind="ghost">Ghost</Button>
|
||||
<Button size="field" kind="danger">Danger</Button>
|
||||
|
||||
### Small button
|
||||
|
||||
<Button size="small">Primary</Button>
|
||||
<Button size="small" kind="secondary">Secondary</Button>
|
||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||
<Button size="small" kind="ghost">Ghost</Button>
|
||||
<Button size="small" kind="danger">Danger</Button>
|
||||
|
||||
### Disabled button
|
||||
|
||||
<Button disabled>Disabled button</Button>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Button skeleton />
|
||||
22
docs/src/pages/components/ButtonSet.svx
Normal file
22
docs/src/pages/components/ButtonSet.svx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
source: Button/ButtonSet.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Button, ButtonSet } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (juxtaposed)
|
||||
|
||||
<ButtonSet>
|
||||
<Button kind="secondary">Cancel</Button>
|
||||
<Button>Submit</Button>
|
||||
</ButtonSet>
|
||||
|
||||
### Stacked
|
||||
|
||||
<ButtonSet stacked>
|
||||
<Button>Login</Button>
|
||||
<Button kind="ghost">Sign up</Button>
|
||||
</ButtonSet>
|
||||
28
docs/src/pages/components/Checkbox.svx
Normal file
28
docs/src/pages/components/Checkbox.svx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (unchecked)
|
||||
|
||||
<Checkbox labelText="Label text" />
|
||||
|
||||
### Checked
|
||||
|
||||
<Checkbox labelText="Label text" checked />
|
||||
|
||||
### Indeterminate
|
||||
|
||||
<Checkbox labelText="Label text" indeterminate />
|
||||
|
||||
### Hidden label
|
||||
|
||||
<Checkbox labelText="Label text" hideLabel />
|
||||
|
||||
### Disabled
|
||||
|
||||
<Checkbox labelText="Label text" disabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Checkbox skeleton />
|
||||
16
docs/src/pages/components/ClickableTile.svx
Normal file
16
docs/src/pages/components/ClickableTile.svx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
source: Tile/ClickableTile.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { ClickableTile } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<ClickableTile href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
|
||||
|
||||
### Light variant
|
||||
|
||||
<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
|
||||
44
docs/src/pages/components/CodeSnippet.svx
Normal file
44
docs/src/pages/components/CodeSnippet.svx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script>
|
||||
import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
|
||||
let code = `// helpers.js
|
||||
|
||||
export function multiply(a: number, b: number) {
|
||||
return a * b;
|
||||
}
|
||||
|
||||
export function divide(a: number, b: number) {
|
||||
return a / b;
|
||||
}
|
||||
|
||||
export function add(a: number, b: number) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
export function subtract(a: number, b: number) {
|
||||
return a - b;
|
||||
}`;
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
|
||||
|
||||
### Default (single-line)
|
||||
|
||||
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
|
||||
|
||||
### Inline
|
||||
|
||||
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
|
||||
|
||||
### Multi-line
|
||||
|
||||
<CodeSnippet type="multi" {code} />
|
||||
|
||||
### Hidden copy button
|
||||
|
||||
<CodeSnippet type="multi" {code} hideCopyButton />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<CodeSnippet skeleton />
|
||||
53
docs/src/pages/components/ComboBox.svx
Normal file
53
docs/src/pages/components/ComboBox.svx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script>
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Selected index
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
selectedIndex={1}
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
size="xl"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Small size
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
size="sm"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
disabled
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
7
docs/src/pages/components/ComposedModal.svx
Normal file
7
docs/src/pages/components/ComposedModal.svx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Composed modal
|
||||
|
||||
<FileSource src="/framed/Modal/ComposedModal" />
|
||||
39
docs/src/pages/components/ContentSwitcher.svx
Normal file
39
docs/src/pages/components/ContentSwitcher.svx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch text="Switch 1" />
|
||||
<Switch text="Switch 2" />
|
||||
<Switch text="Switch 3" />
|
||||
</ContentSwitcher>
|
||||
|
||||
### Light variant
|
||||
|
||||
<ContentSwitcher light>
|
||||
<Switch text="Switch 1" />
|
||||
<Switch text="Switch 2" />
|
||||
<Switch text="Switch 3" />
|
||||
</ContentSwitcher>
|
||||
|
||||
### Custom switch slot
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch>
|
||||
<div style="display: flex; align-items: center;">
|
||||
Third section <Add16 style="margin-left: .25rem;" />
|
||||
</div>
|
||||
</Switch>
|
||||
<Switch text="Switch 2" />
|
||||
</ContentSwitcher>
|
||||
|
||||
### Disabled
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch text="Switch 1" disabled />
|
||||
<Switch text="Switch 2" disabled />
|
||||
</ContentSwitcher>
|
||||
14
docs/src/pages/components/CopyButton.svx
Normal file
14
docs/src/pages/components/CopyButton.svx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import { CopyButton, InlineNotification } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
|
||||
|
||||
### Default
|
||||
|
||||
<CopyButton on:click />
|
||||
|
||||
### Custom feedback
|
||||
|
||||
<CopyButton on:click feedback="Copied to clipboard" />
|
||||
346
docs/src/pages/components/DataTable.svx
Normal file
346
docs/src/pages/components/DataTable.svx
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
<script>
|
||||
import { DataTable, DataTableSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<DataTable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### With title, description
|
||||
|
||||
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Zebra stripes
|
||||
|
||||
<DataTable zebra
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Short rows
|
||||
|
||||
<DataTable size="short"
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Compact rows
|
||||
|
||||
<DataTable size="compact"
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Sortable
|
||||
|
||||
<DataTable sortable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<DataTableSkeleton />
|
||||
|
||||
### Skeleton with headers, row count
|
||||
|
||||
<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
|
||||
|
||||
### Skeleton without header, toolbar
|
||||
|
||||
<DataTableSkeleton showHeader={false} showToolbar={false} />
|
||||
56
docs/src/pages/components/DatePicker.svx
Normal file
56
docs/src/pages/components/DatePicker.svx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script>
|
||||
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (simple)
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Hidden label
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Light variant
|
||||
|
||||
<DatePicker light>
|
||||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Small size
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Invalid state
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Disabled state
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Single
|
||||
|
||||
<DatePicker datePickerType="single">
|
||||
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<DatePickerSkeleton />
|
||||
32
docs/src/pages/components/Dropdown.svx
Normal file
32
docs/src/pages/components/Dropdown.svx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { Dropdown, DropdownSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Dropdown titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Inline type
|
||||
|
||||
<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<DropdownSkeleton />
|
||||
29
docs/src/pages/components/ExpandableTile.svx
Normal file
29
docs/src/pages/components/ExpandableTile.svx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
source: Tile/ExpandableTile.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { ExpandableTile } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (unexpanded)
|
||||
|
||||
<ExpandableTile>
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
||||
### Expanded
|
||||
|
||||
<ExpandableTile expanded>
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
||||
### Light variant
|
||||
|
||||
<ExpandableTile light>
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
32
docs/src/pages/components/FileUploader.svx
Normal file
32
docs/src/pages/components/FileUploader.svx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### File uploader (button-only)
|
||||
|
||||
<FileUploaderButton labelText="Add files" />
|
||||
|
||||
### File uploader
|
||||
|
||||
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
||||
|
||||
### Item (uploading)
|
||||
|
||||
<FileUploaderItem name="README.md" status="uploading" />
|
||||
|
||||
### Item (complete)
|
||||
|
||||
<FileUploaderItem name="README.md" status="complete" />
|
||||
|
||||
### Item (invalid)
|
||||
|
||||
<FileUploaderItem invalid name="README.md" status="edit" />
|
||||
|
||||
### Drop container
|
||||
|
||||
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<FileUploaderSkeleton />
|
||||
19
docs/src/pages/components/FluidForm.svx
Normal file
19
docs/src/pages/components/FluidForm.svx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Fluid form
|
||||
|
||||
<FluidForm>
|
||||
<TextInput
|
||||
labelText="User name"
|
||||
placeholder="Enter user name..."
|
||||
required />
|
||||
<PasswordInput
|
||||
required
|
||||
type="password"
|
||||
labelText="Password"
|
||||
placeholder="Enter password..."
|
||||
/>
|
||||
</FluidForm>
|
||||
58
docs/src/pages/components/Form.svx
Normal file
58
docs/src/pages/components/Form.svx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script>
|
||||
import { Form,
|
||||
FormGroup,
|
||||
Checkbox,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
Select,
|
||||
SelectItem,
|
||||
Button,} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Form
|
||||
|
||||
<Form on:submit>
|
||||
<FormGroup legendText="Checkboxes">
|
||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
||||
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Radio buttons">
|
||||
<RadioButtonGroup
|
||||
name="radio-button-group"
|
||||
selected="default-selected"
|
||||
>
|
||||
<RadioButton
|
||||
id="radio-1"
|
||||
value="standard"
|
||||
labelText="Standard Radio Button"
|
||||
/>
|
||||
<RadioButton
|
||||
id="radio-2"
|
||||
value="default-selected"
|
||||
labelText="Default Selected Radio Button"
|
||||
/>
|
||||
<RadioButton
|
||||
id="radio-4"
|
||||
value="disabled"
|
||||
labelText="Disabled Radio Button"
|
||||
disabled
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Select id="select-1" labelText="Select menu" value="placeholder-item">
|
||||
<SelectItem
|
||||
disabled
|
||||
hidden
|
||||
value="placeholder-item"
|
||||
text="Choose an option"
|
||||
/>
|
||||
<SelectItem value="option-1" text="Option 1" />
|
||||
<SelectItem value="option-2" text="Option 2" />
|
||||
<SelectItem value="option-3" text="Option 3" />
|
||||
</Select>
|
||||
</FormGroup>
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
31
docs/src/pages/components/Grid.svx
Normal file
31
docs/src/pages/components/Grid.svx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<FileSource src="/framed/Grid/Grid" />
|
||||
|
||||
### Full width
|
||||
|
||||
<FileSource src="/framed/Grid/FullWidthGrid" />
|
||||
|
||||
### Narrow
|
||||
|
||||
<FileSource src="/framed/Grid/NarrowGrid" />
|
||||
|
||||
### Condensed
|
||||
|
||||
<FileSource src="/framed/Grid/CondensedGrid" />
|
||||
|
||||
### Responsive
|
||||
|
||||
<FileSource src="/framed/Grid/ResponsiveGrid" />
|
||||
|
||||
### Offset columns
|
||||
|
||||
<FileSource src="/framed/Grid/OffsetColumns" />
|
||||
|
||||
### Aspect ratio columns
|
||||
|
||||
<FileSource src="/framed/Grid/AspectRatioColumns" />
|
||||
22
docs/src/pages/components/Icon.svx
Normal file
22
docs/src/pages/components/Icon.svx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import { Icon } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Add20 from "carbon-icons-svelte/lib/Add20";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||
import Add32 from "carbon-icons-svelte/lib/Add32";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Icon render={Add16} />
|
||||
<Icon render={Add20} />
|
||||
<Icon render={Add24} />
|
||||
<Icon render={Add32} />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Icon skeleton render={Add16} />
|
||||
<Icon skeleton size={20} render={Add20} />
|
||||
<Icon skeleton size={24} render={Add24} />
|
||||
<Icon skeleton size={32} render={Add32} />
|
||||
19
docs/src/pages/components/InlineLoading.svx
Normal file
19
docs/src/pages/components/InlineLoading.svx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { InlineLoading } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<InlineLoading />
|
||||
|
||||
### With description
|
||||
|
||||
<InlineLoading description="Loading metrics..." />
|
||||
|
||||
### Status states
|
||||
|
||||
<InlineLoading status="active" />
|
||||
<InlineLoading status="inactive" />
|
||||
<InlineLoading status="finished" />
|
||||
<InlineLoading status="error" />
|
||||
42
docs/src/pages/components/InlineNotification.svx
Normal file
42
docs/src/pages/components/InlineNotification.svx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
source: Notification/InlineNotification.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (error)
|
||||
|
||||
<InlineNotification on:close />
|
||||
|
||||
### Hidden close button
|
||||
|
||||
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
|
||||
|
||||
### With actions
|
||||
|
||||
<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
|
||||
<div slot="actions">
|
||||
<NotificationActionButton>Learn more</NotificationActionButton>
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Notification variants
|
||||
|
||||
<InlineNotification kind="error" />
|
||||
<InlineNotification kind="info" />
|
||||
<InlineNotification kind="info-square" />
|
||||
<InlineNotification kind="success" />
|
||||
<InlineNotification kind="warning" />
|
||||
<InlineNotification kind="warning-alt" />
|
||||
|
||||
### Low contrast
|
||||
|
||||
<InlineNotification lowContrast kind="error" />
|
||||
<InlineNotification lowContrast kind="info" />
|
||||
<InlineNotification lowContrast kind="info-square" />
|
||||
<InlineNotification lowContrast kind="success" />
|
||||
<InlineNotification lowContrast kind="warning" />
|
||||
<InlineNotification lowContrast kind="warning-alt" />
|
||||
23
docs/src/pages/components/Link.svx
Normal file
23
docs/src/pages/components/Link.svx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
import { Link } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
|
||||
### Inline variant
|
||||
|
||||
<div>
|
||||
Visit the
|
||||
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
|
||||
</div>
|
||||
|
||||
### Disabled
|
||||
|
||||
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
|
||||
### Visited styles
|
||||
|
||||
<Link visited href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||
16
docs/src/pages/components/Loading.svx
Normal file
16
docs/src/pages/components/Loading.svx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import { Loading } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (with overlay)
|
||||
|
||||
<FileSource src="/framed/Loading/Loading" />
|
||||
|
||||
### No overlay
|
||||
|
||||
<Loading withOverlay={false} />
|
||||
|
||||
### Small size
|
||||
|
||||
<Loading withOverlay={false} small />
|
||||
34
docs/src/pages/components/Modal.svx
Normal file
34
docs/src/pages/components/Modal.svx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (transactional)
|
||||
|
||||
<FileSource src="/framed/Modal/Modal" />
|
||||
|
||||
### Danger modal
|
||||
|
||||
<FileSource src="/framed/Modal/DangerModal" />
|
||||
|
||||
### Passive modal
|
||||
|
||||
<FileSource src="/framed/Modal/PassiveModal" />
|
||||
|
||||
### Extra-small size
|
||||
|
||||
<FileSource src="/framed/Modal/ModalExtraSmall" />
|
||||
|
||||
### Small size
|
||||
|
||||
<FileSource src="/framed/Modal/ModalSmall" />
|
||||
|
||||
### Large size
|
||||
|
||||
<FileSource src="/framed/Modal/ModalLarge" />
|
||||
|
||||
### Prevent close on outside click
|
||||
|
||||
`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
|
||||
|
||||
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
|
||||
|
||||
36
docs/src/pages/components/MultiSelect.svx
Normal file
36
docs/src/pages/components/MultiSelect.svx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import { MultiSelect } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
|
||||
/>
|
||||
|
||||
### Light variant
|
||||
|
||||
<MultiSelect light titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Inline type
|
||||
|
||||
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Filterable
|
||||
|
||||
<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
52
docs/src/pages/components/NumberInput.svx
Normal file
52
docs/src/pages/components/NumberInput.svx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
import { NumberInput, NumberInputSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<NumberInput label="Clusters" />
|
||||
|
||||
### With helper text
|
||||
|
||||
<NumberInput label="Clusters" helperText="Clusters provisioned in your region" />
|
||||
|
||||
### Minimum and maximum values
|
||||
|
||||
<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
|
||||
|
||||
### Hidden label
|
||||
|
||||
<NumberInput hideLabel label="Clusters" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<NumberInput light label="Clusters" />
|
||||
|
||||
### Mobile variant
|
||||
|
||||
<NumberInput mobile label="Clusters" />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<NumberInput size="xl" label="Clusters" />
|
||||
|
||||
### Small size
|
||||
|
||||
<NumberInput size="sm" label="Clusters" />
|
||||
|
||||
### Invalid state
|
||||
|
||||
<NumberInput invalid invalidText="An error occurred" label="Clusters" />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<NumberInput disabled label="Clusters" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<NumberInputSkeleton />
|
||||
|
||||
### Skeleton without label
|
||||
|
||||
<NumberInputSkeleton hideLabel />
|
||||
46
docs/src/pages/components/OrderedList.svx
Normal file
46
docs/src/pages/components/OrderedList.svx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
import { OrderedList, ListItem, Link } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<OrderedList>
|
||||
<ListItem>Ordered list item</ListItem>
|
||||
<ListItem>Ordered list item</ListItem>
|
||||
<ListItem>Ordered list item</ListItem>
|
||||
</OrderedList>
|
||||
|
||||
### With links
|
||||
|
||||
<OrderedList>
|
||||
<ListItem>
|
||||
<Link href="#">Ordered list item</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link href="#">Ordered list item</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link href="#">Ordered list item</Link>
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
|
||||
### Nested
|
||||
|
||||
<OrderedList>
|
||||
<ListItem>
|
||||
Ordered list level 1
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered list level 2</ListItem>
|
||||
<ListItem>
|
||||
Ordered list level 3
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered list level 3</ListItem>
|
||||
<ListItem>Ordered list level 3</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
<ListItem>Ordered list level 1</ListItem>
|
||||
<ListItem>Ordered list level 1</ListItem>
|
||||
</OrderedList>
|
||||
47
docs/src/pages/components/OverflowMenu.svx
Normal file
47
docs/src/pages/components/OverflowMenu.svx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<OverflowMenu>
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Flipped
|
||||
|
||||
<OverflowMenu open flipped>
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Menu direction top
|
||||
|
||||
<OverflowMenu flipped direction="top">
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Custom primary focus
|
||||
|
||||
By default, the first overflow menu item is focused when opening the dropdown.
|
||||
|
||||
<OverflowMenu>
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem primaryFocus danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
### Custom trigger slot
|
||||
|
||||
<OverflowMenu style="width: auto;">
|
||||
<div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
24
docs/src/pages/components/Pagination.svx
Normal file
24
docs/src/pages/components/Pagination.svx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { Pagination, PaginationSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
|
||||
|
||||
### Current page
|
||||
|
||||
<Pagination totalItems={102} page={4} />
|
||||
|
||||
### Custom page sizes
|
||||
|
||||
<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
|
||||
|
||||
### Hidden page input
|
||||
|
||||
<Pagination totalItems={102} pageInputDisabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<PaginationSkeleton />
|
||||
12
docs/src/pages/components/PaginationNav.svx
Normal file
12
docs/src/pages/components/PaginationNav.svx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { PaginationNav } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<PaginationNav />
|
||||
|
||||
### Loopable
|
||||
|
||||
<PaginationNav total={3} loop />
|
||||
38
docs/src/pages/components/PasswordInput.svx
Normal file
38
docs/src/pages/components/PasswordInput.svx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { PasswordInput } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<PasswordInput labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Password is visible
|
||||
|
||||
Set prop `type` to `"text"` to toggle password visibility.
|
||||
|
||||
<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
|
||||
|
||||
### Hidden label
|
||||
|
||||
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Light variant
|
||||
|
||||
<PasswordInput light labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Small size
|
||||
|
||||
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Invalid state
|
||||
|
||||
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
|
||||
59
docs/src/pages/components/ProgressIndicator.svx
Normal file
59
docs/src/pages/components/ProgressIndicator.svx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script>
|
||||
import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (horizontal)
|
||||
|
||||
<ProgressIndicator>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
### Spaced-equally
|
||||
|
||||
<ProgressIndicator spaceEqually>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
### Vertical
|
||||
|
||||
<ProgressIndicator vertical>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<ProgressIndicatorSkeleton />
|
||||
54
docs/src/pages/components/RadioButton.svx
Normal file
54
docs/src/pages/components/RadioButton.svx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<script>
|
||||
import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
### Label text aligned left
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup labelPosition="left" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
### Vertical orientation
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup orientation="vertical" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup>
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
### Skeleton (vertical orientation)
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup orientation="vertical">
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
32
docs/src/pages/components/RadioTile.svx
Normal file
32
docs/src/pages/components/RadioTile.svx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { TileGroup, RadioTile } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
<RadioTile value="0" checked>
|
||||
Lite plan
|
||||
</RadioTile>
|
||||
<RadioTile value="1">
|
||||
Standard plan
|
||||
</RadioTile>
|
||||
<RadioTile value="2">
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
|
||||
### Light variant
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
<RadioTile value="0" checked>
|
||||
Lite plan
|
||||
</RadioTile>
|
||||
<RadioTile value="1">
|
||||
Standard plan
|
||||
</RadioTile>
|
||||
<RadioTile value="2">
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
28
docs/src/pages/components/Search.svx
Normal file
28
docs/src/pages/components/Search.svx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
import { Search } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Search />
|
||||
|
||||
### Default value
|
||||
|
||||
<Search placeholder="Search catalog..." value="Cloud functions" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<Search light />
|
||||
|
||||
### Large size
|
||||
|
||||
<Search size="lg" />
|
||||
|
||||
### Small size
|
||||
|
||||
<Search size="sm" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Search skeleton />
|
||||
58
docs/src/pages/components/Select.svx
Normal file
58
docs/src/pages/components/Select.svx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script>
|
||||
import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Select labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
### Item groups
|
||||
|
||||
<Select labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="0" text="Select a theme" disabled hidden />
|
||||
<SelectItemGroup label="Light theme">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
</SelectItemGroup>
|
||||
<SelectItemGroup label="Dark theme">
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</SelectItemGroup>
|
||||
</Select>
|
||||
|
||||
### Light variant
|
||||
|
||||
<Select light labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
### Inline type
|
||||
|
||||
<Select inline labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
### Disabled
|
||||
|
||||
<Select disabled labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<SelectSkeleton />
|
||||
32
docs/src/pages/components/SelectableTile.svx
Normal file
32
docs/src/pages/components/SelectableTile.svx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { TileGroup, SelectableTile } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Multi-selectable tiles
|
||||
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile selected>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile selected>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
|
||||
### Light variant
|
||||
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile light selected>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile light selected>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile light>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
12
docs/src/pages/components/SkeletonPlaceholder.svx
Normal file
12
docs/src/pages/components/SkeletonPlaceholder.svx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { SkeletonPlaceholder } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<SkeletonPlaceholder />
|
||||
|
||||
### Custom size
|
||||
|
||||
<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
|
||||
24
docs/src/pages/components/SkeletonText.svx
Normal file
24
docs/src/pages/components/SkeletonText.svx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { SkeletonText } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<SkeletonText />
|
||||
|
||||
### Heading variant
|
||||
|
||||
<SkeletonText heading />
|
||||
|
||||
### Heading variant
|
||||
|
||||
<SkeletonText heading />
|
||||
|
||||
### Paragraph variant
|
||||
|
||||
<SkeletonText paragraph />
|
||||
|
||||
### Paragraph with max width
|
||||
|
||||
<SkeletonText paragraph width="50%" />
|
||||
28
docs/src/pages/components/Slider.svx
Normal file
28
docs/src/pages/components/Slider.svx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
import { Slider, SliderSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Slider />
|
||||
|
||||
### Custom minimum, maximum values
|
||||
|
||||
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
|
||||
|
||||
### Custom step value
|
||||
|
||||
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||
|
||||
### Light variant
|
||||
|
||||
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<SliderSkeleton />
|
||||
|
||||
### Skeleton (hidden label)
|
||||
|
||||
<SliderSkeleton hideLabel />
|
||||
93
docs/src/pages/components/StructuredList.svx
Normal file
93
docs/src/pages/components/StructuredList.svx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<script>
|
||||
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
|
||||
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (read-only)
|
||||
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
### Selectable rows
|
||||
|
||||
<StructuredList selection selected="row-1-value">
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{''}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each [1, 2, 3] as item}
|
||||
<StructuredListRow label for="row-{item}">
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
|
||||
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
|
||||
Pellentesque vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
<StructuredListInput
|
||||
id="row-{item}"
|
||||
value="row-{item}-value"
|
||||
title="row-{item}-title"
|
||||
name="row-{item}-name"
|
||||
/>
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled16
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option"
|
||||
/>
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<StructuredListSkeleton rows={3} />
|
||||
34
docs/src/pages/components/Tabs.svx
Normal file
34
docs/src/pages/components/Tabs.svx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Tabs>
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
|
||||
### Container type
|
||||
|
||||
<Tabs type="container">
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<TabsSkeleton count={3} />
|
||||
30
docs/src/pages/components/Tag.svx
Normal file
30
docs/src/pages/components/Tag.svx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
import { Tag } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Tag>IBM Cloud</Tag>
|
||||
|
||||
### Tag types
|
||||
|
||||
<Tag type="red">red</Tag>
|
||||
<Tag type="magenta">magenta</Tag>
|
||||
<Tag type="purple">purple</Tag>
|
||||
<Tag type="blue">blue</Tag>
|
||||
<Tag type="cyan">cyan</Tag>
|
||||
<Tag type="teal">teal</Tag>
|
||||
<Tag type="green">green</Tag>
|
||||
<Tag type="gray">gray</Tag>
|
||||
<Tag type="cool-gray">cool-gray</Tag>
|
||||
<Tag type="warm-gray">warm-gray</Tag>
|
||||
<Tag type="high-contrast">high-contrast</Tag>
|
||||
|
||||
### Filterable
|
||||
|
||||
<Tag filter on:click>Filterable</Tag>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Tag skeleton />
|
||||
40
docs/src/pages/components/TextArea.svx
Normal file
40
docs/src/pages/components/TextArea.svx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { TextArea, TextAreaSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<TextArea labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### With helper text
|
||||
|
||||
<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
|
||||
|
||||
### Hidden label
|
||||
|
||||
<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### Light variant
|
||||
|
||||
<TextArea light labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### Custom rows
|
||||
|
||||
<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### Invalid state
|
||||
|
||||
<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<TextArea disabled labelText="App description" placeholder="Enter a description..." />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<TextAreaSkeleton />
|
||||
|
||||
### Skeleton without label
|
||||
|
||||
<TextAreaSkeleton hideLabel />
|
||||
48
docs/src/pages/components/TextInput.svx
Normal file
48
docs/src/pages/components/TextInput.svx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script>
|
||||
import { TextInput, TextInputSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<TextInput labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### With helper text
|
||||
|
||||
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
|
||||
|
||||
### Hidden label
|
||||
|
||||
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Light variant
|
||||
|
||||
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Inline
|
||||
|
||||
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Small size
|
||||
|
||||
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Invalid state
|
||||
|
||||
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<TextInputSkeleton />
|
||||
|
||||
### Skeleton without label
|
||||
|
||||
<TextInputSkeleton hideLabel />
|
||||
16
docs/src/pages/components/Tile.svx
Normal file
16
docs/src/pages/components/Tile.svx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
source: Tile/Tile.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Tile } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<Tile>Content</Tile>
|
||||
|
||||
### Light variant
|
||||
|
||||
<Tile light>Content</Tile>
|
||||
43
docs/src/pages/components/TimePicker.svx
Normal file
43
docs/src/pages/components/TimePicker.svx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script>
|
||||
import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<TimePicker labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT">
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Light variant
|
||||
|
||||
<TimePicker light labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT">
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Disabled
|
||||
|
||||
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
||||
<TimePickerSelect value="PM" disabled>
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT" disabled>
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
34
docs/src/pages/components/ToastNotification.svx
Normal file
34
docs/src/pages/components/ToastNotification.svx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
source: Notification/ToastNotification.svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import { ToastNotification } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (error)
|
||||
|
||||
<ToastNotification />
|
||||
|
||||
### Hidden close button
|
||||
|
||||
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
|
||||
|
||||
### Notification variants
|
||||
|
||||
<ToastNotification kind="error" />
|
||||
<ToastNotification kind="info" />
|
||||
<ToastNotification kind="info-square" />
|
||||
<ToastNotification kind="success" />
|
||||
<ToastNotification kind="warning" />
|
||||
<ToastNotification kind="warning-alt" />
|
||||
|
||||
### Low contrast
|
||||
|
||||
<ToastNotification lowContrast kind="error" />
|
||||
<ToastNotification lowContrast kind="info" />
|
||||
<ToastNotification lowContrast kind="info-square" />
|
||||
<ToastNotification lowContrast kind="success" />
|
||||
<ToastNotification lowContrast kind="warning" />
|
||||
<ToastNotification lowContrast kind="warning-alt" />
|
||||
24
docs/src/pages/components/Toggle.svx
Normal file
24
docs/src/pages/components/Toggle.svx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (untoggled)
|
||||
|
||||
<Toggle labelText="Push notifications" />
|
||||
|
||||
### Toggled
|
||||
|
||||
<Toggle labelText="Push notifications" toggled />
|
||||
|
||||
### Custom labels
|
||||
|
||||
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<Toggle labelText="Push notifications" disabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<ToggleSkeleton />
|
||||
24
docs/src/pages/components/ToggleSmall.svx
Normal file
24
docs/src/pages/components/ToggleSmall.svx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { ToggleSmall, ToggleSmallSkeleton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (untoggled)
|
||||
|
||||
<ToggleSmall labelText="Push notifications" />
|
||||
|
||||
### Toggled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" toggled />
|
||||
|
||||
### Custom labels
|
||||
|
||||
<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" disabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<ToggleSmallSkeleton />
|
||||
57
docs/src/pages/components/Tooltip.svx
Normal file
57
docs/src/pages/components/Tooltip.svx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script>
|
||||
import { Tooltip, Link, Button } from "carbon-components-svelte";
|
||||
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (icon-only, "bottom" direction)
|
||||
|
||||
<Tooltip>
|
||||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
</Tooltip>
|
||||
|
||||
### With trigger text
|
||||
|
||||
<Tooltip triggerText="Resource list">
|
||||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
</Tooltip>
|
||||
|
||||
### Directions
|
||||
|
||||
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
|
||||
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
|
||||
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
|
||||
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
|
||||
|
||||
### Interactive
|
||||
|
||||
<Tooltip triggerText="Resource list">
|
||||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
<div class="bx--tooltip__footer">
|
||||
<Link href="/">Learn more</Link>
|
||||
<Button size="small">Manage</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
### Custom icon (component)
|
||||
|
||||
<Tooltip triggerText="Resource list" icon={Catalog16}>
|
||||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
</Tooltip>
|
||||
|
||||
### Custom icon (slot)
|
||||
|
||||
<Tooltip triggerText="Resource list">
|
||||
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
|
||||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
</Tooltip>
|
||||
16
docs/src/pages/components/TooltipDefinition.svx
Normal file
16
docs/src/pages/components/TooltipDefinition.svx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import { TooltipDefinition } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default ("bottom" direction, "center" aligned)
|
||||
|
||||
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
||||
Armonk
|
||||
</TooltipDefinition>
|
||||
|
||||
### Custom direction, alignment
|
||||
|
||||
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
||||
Armonk
|
||||
</TooltipDefinition>
|
||||
19
docs/src/pages/components/TooltipIcon.svx
Normal file
19
docs/src/pages/components/TooltipIcon.svx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { TooltipIcon } from "carbon-components-svelte";
|
||||
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
|
||||
import Filter20 from "carbon-icons-svelte/lib/Filter20";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default ("bottom" direction, "center" aligned)
|
||||
|
||||
<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
|
||||
<Carbon24 />
|
||||
</TooltipIcon>
|
||||
|
||||
### Directions
|
||||
|
||||
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
|
||||
15
docs/src/pages/components/UIShell.svx
Normal file
15
docs/src/pages/components/UIShell.svx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Header with side navigation
|
||||
|
||||
<FileSource src="/framed/UIShell/HeaderNav" />
|
||||
|
||||
### Header with app switcher
|
||||
|
||||
<FileSource src="/framed/UIShell/HeaderSwitcher" />
|
||||
|
||||
### Header with utilities
|
||||
|
||||
<FileSource src="/framed/UIShell/HeaderUtilities" />
|
||||
46
docs/src/pages/components/UnorderedList.svx
Normal file
46
docs/src/pages/components/UnorderedList.svx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>Unordered list item</ListItem>
|
||||
<ListItem>Unordered list item</ListItem>
|
||||
<ListItem>Unordered list item</ListItem>
|
||||
</UnorderedList>
|
||||
|
||||
### With links
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
<Link href="#">Unordered list item</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link href="#">Unordered list item</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link href="#">Unordered list item</Link>
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
|
||||
### Nested
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
Unordered list level 1
|
||||
<UnorderedList nested>
|
||||
<ListItem>Unordered list level 2</ListItem>
|
||||
<ListItem>
|
||||
Unordered list level 3
|
||||
<UnorderedList nested>
|
||||
<ListItem>Unordered list level 3</ListItem>
|
||||
<ListItem>Unordered list level 3</ListItem>
|
||||
</UnorderedList>
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</ListItem>
|
||||
<ListItem>Unordered list level 1</ListItem>
|
||||
<ListItem>Unordered list level 1</ListItem>
|
||||
</UnorderedList>
|
||||
20
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
Normal file
20
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/CondensedGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/CondensedGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid condensed>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/FullWidthGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/FullWidthGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid fullWidth>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/Grid.svelte
Normal file
12
docs/src/pages/framed/Grid/Grid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/NarrowGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/NarrowGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid narrow>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
32
docs/src/pages/framed/Grid/OffsetColumns.svelte
Normal file
32
docs/src/pages/framed/Grid/OffsetColumns.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{{ span: 1, offset: 3 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 3
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 2, offset: 2 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 3, offset: 1 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 4, offset: 0 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 0
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
40
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
Normal file
40
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{4}"
|
||||
lg="{8}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 4, lg: 8
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{2}"
|
||||
lg="{2}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 2, lg: 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
5
docs/src/pages/framed/Loading/Loading.svelte
Normal file
5
docs/src/pages/framed/Loading/Loading.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import { Loading } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Loading />
|
||||
19
docs/src/pages/framed/Modal/ComposedModal.svelte
Normal file
19
docs/src/pages/framed/Modal/ComposedModal.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import {
|
||||
ComposedModal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Checkbox,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let checked = false;
|
||||
</script>
|
||||
|
||||
<ComposedModal open>
|
||||
<ModalHeader title="Confirm changes" />
|
||||
<ModalBody hasForm>
|
||||
<Checkbox labelText="I have reviewed the changes" bind:checked />
|
||||
</ModalBody>
|
||||
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
|
||||
</ComposedModal>
|
||||
21
docs/src/pages/framed/Modal/DangerModal.svelte
Normal file
21
docs/src/pages/framed/Modal/DangerModal.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
|
||||
|
||||
<Modal
|
||||
danger
|
||||
bind:open
|
||||
modalHeading="Delete all instances"
|
||||
primaryButtonText="Delete"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>This is a permanent action and cannot be undone.</p>
|
||||
</Modal>
|
||||
20
docs/src/pages/framed/Modal/Modal.svelte
Normal file
20
docs/src/pages/framed/Modal/Modal.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalExtraSmall.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalExtraSmall.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="xs"
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalLarge.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalLarge.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="lg"
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue