mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: update dependencies, remove jest

Browse source 
- remove docs/palimpsest folders (to be replaced)
- remove Layout Storybook component
This commit is contained in:
Eric Liu 2020-07-19 06:53:10 -07:00
commit 76df51674d
110 changed files with 2604 additions and 17979 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.storybook/addons.js
View file

@ -1,2 +1,2 @@
import '@storybook/addon-knobs/register'; import "@storybook/addon-knobs/register";
import '@storybook/addon-storysource/register'; import "@storybook/addon-storysource/register";

4
.storybook/config.js
View file

@ -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);

8
.storybook/webpack.config.js
View file

@ -1,11 +1,11 @@
const path = require('path'); const path = require("path");
module.exports = async ({ config }) => { module.exports = async ({ config }) => {
config.module.rules.push({ config.module.rules.push({
test: [/\.stories\.js$/], test: [/\.stories\.js$/],
loaders: [require.resolve('@storybook/source-loader')], loaders: [require.resolve("@storybook/source-loader")],
include: [path.resolve(__dirname, '../src')], include: [path.resolve(__dirname, "../src")],
enforce: 'pre' enforce: "pre",
}); });
return config; return config;
}; };

2
.travis.yml
View file

@ -2,5 +2,5 @@ language: node_js
node_js: 10 node_js: 10
cache: yarn cache: yarn
script: script:
- yarn test
- yarn build - yarn build
- yarn prepack

5
docs/.gitignore vendored
View file

@ -1,5 +0,0 @@
.DS_Store
/__sapper__
/**/node_modules
/public
yarn-error.log

30
docs/package.json
View file

@ -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": "../"
}
}

4
docs/src/client.js
View file

@ -1,4 +0,0 @@
import "./style.scss";
import * as sapper from "@sapper/app";
sapper.start({ target: document.querySelector("#sapper") });

20
docs/src/components/Nav.svelte
View file

@ -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>

18
docs/src/routes/_error.svelte
View file

@ -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}

17
docs/src/routes/_layout.svelte
View file

@ -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>

18
docs/src/routes/about.svelte
View file

@ -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>

21
docs/src/routes/blog/[slug].json.js
View file

@ -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` }));
}
}

28
docs/src/routes/blog/[slug].svelte
View file

@ -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>

92
docs/src/routes/blog/_posts.js
View file

@ -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>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</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;

6
docs/src/routes/blog/index.json.js
View file

@ -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));
}

34
docs/src/routes/blog/index.svelte
View file

@ -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>

36
docs/src/routes/index.svelte
View file

@ -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/" /> -->

12
docs/src/server.js
View file

@ -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);
});

5
docs/src/store/index.js
View file

@ -1,5 +0,0 @@
import { writable } from "svelte/store";
export const sideNavToggled = writable(false);
export const appSwitcherToggled = writable(false);
export const theme = writable("g10");

42
docs/src/style.scss
View file

@ -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'; */

14
docs/src/template.html
View file

@ -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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
docs/static/logo-192.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.6 KiB

BIN
docs/static/logo-512.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

91
docs/webpack.config.js
View file

@ -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
View file

File diff suppressed because it is too large Load diff

74
package.json
View file

@ -10,8 +10,6 @@
"start": "start-storybook -p 9090", "start": "start-storybook -p 9090",
"build": "build-storybook", "build": "build-storybook",
"deploy": "gh-pages -d storybook-static", "deploy": "gh-pages -d storybook-static",
"test": "jest --coverage",
"test:tdd": "jest --watch",
"prepack": "rollup -c" "prepack": "rollup -c"
}, },
"sideEffects": false, "sideEffects": false,
@ -20,63 +18,27 @@
"flatpickr": "4.6.3" "flatpickr": "4.6.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.8.0", "@babel/core": "^7.10.5",
"@babel/preset-env": "^7.8.0", "@babel/preset-env": "^7.10.4",
"@storybook/addon-knobs": "^5.3.1", "@rollup/plugin-commonjs": "^14.0.0",
"@storybook/addon-storysource": "^5.3.1", "@rollup/plugin-node-resolve": "^8.4.0",
"@storybook/cli": "^5.3.1", "@storybook/addon-knobs": "^5.3.19",
"@storybook/svelte": "^5.3.1", "@storybook/addon-storysource": "^5.3.19",
"@testing-library/jest-dom": "^5.1.0", "@storybook/cli": "^5.3.19",
"@testing-library/svelte": "^1.11.0", "@storybook/svelte": "^5.3.19",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"gh-pages": "^2.2.0", "gh-pages": "^3.1.0",
"jest": "^25.1.0", "rollup": "^2.22.1",
"jest-transform-svelte": "^2.1.0", "rollup-plugin-svelte": "^5.2.3",
"regenerator-runtime": "^0.13.3", "rollup-plugin-terser": "^6.1.0",
"rollup": "^1.29.0", "svelte": "^3.24.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",
"svelte-loader": "^2.13.6" "svelte-loader": "^2.13.6"
}, },
"contributors": [
{
"name": "Eric Liu",
"email": "eric.young.liu@ibm.com"
},
{
"name": "Adan Ulloa",
"email": "adanug@mx1.ibm.com"
}
],
"babel": { "babel": {
"presets": [ "presets": [
"@babel/preset-env" "@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": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/ibm/carbon-components-svelte.git" "url": "https://github.com/ibm/carbon-components-svelte.git"
@ -93,5 +55,15 @@
"files": [ "files": [
"lib", "lib",
"src" "src"
],
"contributors": [
{
"name": "Eric Liu",
"email": "eric.young.liu@ibm.com"
},
{
"name": "Adan Ulloa",
"email": "adanug@mx1.ibm.com"
}
] ]
} }

5
palimpsest/.gitignore vendored
View file

@ -1,5 +0,0 @@
/node_modules
/build
.DS_Store
yarn-debug.log*
yarn-error.log*

41
palimpsest/README.md
View file

@ -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.

40
palimpsest/package.json
View file

@ -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"
]
}
}

BIN
palimpsest/public/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.4 KiB

10
palimpsest/public/index.html
View file

@ -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>

11
palimpsest/src/App.svelte
View file

@ -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 }} />

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.9 KiB

109
palimpsest/src/components/ButtonTile.svelte
View file

@ -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>

111
palimpsest/src/components/Component/Component.svelte
View file

@ -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>

96
palimpsest/src/components/Component/ComponentAPI.svelte
View file

@ -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>

110
palimpsest/src/components/Component/ComponentPreview.svelte
View file

@ -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>

23
palimpsest/src/components/Component/ComponentTab.svelte
View file

@ -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]} />

5
palimpsest/src/components/Component/index.js
View file

@ -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';

142
palimpsest/src/components/Header.svelte
View file

@ -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>

101
palimpsest/src/components/Home.svelte
View file

@ -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>

147
palimpsest/src/components/SideNav.svelte
View file

@ -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}

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

@ -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>

40
palimpsest/src/components/carbon-components/Accordion/API.svelte
View file

@ -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} />

0
palimpsest/src/components/carbon-components/Accordion/KitchenSink.svelte
View file

61
palimpsest/src/components/carbon-components/Accordion/Preview.svelte
View file

@ -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>

11
palimpsest/src/components/carbon-components/Accordion/index.js
View file

@ -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;

40
palimpsest/src/components/carbon-components/CodeSnippet/API.svelte
View file

@ -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} />

0
palimpsest/src/components/carbon-components/CodeSnippet/KitchenSink.svelte
View file

72
palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte
View file

@ -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>

11
palimpsest/src/components/carbon-components/CodeSnippet/index.js
View file

@ -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;

50
palimpsest/src/data/component-registry.js
View file

@ -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;

6
palimpsest/src/index.js
View file

@ -1,6 +0,0 @@
import './style.scss';
import App from './App.svelte';
const app = new App({ target: document.body });
export default app;

5
palimpsest/src/store/index.js
View file

@ -1,5 +0,0 @@
import { writable } from 'svelte/store';
export const sideNavToggled = writable(false);
export const appSwitcherToggled = writable(false);
export const theme = writable('g10');

37
palimpsest/src/style.scss
View file

@ -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';

78
palimpsest/webpack.config.js
View file

@ -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
View file

File diff suppressed because it is too large Load diff

4
rollup.config.js
View file

@ -1,7 +1,7 @@
import { terser } from "rollup-plugin-terser"; import { terser } from "rollup-plugin-terser";
import pkg from "./package.json"; import pkg from "./package.json";
import resolve from "rollup-plugin-node-resolve"; import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; import commonjs from "@rollup/plugin-commonjs";
import svelte from "rollup-plugin-svelte"; import svelte from "rollup-plugin-svelte";
export default ["es", "umd"].map((format) => { export default ["es", "umd"].map((format) => {

46
src/components/Breadcrumb/Breadcrumb.test.js
View file

@ -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();
});
});

7
src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap
View file

@ -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\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div></div></div></div>"`;

