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