mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
chore: update dependencies, remove jest
- remove docs/palimpsest folders (to be replaced) - remove Layout Storybook component
This commit is contained in:
Eric Liu
parent
1e5333dd64
commit
76df51674d
110 changed files with 2604 additions and 17979 deletions
|
|
@ -1,2 +1,2 @@
|
|||
import '@storybook/addon-knobs/register';
|
||||
import '@storybook/addon-storysource/register';
|
||||
import "@storybook/addon-knobs/register";
|
||||
import "@storybook/addon-storysource/register";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import { configure } from '@storybook/svelte';
|
||||
import { configure } from "@storybook/svelte";
|
||||
|
||||
configure(require.context('../src', true, /\.stories\.js$/), module);
|
||||
configure(require.context("../src", true, /\.stories\.js$/), module);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const path = require('path');
|
||||
const path = require("path");
|
||||
|
||||
module.exports = async ({ config }) => {
|
||||
config.module.rules.push({
|
||||
test: [/\.stories\.js$/],
|
||||
loaders: [require.resolve('@storybook/source-loader')],
|
||||
include: [path.resolve(__dirname, '../src')],
|
||||
enforce: 'pre'
|
||||
loaders: [require.resolve("@storybook/source-loader")],
|
||||
include: [path.resolve(__dirname, "../src")],
|
||||
enforce: "pre",
|
||||
});
|
||||
return config;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ language: node_js
|
|||
node_js: 10
|
||||
cache: yarn
|
||||
script:
|
||||
- yarn test
|
||||
- yarn build
|
||||
- yarn prepack
|
||||
|
|
|
|||
5
docs/.gitignore
vendored
5
docs/.gitignore
vendored
|
|
@ -1,5 +0,0 @@
|
|||
.DS_Store
|
||||
/__sapper__
|
||||
/**/node_modules
|
||||
/public
|
||||
yarn-error.log
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{
|
||||
"name": "sapper-webpack",
|
||||
"description": "Custom Sapper webpack template",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"develop": "sapper dev",
|
||||
"build": "sapper export"
|
||||
},
|
||||
"dependencies": {
|
||||
"polka": "next",
|
||||
"sirv": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@metonym/sapper": "^0.27.12",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"carbon-components": "^10.11.2",
|
||||
"css-loader": "^3.5.3",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"svelte": "~3.20.0",
|
||||
"svelte-loader": "^2.9.0",
|
||||
"webpack": "^4.43.0",
|
||||
"carbon-components-svelte": "../"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import "./style.scss";
|
||||
import * as sapper from "@sapper/app";
|
||||
|
||||
sapper.start({ target: document.querySelector("#sapper") });
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
export let segment;
|
||||
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
$: {
|
||||
console.log(segment);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header company="" platformName="Carbon Components Svelte" href="/">
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/about" text="Link 1" />
|
||||
</HeaderNav>
|
||||
</Header>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script>
|
||||
export let status;
|
||||
export let error;
|
||||
|
||||
const dev = process.env.NODE_ENV === "development";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{/if}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script>
|
||||
import Nav from "../components/Nav.svelte";
|
||||
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Nav {segment} />
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem
|
||||
} from "carbon-components-svelte";
|
||||
import { theme } from "../store";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
<h1>About this site</h1>
|
||||
{$theme}
|
||||
<Button>Hello world</Button>
|
||||
|
||||
<p>This is the 'about' page. There's not much here.</p>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import posts from "./_posts.js";
|
||||
|
||||
const lookup = new Map();
|
||||
|
||||
posts.forEach((post) => {
|
||||
lookup.set(post.slug, JSON.stringify(post));
|
||||
});
|
||||
|
||||
export function get(req, res, next) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].json.js
|
||||
const { slug } = req.params;
|
||||
|
||||
if (lookup.has(slug)) {
|
||||
res.writeHead(200, { "Content-Type": "application/json" });
|
||||
res.end(lookup.get(slug));
|
||||
} else {
|
||||
res.writeHead(404, { "Content-Type": "application/json" });
|
||||
res.end(JSON.stringify({ message: `Not found` }));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<script context="module">
|
||||
export async function preload({ params, query }) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].svelte
|
||||
const res = await this.fetch(`blog/${params.slug}.json`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
return { post: data };
|
||||
} else {
|
||||
this.error(res.status, data.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let post;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{post.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{post.title}</h1>
|
||||
|
||||
<div class="content">
|
||||
{@html post.html}
|
||||
</div>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
// Ordinarily, you'd generate this data from markdown files in your
|
||||
// repo, or fetch them from a database of some kind. But in order to
|
||||
// avoid unnecessary dependencies in the starter template, and in the
|
||||
// service of obviousness, we're just going to leave it here.
|
||||
|
||||
// This file is called `_posts.js` rather than `posts.js`, because
|
||||
// we don't want to create an `/blog/posts` route — the leading
|
||||
// underscore tells Sapper not to do that.
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: "What is Sapper?",
|
||||
slug: "what-is-sapper",
|
||||
html: `
|
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||
|
||||
<ul>
|
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||
<li>The nicest development experience you've ever had, or your money back</li>
|
||||
</ul>
|
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||
`,
|
||||
},
|
||||
|
||||
{
|
||||
title: "How to use Sapper",
|
||||
slug: "how-to-use-sapper",
|
||||
html: `
|
||||
<h2>Step one</h2>
|
||||
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
|
||||
|
||||
<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
|
||||
cd my-app
|
||||
npm install # or yarn!
|
||||
npm run dev
|
||||
</code></pre>
|
||||
|
||||
<h2>Step two</h2>
|
||||
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
|
||||
|
||||
<h2>Step three</h2>
|
||||
<p>...</p>
|
||||
|
||||
<h2>Step four</h2>
|
||||
<p>Resist overdone joke formats.</p>
|
||||
`,
|
||||
},
|
||||
|
||||
{
|
||||
title: "Why the name?",
|
||||
slug: "why-the-name",
|
||||
html: `
|
||||
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
|
||||
|
||||
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
|
||||
`,
|
||||
},
|
||||
|
||||
{
|
||||
title: "How is Sapper different from Next.js?",
|
||||
slug: "how-is-sapper-different-from-next",
|
||||
html: `
|
||||
<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
|
||||
|
||||
<ul>
|
||||
<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
|
||||
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
|
||||
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
|
||||
<li>Links are just <code><a></code> elements, rather than framework-specific <code><Link></code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
|
||||
{
|
||||
title: "How can I get involved?",
|
||||
slug: "how-can-i-get-involved",
|
||||
html: `
|
||||
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
posts.forEach((post) => {
|
||||
post.html = post.html.replace(/^\t{3}/gm, "");
|
||||
});
|
||||
|
||||
export default posts;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import posts from "./_posts.js";
|
||||
|
||||
export function get(req, res) {
|
||||
res.writeHead(200, { "Content-Type": "application/json" });
|
||||
res.end(JSON.stringify(posts));
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<script context="module">
|
||||
export function preload({ params, query }) {
|
||||
return this.fetch(`blog.json`)
|
||||
.then(r => r.json())
|
||||
.then(posts => {
|
||||
return { posts };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let posts;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Recent posts</h1>
|
||||
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<li>
|
||||
<a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<script>
|
||||
export let inline = false;
|
||||
|
||||
import { onMount, afterUpdate } from "svelte";
|
||||
import { Select, SelectItem } from "carbon-components-svelte";
|
||||
import { theme } from "../store";
|
||||
|
||||
onMount(() => {
|
||||
let currentTheme = localStorage.getItem("theme");
|
||||
|
||||
if (currentTheme) {
|
||||
theme.set(currentTheme);
|
||||
} else {
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
theme.set("g90");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
localStorage.setItem("theme", $theme);
|
||||
document.documentElement.setAttribute("carbon-theme", $theme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<!--
|
||||
<iframe width="900" height="500" src="about/" /> -->
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import sirv from "sirv";
|
||||
import polka from "polka";
|
||||
import * as sapper from "@sapper/server";
|
||||
|
||||
const { PORT, NODE_ENV } = process.env;
|
||||
const dev = NODE_ENV === "development";
|
||||
|
||||
polka()
|
||||
.use(sirv("static", { dev }), sapper.middleware())
|
||||
.listen(PORT, (err) => {
|
||||
if (err) console.log("error", err);
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { writable } from "svelte/store";
|
||||
|
||||
export const sideNavToggled = writable(false);
|
||||
export const appSwitcherToggled = writable(false);
|
||||
export const theme = writable("g10");
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
$feature-flags: (
|
||||
grid-columns-16: true,
|
||||
enable-css-custom-properties: true
|
||||
);
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss';
|
||||
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
}
|
||||
|
||||
:root[carbon-theme='g10'] {
|
||||
@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 '~carbon-components/scss/globals/scss/_css--reset.scss';
|
||||
@import '~carbon-components/scss/globals/scss/_css--font-face.scss';
|
||||
@import '~carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import '~carbon-components/scss/globals/scss/_css--body.scss';
|
||||
@import '~carbon-components/scss/globals/grid/_grid.scss';
|
||||
|
||||
@import '~carbon-components/scss/globals/scss/styles.scss';
|
||||
|
||||
/* @import '~carbon-components/scss/components/button/button';
|
||||
@import '~carbon-components/scss/components/select/select'; */
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
%sapper.base%
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
%sapper.styles% %sapper.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="sapper">%sapper.html%</div>
|
||||
%sapper.scripts%
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/static/favicon.png
vendored
BIN
docs/static/favicon.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
BIN
docs/static/logo-192.png
vendored
BIN
docs/static/logo-192.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
BIN
docs/static/logo-512.png
vendored
BIN
docs/static/logo-512.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
|
|
@ -1,91 +0,0 @@
|
|||
const webpack = require("webpack");
|
||||
const path = require("path");
|
||||
const config = require("@metonym/sapper/config/webpack.js");
|
||||
const pkg = require("./package.json");
|
||||
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const AutoprefixerPlugin = require("autoprefixer");
|
||||
|
||||
const mode = process.env.NODE_ENV || "production";
|
||||
const dev = mode === "development";
|
||||
|
||||
const alias = {
|
||||
svelte: path.resolve("node_modules", "svelte"),
|
||||
sapper: path.resolve("node_modules", "@metonym/sapper"),
|
||||
};
|
||||
const extensions = [".mjs", ".js", ".json", ".svelte", ".html"];
|
||||
const mainFields = ["svelte", "module", "browser", "main"];
|
||||
|
||||
module.exports = {
|
||||
client: {
|
||||
entry: config.client.entry(),
|
||||
output: config.client.output(),
|
||||
resolve: { alias, extensions, mainFields },
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(svelte|html)$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: {
|
||||
dev,
|
||||
hydratable: true,
|
||||
hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: [/\.s[ac]ss$/i, /\.css$/],
|
||||
use: [
|
||||
!dev ? MiniCssExtractPlugin.loader : "style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
plugins: [
|
||||
AutoprefixerPlugin({
|
||||
overrideBrowserslist: ["last 1 version", "ie >= 11"],
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
mode,
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({ filename: "[name].[chunkhash].css" }),
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
// pending https://github.com/sveltejs/svelte/issues/2377
|
||||
// dev && new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
"process.browser": true,
|
||||
"process.env.NODE_ENV": JSON.stringify(mode),
|
||||
}),
|
||||
].filter(Boolean),
|
||||
devtool: dev && "inline-source-map",
|
||||
},
|
||||
|
||||
server: {
|
||||
entry: config.server.entry(),
|
||||
output: config.server.output(),
|
||||
target: "node",
|
||||
resolve: { alias, extensions, mainFields },
|
||||
externals: Object.keys(pkg.dependencies).concat("encoding"),
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(svelte|html)$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: { css: false, generate: "ssr", dev },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
mode,
|
||||
performance: { hints: false },
|
||||
},
|
||||
};
|
||||
4716
docs/yarn.lock
4716
docs/yarn.lock
File diff suppressed because it is too large
Load diff
74
package.json
74
package.json
|
|
@ -10,8 +10,6 @@
|
|||
"start": "start-storybook -p 9090",
|
||||
"build": "build-storybook",
|
||||
"deploy": "gh-pages -d storybook-static",
|
||||
"test": "jest --coverage",
|
||||
"test:tdd": "jest --watch",
|
||||
"prepack": "rollup -c"
|
||||
},
|
||||
"sideEffects": false,
|
||||
|
|
@ -20,63 +18,27 @@
|
|||
"flatpickr": "4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.0",
|
||||
"@babel/preset-env": "^7.8.0",
|
||||
"@storybook/addon-knobs": "^5.3.1",
|
||||
"@storybook/addon-storysource": "^5.3.1",
|
||||
"@storybook/cli": "^5.3.1",
|
||||
"@storybook/svelte": "^5.3.1",
|
||||
"@testing-library/jest-dom": "^5.1.0",
|
||||
"@testing-library/svelte": "^1.11.0",
|
||||
"babel-jest": "^25.1.0",
|
||||
"@babel/core": "^7.10.5",
|
||||
"@babel/preset-env": "^7.10.4",
|
||||
"@rollup/plugin-commonjs": "^14.0.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@storybook/addon-knobs": "^5.3.19",
|
||||
"@storybook/addon-storysource": "^5.3.19",
|
||||
"@storybook/cli": "^5.3.19",
|
||||
"@storybook/svelte": "^5.3.19",
|
||||
"babel-loader": "^8.0.6",
|
||||
"gh-pages": "^2.2.0",
|
||||
"jest": "^25.1.0",
|
||||
"jest-transform-svelte": "^2.1.0",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"rollup": "^1.29.0",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-svelte": "^5.1.1",
|
||||
"rollup-plugin-terser": "^5.2.0",
|
||||
"svelte": "^3.23.0",
|
||||
"gh-pages": "^3.1.0",
|
||||
"rollup": "^2.22.1",
|
||||
"rollup-plugin-svelte": "^5.2.3",
|
||||
"rollup-plugin-terser": "^6.1.0",
|
||||
"svelte": "^3.24.0",
|
||||
"svelte-loader": "^2.13.6"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Eric Liu",
|
||||
"email": "eric.young.liu@ibm.com"
|
||||
},
|
||||
{
|
||||
"name": "Adan Ulloa",
|
||||
"email": "adanug@mx1.ibm.com"
|
||||
}
|
||||
],
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
},
|
||||
"jest": {
|
||||
"transform": {
|
||||
"^.+\\.svelte$": "jest-transform-svelte",
|
||||
"^.+\\.js$": "babel-jest"
|
||||
},
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"svelte"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"^carbon-icons-svelte*": "<rootDir>src/internal/Icon.stub.svelte"
|
||||
},
|
||||
"setupFilesAfterEnv": [
|
||||
"regenerator-runtime/runtime",
|
||||
"@testing-library/jest-dom/extend-expect"
|
||||
]
|
||||
},
|
||||
"resolutions": {
|
||||
"**/mem": ">=4.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ibm/carbon-components-svelte.git"
|
||||
|
|
@ -93,5 +55,15 @@
|
|||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Eric Liu",
|
||||
"email": "eric.young.liu@ibm.com"
|
||||
},
|
||||
{
|
||||
"name": "Adan Ulloa",
|
||||
"email": "adanug@mx1.ibm.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
5
palimpsest/.gitignore
vendored
5
palimpsest/.gitignore
vendored
|
|
@ -1,5 +0,0 @@
|
|||
/node_modules
|
||||
/build
|
||||
.DS_Store
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
# palimpsest
|
||||
|
||||
> pa·limp·sest
|
||||
|
||||
> writing material used one or more times after earlier writing has been erased – Merriam-Webster
|
||||
|
||||
The purpose of this app is to document and illustrate real world consumption of `carbon-components-svelte`.
|
||||
|
||||
## Getting Started
|
||||
|
||||
This app uses a linked copy of `carbon-components-svelte` to expedite local development.
|
||||
|
||||
First, run the following commands at the root of `carbon-components-svelte/`:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
yarn link
|
||||
```
|
||||
|
||||
Next, link the library to this folder.
|
||||
|
||||
```bash
|
||||
cd palimpsest
|
||||
yarn link "carbon-components-svelte"
|
||||
```
|
||||
|
||||
Finally, install this app's dependencies.
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Available Scripts
|
||||
|
||||
### `yarn start`
|
||||
|
||||
Runs the app in development mode with livereload enabled. Visit [http://localhost:8080](http://localhost:8080).
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app in production mode.
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
{
|
||||
"name": "palimpsest",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "NODE_ENV=production webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
"@babel/preset-env": "^7.7.7",
|
||||
"autoprefixer": "^9.7.3",
|
||||
"carbon-components": "^10.9.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"copy-webpack-plugin": "^5.0.5",
|
||||
"css-loader": "^3.2.0",
|
||||
"file-loader": "^5.0.2",
|
||||
"fuse.js": "^3.4.6",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"style-loader": "^1.0.0",
|
||||
"svelte": "^3.12.1",
|
||||
"svelte-loader": "2.13.6",
|
||||
"svelte-spa-router": "^2.0.0",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,10 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<link rel="icon" href="./favicon.png" />
|
||||
<title>Carbon Components Svelte</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
import Router from 'svelte-spa-router';
|
||||
import Component from './components/Component';
|
||||
import Header from './components/Header.svelte';
|
||||
import Home from './components/Home.svelte';
|
||||
import SideNav from './components/SideNav.svelte';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<SideNav />
|
||||
<Router routes={{ '/': Home, '/c': Component, '/c/*': Component }} />
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
|
|
@ -1,109 +0,0 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let kind = 'launch';
|
||||
export let iconLeft = undefined;
|
||||
export let iconRight = Launch20;
|
||||
|
||||
import Launch20 from 'carbon-icons-svelte/lib/Launch20';
|
||||
import ArrowRight20 from 'carbon-icons-svelte/lib/ArrowRight20';
|
||||
|
||||
$: iconRight = kind === 'link' ? ArrowRight20 : Launch20;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 671px) {
|
||||
.link {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.link:focus {
|
||||
outline: 2px solid var(--cds-focus, #0f62fe);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
fill: var(--cds-icon-01);
|
||||
}
|
||||
|
||||
.icon--left {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.icon--right {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.button-tile:hover .bg {
|
||||
background-color: var(--cds-ui-03);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="button-tile bx--aspect-ratio bx--aspect-ratio--2x1">
|
||||
<div class="bx--aspect-ratio--object">
|
||||
{#if href}
|
||||
<a
|
||||
class="link"
|
||||
on:click
|
||||
target={kind === 'launch' ? '_blank' : undefined}
|
||||
rel={kind === 'launch' ? 'noopener noreferrer' : undefined}
|
||||
{href}>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
{#if iconLeft}
|
||||
<div class="icon icon--left">
|
||||
<svelte:component this={iconLeft} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="icon icon--right">
|
||||
<svelte:component this={iconRight} />
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div role="button" tabindex="0" class="link" on:click {href}>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
{#if iconLeft}
|
||||
<div class="icon icon--left">
|
||||
<svelte:component this={iconLeft} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="icon icon--right">
|
||||
<svelte:component this={iconRight} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="bg" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<script context="module">
|
||||
import Accordion from '../carbon-components/Accordion';
|
||||
import CodeSnippet from '../carbon-components/CodeSnippet';
|
||||
|
||||
export const components = {
|
||||
Accordion,
|
||||
CodeSnippet
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { afterUpdate, setContext } from 'svelte';
|
||||
import { Tabs, Tab } from 'carbon-components-svelte';
|
||||
import { push, location } from 'svelte-spa-router';
|
||||
import Router from 'svelte-spa-router';
|
||||
import ComponentTab from './ComponentTab.svelte';
|
||||
|
||||
const prefix = '/c';
|
||||
const urls = [{ path: '' }, { path: '/API' }, { path: '/kitchen-sink' }];
|
||||
|
||||
let selected = 0;
|
||||
let component = undefined;
|
||||
let prevComponent = undefined;
|
||||
|
||||
setContext('Component', {
|
||||
set: name => {
|
||||
component = name;
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if (component !== prevComponent && prevComponent !== undefined) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
prevComponent = component;
|
||||
});
|
||||
|
||||
$: baseUrl = component ? `#${prefix}/${component}` : $location;
|
||||
$: {
|
||||
switch (
|
||||
$location
|
||||
.split('/')
|
||||
.pop()
|
||||
.toLowerCase()
|
||||
) {
|
||||
case 'api':
|
||||
selected = 1;
|
||||
break;
|
||||
case 'kitchen-sink':
|
||||
selected = 2;
|
||||
break;
|
||||
default:
|
||||
selected = 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
padding-left: 16rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
main {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bx--grid {
|
||||
max-width: 66rem;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="bx--grid">
|
||||
<header class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h1>{component}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col bx--no-gutter">
|
||||
<Tabs
|
||||
type="container"
|
||||
bind:selected
|
||||
on:change={({ detail }) => {
|
||||
push(`${prefix}/${component}${urls[detail].path}`);
|
||||
}}>
|
||||
<Tab label="Preview" href={baseUrl} />
|
||||
<Tab label="API" href={`${baseUrl}/API`} />
|
||||
<!-- <Tab disabled label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} /> -->
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bx--grid">
|
||||
<Router {prefix} routes={{ '/:name': ComponentTab, '/:name/:tab': ComponentTab }} />
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<script>
|
||||
export let props = [];
|
||||
|
||||
import {
|
||||
StructuredList,
|
||||
StructuredListBody,
|
||||
StructuredListHead,
|
||||
StructuredListRow,
|
||||
StructuredListCell,
|
||||
Tag,
|
||||
CodeSnippet
|
||||
} from 'carbon-components-svelte';
|
||||
import copy from 'clipboard-copy';
|
||||
|
||||
const propTypeColor = {
|
||||
string: 'green',
|
||||
number: 'blue',
|
||||
boolean: 'purple'
|
||||
};
|
||||
|
||||
function formatValue(value) {
|
||||
return typeof value === 'string' ? `"${value}"` : value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bx--row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:global(.value) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
:global(.value:not(:first-of-type)) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--cds-text-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="bx--row">
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Prop</StructuredListCell>
|
||||
<StructuredListCell head>Type</StructuredListCell>
|
||||
<StructuredListCell head>Value</StructuredListCell>
|
||||
<StructuredListCell head>Description</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each props as prop, i (prop.name)}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>{prop.name}</StructuredListCell>
|
||||
<StructuredListCell noWrap>
|
||||
<Tag type={propTypeColor[prop.type]}>
|
||||
<code>{prop.type}</code>
|
||||
</Tag>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
<div class="values">
|
||||
{#each prop.value as value, j (value)}
|
||||
<CodeSnippet
|
||||
class="value"
|
||||
type="inline"
|
||||
code={formatValue(value)}
|
||||
on:click={() => {
|
||||
copy(formatValue(value));
|
||||
}} />
|
||||
{#if j < prop.value.length - 1}
|
||||
<span class="separator">|</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if prop.defaultValue}
|
||||
<div style="margin-top: .75rem">
|
||||
<strong>Default:</strong>
|
||||
<code>{formatValue(prop.defaultValue.value)}</code>
|
||||
</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{@html prop.description}
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
</div>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<script>
|
||||
export let minHeight = '11.5rem';
|
||||
export let light = false;
|
||||
export let code = '';
|
||||
|
||||
import copy from 'clipboard-copy';
|
||||
import { CodeSnippet } from 'carbon-components-svelte';
|
||||
import { theme } from '../../store';
|
||||
|
||||
$: code = code.trim().replace(/< \//g, '</');
|
||||
$: light = light && ['white', 'g10'].includes($theme);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.preview {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.preview.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--row {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--col:not(:last-of-type) {
|
||||
border-right: 1px dashed var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.grid--col.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.grid--col--outer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--col--inner {
|
||||
flex: 1;
|
||||
background-color: var(--cds-ui-background);
|
||||
}
|
||||
|
||||
.grid--col--inner {
|
||||
border-left: 1px dashed var(--cds-ui-03);
|
||||
border-right: 1px dashed var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.grid--col--inner.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
padding: 2rem 0 2rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preview bx--row" class:light>
|
||||
<div class="grid">
|
||||
<div class="grid--row">
|
||||
{#each Array.from({ length: 8 }, (_, i) => i) as item, i (item)}
|
||||
<div class="grid--col bx--col" class:light>
|
||||
<div class="grid--col--outer">
|
||||
<div class="grid--col--inner" class:light />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--col bx--no-gutter--left">
|
||||
<div class="wrapper" style={`min-height: ${minHeight}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-4">
|
||||
<h3>Props</h3>
|
||||
<slot name="props" />
|
||||
</div>
|
||||
<div class="bx--col">
|
||||
<h3>Code</h3>
|
||||
<CodeSnippet type="multi" on:click={() => copy(code)} {code} />
|
||||
<slot name="code" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script>
|
||||
export let params = {};
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
import { components } from './Component.svelte';
|
||||
|
||||
const { set } = getContext('Component');
|
||||
|
||||
const paramMap = {
|
||||
Preview: 'Preview',
|
||||
API: 'API',
|
||||
'kitchen-sink': 'KitchenSink'
|
||||
};
|
||||
|
||||
$: tabName = params.tab || 'Preview';
|
||||
$: tab = paramMap[tabName];
|
||||
$: {
|
||||
set(params.name);
|
||||
document.title = `${params.name} · ${tabName}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:component this={components[params.name][tab]} />
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Component from './Component.svelte';
|
||||
|
||||
export default Component;
|
||||
export { default as ComponentPreview } from './ComponentPreview.svelte';
|
||||
export { default as ComponentAPI } from './ComponentAPI.svelte';
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import { Icon } from 'carbon-components-svelte';
|
||||
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
|
||||
import Menu20 from 'carbon-icons-svelte/lib/Menu20';
|
||||
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||
import ThemePicker from '../components/ThemePicker.svelte';
|
||||
import { sideNavToggled, appSwitcherToggled } from '../store';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
background-color: var(--cds-ui-01);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.app-switcher {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 2.5rem;
|
||||
right: 0;
|
||||
width: 16rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
padding: 1rem;
|
||||
background-color: var(--cds-ui-01);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.app-switcher {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.app-switcher.toggled {
|
||||
transform: translateX(0);
|
||||
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-left: -1rem;
|
||||
margin-right: 0.5rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
fill: var(--cds-ui-05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu--right {
|
||||
margin-left: auto;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
.menu:focus {
|
||||
outline: 2px solid var(--cds-focus, #0f62fe);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bx--link {
|
||||
font-size: 1rem;
|
||||
color: var(--cds-text-01);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bx--link:hover {
|
||||
color: var(--cds-text-01);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<button
|
||||
class="menu"
|
||||
on:click={() => {
|
||||
sideNavToggled.set(!$sideNavToggled);
|
||||
appSwitcherToggled.set(false);
|
||||
}}>
|
||||
<Icon render={$sideNavToggled ? Close20 : Menu20} />
|
||||
</button>
|
||||
<a
|
||||
class="bx--link"
|
||||
href="/"
|
||||
use:link
|
||||
on:click={() => {
|
||||
if ($sideNavToggled || $appSwitcherToggled) {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
}}>
|
||||
Carbon Components
|
||||
<strong>Svelte</strong>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="theme">
|
||||
<ThemePicker inline />
|
||||
</div>
|
||||
<button
|
||||
class="menu menu--right"
|
||||
on:click={() => {
|
||||
appSwitcherToggled.set(!$appSwitcherToggled);
|
||||
sideNavToggled.set(false);
|
||||
}}>
|
||||
<Icon render={$appSwitcherToggled ? Close20 : AppSwitcher20} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="app-switcher" class:toggled={$appSwitcherToggled}>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<script>
|
||||
import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
|
||||
import Logo from '../assets/logo.png';
|
||||
import ButtonTile from './ButtonTile.svelte';
|
||||
|
||||
$: {
|
||||
document.title = 'Carbon Components Svelte';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-top: 2.5rem;
|
||||
padding-left: 16rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
main {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: var(--cds-ui-01);
|
||||
padding: 2.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.bx--grid {
|
||||
max-width: 66rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="banner">
|
||||
<div class="bx--grid">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<img src={Logo} alt="Logo" class="logo" />
|
||||
<h1>
|
||||
<span>
|
||||
<strong>Carbon</strong>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Components</strong>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Svelte</strong>
|
||||
</span>
|
||||
</h1>
|
||||
<h3>The Carbon Design System implemented in Svelte.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--grid">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h3>Packages</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row bx--no-gutter">
|
||||
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
|
||||
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
|
||||
Carbon Components Svelte
|
||||
</ButtonTile>
|
||||
</div>
|
||||
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
|
||||
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
|
||||
Carbon Icons Svelte
|
||||
</ButtonTile>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h3>Components</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<script>
|
||||
import { link, location } from 'svelte-spa-router';
|
||||
import { Search } from 'carbon-components-svelte';
|
||||
import Fuse from 'fuse.js';
|
||||
import components from '../data/component-registry';
|
||||
import { sideNavToggled, appSwitcherToggled } from '../store';
|
||||
|
||||
const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
|
||||
|
||||
let value = '';
|
||||
|
||||
$: results = value.length > 1 ? fuse.search(value) : components;
|
||||
|
||||
$: {
|
||||
if ($sideNavToggled || $appSwitcherToggled) {
|
||||
document.body.classList.add('hidden');
|
||||
} else {
|
||||
document.body.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(body.hidden) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 2.5rem;
|
||||
left: 0;
|
||||
width: 16rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
background-color: var(--cds-ui-01);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
nav {
|
||||
transform: translateX(-100%);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
nav.toggled {
|
||||
transform: translateX(0);
|
||||
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--cds-overlay-01);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bx--link {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.375rem 1rem;
|
||||
color: var(--cds-text-01);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bx--link:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bx--link:hover {
|
||||
background-color: var(--cds-ui-03);
|
||||
color: var(--cds-text-01);
|
||||
}
|
||||
|
||||
.bx--link.current {
|
||||
background-color: var(--cds-ui-03);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bx--link.current:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0.25rem;
|
||||
height: 100%;
|
||||
background-color: var(--cds-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window
|
||||
on:resize={() => {
|
||||
if (($sideNavToggled || $appSwitcherToggled) && window.matchMedia('(min-width: 768px)').matches) {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}
|
||||
}} />
|
||||
|
||||
<nav class:toggled={$sideNavToggled}>
|
||||
<Search
|
||||
small
|
||||
id="search-components"
|
||||
labelText="Components"
|
||||
placeholder="Search components..."
|
||||
bind:value />
|
||||
<ul>
|
||||
{#each results as { name }, i (name)}
|
||||
<li>
|
||||
<a
|
||||
on:click={() => {
|
||||
if ($sideNavToggled) {
|
||||
sideNavToggled.set(false);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}}
|
||||
class="bx--link"
|
||||
class:current={$location.includes(`/c/${name}`)}
|
||||
href={`/c/${name}`}
|
||||
use:link>
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{#if $sideNavToggled || $appSwitcherToggled}
|
||||
<div
|
||||
class="overlay"
|
||||
on:click={() => {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}} />
|
||||
{/if}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script>
|
||||
export let inline = false;
|
||||
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||
import { theme } from '../store';
|
||||
|
||||
onMount(() => {
|
||||
let currentTheme = localStorage.getItem('theme');
|
||||
|
||||
if (currentTheme) {
|
||||
theme.set(currentTheme);
|
||||
} else {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme.set('g90');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
localStorage.setItem('theme', $theme);
|
||||
document.documentElement.setAttribute('carbon-theme', $theme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script>
|
||||
import { ComponentAPI } from '../../Component';
|
||||
|
||||
const props = [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: ['inline', 'single', 'multi'],
|
||||
defaultValue: { value: 'single' },
|
||||
description: `
|
||||
<div>
|
||||
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
type: 'boolean',
|
||||
required: false,
|
||||
value: [],
|
||||
defaultValue: { value: false },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: [],
|
||||
defaultValue: { value: undefined },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<ComponentAPI {props} />
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
ToggleSmall,
|
||||
NumberInput,
|
||||
FormGroup
|
||||
} from 'carbon-components-svelte';
|
||||
import { ComponentPreview } from '../../Component';
|
||||
|
||||
$: items = [1, 2, 3, 4].map(id => ({ id, open: false }));
|
||||
|
||||
$: props = {
|
||||
count: 4,
|
||||
open: false,
|
||||
skeleton: false
|
||||
};
|
||||
|
||||
$: if (props.skeleton) {
|
||||
items = items.map(_ => ({ ..._, open: false }));
|
||||
}
|
||||
|
||||
$: code = `
|
||||
<script>
|
||||
import { Accordion, AccordionItem } from 'carbon-components-svelte';
|
||||
< /script>
|
||||
|
||||
<Accordion${props.skeleton ? ' skeleton' : ''}${props.skeleton ? ` count={${props.count}}` : ''}${
|
||||
props.open ? ` open` : ''
|
||||
}>
|
||||
${items
|
||||
.map(item => {
|
||||
return ` <AccordionItem title="Item ${item.id}"${item.open ? ' open' : ''}>Item ${
|
||||
item.id
|
||||
} content</AccordionItem>`;
|
||||
})
|
||||
.join('\n')}
|
||||
</Accordion>
|
||||
`;
|
||||
</script>
|
||||
|
||||
<ComponentPreview {code} minHeight="16rem">
|
||||
<Accordion {...props}>
|
||||
{#each items as { id }, i (id)}
|
||||
<AccordionItem title={`Item ${id}`} bind:open={items[i].open}>
|
||||
Item {id} content
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
<div slot="props">
|
||||
<FormGroup legendText="Skeleton">
|
||||
<ToggleSmall id="toggle-skeleton" bind:toggled={props.skeleton} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton row count">
|
||||
<NumberInput disabled={!props.skeleton} bind:value={props.count} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton first item open">
|
||||
<ToggleSmall id="toggle-open" disabled={!props.skeleton} bind:toggled={props.open} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</ComponentPreview>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import Preview from './Preview.svelte';
|
||||
import API from './API.svelte';
|
||||
import KitchenSink from './KitchenSink.svelte';
|
||||
|
||||
const tabs = {
|
||||
Preview,
|
||||
API,
|
||||
KitchenSink
|
||||
};
|
||||
|
||||
export default tabs;
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script>
|
||||
import { ComponentAPI } from '../../Component';
|
||||
|
||||
const props = [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: ['inline', 'single', 'multi'],
|
||||
defaultValue: { value: 'single' },
|
||||
description: `
|
||||
<div>
|
||||
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
type: 'boolean',
|
||||
required: false,
|
||||
value: [],
|
||||
defaultValue: { value: false },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: [],
|
||||
defaultValue: { value: undefined },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<ComponentAPI {props} />
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
TextArea,
|
||||
TextInput,
|
||||
ToggleSmall,
|
||||
CodeSnippet,
|
||||
FormGroup,
|
||||
RadioButtonGroup,
|
||||
RadioButton
|
||||
} from 'carbon-components-svelte';
|
||||
import { ComponentPreview } from '../../Component';
|
||||
|
||||
$: props = {
|
||||
code: `
|
||||
This is a <CodeSnippet />
|
||||
`.trim(),
|
||||
light: false,
|
||||
type: 'single',
|
||||
skeleton: false,
|
||||
feedback: 'Copied!'
|
||||
};
|
||||
|
||||
$: code = `
|
||||
<script>
|
||||
import { CodeSnippet } from 'carbon-components-svelte';
|
||||
|
||||
$: code = \`${props.code}\`;
|
||||
< /script>
|
||||
|
||||
<CodeSnippet type="${props.type}"${props.light ? ' light' : ''} {code}${
|
||||
props.skeleton ? ' skeleton' : ''
|
||||
} feedback="${props.feedback}" />
|
||||
`;
|
||||
|
||||
$: if (props.type === 'inline') {
|
||||
props.skeleton = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<ComponentPreview light={props.light} {code}>
|
||||
<div>
|
||||
<CodeSnippet {...props} />
|
||||
</div>
|
||||
<div slot="props">
|
||||
<FormGroup legendText="Type">
|
||||
<RadioButtonGroup legend="Type" bind:selected={props.type}>
|
||||
<RadioButton value="inline" id="inline" labelText="inline" />
|
||||
<RadioButton value="single" id="single" labelText="single" />
|
||||
<RadioButton value="multi" id="multi" labelText="multi" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Light variant">
|
||||
<ToggleSmall id="toggle-light" bind:toggled={props.light} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Code">
|
||||
{#if props.type === 'multi'}
|
||||
<TextArea bind:value={props.code} />
|
||||
{:else}
|
||||
<TextInput bind:value={props.code} />
|
||||
{/if}
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton">
|
||||
<ToggleSmall
|
||||
id="toggle-skeleton"
|
||||
disabled={props.type === 'inline'}
|
||||
bind:toggled={props.skeleton} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Feedback text">
|
||||
<TextInput placeholder="Enter text" bind:value={props.feedback} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</ComponentPreview>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import Preview from './Preview.svelte';
|
||||
import API from './API.svelte';
|
||||
import KitchenSink from './KitchenSink.svelte';
|
||||
|
||||
const tabs = {
|
||||
Preview,
|
||||
API,
|
||||
KitchenSink
|
||||
};
|
||||
|
||||
export default tabs;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
const components = [
|
||||
{ name: 'Accordion' },
|
||||
{ name: 'Breadcrumb' },
|
||||
{ name: 'Button' },
|
||||
{ name: 'Checkbox' },
|
||||
{ name: 'CodeSnippet' },
|
||||
{ name: 'ComboBox' },
|
||||
{ name: 'ComposedModal' },
|
||||
{ name: 'ContentSwitcher' },
|
||||
{ name: 'CopyButton' },
|
||||
{ name: 'DataTable' },
|
||||
{ name: 'DatePicker' },
|
||||
{ name: 'Dropdown' },
|
||||
{ name: 'FileUploader' },
|
||||
{ name: 'Form' },
|
||||
{ name: 'Icon' },
|
||||
{ name: 'InlineLoading' },
|
||||
{ name: 'Link' },
|
||||
{ name: 'Loading' },
|
||||
{ name: 'Modal' },
|
||||
{ name: 'MultiSelect' },
|
||||
{ name: 'Notification' },
|
||||
{ name: 'NumberInput' },
|
||||
{ name: 'OrderedList' },
|
||||
{ name: 'OverflowMenu' },
|
||||
{ name: 'Pagination' },
|
||||
{ name: 'ProgressIndicator' },
|
||||
{ name: 'RadioButton' },
|
||||
{ name: 'RadioButtonGroup' },
|
||||
{ name: 'Search' },
|
||||
{ name: 'Select' },
|
||||
{ name: 'SkeletonPlaceholder' },
|
||||
{ name: 'SkeletonText' },
|
||||
{ name: 'Slider' },
|
||||
{ name: 'StructuredList' },
|
||||
{ name: 'Tabs' },
|
||||
{ name: 'Tag' },
|
||||
{ name: 'TextArea' },
|
||||
{ name: 'TextInput' },
|
||||
{ name: 'Tile' },
|
||||
{ name: 'TimePicker' },
|
||||
{ name: 'Toggle' },
|
||||
{ name: 'ToggleSmall' },
|
||||
{ name: 'Tooltip' },
|
||||
{ name: 'TooltipDefinition' },
|
||||
{ name: 'TooltipIcon' },
|
||||
{ name: 'UnorderedList' }
|
||||
];
|
||||
|
||||
export default components;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './style.scss';
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
export default app;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
export const sideNavToggled = writable(false);
|
||||
export const appSwitcherToggled = writable(false);
|
||||
export const theme = writable('g10');
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
$feature-flags: (
|
||||
enable-css-custom-properties: true
|
||||
);
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss';
|
||||
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
}
|
||||
|
||||
:root[carbon-theme='g10'] {
|
||||
@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 'carbon-components/scss/globals/scss/_css--reset.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--font-face.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--body.scss';
|
||||
@import 'carbon-components/scss/globals/grid/_grid.scss';
|
||||
@import 'carbon-components/scss/globals/scss/styles.scss';
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
const IS_PROD = NODE_ENV === 'production';
|
||||
|
||||
module.exports = {
|
||||
stats: 'errors-only',
|
||||
devtool: IS_PROD ? false : 'cheap-eval-source-map',
|
||||
entry: { bundle: ['./src/index.js'] },
|
||||
resolve: {
|
||||
alias: { svelte: path.resolve('node_modules', 'svelte') },
|
||||
extensions: ['.mjs', '.js', '.svelte'],
|
||||
mainFields: ['svelte', 'browser', 'module', 'main']
|
||||
},
|
||||
output: { path: path.resolve(__dirname, 'build'), filename: '[name].[chunkhash].js' },
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } }
|
||||
},
|
||||
{
|
||||
test: [/\.s[ac]ss$/i, /\.css$/],
|
||||
use: [
|
||||
IS_PROD ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
overrideBrowserslist: ['last 1 version', 'ie >= 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
'sass-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|svg)$/i,
|
||||
use: [{ loader: 'file-loader' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
mode: NODE_ENV,
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyPlugin([{ from: 'public' }]),
|
||||
new MiniCssExtractPlugin({ filename: '[name].[chunkhash].css' }),
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
new HtmlWebpackPlugin(
|
||||
Object.assign(
|
||||
{},
|
||||
{ inject: true, template: 'public/index.html' },
|
||||
IS_PROD
|
||||
? {
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyElements: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
)
|
||||
)
|
||||
]
|
||||
};
|
||||
6981
palimpsest/yarn.lock
6981
palimpsest/yarn.lock
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
|||
import { terser } from "rollup-plugin-terser";
|
||||
import pkg from "./package.json";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import commonjs from "rollup-plugin-commonjs";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
|
||||
export default ["es", "umd"].map((format) => {
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
import { render } from "@testing-library/svelte";
|
||||
import Component from "./Breadcrumb.Story.svelte";
|
||||
|
||||
describe("Breadcrumb", () => {
|
||||
function getLastBreadcrumbItem(container) {
|
||||
const breadcrumbItems = container.querySelectorAll(".bx--breadcrumb-item");
|
||||
return breadcrumbItems[breadcrumbItems.length - 1];
|
||||
}
|
||||
|
||||
test("default", () => {
|
||||
const { getByText, container, rerender } = render(Component, {
|
||||
noTrailingSlash: false,
|
||||
});
|
||||
const selector = ".bx--breadcrumb--no-trailing-slash";
|
||||
expect(getByText("Breadcrumb 1")).toBeInTheDocument();
|
||||
expect(getByText("Breadcrumb 2")).toBeInTheDocument();
|
||||
expect(getByText("Breadcrumb 3")).toBeInTheDocument();
|
||||
expect(container.querySelector(selector)).not.toBeInTheDocument();
|
||||
expect(container.innerHTML).toMatchSnapshot();
|
||||
|
||||
rerender({ props: { noTrailingSlash: true } });
|
||||
expect(container.querySelector(selector)).toBeInTheDocument();
|
||||
expect(container.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("skeleton", () => {
|
||||
const { container } = render(Component, { story: "skeleton" });
|
||||
expect(container.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("current page", () => {
|
||||
const { container } = render(Component, { story: "current page" });
|
||||
const lastItem = getLastBreadcrumbItem(container);
|
||||
expect(lastItem.classList.contains("bx--breadcrumb-item--current")).toEqual(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test("current page with aria-current", () => {
|
||||
const { container } = render(Component, {
|
||||
story: "current page with aria-current",
|
||||
});
|
||||
const lastItem = getLastBreadcrumbItem(container);
|
||||
expect(lastItem.querySelector('[aria-current="page"]')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Breadcrumb default 1`] = `"<div><div class=\\"layout\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
|
||||
exports[`Breadcrumb default 2`] = `"<div><div class=\\"layout\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb bx--breadcrumb--no-trailing-slash\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
|
||||
exports[`Breadcrumb skeleton 1`] = `"<div><div class=\\"layout\\"><div class=\\"bx--breadcrumb bx--skeleton\\"><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div></div></div></div>"`;
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
export let story = undefined;
|
||||
const { modalBody } = $$props;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import ComposedModal from "./ComposedModal.svelte";
|
||||
import ModalHeader from "./ModalHeader.svelte";
|
||||
|
|
@ -12,152 +11,147 @@
|
|||
$: open = false;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === undefined}
|
||||
<ComposedModal {...$$props.composedModal}>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
{#if story === undefined}
|
||||
<ComposedModal {...$$props.composedModal}>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the
|
||||
functionality.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
||||
{#if story === 'child nodes'}
|
||||
<ComposedModal {...$$props.composedModal}>
|
||||
<ModalHeader {...$$props.modalHeader}>
|
||||
<h1>Testing</h1>
|
||||
</ModalHeader>
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
{#if story === 'child nodes'}
|
||||
<ComposedModal {...$$props.composedModal}>
|
||||
<ModalHeader {...$$props.modalHeader}>
|
||||
<h1>Testing</h1>
|
||||
</ModalHeader>
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the
|
||||
functionality.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button kind="secondary">Cancel</Button>
|
||||
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
|
||||
Primary
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
||||
{#if story === 'title'}
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
open
|
||||
on:close={() => {}}
|
||||
on:submit={() => {}}>
|
||||
<ModalHeader
|
||||
{...$$props.modalHeader}
|
||||
title="Passive modal title as the message. Should be direct and 3 lines
|
||||
or less." />
|
||||
<ModalBody {...$$props.modalBody} />
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
||||
{#if story === 'trigger'}
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}>
|
||||
Launch composed modal
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button kind="secondary">Cancel</Button>
|
||||
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
|
||||
Primary
|
||||
</Button>
|
||||
</div>
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
{open}
|
||||
on:close={() => (open = false)}>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
</ModalFooter>
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
||||
{#if story === 'title'}
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
open
|
||||
on:close={() => {}}
|
||||
on:submit={() => {}}>
|
||||
<ModalHeader
|
||||
{...$$props.modalHeader}
|
||||
title="Passive modal title as the message. Should be direct and 3 lines or
|
||||
less." />
|
||||
<ModalBody {...$$props.modalBody} />
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
||||
{#if story === 'trigger'}
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}>
|
||||
Launch composed modal
|
||||
</Button>
|
||||
</div>
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
{open}
|
||||
on:close={() => (open = false)}>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the
|
||||
functionality.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{#if modalBody.hasScrollingContent}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<h3>Lorem ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis,
|
||||
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
|
||||
tellus. Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
</Layout>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<h3>Lorem ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import ContentSwitcher from "./ContentSwitcher.svelte";
|
||||
import Switch from "./Switch.svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
|
|
@ -10,37 +9,35 @@
|
|||
$: console.log("bind selectedIndex", selectedIndex);
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'selected'}
|
||||
<ContentSwitcher
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" selected />
|
||||
<Switch {...$$props} text="Third section" />
|
||||
</ContentSwitcher>
|
||||
{:else}
|
||||
<ContentSwitcher
|
||||
bind:selectedIndex
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" />
|
||||
<Switch {...$$props}>
|
||||
<div style="display: flex; align-items:center;">
|
||||
<Add16 style="margin-right: .25rem;" />
|
||||
Third section
|
||||
</div>
|
||||
</Switch>
|
||||
</ContentSwitcher>
|
||||
<div
|
||||
style="margin-top: 1.5rem"
|
||||
on:click={() => {
|
||||
selectedIndex = 1;
|
||||
}}>
|
||||
Programmatically set to second index
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'selected'}
|
||||
<ContentSwitcher
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" selected />
|
||||
<Switch {...$$props} text="Third section" />
|
||||
</ContentSwitcher>
|
||||
{:else}
|
||||
<ContentSwitcher
|
||||
bind:selectedIndex
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" />
|
||||
<Switch {...$$props}>
|
||||
<div style="display: flex; align-items:center;">
|
||||
<Add16 style="margin-right: .25rem;" />
|
||||
Third section
|
||||
</div>
|
||||
</Switch>
|
||||
</ContentSwitcher>
|
||||
<div
|
||||
style="margin-top: 1.5rem"
|
||||
on:click={() => {
|
||||
selectedIndex = 1;
|
||||
}}>
|
||||
Programmatically set to second index
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import CopyButton from "./CopyButton.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<CopyButton
|
||||
{...$$props}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
}}
|
||||
on:animationend={e => {
|
||||
console.log('animation end', e.animationName);
|
||||
}} />
|
||||
</Layout>
|
||||
<CopyButton
|
||||
{...$$props}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
}}
|
||||
on:animationend={e => {
|
||||
console.log('animation end', e.animationName);
|
||||
}} />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import DataTable from "./DataTable.svelte";
|
||||
import Table from "./Table.svelte";
|
||||
import TableBody from "./TableBody.svelte";
|
||||
|
|
@ -78,77 +77,75 @@
|
|||
$: sortable = true;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'composed'}
|
||||
<DataTable {...$$props} {rows} {headers} let:props>
|
||||
<TableContainer
|
||||
title="DataTable"
|
||||
description="With default options"
|
||||
{...props.getTableContainerProps()}>
|
||||
<Table {...props.getTableProps()}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each props.headers as header, i (header.key)}
|
||||
<TableHeader {...props.getHeaderProps({ header })}>
|
||||
{header.header}
|
||||
</TableHeader>
|
||||
{#if story === 'composed'}
|
||||
<DataTable {...$$props} {rows} {headers} let:props>
|
||||
<TableContainer
|
||||
title="DataTable"
|
||||
description="With default options"
|
||||
{...props.getTableContainerProps()}>
|
||||
<Table {...props.getTableProps()}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each props.headers as header, i (header.key)}
|
||||
<TableHeader {...props.getHeaderProps({ header })}>
|
||||
{header.header}
|
||||
</TableHeader>
|
||||
{/each}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{#each props.rows as row, i}
|
||||
<TableRow {...props.getRowProps({ row })}>
|
||||
{#each row.cells as cell, j}
|
||||
<TableCell>{cell.value}</TableCell>
|
||||
{/each}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{#each props.rows as row, i}
|
||||
<TableRow {...props.getRowProps({ row })}>
|
||||
{#each row.cells as cell, j}
|
||||
<TableCell>{cell.value}</TableCell>
|
||||
{/each}
|
||||
</TableRow>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</DataTable>
|
||||
{:else if story === 'sortable'}
|
||||
<DataTable
|
||||
bind:sortable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{:else}
|
||||
<DataTable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</DataTable>
|
||||
{:else if story === 'sortable'}
|
||||
<DataTable
|
||||
bind:sortable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{:else}
|
||||
<DataTable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import DataTableSkeleton from "./DataTableSkeleton.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div style="width: 800px">
|
||||
<DataTableSkeleton {...$$props} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div style="width: 800px">
|
||||
<DataTableSkeleton {...$$props} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import DatePicker from "./DatePicker.svelte";
|
||||
import DatePickerInput from "./DatePickerInput.svelte";
|
||||
import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
|
||||
|
|
@ -10,56 +9,53 @@
|
|||
$: value = "";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
|
||||
{#if story === 'skeleton'}
|
||||
<DatePickerSkeleton range />
|
||||
{:else if story === 'single'}
|
||||
<div>
|
||||
<DatePicker
|
||||
{...$$props.datePicker}
|
||||
bind:value
|
||||
datePickerType="single"
|
||||
on:change={({ detail }) => {
|
||||
console.log('change', detail);
|
||||
}}>
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
on:input={() => {
|
||||
console.log('on:input');
|
||||
}} />
|
||||
</DatePicker>
|
||||
<button
|
||||
on:click|preventDefault={() => {
|
||||
value = '12/12/2020';
|
||||
}}
|
||||
style="margin-top: 1rem">
|
||||
Set date to 12/12/2020
|
||||
</button>
|
||||
</div>
|
||||
{:else if story === 'range'}
|
||||
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-start"
|
||||
labelText="Start date" />
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-end"
|
||||
labelText="End date" />
|
||||
</DatePicker>
|
||||
{:else}
|
||||
{#if story === 'skeleton'}
|
||||
<DatePickerSkeleton range />
|
||||
{:else if story === 'single'}
|
||||
<div>
|
||||
<DatePicker
|
||||
{...$$props.datePicker}
|
||||
bind:datePickerType
|
||||
bind:value
|
||||
datePickerType="single"
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
console.log('change', detail);
|
||||
}}>
|
||||
<DatePickerInput {...$$props.datePickerInput} />
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
on:input={() => {
|
||||
console.log('on:input');
|
||||
}} />
|
||||
</DatePicker>
|
||||
{/if}
|
||||
</Layout>
|
||||
<button
|
||||
on:click|preventDefault={() => {
|
||||
value = '12/12/2020';
|
||||
}}
|
||||
style="margin-top: 1rem">
|
||||
Set date to 12/12/2020
|
||||
</button>
|
||||
</div>
|
||||
{:else if story === 'range'}
|
||||
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-start"
|
||||
labelText="Start date" />
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-end"
|
||||
labelText="End date" />
|
||||
</DatePicker>
|
||||
{:else}
|
||||
<DatePicker
|
||||
{...$$props.datePicker}
|
||||
bind:datePickerType
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
<DatePickerInput {...$$props.datePickerInput} />
|
||||
</DatePicker>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import Dropdown from "./Dropdown.svelte";
|
||||
import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
|
||||
|
|
@ -15,34 +14,31 @@
|
|||
$: selectedIndex = -1;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 300px">
|
||||
<DropdownSkeleton />
|
||||
|
||||
<DropdownSkeleton inline />
|
||||
</div>
|
||||
{:else}
|
||||
<p>Currently, this component does not support items as slots.</p>
|
||||
<p>
|
||||
<code>items</code>
|
||||
must be an array of objects; mandatory fields are `id` and `text`.
|
||||
</p>
|
||||
<pre style="margin-top: 1rem;">
|
||||
<code>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
</pre>
|
||||
<div style="margin-top: 2rem; margin-bottom: 2rem;">
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIndex = selectedIndex > -1 ? -1 : 1;
|
||||
}}>
|
||||
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px">
|
||||
<Dropdown {...$$props} bind:selectedIndex {items} />
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 300px">
|
||||
<DropdownSkeleton />
|
||||
|
||||
<DropdownSkeleton inline />
|
||||
</div>
|
||||
{:else}
|
||||
<p>Currently, this component does not support items as slots.</p>
|
||||
<p>
|
||||
<code>items</code>
|
||||
must be an array of objects; mandatory fields are `id` and `text`.
|
||||
</p>
|
||||
<pre style="margin-top: 1rem;">
|
||||
<code>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
</pre>
|
||||
<div style="margin-top: 2rem; margin-bottom: 2rem;">
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIndex = selectedIndex > -1 ? -1 : 1;
|
||||
}}>
|
||||
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px">
|
||||
<Dropdown {...$$props} bind:selectedIndex {items} />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import FileUploader from "./FileUploader.svelte";
|
||||
import FileUploaderButton from "./FileUploaderButton.svelte";
|
||||
|
|
@ -14,50 +13,48 @@
|
|||
$: disabled = files.length === 0;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'button'}
|
||||
<FileUploaderButton {...$$props} />
|
||||
{:else if story === 'drop container'}
|
||||
<FileUploaderDropContainer
|
||||
<div>
|
||||
{#if story === 'button'}
|
||||
<FileUploaderButton {...$$props} />
|
||||
{:else if story === 'drop container'}
|
||||
<FileUploaderDropContainer
|
||||
{...$$props}
|
||||
on:add={({ detail }) => {
|
||||
console.log(detail);
|
||||
}} />
|
||||
{:else if story === 'item'}
|
||||
<FileUploaderItem
|
||||
{...$$props}
|
||||
on:delete={({ detail }) => {
|
||||
console.log(detail);
|
||||
}}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
}} />
|
||||
{:else if story === 'uploader'}
|
||||
<div class="bx--file__container">
|
||||
<FileUploader
|
||||
bind:this={fileUploader}
|
||||
{...$$props}
|
||||
bind:files
|
||||
on:add={({ detail }) => {
|
||||
console.log(detail);
|
||||
}} />
|
||||
{:else if story === 'item'}
|
||||
<FileUploaderItem
|
||||
{...$$props}
|
||||
on:delete={({ detail }) => {
|
||||
console.log(detail);
|
||||
console.log('add', detail);
|
||||
}}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
on:remove={({ detail }) => {
|
||||
console.log('remove', detail);
|
||||
}} />
|
||||
{:else if story === 'uploader'}
|
||||
<div class="bx--file__container">
|
||||
<FileUploader
|
||||
bind:this={fileUploader}
|
||||
{...$$props}
|
||||
bind:files
|
||||
on:add={({ detail }) => {
|
||||
console.log('add', detail);
|
||||
}}
|
||||
on:remove={({ detail }) => {
|
||||
console.log('remove', detail);
|
||||
}} />
|
||||
<Button
|
||||
kind="secondary"
|
||||
size="small"
|
||||
style="margin-top: 1rem"
|
||||
{disabled}
|
||||
on:click={fileUploader.clearFiles}>
|
||||
Clear File{files.length === 1 ? '' : 's'}
|
||||
</Button>
|
||||
</div>
|
||||
{:else if story === 'skeleton'}
|
||||
<div style="width: 500px">
|
||||
<FileUploaderSkeleton />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<Button
|
||||
kind="secondary"
|
||||
size="small"
|
||||
style="margin-top: 1rem"
|
||||
{disabled}
|
||||
on:click={fileUploader.clearFiles}>
|
||||
Clear File{files.length === 1 ? '' : 's'}
|
||||
</Button>
|
||||
</div>
|
||||
{:else if story === 'skeleton'}
|
||||
<div style="width: 500px">
|
||||
<FileUploaderSkeleton />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Checkbox } from "../Checkbox";
|
||||
import { FormGroup } from "../FormGroup";
|
||||
import { FileUploader } from "../FileUploader";
|
||||
|
|
@ -15,92 +14,86 @@
|
|||
import Form from "./Form.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<Form
|
||||
on:submit={event => {
|
||||
console.log('on:submit', event);
|
||||
}}>
|
||||
<FormGroup {...$$props}>
|
||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
||||
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
|
||||
</FormGroup>
|
||||
<NumberInput
|
||||
id="number-input-1"
|
||||
label="Number Input"
|
||||
min={0}
|
||||
max={100}
|
||||
value={50}
|
||||
step={10} />
|
||||
<FormGroup legendText="Toggle heading">
|
||||
<Toggle id="toggle-1" />
|
||||
<Toggle id="toggle-2" disabled />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="File Uploader">
|
||||
<FileUploader
|
||||
id="file-1"
|
||||
buttonLabel="Add files"
|
||||
labelDescription="Choose Files..." />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Radio Button heading">
|
||||
<RadioButtonGroup
|
||||
name="radio-button-group"
|
||||
defaultSelected="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-3"
|
||||
value="blue"
|
||||
labelText="Standard Radio Button" />
|
||||
<RadioButton
|
||||
id="radio-4"
|
||||
value="disabled"
|
||||
labelText="Disabled Radio Button"
|
||||
disabled />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Search">
|
||||
<Search id="search-1" labelText="Search" placeholder="Search" />
|
||||
</FormGroup>
|
||||
<Select id="select-1" defaultValue="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>
|
||||
<TextInput
|
||||
id="text-input-1"
|
||||
labelText="Text Input label"
|
||||
placeholder="Placeholder text" />
|
||||
<TextInput
|
||||
id="text-input-2"
|
||||
type="password"
|
||||
labelText="Password"
|
||||
required />
|
||||
<TextInput
|
||||
id="text-input-3"
|
||||
type="password"
|
||||
labelText="Password"
|
||||
invalidText="Your password must be at least 6 characters as well as
|
||||
contain at least one uppercase, one lowercase, and one number."
|
||||
required
|
||||
invalid />
|
||||
<TextArea
|
||||
id="text-area"
|
||||
labelText="Text Area label"
|
||||
placeholder="Placeholder text"
|
||||
rows={4}
|
||||
cols={50} />
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
</Layout>
|
||||
<Form
|
||||
on:submit={event => {
|
||||
console.log('on:submit', event);
|
||||
}}>
|
||||
<FormGroup {...$$props}>
|
||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
||||
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
|
||||
</FormGroup>
|
||||
<NumberInput
|
||||
id="number-input-1"
|
||||
label="Number Input"
|
||||
min={0}
|
||||
max={100}
|
||||
value={50}
|
||||
step={10} />
|
||||
<FormGroup legendText="Toggle heading">
|
||||
<Toggle id="toggle-1" />
|
||||
<Toggle id="toggle-2" disabled />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="File Uploader">
|
||||
<FileUploader
|
||||
id="file-1"
|
||||
buttonLabel="Add files"
|
||||
labelDescription="Choose Files..." />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Radio Button heading">
|
||||
<RadioButtonGroup
|
||||
name="radio-button-group"
|
||||
defaultSelected="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-3"
|
||||
value="blue"
|
||||
labelText="Standard Radio Button" />
|
||||
<RadioButton
|
||||
id="radio-4"
|
||||
value="disabled"
|
||||
labelText="Disabled Radio Button"
|
||||
disabled />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Search">
|
||||
<Search id="search-1" labelText="Search" placeholder="Search" />
|
||||
</FormGroup>
|
||||
<Select id="select-1" defaultValue="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>
|
||||
<TextInput
|
||||
id="text-input-1"
|
||||
labelText="Text Input label"
|
||||
placeholder="Placeholder text" />
|
||||
<TextInput id="text-input-2" type="password" labelText="Password" required />
|
||||
<TextInput
|
||||
id="text-input-3"
|
||||
type="password"
|
||||
labelText="Password"
|
||||
invalidText="Your password must be at least 6 characters as well as contain
|
||||
at least one uppercase, one lowercase, and one number."
|
||||
required
|
||||
invalid />
|
||||
<TextArea
|
||||
id="text-area"
|
||||
labelText="Text Area label"
|
||||
placeholder="Placeholder text"
|
||||
rows={4}
|
||||
cols={50} />
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { NumberInput } from "../NumberInput";
|
||||
import FormItem from "./FormItem.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<FormItem>
|
||||
<NumberInput id="number-input-1" />
|
||||
</FormItem>
|
||||
</Layout>
|
||||
<FormItem>
|
||||
<NumberInput id="number-input-1" />
|
||||
</FormItem>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Tooltip } from "../Tooltip";
|
||||
import FormLabel from "./FormLabel.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'tooltip'}
|
||||
<FormLabel>
|
||||
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
|
||||
</FormLabel>
|
||||
{:else}
|
||||
<FormLabel>Label</FormLabel>
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'tooltip'}
|
||||
<FormLabel>
|
||||
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
|
||||
</FormLabel>
|
||||
{:else}
|
||||
<FormLabel>Label</FormLabel>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,18 @@
|
|||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
|
||||
import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
|
||||
import Icon from "./Icon.svelte";
|
||||
import IconSkeleton from "./Icon.Skeleton.svelte";
|
||||
|
||||
const icons = { ChevronDown16, ArrowLeft20, Add24 };
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<div>
|
||||
<IconSkeleton size={16} style="margin: 2rem;" />
|
||||
<IconSkeleton size={32} style="margin: 2rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon {...$$props} render={icons[$$props.icon]} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<div>
|
||||
<IconSkeleton size={16} style="margin: 2rem;" />
|
||||
<IconSkeleton size={32} style="margin: 2rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon {...$$props} render={icons[$$props.icon]} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
export let description = undefined;
|
||||
export let successDelay = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import InlineLoading from "./InlineLoading.svelte";
|
||||
|
||||
|
|
@ -36,21 +35,19 @@
|
|||
$: disabled = isSubmitting || success;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'ux-example'}
|
||||
<div style="display: flex; width: 300px">
|
||||
<Button kind="secondary" {disabled}>Cancel</Button>
|
||||
{#if disabled}
|
||||
<InlineLoading
|
||||
style="margin-left: 1rem;"
|
||||
description={loadingDescription}
|
||||
status={success ? 'finished' : 'active'}
|
||||
aria-live={ariaLive} />
|
||||
{:else}
|
||||
<Button on:click={handleSubmit}>Submit</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<InlineLoading {...props} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'ux-example'}
|
||||
<div style="display: flex; width: 300px">
|
||||
<Button kind="secondary" {disabled}>Cancel</Button>
|
||||
{#if disabled}
|
||||
<InlineLoading
|
||||
style="margin-left: 1rem;"
|
||||
description={loadingDescription}
|
||||
status={success ? 'finished' : 'active'}
|
||||
aria-live={ariaLive} />
|
||||
{:else}
|
||||
<Button on:click={handleSubmit}>Submit</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<InlineLoading {...props} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import { render } from "@testing-library/svelte";
|
||||
import Component from "./InlineLoading.svelte";
|
||||
|
||||
test("InlineLoading", () => {
|
||||
const { container, rerender } = render(Component, {
|
||||
description: "description",
|
||||
iconDescription: "icon description",
|
||||
});
|
||||
|
||||
expect(container.querySelector(".bx--inline-loading")).toHaveTextContent(
|
||||
"description"
|
||||
);
|
||||
expect(container.querySelector(".bx--loading")).toBeInTheDocument();
|
||||
|
||||
rerender({ props: { status: "error" } });
|
||||
expect(
|
||||
container.querySelector(".bx--inline-loading--error")
|
||||
).toBeInTheDocument();
|
||||
|
||||
rerender({ props: { status: "finished" } });
|
||||
expect(
|
||||
container.querySelector(".bx--inline-loading__checkmark-container")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Link from "./Link.svelte";
|
||||
|
||||
$: ref = null;
|
||||
$: ref && console.log(ref);
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
<Link {...$$props} bind:ref>Link</Link>
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
<Link {...$$props} bind:ref>Link</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
import { render } from "@testing-library/svelte";
|
||||
import Component from "./Link.Story.svelte";
|
||||
|
||||
test("Link", () => {
|
||||
const { container, rerender } = render(Component, {
|
||||
href: "#",
|
||||
inline: false,
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const selector = ".bx--link";
|
||||
let element = null;
|
||||
|
||||
element = container.querySelector(selector);
|
||||
expect(element).toHaveAttribute("href", "#");
|
||||
expect(element).not.toHaveClass("bx--link--inline", "bx--link--disabled");
|
||||
expect(element).toHaveTextContent("Link");
|
||||
|
||||
rerender({ props: { inline: true, disabled: true } });
|
||||
|
||||
element = container.querySelector(selector);
|
||||
expect(element).toHaveClass("bx--link--inline", "bx--link--disabled");
|
||||
});
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Loading from "./Loading.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<Loading {...$$props} />
|
||||
</Layout>
|
||||
<Loading {...$$props} />
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import { render } from "@testing-library/svelte";
|
||||
import Component from "./Loading.svelte";
|
||||
|
||||
test("Loading", () => {
|
||||
const { container, rerender } = render(Component);
|
||||
|
||||
let element = container.querySelector(".bx--loading-overlay");
|
||||
|
||||
expect(element).toBeInTheDocument();
|
||||
expect(element).not.toHaveClass("bx--loading-overlay--stop");
|
||||
expect(element.querySelector(".bx--loading__stroke")).toHaveAttribute(
|
||||
"r",
|
||||
"37.5"
|
||||
);
|
||||
|
||||
rerender({ props: { active: false, small: true, withOverlay: false } });
|
||||
|
||||
element = container.querySelector(".bx--loading");
|
||||
expect(element).toHaveClass("bx--loading--small", "bx--loading--stop");
|
||||
expect(element.querySelector(".bx--loading__background")).toHaveAttribute(
|
||||
"r",
|
||||
"26.8125"
|
||||
);
|
||||
});
|
||||
|
|
@ -1,91 +1,88 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import Modal from "./Modal.svelte";
|
||||
|
||||
let open = $$props.open;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}>
|
||||
Launch modal
|
||||
</Button>
|
||||
</div>
|
||||
<Modal
|
||||
{...$$props}
|
||||
bind:open
|
||||
on:click:button--secondary={() => {
|
||||
console.log('click button secondary');
|
||||
open = false;
|
||||
}}
|
||||
on:open={() => {
|
||||
console.log('open');
|
||||
}}
|
||||
on:close={() => {
|
||||
console.log('close');
|
||||
}}
|
||||
on:submit={() => {
|
||||
console.log('submit');
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}>
|
||||
Launch modal
|
||||
</Button>
|
||||
</div>
|
||||
<Modal
|
||||
{...$$props}
|
||||
bind:open
|
||||
on:click:button--secondary={() => {
|
||||
console.log('click button secondary');
|
||||
open = false;
|
||||
}}
|
||||
on:open={() => {
|
||||
console.log('open');
|
||||
}}
|
||||
on:close={() => {
|
||||
console.log('close');
|
||||
}}
|
||||
on:submit={() => {
|
||||
console.log('submit');
|
||||
}}>
|
||||
<p>
|
||||
This component supports two-way binding by default. Please see ComposedModal
|
||||
for piecemeal functionality.
|
||||
</p>
|
||||
{#if $$props.hasScrollingContent}
|
||||
<p>
|
||||
This component supports two-way binding by default. Please see
|
||||
ComposedModal for piecemeal functionality.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{#if $$props.hasScrollingContent}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<h3>Lorem ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
|
||||
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
|
||||
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
|
||||
Quisque consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</Modal>
|
||||
</Layout>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<h3>Lorem ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
||||
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
||||
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
||||
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
||||
consectetur non risus eu rutrum.{' '}
|
||||
</p>
|
||||
{/if}
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { Button } from "../Button";
|
||||
import MultiSelect from "./MultiSelect.svelte";
|
||||
|
||||
|
|
@ -18,24 +17,22 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
|
||||
}}>
|
||||
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px; margin-top: 2rem;">
|
||||
<MultiSelect
|
||||
{...$$props}
|
||||
id="multi-select-id"
|
||||
name="multi-select-name"
|
||||
placeholder="Filter..."
|
||||
bind:selectedIds
|
||||
bind:items
|
||||
bind:value />
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
|
||||
}}>
|
||||
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px; margin-top: 2rem;">
|
||||
<MultiSelect
|
||||
{...$$props}
|
||||
id="multi-select-id"
|
||||
name="multi-select-name"
|
||||
placeholder="Filter..."
|
||||
bind:selectedIds
|
||||
bind:items
|
||||
bind:value />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,26 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import InlineNotification from "./InlineNotification.svelte";
|
||||
import NotificationActionButton from "./NotificationActionButton.svelte";
|
||||
import ToastNotification from "./ToastNotification.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'inline'}
|
||||
<InlineNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}>
|
||||
<div slot="actions">
|
||||
<NotificationActionButton>{$$props.action}</NotificationActionButton>
|
||||
</div>
|
||||
</InlineNotification>
|
||||
{:else if story === 'toast'}
|
||||
<ToastNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
style="min-width: 30rem; margin-bottom: .5rem" />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'inline'}
|
||||
<InlineNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}>
|
||||
<div slot="actions">
|
||||
<NotificationActionButton>{$$props.action}</NotificationActionButton>
|
||||
</div>
|
||||
</InlineNotification>
|
||||
{:else if story === 'toast'}
|
||||
<ToastNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
style="min-width: 30rem; margin-bottom: .5rem" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import NumberInput from "./NumberInput.svelte";
|
||||
import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
|
||||
|
||||
$: value = $$props.value;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<NumberInputSkeleton {...$$props} />
|
||||
{:else}
|
||||
<NumberInput
|
||||
{...$$props}
|
||||
id="number-input-id"
|
||||
name="number-input-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<NumberInputSkeleton {...$$props} />
|
||||
{:else}
|
||||
<NumberInput
|
||||
{...$$props}
|
||||
id="number-input-id"
|
||||
name="number-input-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import { ListItem } from "../ListItem";
|
||||
import OrderedList from "./OrderedList.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'nested'}
|
||||
<OrderedList>
|
||||
<ListItem>
|
||||
Unordered List level 1
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
<ListItem>
|
||||
Ordered List level 2
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
</OrderedList>
|
||||
{:else}
|
||||
<OrderedList>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
</OrderedList>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'nested'}
|
||||
<OrderedList>
|
||||
<ListItem>
|
||||
Unordered List level 1
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
<ListItem>
|
||||
Ordered List level 2
|
||||
<OrderedList nested>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
<ListItem>Ordered List level 2</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
</OrderedList>
|
||||
{:else}
|
||||
<OrderedList>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
<ListItem>Ordered List level 1</ListItem>
|
||||
</OrderedList>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,88 +1,84 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import OverflowMenu from "./OverflowMenu.svelte";
|
||||
import OverflowMenuItem from "./OverflowMenuItem.svelte";
|
||||
|
||||
$: primaryFocus = true;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div style="padding-left: 6rem">
|
||||
{#if story === 'links'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 3"
|
||||
disabled />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 4" />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Danger option"
|
||||
danger />
|
||||
</OverflowMenu>
|
||||
{:else if story === 'trigger'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}
|
||||
style="width: auto">
|
||||
<div slot="menu" style="padding: 0 1rem">Menu</div>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{:else}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
<div style="padding-left: 6rem">
|
||||
{#if story === 'links'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 3"
|
||||
disabled />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 4" />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Danger option"
|
||||
danger />
|
||||
</OverflowMenu>
|
||||
{:else if story === 'trigger'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}
|
||||
style="width: auto">
|
||||
<div slot="menu" style="padding: 0 1rem">Menu</div>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{:else}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Pagination from "./Pagination.svelte";
|
||||
import PaginationSkeleton from "./Pagination.Skeleton.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div style="width: 800px;">
|
||||
{#if story === 'multiple'}
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
{:else if story === 'skeleton'}
|
||||
<PaginationSkeleton />
|
||||
{:else}
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div style="width: 800px;">
|
||||
{#if story === 'multiple'}
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
{:else if story === 'skeleton'}
|
||||
<PaginationSkeleton />
|
||||
{:else}
|
||||
<Pagination {...$$props}>Pagination</Pagination>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,48 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import ProgressIndicator from "./ProgressIndicator.svelte";
|
||||
import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
|
||||
import ProgressStep from "./ProgressStep.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<ProgressIndicatorSkeleton {...$$props} />
|
||||
{:else if story === 'interactive'}
|
||||
<ProgressIndicator {...$$props}>
|
||||
<ProgressStep description="Step 1: Register a onChange event" let:props>
|
||||
<div {...props}>Click me</div>
|
||||
</ProgressStep>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the
|
||||
steps" />
|
||||
<ProgressStep
|
||||
label="Tooltip and really long label"
|
||||
description="The progress indicator will listen for clicks on the
|
||||
steps" />
|
||||
</ProgressIndicator>
|
||||
{:else}
|
||||
<ProgressIndicator {...$$props}>
|
||||
<ProgressStep
|
||||
label="First step"
|
||||
description="Step 1: Getting started with Carbon Design System"
|
||||
secondaryLabel="Optional label" />
|
||||
<ProgressStep
|
||||
label="Second step with tooltip"
|
||||
description="Step 2: Getting started with Carbon Design System"
|
||||
secondaryLabel="Optional label" />
|
||||
<ProgressStep
|
||||
label="Third step with tooltip"
|
||||
description="Step 3: Getting started with Carbon Design System" />
|
||||
<ProgressStep
|
||||
label="Fourth step"
|
||||
description="Step 4: Getting started with Carbon Design System"
|
||||
secondaryLabel="Example invalid step"
|
||||
invalid />
|
||||
<ProgressStep
|
||||
label="Fifth step"
|
||||
description="Step 5: Getting started with Carbon Design System"
|
||||
disabled />
|
||||
</ProgressIndicator>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<ProgressIndicatorSkeleton {...$$props} />
|
||||
{:else if story === 'interactive'}
|
||||
<ProgressIndicator {...$$props}>
|
||||
<ProgressStep description="Step 1: Register a onChange event" let:props>
|
||||
<div {...props}>Click me</div>
|
||||
</ProgressStep>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps" />
|
||||
<ProgressStep
|
||||
label="Tooltip and really long label"
|
||||
description="The progress indicator will listen for clicks on the steps" />
|
||||
</ProgressIndicator>
|
||||
{:else}
|
||||
<ProgressIndicator {...$$props}>
|
||||
<ProgressStep
|
||||
label="First step"
|
||||
description="Step 1: Getting started with Carbon Design System"
|
||||
secondaryLabel="Optional label" />
|
||||
<ProgressStep
|
||||
label="Second step with tooltip"
|
||||
description="Step 2: Getting started with Carbon Design System"
|
||||
secondaryLabel="Optional label" />
|
||||
<ProgressStep
|
||||
label="Third step with tooltip"
|
||||
description="Step 3: Getting started with Carbon Design System" />
|
||||
<ProgressStep
|
||||
label="Fourth step"
|
||||
description="Step 4: Getting started with Carbon Design System"
|
||||
secondaryLabel="Example invalid step"
|
||||
invalid />
|
||||
<ProgressStep
|
||||
label="Fifth step"
|
||||
description="Step 5: Getting started with Carbon Design System"
|
||||
disabled />
|
||||
</ProgressIndicator>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import RadioButton from "./RadioButton.svelte";
|
||||
import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
|
||||
|
||||
$: checked = false;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<RadioButtonSkeleton />
|
||||
{:else}
|
||||
<RadioButton {...$$props} bind:checked id="radio-1" />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<RadioButtonSkeleton />
|
||||
{:else}
|
||||
<RadioButton {...$$props} bind:checked id="radio-1" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import RadioButtonGroup from "./RadioButtonGroup.svelte";
|
||||
import { RadioButton } from "../RadioButton";
|
||||
import { FormGroup } from "../FormGroup";
|
||||
|
|
@ -7,12 +6,10 @@
|
|||
$: selected = "default-selected";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<FormGroup legendText="Radio Button heading">
|
||||
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
|
||||
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
|
||||
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
|
||||
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
</Layout>
|
||||
<FormGroup legendText="Radio Button heading">
|
||||
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
|
||||
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
|
||||
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
|
||||
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Search from "./Search.svelte";
|
||||
import SearchSkeleton from "./Search.Skeleton.svelte";
|
||||
|
||||
|
|
@ -16,12 +15,10 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<SearchSkeleton />
|
||||
{:else}
|
||||
<Search {...$$props} bind:value />
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<SearchSkeleton />
|
||||
{:else}
|
||||
<Search {...$$props} bind:value />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Select from "./Select.svelte";
|
||||
import SelectItem from "./SelectItem.svelte";
|
||||
import SelectSkeleton from "./Select.Skeleton.svelte";
|
||||
|
|
@ -11,30 +10,24 @@
|
|||
$: console.log(selected);
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<SelectSkeleton {...$$props} />
|
||||
{:else}
|
||||
<Select
|
||||
{...$$props.select}
|
||||
id="select-id"
|
||||
name="select-name"
|
||||
bind:selected>
|
||||
<SelectItem
|
||||
value="placeholder-item"
|
||||
text="Choose an option"
|
||||
disabled
|
||||
hidden />
|
||||
<SelectItemGroup {...$$props.group} label="Category 1">
|
||||
<SelectItem value="option-1" text="Option 1" />
|
||||
<SelectItem value="option-2" text="Option 2" />
|
||||
</SelectItemGroup>
|
||||
<SelectItemGroup {...$$props.group} label="Category 2">
|
||||
<SelectItem value="option-3" text="Option 3" />
|
||||
<SelectItem value="option-4" text="Option 4" />
|
||||
</SelectItemGroup>
|
||||
</Select>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<SelectSkeleton {...$$props} />
|
||||
{:else}
|
||||
<Select {...$$props.select} id="select-id" name="select-name" bind:selected>
|
||||
<SelectItem
|
||||
value="placeholder-item"
|
||||
text="Choose an option"
|
||||
disabled
|
||||
hidden />
|
||||
<SelectItemGroup {...$$props.group} label="Category 1">
|
||||
<SelectItem value="option-1" text="Option 1" />
|
||||
<SelectItem value="option-2" text="Option 2" />
|
||||
</SelectItemGroup>
|
||||
<SelectItemGroup {...$$props.group} label="Category 2">
|
||||
<SelectItem value="option-3" text="Option 3" />
|
||||
<SelectItem value="option-4" text="Option 4" />
|
||||
</SelectItemGroup>
|
||||
</Select>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -20,8 +19,6 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<Layout>
|
||||
<div style="height: 250px; width: 250px;">
|
||||
<SkeletonPlaceholder {...$$props} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div style="height: 250px; width: 250px;">
|
||||
<SkeletonPlaceholder {...$$props} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
<script>
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import SkeletonText from "./SkeletonText.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div style="width: 300px">
|
||||
<SkeletonText {...$$props} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div style="width: 300px">
|
||||
<SkeletonText {...$$props} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,20 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Slider from "./Slider.svelte";
|
||||
import SliderSkeleton from "./Slider.Skeleton.svelte";
|
||||
|
||||
$: value = 50;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<SliderSkeleton {...$$props} />
|
||||
{:else}
|
||||
<Slider
|
||||
{...$$props}
|
||||
id="slider-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<SliderSkeleton {...$$props} />
|
||||
{:else}
|
||||
<Slider
|
||||
{...$$props}
|
||||
id="slider-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export let story = undefined;
|
||||
|
||||
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
|
||||
import StructuredListBody from "./StructuredListBody.svelte";
|
||||
import StructuredListCell from "./StructuredListCell.svelte";
|
||||
import StructuredListHead from "./StructuredListHead.svelte";
|
||||
|
|
@ -14,80 +14,78 @@
|
|||
$: selected = "row-1-value";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 800px">
|
||||
<StructuredListSkeleton />
|
||||
</div>
|
||||
{:else if story === 'selection'}
|
||||
<StructuredList selection border bind:selected>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{''}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each [0, 1, 2, 3] as item, i (item)}
|
||||
<StructuredListRow label for="row-{i}">
|
||||
<StructuredListCell>Row {i}</StructuredListCell>
|
||||
<StructuredListCell>Row {i}</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-{i}"
|
||||
value="row-{i}-value"
|
||||
title="row-{i}-title"
|
||||
name="row-{i}-name" />
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled16
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option" />
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
{:else}
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 800px">
|
||||
<StructuredListSkeleton />
|
||||
</div>
|
||||
{:else if story === 'selection'}
|
||||
<StructuredList selection border bind:selected>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{''}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each [0, 1, 2, 3] as item, i (item)}
|
||||
<StructuredListRow label for="row-{i}">
|
||||
<StructuredListCell>Row {i}</StructuredListCell>
|
||||
<StructuredListCell>Row {i}</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>
|
||||
<StructuredListInput
|
||||
id="row-{i}"
|
||||
value="row-{i}-value"
|
||||
title="row-{i}-title"
|
||||
name="row-{i}-name" />
|
||||
<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.
|
||||
<CheckmarkFilled16
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option" />
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
{:else}
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</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>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Tab from "./Tab.svelte";
|
||||
import TabContent from "./TabContent.svelte";
|
||||
import Tabs from "./Tabs.svelte";
|
||||
|
|
@ -12,32 +11,30 @@
|
|||
$: selected = 0;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<TabsSkeleton />
|
||||
{:else if story === 'container'}
|
||||
<Tabs {...tabsProps} type="container" bind:selected>
|
||||
<Tab {...tabProps} label="Tab label 1" />
|
||||
<Tab {...tabProps} label="Tab label 2" />
|
||||
<Tab {...tabProps} label="Tab label 3" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
{:else}
|
||||
<Tabs {...tabsProps} bind:selected>
|
||||
<Tab {...tabProps} label="Tab label 1" />
|
||||
<Tab {...tabProps} label="Tab label 2" />
|
||||
<Tab {...tabProps} label="Tab label 3" disabled />
|
||||
<Tab {...tabProps} label="Tab label 4" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
<TabContent>Content 4</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<TabsSkeleton />
|
||||
{:else if story === 'container'}
|
||||
<Tabs {...tabsProps} type="container" bind:selected>
|
||||
<Tab {...tabProps} label="Tab label 1" />
|
||||
<Tab {...tabProps} label="Tab label 2" />
|
||||
<Tab {...tabProps} label="Tab label 3" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
{:else}
|
||||
<Tabs {...tabsProps} bind:selected>
|
||||
<Tab {...tabProps} label="Tab label 1" />
|
||||
<Tab {...tabProps} label="Tab label 2" />
|
||||
<Tab {...tabProps} label="Tab label 3" disabled />
|
||||
<Tab {...tabProps} label="Tab label 4" />
|
||||
<div slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
<TabContent>Content 4</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,22 @@
|
|||
export let story = undefined;
|
||||
export let type = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import Tag from "./Tag.svelte";
|
||||
import TagSkeleton from "./Tag.Skeleton.svelte";
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'filter'}
|
||||
<Tag
|
||||
{filter}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
}}>
|
||||
{slot}
|
||||
</Tag>
|
||||
{:else if story === 'skeleton'}
|
||||
<TagSkeleton />
|
||||
{:else}
|
||||
<Tag {disabled} {type} class="class">{slot}</Tag>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'filter'}
|
||||
<Tag
|
||||
{filter}
|
||||
on:click={() => {
|
||||
console.log('click');
|
||||
}}>
|
||||
{slot}
|
||||
</Tag>
|
||||
{:else if story === 'skeleton'}
|
||||
<TagSkeleton />
|
||||
{:else}
|
||||
<Tag {disabled} {type} class="class">{slot}</Tag>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import TextArea from "./TextArea.svelte";
|
||||
import TextAreaSkeleton from "./TextArea.Skeleton.svelte";
|
||||
|
||||
|
|
@ -11,10 +10,8 @@
|
|||
$: console.log("bound value:", value);
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<TextAreaSkeleton {...$$props} />
|
||||
{:else}
|
||||
<TextArea {...$$props} bind:value bind:ref />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<TextAreaSkeleton {...$$props} />
|
||||
{:else}
|
||||
<TextArea {...$$props} bind:value bind:ref />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import PasswordInput from "./PasswordInput.svelte";
|
||||
import TextInput from "./TextInput.svelte";
|
||||
import TextInputSkeleton from "./TextInput.Skeleton.svelte";
|
||||
|
|
@ -12,42 +11,40 @@
|
|||
$: console.log(ref);
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<div
|
||||
aria-label="loading text input"
|
||||
aria-live="assertive"
|
||||
role="status"
|
||||
tabindex="0">
|
||||
<TextInputSkeleton />
|
||||
<br />
|
||||
<TextInputSkeleton hideLabel />
|
||||
</div>
|
||||
{:else if story === 'password-visibility'}
|
||||
<PasswordInput {...$$props} aria-level="" />
|
||||
{:else if story === 'controlled'}
|
||||
<PasswordInput {...$$props} {type} />
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
type = 'text';
|
||||
}}>
|
||||
Show password
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
type = 'password';
|
||||
}}>
|
||||
Hide password
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<TextInput
|
||||
bind:ref
|
||||
{...$$props}
|
||||
bind:value
|
||||
on:change={() => {
|
||||
console.log('change');
|
||||
}} />
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<div
|
||||
aria-label="loading text input"
|
||||
aria-live="assertive"
|
||||
role="status"
|
||||
tabindex="0">
|
||||
<TextInputSkeleton />
|
||||
<br />
|
||||
<TextInputSkeleton hideLabel />
|
||||
</div>
|
||||
{:else if story === 'password-visibility'}
|
||||
<PasswordInput {...$$props} aria-level="" />
|
||||
{:else if story === 'controlled'}
|
||||
<PasswordInput {...$$props} {type} />
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
type = 'text';
|
||||
}}>
|
||||
Show password
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
type = 'password';
|
||||
}}>
|
||||
Hide password
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<TextInput
|
||||
bind:ref
|
||||
{...$$props}
|
||||
bind:value
|
||||
on:change={() => {
|
||||
console.log('change');
|
||||
}} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from "../../internal/ui/Layout.svelte";
|
||||
import ClickableTile from "./ClickableTile.svelte";
|
||||
import ExpandableTile from "./ExpandableTile.svelte";
|
||||
import RadioTile from "./RadioTile.svelte";
|
||||
|
|
@ -19,53 +18,47 @@
|
|||
$: selectedTile1 = false;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{#if story === 'filter'}
|
||||
<Tile {...$$props} />
|
||||
{:else if story === 'clickable'}
|
||||
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
|
||||
{:else if story === 'multi-select'}
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile
|
||||
{...$$props}
|
||||
id="tile-1"
|
||||
name="tiles"
|
||||
bind:selected={selectedTile1}
|
||||
on:select={({ detail }) => {
|
||||
console.log('on:select', detail);
|
||||
}}
|
||||
on:deselect={({ detail }) => {
|
||||
console.log('on:deselect', detail);
|
||||
}}>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile {...$$props} id="tile-2" name="tiles">
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile {...$$props} id="tile-3" name="tiles">
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
{:else if story === 'selectable'}
|
||||
<TileGroup legend="Selectable Tile Group" bind:selected>
|
||||
{#each radioTiles as { value, id, labelText }, i (id)}
|
||||
<RadioTile {...$$props} {value} {id} {labelText}>
|
||||
Selectable Tile
|
||||
</RadioTile>
|
||||
{/each}
|
||||
</TileGroup>
|
||||
{:else if story === 'expandable'}
|
||||
<ExpandableTile {...$$props}>
|
||||
<div slot="above" style="height: 200px">
|
||||
Above the fold content here
|
||||
</div>
|
||||
<div slot="below" style="height: 400px">
|
||||
Below the fold content here
|
||||
</div>
|
||||
</ExpandableTile>
|
||||
{:else}
|
||||
<Tile {...$$props}>Default Tile</Tile>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
{#if story === 'filter'}
|
||||
<Tile {...$$props} />
|
||||
{:else if story === 'clickable'}
|
||||
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
|
||||
{:else if story === 'multi-select'}
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile
|
||||
{...$$props}
|
||||
id="tile-1"
|
||||
name="tiles"
|
||||
bind:selected={selectedTile1}
|
||||
on:select={({ detail }) => {
|
||||
console.log('on:select', detail);
|
||||
}}
|
||||
on:deselect={({ detail }) => {
|
||||
console.log('on:deselect', detail);
|
||||
}}>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile {...$$props} id="tile-2" name="tiles">
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile {...$$props} id="tile-3" name="tiles">
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
{:else if story === 'selectable'}
|
||||
<TileGroup legend="Selectable Tile Group" bind:selected>
|
||||
{#each radioTiles as { value, id, labelText }, i (id)}
|
||||
<RadioTile {...$$props} {value} {id} {labelText}>
|
||||
Selectable Tile
|
||||
</RadioTile>
|
||||
{/each}
|
||||
</TileGroup>
|
||||
{:else if story === 'expandable'}
|
||||
<ExpandableTile {...$$props}>
|
||||
<div slot="above" style="height: 200px">Above the fold content here</div>
|
||||
<div slot="below" style="height: 400px">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
{:else}
|
||||
<Tile {...$$props}>Default Tile</Tile>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
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