278
src/components/ComposedModal/ComposedModal.Story.svelte
View file

@ -2,7 +2,6 @@
export let story = undefined; export let story = undefined;
const { modalBody } = $$props; const { modalBody } = $$props;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import ComposedModal from "./ComposedModal.svelte"; import ComposedModal from "./ComposedModal.svelte";
import ModalHeader from "./ModalHeader.svelte"; import ModalHeader from "./ModalHeader.svelte";
@ -12,152 +11,147 @@
$: open = false; $: open = false;
</script> </script>
<Layout> {#if story === undefined}
{#if story === undefined} <ComposedModal {...$$props.composedModal}>
<ComposedModal {...$$props.composedModal}> <ModalHeader {...$$props.modalHeader} />
<ModalHeader {...$$props.modalHeader} /> <ModalBody
<ModalBody {...$$props.modalBody}
{...$$props.modalBody} aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> <p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p> <p>
Please see ModalWrapper for more examples and demo of the Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
functionality. 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>
{#if modalBody.hasScrollingContent} {/if}
<p> </ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id <ModalFooter {...$$props.modalFooter} />
accumsan augue. Phasellus consequat augue vitae tellus tincidunt </ComposedModal>
posuere. Curabitur justo urna, consectetur vel elit iaculis, {/if}
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'child nodes'} {#if story === 'child nodes'}
<ComposedModal {...$$props.composedModal}> <ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader}> <ModalHeader {...$$props.modalHeader}>
<h1>Testing</h1> <h1>Testing</h1>
</ModalHeader> </ModalHeader>
<ModalBody <ModalBody
{...$$props.modalBody} {...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p> <p>
Please see ModalWrapper for more examples and demo of the Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
functionality. 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>
{#if modalBody.hasScrollingContent} {/if}
<p> </ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id <ModalFooter>
accumsan augue. Phasellus consequat augue vitae tellus tincidunt <Button kind="secondary">Cancel</Button>
posuere. Curabitur justo urna, consectetur vel elit iaculis, <Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Primary
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
</Button> </Button>
</div> </ModalFooter>
<ComposedModal </ComposedModal>
{...$$props.composedModal} {/if}
{open}
on:close={() => (open = false)}> {#if story === 'title'}
<ModalHeader {...$$props.modalHeader} /> <ComposedModal
<ModalBody {...$$props.composedModal}
{...$$props.modalBody} open
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> 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> <p>
Please see ModalWrapper for more examples and demo of the Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
functionality. 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>
{#if modalBody.hasScrollingContent} <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
posuere. Curabitur justo urna, consectetur vel elit iaculis, condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Quisque consectetur non risus eu rutrum.{' '}
tellus. Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
posuere. Curabitur justo urna, consectetur vel elit iaculis, condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Quisque consectetur non risus eu rutrum.{' '}
tellus. Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <h3>Lorem ipsum</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
tellus. Quisque consectetur non risus eu rutrum.{' '} Quisque consectetur non risus eu rutrum.{' '}
</p> </p>
<h3>Lorem ipsum</h3> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
posuere. Curabitur justo urna, consectetur vel elit iaculis, condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Quisque consectetur non risus eu rutrum.{' '}
tellus. Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
posuere. Curabitur justo urna, consectetur vel elit iaculis, condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Quisque consectetur non risus eu rutrum.{' '}
tellus. Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
posuere. Curabitur justo urna, consectetur vel elit iaculis, condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie Quisque consectetur non risus eu rutrum.{' '}
tellus. Quisque consectetur non risus eu rutrum.{' '} </p>
</p> {/if}
<p> </ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id <ModalFooter {...$$props.modalFooter} />
accumsan augue. Phasellus consequat augue vitae tellus tincidunt </ComposedModal>
posuere. Curabitur justo urna, consectetur vel elit iaculis, {/if}
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
</Layout>

67
src/components/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ContentSwitcher from "./ContentSwitcher.svelte"; import ContentSwitcher from "./ContentSwitcher.svelte";
import Switch from "./Switch.svelte"; import Switch from "./Switch.svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add16 from "carbon-icons-svelte/lib/Add16";
@ -10,37 +9,35 @@
$: console.log("bind selectedIndex", selectedIndex); $: console.log("bind selectedIndex", selectedIndex);
</script> </script>
<Layout> {#if story === 'selected'}
{#if story === 'selected'} <ContentSwitcher
<ContentSwitcher on:change={({ detail }) => {
on:change={({ detail }) => { console.log('on:change', detail);
console.log('on:change', detail); }}>
}}> <Switch {...$$props} text="First section" />
<Switch {...$$props} text="First section" /> <Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Second section" selected /> <Switch {...$$props} text="Third section" />
<Switch {...$$props} text="Third section" /> </ContentSwitcher>
</ContentSwitcher> {:else}
{:else} <ContentSwitcher
<ContentSwitcher bind:selectedIndex
bind:selectedIndex on:change={({ detail }) => {
on:change={({ detail }) => { console.log('on:change', detail);
console.log('on:change', detail); }}>
}}> <Switch {...$$props} text="First section" />
<Switch {...$$props} text="First section" /> <Switch {...$$props} text="Second section" />
<Switch {...$$props} text="Second section" /> <Switch {...$$props}>
<Switch {...$$props}> <div style="display: flex; align-items:center;">
<div style="display: flex; align-items:center;"> <Add16 style="margin-right: .25rem;" />
<Add16 style="margin-right: .25rem;" /> Third section
Third section </div>
</div> </Switch>
</Switch> </ContentSwitcher>
</ContentSwitcher> <div
<div style="margin-top: 1.5rem"
style="margin-top: 1.5rem" on:click={() => {
on:click={() => { selectedIndex = 1;
selectedIndex = 1; }}>
}}> Programmatically set to second index
Programmatically set to second index </div>
</div> {/if}
{/if}
</Layout>

19
src/components/CopyButton/CopyButton.Story.svelte
View file

@ -1,15 +1,12 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import CopyButton from "./CopyButton.svelte"; import CopyButton from "./CopyButton.svelte";
</script> </script>
<Layout> <CopyButton
<CopyButton {...$$props}
{...$$props} on:click={() => {
on:click={() => { console.log('click');
console.log('click'); }}
}} on:animationend={e => {
on:animationend={e => { console.log('animation end', e.animationName);
console.log('animation end', e.animationName); }} />
}} />
</Layout>

143
src/components/DataTable/DataTable.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import DataTable from "./DataTable.svelte"; import DataTable from "./DataTable.svelte";
import Table from "./Table.svelte"; import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte"; import TableBody from "./TableBody.svelte";
@ -78,77 +77,75 @@
$: sortable = true; $: sortable = true;
</script> </script>
<Layout> {#if story === 'composed'}
{#if story === 'composed'} <DataTable {...$$props} {rows} {headers} let:props>
<DataTable {...$$props} {rows} {headers} let:props> <TableContainer
<TableContainer title="DataTable"
title="DataTable" description="With default options"
description="With default options" {...props.getTableContainerProps()}>
{...props.getTableContainerProps()}> <Table {...props.getTableProps()}>
<Table {...props.getTableProps()}> <TableHead>
<TableHead> <TableRow>
<TableRow> {#each props.headers as header, i (header.key)}
{#each props.headers as header, i (header.key)} <TableHeader {...props.getHeaderProps({ header })}>
<TableHeader {...props.getHeaderProps({ header })}> {header.header}
{header.header} </TableHeader>
</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} {/each}
</TableRow> </TableRow>
</TableHead> {/each}
<TableBody> </TableBody>
{#each props.rows as row, i} </Table>
<TableRow {...props.getRowProps({ row })}> </TableContainer>
{#each row.cells as cell, j} </DataTable>
<TableCell>{cell.value}</TableCell> {:else if story === 'sortable'}
{/each} <DataTable
</TableRow> bind:sortable
{/each} title={$$props.title}
</TableBody> description={$$props.description}
</Table> zebra={$$props.zebra}
</TableContainer> size={$$props.size}
</DataTable> stickyHeader={$$props.stickyHeader}
{:else if story === 'sortable'} on:click={({ detail }) => {
<DataTable console.log('on:click', detail);
bind:sortable }}
title={$$props.title} on:click:header={({ detail }) => {
description={$$props.description} console.log('on:click:header', detail);
zebra={$$props.zebra} }}
size={$$props.size} on:click:row={({ detail }) => {
stickyHeader={$$props.stickyHeader} console.log('on:click:row', detail);
on:click={({ detail }) => { }}
console.log('on:click', detail); on:click:cell={({ detail }) => {
}} console.log('on:click:cell', detail);
on:click:header={({ detail }) => { }}
console.log('on:click:header', detail); {rows}
}} {headers} />
on:click:row={({ detail }) => { {:else}
console.log('on:click:row', detail); <DataTable
}} title={$$props.title}
on:click:cell={({ detail }) => { description={$$props.description}
console.log('on:click:cell', detail); zebra={$$props.zebra}
}} size={$$props.size}
{rows} stickyHeader={$$props.stickyHeader}
{headers} /> on:click={({ detail }) => {
{:else} console.log('on:click', detail);
<DataTable }}
title={$$props.title} on:click:header={({ detail }) => {
description={$$props.description} console.log('on:click:header', detail);
zebra={$$props.zebra} }}
size={$$props.size} on:click:row={({ detail }) => {
stickyHeader={$$props.stickyHeader} console.log('on:click:row', detail);
on:click={({ detail }) => { }}
console.log('on:click', detail); on:click:cell={({ detail }) => {
}} console.log('on:click:cell', detail);
on:click:header={({ detail }) => { }}
console.log('on:click:header', detail); {rows}
}} {headers} />
on:click:row={({ detail }) => { {/if}
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{/if}
</Layout>

9
src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte
View file

@ -1,10 +1,7 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import DataTableSkeleton from "./DataTableSkeleton.svelte"; import DataTableSkeleton from "./DataTableSkeleton.svelte";
</script> </script>
<Layout> <div style="width: 800px">
<div style="width: 800px"> <DataTableSkeleton {...$$props} />
<DataTableSkeleton {...$$props} /> </div>
</div>
</Layout>

92
src/components/DatePicker/DatePicker.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import DatePicker from "./DatePicker.svelte"; import DatePicker from "./DatePicker.svelte";
import DatePickerInput from "./DatePickerInput.svelte"; import DatePickerInput from "./DatePickerInput.svelte";
import DatePickerSkeleton from "./DatePicker.Skeleton.svelte"; import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
@ -10,56 +9,53 @@
$: value = ""; $: value = "";
</script> </script>
<Layout> {#if story === 'skeleton'}
<DatePickerSkeleton range />
{#if story === 'skeleton'} {:else if story === 'single'}
<DatePickerSkeleton range /> <div>
{: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}
<DatePicker <DatePicker
{...$$props.datePicker} {...$$props.datePicker}
bind:datePickerType
bind:value bind:value
datePickerType="single"
on:change={({ detail }) => { 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> </DatePicker>
{/if} <button
</Layout> 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}

60
src/components/Dropdown/Dropdown.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import Dropdown from "./Dropdown.svelte"; import Dropdown from "./Dropdown.svelte";
import DropdownSkeleton from "./Dropdown.Skeleton.svelte"; import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
@ -15,34 +14,31 @@
$: selectedIndex = -1; $: selectedIndex = -1;
</script> </script>
<Layout> {#if story === 'skeleton'}
<div style="width: 300px">
{#if story === 'skeleton'} <DropdownSkeleton />
<div style="width: 300px"> &nbsp;
<DropdownSkeleton /> <DropdownSkeleton inline />
&nbsp; </div>
<DropdownSkeleton inline /> {:else}
</div> <p>Currently, this component does not support items as slots.</p>
{:else} <p>
<p>Currently, this component does not support items as slots.</p> <code>items</code>
<p> must be an array of objects; mandatory fields are `id` and `text`.
<code>items</code> </p>
must be an array of objects; mandatory fields are `id` and `text`. <pre style="margin-top: 1rem;">
</p> <code>{'items = Array<{ id: string; text: string; }>'}</code>
<pre style="margin-top: 1rem;"> </pre>
<code>{'items = Array<{ id: string; text: string; }>'}</code> <div style="margin-top: 2rem; margin-bottom: 2rem;">
</pre> <Button
<div style="margin-top: 2rem; margin-bottom: 2rem;"> size="small"
<Button on:click={() => {
size="small" selectedIndex = selectedIndex > -1 ? -1 : 1;
on:click={() => { }}>
selectedIndex = selectedIndex > -1 ? -1 : 1; {selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
}}> </Button>
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"} </div>
</Button> <div style="width: 300px">
</div> <Dropdown {...$$props} bind:selectedIndex {items} />
<div style="width: 300px"> </div>
<Dropdown {...$$props} bind:selectedIndex {items} /> {/if}
</div>
{/if}
</Layout>

85
src/components/FileUploader/FileUploader.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import FileUploader from "./FileUploader.svelte"; import FileUploader from "./FileUploader.svelte";
import FileUploaderButton from "./FileUploaderButton.svelte"; import FileUploaderButton from "./FileUploaderButton.svelte";
@ -14,50 +13,48 @@
$: disabled = files.length === 0; $: disabled = files.length === 0;
</script> </script>
<Layout> <div>
<div> {#if story === 'button'}
{#if story === 'button'} <FileUploaderButton {...$$props} />
<FileUploaderButton {...$$props} /> {:else if story === 'drop container'}
{:else if story === 'drop container'} <FileUploaderDropContainer
<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} {...$$props}
bind:files
on:add={({ detail }) => { on:add={({ detail }) => {
console.log(detail); console.log('add', detail);
}} />
{:else if story === 'item'}
<FileUploaderItem
{...$$props}
on:delete={({ detail }) => {
console.log(detail);
}} }}
on:click={() => { on:remove={({ detail }) => {
console.log('click'); console.log('remove', detail);
}} /> }} />
{:else if story === 'uploader'} <Button
<div class="bx--file__container"> kind="secondary"
<FileUploader size="small"
bind:this={fileUploader} style="margin-top: 1rem"
{...$$props} {disabled}
bind:files on:click={fileUploader.clearFiles}>
on:add={({ detail }) => { Clear File{files.length === 1 ? '' : 's'}
console.log('add', detail); </Button>
}} </div>
on:remove={({ detail }) => { {:else if story === 'skeleton'}
console.log('remove', detail); <div style="width: 500px">
}} /> <FileUploaderSkeleton />
<Button </div>
kind="secondary" {/if}
size="small" </div>
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>

173
src/components/Form/Form.Story.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import { Checkbox } from "../Checkbox"; import { Checkbox } from "../Checkbox";
import { FormGroup } from "../FormGroup"; import { FormGroup } from "../FormGroup";
import { FileUploader } from "../FileUploader"; import { FileUploader } from "../FileUploader";
@ -15,92 +14,86 @@
import Form from "./Form.svelte"; import Form from "./Form.svelte";
</script> </script>
<Layout> <Form
<Form on:submit={event => {
on:submit={event => { console.log('on:submit', event);
console.log('on:submit', event); }}>
}}> <FormGroup {...$$props}>
<FormGroup {...$$props}> <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked /> <Checkbox id="checkbox-1" labelText="Checkbox Label" />
<Checkbox id="checkbox-1" labelText="Checkbox Label" /> <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled /> </FormGroup>
</FormGroup> <NumberInput
<NumberInput id="number-input-1"
id="number-input-1" label="Number Input"
label="Number Input" min={0}
min={0} max={100}
max={100} value={50}
value={50} step={10} />
step={10} /> <FormGroup legendText="Toggle heading">
<FormGroup legendText="Toggle heading"> <Toggle id="toggle-1" />
<Toggle id="toggle-1" /> <Toggle id="toggle-2" disabled />
<Toggle id="toggle-2" disabled /> </FormGroup>
</FormGroup> <FormGroup legendText="File Uploader">
<FormGroup legendText="File Uploader"> <FileUploader
<FileUploader id="file-1"
id="file-1" buttonLabel="Add files"
buttonLabel="Add files" labelDescription="Choose Files..." />
labelDescription="Choose Files..." /> </FormGroup>
</FormGroup> <FormGroup legendText="Radio Button heading">
<FormGroup legendText="Radio Button heading"> <RadioButtonGroup
<RadioButtonGroup name="radio-button-group"
name="radio-button-group" defaultSelected="default-selected">
defaultSelected="default-selected"> <RadioButton
<RadioButton id="radio-1"
id="radio-1" value="standard"
value="standard" labelText="Standard Radio Button" />
labelText="Standard Radio Button" /> <RadioButton
<RadioButton id="radio-2"
id="radio-2" value="default-selected"
value="default-selected" labelText="Default Selected Radio Button" />
labelText="Default Selected Radio Button" /> <RadioButton
<RadioButton id="radio-3"
id="radio-3" value="blue"
value="blue" labelText="Standard Radio Button" />
labelText="Standard Radio Button" /> <RadioButton
<RadioButton id="radio-4"
id="radio-4" value="disabled"
value="disabled" labelText="Disabled Radio Button"
labelText="Disabled Radio Button" disabled />
disabled /> </RadioButtonGroup>
</RadioButtonGroup> </FormGroup>
</FormGroup> <FormGroup legendText="Search">
<FormGroup legendText="Search"> <Search id="search-1" labelText="Search" placeholder="Search" />
<Search id="search-1" labelText="Search" placeholder="Search" /> </FormGroup>
</FormGroup> <Select id="select-1" defaultValue="placeholder-item">
<Select id="select-1" defaultValue="placeholder-item"> <SelectItem
<SelectItem disabled
disabled hidden
hidden value="placeholder-item"
value="placeholder-item" text="Choose an option" />
text="Choose an option" /> <SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-1" text="Option 1" /> <SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-2" text="Option 2" /> <SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-3" text="Option 3" /> </Select>
</Select> <TextInput
<TextInput id="text-input-1"
id="text-input-1" labelText="Text Input label"
labelText="Text Input label" placeholder="Placeholder text" />
placeholder="Placeholder text" /> <TextInput id="text-input-2" type="password" labelText="Password" required />
<TextInput <TextInput
id="text-input-2" id="text-input-3"
type="password" type="password"
labelText="Password" labelText="Password"
required /> invalidText="Your password must be at least 6 characters as well as contain
<TextInput at least one uppercase, one lowercase, and one number."
id="text-input-3" required
type="password" invalid />
labelText="Password" <TextArea
invalidText="Your password must be at least 6 characters as well as id="text-area"
contain at least one uppercase, one lowercase, and one number." labelText="Text Area label"
required placeholder="Placeholder text"
invalid /> rows={4}
<TextArea cols={50} />
id="text-area" <Button type="submit">Submit</Button>
labelText="Text Area label" </Form>
placeholder="Placeholder text"
rows={4}
cols={50} />
<Button type="submit">Submit</Button>
</Form>
</Layout>

9
src/components/FormItem/FormItem.Story.svelte
View file

@ -1,11 +1,8 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import { NumberInput } from "../NumberInput"; import { NumberInput } from "../NumberInput";
import FormItem from "./FormItem.svelte"; import FormItem from "./FormItem.svelte";
</script> </script>
<Layout> <FormItem>
<FormItem> <NumberInput id="number-input-1" />
<NumberInput id="number-input-1" /> </FormItem>
</FormItem>
</Layout>

17
src/components/FormLabel/FormLabel.Story.svelte
View file

@ -1,17 +1,14 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Tooltip } from "../Tooltip"; import { Tooltip } from "../Tooltip";
import FormLabel from "./FormLabel.svelte"; import FormLabel from "./FormLabel.svelte";
</script> </script>
<Layout> {#if story === 'tooltip'}
{#if story === 'tooltip'} <FormLabel>
<FormLabel> <Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip> </FormLabel>
</FormLabel> {:else}
{:else} <FormLabel>Label</FormLabel>
<FormLabel>Label</FormLabel> {/if}
{/if}
</Layout>

20
src/components/Icon/Icon.Story.svelte
View file

@ -4,20 +4,18 @@
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16"; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20"; import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
import Add24 from "carbon-icons-svelte/lib/Add24"; import Add24 from "carbon-icons-svelte/lib/Add24";
import Layout from "../../internal/ui/Layout.svelte";
import Icon from "./Icon.svelte"; import Icon from "./Icon.svelte";
import IconSkeleton from "./Icon.Skeleton.svelte"; import IconSkeleton from "./Icon.Skeleton.svelte";
const icons = { ChevronDown16, ArrowLeft20, Add24 }; const icons = { ChevronDown16, ArrowLeft20, Add24 };
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <div>
<div> <IconSkeleton size={16} style="margin: 2rem;" />
<IconSkeleton size={16} style="margin: 2rem;" /> <IconSkeleton size={32} style="margin: 2rem" />
<IconSkeleton size={32} style="margin: 2rem" /> </div>
</div> {:else}
{:else} <Icon {...$$props} render={icons[$$props.icon]} />
<Icon {...$$props} render={icons[$$props.icon]} /> {/if}
{/if}
</Layout>

35
src/components/InlineLoading/InlineLoading.Story.svelte
View file

@ -5,7 +5,6 @@
export let description = undefined; export let description = undefined;
export let successDelay = undefined; export let successDelay = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import InlineLoading from "./InlineLoading.svelte"; import InlineLoading from "./InlineLoading.svelte";
@ -36,21 +35,19 @@
$: disabled = isSubmitting || success; $: disabled = isSubmitting || success;
</script> </script>
<Layout> {#if story === 'ux-example'}
{#if story === 'ux-example'} <div style="display: flex; width: 300px">
<div style="display: flex; width: 300px"> <Button kind="secondary" {disabled}>Cancel</Button>
<Button kind="secondary" {disabled}>Cancel</Button> {#if disabled}
{#if disabled} <InlineLoading
<InlineLoading style="margin-left: 1rem;"
style="margin-left: 1rem;" description={loadingDescription}
description={loadingDescription} status={success ? 'finished' : 'active'}
status={success ? 'finished' : 'active'} aria-live={ariaLive} />
aria-live={ariaLive} /> {:else}
{:else} <Button on:click={handleSubmit}>Submit</Button>
<Button on:click={handleSubmit}>Submit</Button> {/if}
{/if} </div>
</div> {:else}
{:else} <InlineLoading {...props} />
<InlineLoading {...props} /> {/if}
{/if}
</Layout>

24
src/components/InlineLoading/InlineLoading.test.js
View file

@ -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();
});

9
src/components/Link/Link.Story.svelte
View file

@ -1,13 +1,10 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import Link from "./Link.svelte"; import Link from "./Link.svelte";
$: ref = null; $: ref = null;
$: ref && console.log(ref); $: ref && console.log(ref);
</script> </script>
<Layout> <div>
<div> <Link {...$$props} bind:ref>Link</Link>
<Link {...$$props} bind:ref>Link</Link> </div>
</div>
</Layout>

23
src/components/Link/Link.test.js
View file

@ -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");
});

5
src/components/Loading/Loading.Story.svelte
View file

@ -1,8 +1,5 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import Loading from "./Loading.svelte"; import Loading from "./Loading.svelte";
</script> </script>
<Layout> <Loading {...$$props} />
<Loading {...$$props} />
</Layout>

24
src/components/Loading/Loading.test.js
View file

@ -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"
);
});

159
src/components/Modal/Modal.Story.svelte
View file

@ -1,91 +1,88 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import Modal from "./Modal.svelte"; import Modal from "./Modal.svelte";
let open = $$props.open; let open = $$props.open;
</script> </script>
<Layout> <div>
<div> <Button
<Button on:click={() => {
on:click={() => { open = true;
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');
}}> }}>
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> <p>
This component supports two-way binding by default. Please see Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
ComposedModal for piecemeal functionality. 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>
{#if $$props.hasScrollingContent} <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
accumsan augue. Phasellus consequat augue vitae tellus tincidunt Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. consectetur non risus eu rutrum.{' '}
Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
accumsan augue. Phasellus consequat augue vitae tellus tincidunt Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. consectetur non risus eu rutrum.{' '}
Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <h3>Lorem ipsum</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
Quisque consectetur non risus eu rutrum.{' '} consectetur non risus eu rutrum.{' '}
</p> </p>
<h3>Lorem ipsum</h3> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
accumsan augue. Phasellus consequat augue vitae tellus tincidunt Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. consectetur non risus eu rutrum.{' '}
Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
accumsan augue. Phasellus consequat augue vitae tellus tincidunt Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. consectetur non risus eu rutrum.{' '}
Quisque consectetur non risus eu rutrum.{' '} </p>
</p> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
accumsan augue. Phasellus consequat augue vitae tellus tincidunt Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. consectetur non risus eu rutrum.{' '}
Quisque consectetur non risus eu rutrum.{' '} </p>
</p> {/if}
<p> </Modal>
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>

41
src/components/MultiSelect/MultiSelect.Story.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button"; import { Button } from "../Button";
import MultiSelect from "./MultiSelect.svelte"; import MultiSelect from "./MultiSelect.svelte";
@ -18,24 +17,22 @@
]; ];
</script> </script>
<Layout> <div>
<div> <Button
<Button size="small"
size="small" on:click={() => {
on:click={() => { selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id]; }}>
}}> {selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items </Button>
</Button> </div>
</div> <div style="width: 300px; margin-top: 2rem;">
<div style="width: 300px; margin-top: 2rem;"> <MultiSelect
<MultiSelect {...$$props}
{...$$props} id="multi-select-id"
id="multi-select-id" name="multi-select-name"
name="multi-select-name" placeholder="Filter..."
placeholder="Filter..." bind:selectedIds
bind:selectedIds bind:items
bind:items bind:value />
bind:value /> </div>
</div>
</Layout>

39
src/components/Notification/Notification.Story.svelte
View file

@ -1,29 +1,26 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import InlineNotification from "./InlineNotification.svelte"; import InlineNotification from "./InlineNotification.svelte";
import NotificationActionButton from "./NotificationActionButton.svelte"; import NotificationActionButton from "./NotificationActionButton.svelte";
import ToastNotification from "./ToastNotification.svelte"; import ToastNotification from "./ToastNotification.svelte";
</script> </script>
<Layout> {#if story === 'inline'}
{#if story === 'inline'} <InlineNotification
<InlineNotification {...$$props}
{...$$props} on:close={() => {
on:close={() => { console.log('on:close');
console.log('on:close'); }}>
}}> <div slot="actions">
<div slot="actions"> <NotificationActionButton>{$$props.action}</NotificationActionButton>
<NotificationActionButton>{$$props.action}</NotificationActionButton> </div>
</div> </InlineNotification>
</InlineNotification> {:else if story === 'toast'}
{:else if story === 'toast'} <ToastNotification
<ToastNotification {...$$props}
{...$$props} on:close={() => {
on:close={() => { console.log('on:close');
console.log('on:close'); }}
}} style="min-width: 30rem; margin-bottom: .5rem" />
style="min-width: 30rem; margin-bottom: .5rem" /> {/if}
{/if}
</Layout>

27
src/components/NumberInput/NumberInput.Story.svelte
View file

@ -1,24 +1,21 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import NumberInput from "./NumberInput.svelte"; import NumberInput from "./NumberInput.svelte";
import NumberInputSkeleton from "./NumberInput.Skeleton.svelte"; import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
$: value = $$props.value; $: value = $$props.value;
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <NumberInputSkeleton {...$$props} />
<NumberInputSkeleton {...$$props} /> {:else}
{:else} <NumberInput
<NumberInput {...$$props}
{...$$props} id="number-input-id"
id="number-input-id" name="number-input-id"
name="number-input-id" bind:value
bind:value on:change={({ detail }) => {
on:change={({ detail }) => { console.log('on:change', detail);
console.log('on:change', detail); }} />
}} /> {/if}
{/if}
</Layout>

57
src/components/OrderedList/OrderedList.Story.svelte
View file

@ -1,37 +1,34 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { ListItem } from "../ListItem"; import { ListItem } from "../ListItem";
import OrderedList from "./OrderedList.svelte"; import OrderedList from "./OrderedList.svelte";
</script> </script>
<Layout> <div>
<div> {#if story === 'nested'}
{#if story === 'nested'} <OrderedList>
<OrderedList> <ListItem>
<ListItem> Unordered List level 1
Unordered List level 1 <OrderedList nested>
<OrderedList nested> <ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem> <ListItem>
<ListItem> Ordered List level 2
Ordered List level 2 <OrderedList nested>
<OrderedList nested> <ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem> <ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem> </OrderedList>
</OrderedList> </ListItem>
</ListItem> </OrderedList>
</OrderedList> </ListItem>
</ListItem> <ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem> <ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem> </OrderedList>
</OrderedList> {:else}
{:else} <OrderedList>
<OrderedList> <ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem> <ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem> <ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem> </OrderedList>
</OrderedList> {/if}
{/if} </div>
</div>
</Layout>

154
src/components/OverflowMenu/OverflowMenu.Story.svelte
View file

@ -1,88 +1,84 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import OverflowMenu from "./OverflowMenu.svelte"; import OverflowMenu from "./OverflowMenu.svelte";
import OverflowMenuItem from "./OverflowMenuItem.svelte"; import OverflowMenuItem from "./OverflowMenuItem.svelte";
$: primaryFocus = true; $: primaryFocus = true;
</script> </script>
<Layout> <div style="padding-left: 6rem">
<div style="padding-left: 6rem"> {#if story === 'links'}
{#if story === 'links'} <OverflowMenu
<OverflowMenu {...$$props.menu}
{...$$props.menu} on:close={({ detail }) => {
on:close={({ detail }) => { console.log('close', detail);
console.log('close', detail); }}>
}}> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} href="https://ibm.com"
href="https://ibm.com" text="Option 1"
text="Option 1" bind:primaryFocus />
bind:primaryFocus /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} href="https://ibm.com"
href="https://ibm.com" text="Option 2 is an example of a really long string and how we
text="Option 2 is an example of a really long string and how we recommend handling this"
recommend handling this" requireTitle />
requireTitle /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} href="https://ibm.com"
href="https://ibm.com" text="Option 3"
text="Option 3" disabled />
disabled /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} href="https://ibm.com"
href="https://ibm.com" text="Option 4" />
text="Option 4" /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} href="https://ibm.com"
href="https://ibm.com" text="Danger option"
text="Danger option" danger />
danger /> </OverflowMenu>
</OverflowMenu> {:else if story === 'trigger'}
{:else if story === 'trigger'} <OverflowMenu
<OverflowMenu {...$$props.menu}
{...$$props.menu} on:close={({ detail }) => {
on:close={({ detail }) => { console.log('close', detail);
console.log('close', detail); }}
}} style="width: auto">
style="width: auto"> <div slot="menu" style="padding: 0 1rem">Menu</div>
<div slot="menu" style="padding: 0 1rem">Menu</div> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} text="Option 1"
text="Option 1" bind:primaryFocus />
bind:primaryFocus /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} text="Option 2 is an example of a really long string and how we
text="Option 2 is an example of a really long string and how we recommend handling this"
recommend handling this" requireTitle />
requireTitle /> <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled /> <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" /> <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger /> </OverflowMenu>
</OverflowMenu> {:else}
{:else} <OverflowMenu
<OverflowMenu {...$$props.menu}
{...$$props.menu} on:close={({ detail }) => {
on:close={({ detail }) => { console.log('close', detail);
console.log('close', detail); }}>
}}> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} text="Option 1"
text="Option 1" bind:primaryFocus />
bind:primaryFocus /> <OverflowMenuItem
<OverflowMenuItem {...$$props.menuItem}
{...$$props.menuItem} text="Option 2 is an example of a really long string and how we
text="Option 2 is an example of a really long string and how we recommend handling this"
recommend handling this" requireTitle />
requireTitle /> <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled /> <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" /> <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger /> </OverflowMenu>
</OverflowMenu> {/if}
{/if} </div>
</div>
</Layout>

23
src/components/Pagination/Pagination.Story.svelte
View file

@ -1,20 +1,17 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Pagination from "./Pagination.svelte"; import Pagination from "./Pagination.svelte";
import PaginationSkeleton from "./Pagination.Skeleton.svelte"; import PaginationSkeleton from "./Pagination.Skeleton.svelte";
</script> </script>
<Layout> <div style="width: 800px;">
<div style="width: 800px;"> {#if story === 'multiple'}
{#if story === 'multiple'} <Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination> <Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination> {:else if story === 'skeleton'}
{:else if story === 'skeleton'} <PaginationSkeleton />
<PaginationSkeleton /> {:else}
{:else} <Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination> {/if}
{/if} </div>
</div>
</Layout>

85
src/components/ProgressIndicator/ProgressIndicator.Story.svelte
View file

@ -1,53 +1,48 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ProgressIndicator from "./ProgressIndicator.svelte"; import ProgressIndicator from "./ProgressIndicator.svelte";
import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte"; import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
import ProgressStep from "./ProgressStep.svelte"; import ProgressStep from "./ProgressStep.svelte";
</script> </script>
<Layout> <div>
<div> {#if story === 'skeleton'}
{#if story === 'skeleton'} <ProgressIndicatorSkeleton {...$$props} />
<ProgressIndicatorSkeleton {...$$props} /> {:else if story === 'interactive'}
{:else if story === 'interactive'} <ProgressIndicator {...$$props}>
<ProgressIndicator {...$$props}> <ProgressStep description="Step 1: Register a onChange event" let:props>
<ProgressStep description="Step 1: Register a onChange event" let:props> <div {...props}>Click me</div>
<div {...props}>Click me</div> </ProgressStep>
</ProgressStep> <ProgressStep
<ProgressStep label="Really long label"
label="Really long label" description="The progress indicator will listen for clicks on the steps" />
description="The progress indicator will listen for clicks on the <ProgressStep
steps" /> label="Tooltip and really long label"
<ProgressStep description="The progress indicator will listen for clicks on the steps" />
label="Tooltip and really long label" </ProgressIndicator>
description="The progress indicator will listen for clicks on the {:else}
steps" /> <ProgressIndicator {...$$props}>
</ProgressIndicator> <ProgressStep
{:else} label="First step"
<ProgressIndicator {...$$props}> description="Step 1: Getting started with Carbon Design System"
<ProgressStep secondaryLabel="Optional label" />
label="First step" <ProgressStep
description="Step 1: Getting started with Carbon Design System" label="Second step with tooltip"
secondaryLabel="Optional label" /> description="Step 2: Getting started with Carbon Design System"
<ProgressStep secondaryLabel="Optional label" />
label="Second step with tooltip" <ProgressStep
description="Step 2: Getting started with Carbon Design System" label="Third step with tooltip"
secondaryLabel="Optional label" /> description="Step 3: Getting started with Carbon Design System" />
<ProgressStep <ProgressStep
label="Third step with tooltip" label="Fourth step"
description="Step 3: Getting started with Carbon Design System" /> description="Step 4: Getting started with Carbon Design System"
<ProgressStep secondaryLabel="Example invalid step"
label="Fourth step" invalid />
description="Step 4: Getting started with Carbon Design System" <ProgressStep
secondaryLabel="Example invalid step" label="Fifth step"
invalid /> description="Step 5: Getting started with Carbon Design System"
<ProgressStep disabled />
label="Fifth step" </ProgressIndicator>
description="Step 5: Getting started with Carbon Design System" {/if}
disabled /> </div>
</ProgressIndicator>
{/if}
</div>
</Layout>

13
src/components/RadioButton/RadioButton.Story.svelte
View file

@ -1,17 +1,14 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import RadioButton from "./RadioButton.svelte"; import RadioButton from "./RadioButton.svelte";
import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte"; import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
$: checked = false; $: checked = false;
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <RadioButtonSkeleton />
<RadioButtonSkeleton /> {:else}
{:else} <RadioButton {...$$props} bind:checked id="radio-1" />
<RadioButton {...$$props} bind:checked id="radio-1" /> {/if}
{/if}
</Layout>

17
src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import RadioButtonGroup from "./RadioButtonGroup.svelte"; import RadioButtonGroup from "./RadioButtonGroup.svelte";
import { RadioButton } from "../RadioButton"; import { RadioButton } from "../RadioButton";
import { FormGroup } from "../FormGroup"; import { FormGroup } from "../FormGroup";
@ -7,12 +6,10 @@
$: selected = "default-selected"; $: selected = "default-selected";
</script> </script>
<Layout> <FormGroup legendText="Radio Button heading">
<FormGroup legendText="Radio Button heading"> <RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected> <RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="standard" id="radio-1" /> <RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" /> <RadioButton {...$$props.radio} value="disabled" id="radio-3" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" /> </RadioButtonGroup>
</RadioButtonGroup> </FormGroup>
</FormGroup>
</Layout>

17
src/components/Search/Search.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Search from "./Search.svelte"; import Search from "./Search.svelte";
import SearchSkeleton from "./Search.Skeleton.svelte"; import SearchSkeleton from "./Search.Skeleton.svelte";
@ -16,12 +15,10 @@
} }
</script> </script>
<Layout> <div>
<div> {#if story === 'skeleton'}
{#if story === 'skeleton'} <SearchSkeleton />
<SearchSkeleton /> {:else}
{:else} <Search {...$$props} bind:value />
<Search {...$$props} bind:value /> {/if}
{/if} </div>
</div>
</Layout>

49
src/components/Select/Select.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Select from "./Select.svelte"; import Select from "./Select.svelte";
import SelectItem from "./SelectItem.svelte"; import SelectItem from "./SelectItem.svelte";
import SelectSkeleton from "./Select.Skeleton.svelte"; import SelectSkeleton from "./Select.Skeleton.svelte";
@ -11,30 +10,24 @@
$: console.log(selected); $: console.log(selected);
</script> </script>
<Layout> <div>
<div> {#if story === 'skeleton'}
{#if story === 'skeleton'} <SelectSkeleton {...$$props} />
<SelectSkeleton {...$$props} /> {:else}
{:else} <Select {...$$props.select} id="select-id" name="select-name" bind:selected>
<Select <SelectItem
{...$$props.select} value="placeholder-item"
id="select-id" text="Choose an option"
name="select-name" disabled
bind:selected> hidden />
<SelectItem <SelectItemGroup {...$$props.group} label="Category 1">
value="placeholder-item" <SelectItem value="option-1" text="Option 1" />
text="Choose an option" <SelectItem value="option-2" text="Option 2" />
disabled </SelectItemGroup>
hidden /> <SelectItemGroup {...$$props.group} label="Category 2">
<SelectItemGroup {...$$props.group} label="Category 1"> <SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-1" text="Option 1" /> <SelectItem value="option-4" text="Option 4" />
<SelectItem value="option-2" text="Option 2" /> </SelectItemGroup>
</SelectItemGroup> </Select>
<SelectItemGroup {...$$props.group} label="Category 2"> {/if}
<SelectItem value="option-3" text="Option 3" /> </div>
<SelectItem value="option-4" text="Option 4" />
</SelectItemGroup>
</Select>
{/if}
</div>
</Layout>

9
src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte"; import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte";
</script> </script>
@ -20,8 +19,6 @@
} }
</style> </style>
<Layout> <div style="height: 250px; width: 250px;">
<div style="height: 250px; width: 250px;"> <SkeletonPlaceholder {...$$props} />
<SkeletonPlaceholder {...$$props} /> </div>
</div>
</Layout>

9
src/components/SkeletonText/SkeletonText.Story.svelte
View file

@ -1,10 +1,7 @@
<script> <script>
import Layout from "../../internal/ui/Layout.svelte";
import SkeletonText from "./SkeletonText.svelte"; import SkeletonText from "./SkeletonText.svelte";
</script> </script>
<Layout> <div style="width: 300px">
<div style="width: 300px"> <SkeletonText {...$$props} />
<SkeletonText {...$$props} /> </div>
</div>
</Layout>

25
src/components/Slider/Slider.Story.svelte
View file

@ -1,23 +1,20 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Slider from "./Slider.svelte"; import Slider from "./Slider.svelte";
import SliderSkeleton from "./Slider.Skeleton.svelte"; import SliderSkeleton from "./Slider.Skeleton.svelte";
$: value = 50; $: value = 50;
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <SliderSkeleton {...$$props} />
<SliderSkeleton {...$$props} /> {:else}
{:else} <Slider
<Slider {...$$props}
{...$$props} id="slider-id"
id="slider-id" bind:value
bind:value on:change={({ detail }) => {
on:change={({ detail }) => { console.log('on:change', detail);
console.log('on:change', detail); }} />
}} /> {/if}
{/if}
</Layout>

136
src/components/StructuredList/StructuredList.Story.svelte
View file

@ -2,7 +2,7 @@
export let story = undefined; export let story = undefined;
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Layout from "../../internal/ui/Layout.svelte";
import StructuredListBody from "./StructuredListBody.svelte"; import StructuredListBody from "./StructuredListBody.svelte";
import StructuredListCell from "./StructuredListCell.svelte"; import StructuredListCell from "./StructuredListCell.svelte";
import StructuredListHead from "./StructuredListHead.svelte"; import StructuredListHead from "./StructuredListHead.svelte";
@ -14,80 +14,78 @@
$: selected = "row-1-value"; $: selected = "row-1-value";
</script> </script>
<Layout> <div>
<div> {#if story === 'skeleton'}
{#if story === 'skeleton'} <div style="width: 800px">
<div style="width: 800px"> <StructuredListSkeleton />
<StructuredListSkeleton /> </div>
</div> {:else if story === 'selection'}
{:else if story === 'selection'} <StructuredList selection border bind:selected>
<StructuredList selection border bind:selected> <StructuredListHead>
<StructuredListHead> <StructuredListRow head>
<StructuredListRow head> <StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnA</StructuredListCell> <StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell> <StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell> <StructuredListCell head>{''}</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell> </StructuredListRow>
</StructuredListRow> </StructuredListHead>
</StructuredListHead> <StructuredListBody>
<StructuredListBody> {#each [0, 1, 2, 3] as item, i (item)}
{#each [0, 1, 2, 3] as item, i (item)} <StructuredListRow label for="row-{i}">
<StructuredListRow label for="row-{i}"> <StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</StructuredListCell> <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>
<StructuredListCell> <StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor. posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum. Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell> </StructuredListCell>
</StructuredListRow> <StructuredListInput
<StructuredListRow> id="row-{i}"
<StructuredListCell noWrap>Row 2</StructuredListCell> value="row-{i}-value"
<StructuredListCell>Row 2</StructuredListCell> title="row-{i}-title"
name="row-{i}-name" />
<StructuredListCell> <StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <CheckmarkFilled16
magna, finibus id tortor sed, aliquet bibendum augue. Aenean class="bx--structured-list-svg"
posuere sem vel euismod dignissim. Nulla ut cursus dolor. aria-label="select an option"
Pellentesque vulputate nisl a porttitor interdum. title="select an option" />
</StructuredListCell> </StructuredListCell>
</StructuredListRow> </StructuredListRow>
</StructuredListBody> {/each}
</StructuredList> </StructuredListBody>
{/if} </StructuredList>
</div> {:else}
</Layout> <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>

57
src/components/Tabs/Tabs.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Tab from "./Tab.svelte"; import Tab from "./Tab.svelte";
import TabContent from "./TabContent.svelte"; import TabContent from "./TabContent.svelte";
import Tabs from "./Tabs.svelte"; import Tabs from "./Tabs.svelte";
@ -12,32 +11,30 @@
$: selected = 0; $: selected = 0;
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <TabsSkeleton />
<TabsSkeleton /> {:else if story === 'container'}
{:else if story === 'container'} <Tabs {...tabsProps} type="container" bind:selected>
<Tabs {...tabsProps} type="container" bind:selected> <Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 1" /> <Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 2" /> <Tab {...tabProps} label="Tab label 3" />
<Tab {...tabProps} label="Tab label 3" /> <div slot="content">
<div slot="content"> <TabContent>Content 1</TabContent>
<TabContent>Content 1</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 3</TabContent>
<TabContent>Content 3</TabContent> </div>
</div> </Tabs>
</Tabs> {:else}
{:else} <Tabs {...tabsProps} bind:selected>
<Tabs {...tabsProps} bind:selected> <Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 1" /> <Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 2" /> <Tab {...tabProps} label="Tab label 3" disabled />
<Tab {...tabProps} label="Tab label 3" disabled /> <Tab {...tabProps} label="Tab label 4" />
<Tab {...tabProps} label="Tab label 4" /> <div slot="content">
<div slot="content"> <TabContent>Content 1</TabContent>
<TabContent>Content 1</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 3</TabContent>
<TabContent>Content 3</TabContent> <TabContent>Content 4</TabContent>
<TabContent>Content 4</TabContent> </div>
</div> </Tabs>
</Tabs> {/if}
{/if}
</Layout>

33
src/components/Tag/Tag.Story.svelte
View file

@ -5,25 +5,22 @@
export let story = undefined; export let story = undefined;
export let type = undefined; export let type = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Tag from "./Tag.svelte"; import Tag from "./Tag.svelte";
import TagSkeleton from "./Tag.Skeleton.svelte"; import TagSkeleton from "./Tag.Skeleton.svelte";
</script> </script>
<Layout> <div>
<div> {#if story === 'filter'}
{#if story === 'filter'} <Tag
<Tag {filter}
{filter} on:click={() => {
on:click={() => { console.log('click');
console.log('click'); }}>
}}> {slot}
{slot} </Tag>
</Tag> {:else if story === 'skeleton'}
{:else if story === 'skeleton'} <TagSkeleton />
<TagSkeleton /> {:else}
{:else} <Tag {disabled} {type} class="class">{slot}</Tag>
<Tag {disabled} {type} class="class">{slot}</Tag> {/if}
{/if} </div>
</div>
</Layout>

13
src/components/TextArea/TextArea.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import TextArea from "./TextArea.svelte"; import TextArea from "./TextArea.svelte";
import TextAreaSkeleton from "./TextArea.Skeleton.svelte"; import TextAreaSkeleton from "./TextArea.Skeleton.svelte";
@ -11,10 +10,8 @@
$: console.log("bound value:", value); $: console.log("bound value:", value);
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <TextAreaSkeleton {...$$props} />
<TextAreaSkeleton {...$$props} /> {:else}
{:else} <TextArea {...$$props} bind:value bind:ref />
<TextArea {...$$props} bind:value bind:ref /> {/if}
{/if}
</Layout>

77
src/components/TextInput/TextInput.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import PasswordInput from "./PasswordInput.svelte"; import PasswordInput from "./PasswordInput.svelte";
import TextInput from "./TextInput.svelte"; import TextInput from "./TextInput.svelte";
import TextInputSkeleton from "./TextInput.Skeleton.svelte"; import TextInputSkeleton from "./TextInput.Skeleton.svelte";
@ -12,42 +11,40 @@
$: console.log(ref); $: console.log(ref);
</script> </script>
<Layout> {#if story === 'skeleton'}
{#if story === 'skeleton'} <div
<div aria-label="loading text input"
aria-label="loading text input" aria-live="assertive"
aria-live="assertive" role="status"
role="status" tabindex="0">
tabindex="0"> <TextInputSkeleton />
<TextInputSkeleton /> <br />
<br /> <TextInputSkeleton hideLabel />
<TextInputSkeleton hideLabel /> </div>
</div> {:else if story === 'password-visibility'}
{:else if story === 'password-visibility'} <PasswordInput {...$$props} aria-level="" />
<PasswordInput {...$$props} aria-level="" /> {:else if story === 'controlled'}
{:else if story === 'controlled'} <PasswordInput {...$$props} {type} />
<PasswordInput {...$$props} {type} /> <div>
<div> <button
<button on:click={() => {
on:click={() => { type = 'text';
type = 'text'; }}>
}}> Show password
Show password </button>
</button> <button
<button on:click={() => {
on:click={() => { type = 'password';
type = 'password'; }}>
}}> Hide password
Hide password </button>
</button> </div>
</div> {:else}
{:else} <TextInput
<TextInput bind:ref
bind:ref {...$$props}
{...$$props} bind:value
bind:value on:change={() => {
on:change={() => { console.log('change');
console.log('change'); }} />
}} /> {/if}
{/if}
</Layout>

95
src/components/Tile/Tile.Story.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
export let story = undefined; export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ClickableTile from "./ClickableTile.svelte"; import ClickableTile from "./ClickableTile.svelte";
import ExpandableTile from "./ExpandableTile.svelte"; import ExpandableTile from "./ExpandableTile.svelte";
import RadioTile from "./RadioTile.svelte"; import RadioTile from "./RadioTile.svelte";
@ -19,53 +18,47 @@
$: selectedTile1 = false; $: selectedTile1 = false;
</script> </script>
<Layout> <div>
<div> {#if story === 'filter'}
{#if story === 'filter'} <Tile {...$$props} />
<Tile {...$$props} /> {:else if story === 'clickable'}
{:else if story === 'clickable'} <ClickableTile {...$$props}>Clickable Tile</ClickableTile>
<ClickableTile {...$$props}>Clickable Tile</ClickableTile> {:else if story === 'multi-select'}
{:else if story === 'multi-select'} <div role="group" aria-label="selectable tiles">
<div role="group" aria-label="selectable tiles"> <SelectableTile
<SelectableTile {...$$props}
{...$$props} id="tile-1"
id="tile-1" name="tiles"
name="tiles" bind:selected={selectedTile1}
bind:selected={selectedTile1} on:select={({ detail }) => {
on:select={({ detail }) => { console.log('on:select', detail);
console.log('on:select', detail); }}
}} on:deselect={({ detail }) => {
on:deselect={({ detail }) => { console.log('on:deselect', detail);
console.log('on:deselect', detail); }}>
}}> Multi-select Tile
Multi-select Tile </SelectableTile>
</SelectableTile> <SelectableTile {...$$props} id="tile-2" name="tiles">
<SelectableTile {...$$props} id="tile-2" name="tiles"> Multi-select Tile
Multi-select Tile </SelectableTile>
</SelectableTile> <SelectableTile {...$$props} id="tile-3" name="tiles">
<SelectableTile {...$$props} id="tile-3" name="tiles"> Multi-select Tile
Multi-select Tile </SelectableTile>
</SelectableTile> </div>
</div> {:else if story === 'selectable'}
{:else if story === 'selectable'} <TileGroup legend="Selectable Tile Group" bind:selected>
<TileGroup legend="Selectable Tile Group" bind:selected> {#each radioTiles as { value, id, labelText }, i (id)}
{#each radioTiles as { value, id, labelText }, i (id)} <RadioTile {...$$props} {value} {id} {labelText}>
<RadioTile {...$$props} {value} {id} {labelText}> Selectable Tile
Selectable Tile </RadioTile>
</RadioTile> {/each}
{/each} </TileGroup>
</TileGroup> {:else if story === 'expandable'}
{:else if story === 'expandable'} <ExpandableTile {...$$props}>
<ExpandableTile {...$$props}> <div slot="above" style="height: 200px">Above the fold content here</div>
<div slot="above" style="height: 200px"> <div slot="below" style="height: 400px">Below the fold content here</div>
Above the fold content here </ExpandableTile>
</div> {:else}
<div slot="below" style="height: 400px"> <Tile {...$$props}>Default Tile</Tile>
Below the fold content here {/if}
</div> </div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>
{/if}
</div>
</Layout>

Some files were not shown because too many files have changed in this diff Show more