diff --git a/.prettierignore b/.prettierignore index b923e073..1d5e73b4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,3 +8,4 @@ /**/client /**/build .storybook +*.svx \ No newline at end of file diff --git a/README.md b/README.md index 444524a1..63afafef 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,12 @@ > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system) +`carbon-components-svelte` is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. + +A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility. + +## [Documentation](https://carbon-components-svelte.mybluemix.net/) + ## Getting started Install `carbon-components-svelte` as a development dependency. diff --git a/docs/.cfignore b/docs/.cfignore index e1401415..572f1972 100644 --- a/docs/.cfignore +++ b/docs/.cfignore @@ -1,3 +1,3 @@ * !Staticfile -!public \ No newline at end of file +!dist \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore index 6ab1fc66..4d27172d 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -1,9 +1,3 @@ -.DS_Store -/public/ -/node_modules/ -/src/node_modules/@sapper/ -yarn-error.log -/cypress/screenshots/ -/cypress/fixtures/ -/__sapper__/ -static/style.css \ No newline at end of file +/node_modules +/dist +/.routify diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 17070bf7..00000000 --- a/docs/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# docs - -This application was scaffolded using the default webpack [Sapper](https://github.com/sveltejs/sapper) template. - -**Purpose** - -- Write integration/end-to-end tests using Cypress -- Serve as an alternative component development environment to Storybook -- Build components in a Server-side Rendering (SSR) environment - -## Getting Started - -`carbon-components-svelte` must be linked in order to reflect live updates during component development. - -In the root folder of this project, run the following: - -```sh -# carbon-components-svelte/ -yarn link -``` - -Then, in this folder, link the package and install the dependencies: - -```sh -cd docs - -# carbon-components-svelte/docs/ -yarn link "carbon-components-svelte" -yarn install -``` - -Before starting development, you will need to build the Carbon-themed CSS StyleSheet once. - -```sh -node scripts/carbon-theme -``` - -A file containing the four Carbon themes will be outputted to `static/style.css`. Do not check this file into source control. - -## Available Scripts - -### `yarn dev` - -Runs the Sapper app in development mode. - -### `yarn build` - -Builds the app for production (static export only). - -### `yarn test` - -Runs Cypress integration tests in a headless browser (i.e. CLI only). - -### `yarn:test:tdd` - -Runs Cypress tests in the Cypress GUI. This is helpful when authoring new tests. - -## Deploying to IBM Cloud - -Deploy to IBM Cloud using the Staticfile buildpack. - -### Log in - -Log in using the IBM Cloud CLI: - -```sh -ibmcloud login - -# or if using Single-Sign On (SSO): -ibmcloud login --sso -``` - -### Deploy - -Build and deploy the app: - -```sh -yarn build -ibmcloud target --cf -ibmcloud cf push -``` diff --git a/docs/Staticfile b/docs/Staticfile index 5a88aa0c..fdb9a387 100644 --- a/docs/Staticfile +++ b/docs/Staticfile @@ -1,3 +1,2 @@ -root: public -location_include: includes/*.conf +root: dist force_https: true \ No newline at end of file diff --git a/docs/cypress.json b/docs/cypress.json deleted file mode 100644 index 66d2b558..00000000 --- a/docs/cypress.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "baseUrl": "http://localhost:3000", - "video": false, - "defaultCommandTimeout": 20 -} diff --git a/docs/cypress/integration/Button.js b/docs/cypress/integration/Button.js deleted file mode 100644 index 03fb4fee..00000000 --- a/docs/cypress/integration/Button.js +++ /dev/null @@ -1,21 +0,0 @@ -describe("Button", () => { - beforeEach(() => { - cy.examples("Button"); - }); - - it("clicks", () => { - cy.get(".bx--btn--primary").first().as("btn").contains("Primary button"); - - cy.get("@btn").trigger("click"); - cy.get("@log").should("be.calledWith", "click"); - - cy.get("@btn").trigger("mouseover"); - cy.get("@log").should("be.calledWith", "mouseover"); - - cy.get("@btn").trigger("mouseenter"); - cy.get("@log").should("be.calledWith", "mouseenter"); - - cy.get("@btn").trigger("mouseleave"); - cy.get("@log").should("be.calledWith", "mouseleave"); - }); -}); diff --git a/docs/cypress/plugins/index.js b/docs/cypress/plugins/index.js deleted file mode 100644 index 8dd144a6..00000000 --- a/docs/cypress/plugins/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -module.exports = (on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config -}; diff --git a/docs/cypress/support/commands.js b/docs/cypress/support/commands.js deleted file mode 100644 index 163629b8..00000000 --- a/docs/cypress/support/commands.js +++ /dev/null @@ -1,7 +0,0 @@ -Cypress.Commands.add("examples", (component) => { - cy.visit(`/examples/${component}`, { - onBeforeLoad(win) { - cy.stub(win.console, "log").as("log"); - }, - }); -}); diff --git a/docs/cypress/support/index.js b/docs/cypress/support/index.js deleted file mode 100644 index f887c29a..00000000 --- a/docs/cypress/support/index.js +++ /dev/null @@ -1 +0,0 @@ -import "./commands"; diff --git a/docs/includes/header.conf b/docs/includes/header.conf deleted file mode 100644 index 09745592..00000000 --- a/docs/includes/header.conf +++ /dev/null @@ -1,5 +0,0 @@ -location ~* ((service-worker)\.js)$ { - add_header 'Cache-Control' 'no-store'; - expires off; - proxy_no_cache 1; -} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..98e9585d --- /dev/null +++ b/docs/index.html @@ -0,0 +1,13 @@ + + + + + + + Carbon Components Svelte + + +
+ + + diff --git a/docs/manifest.yml b/docs/manifest.yml index 2adc0bb4..7eec0187 100644 --- a/docs/manifest.yml +++ b/docs/manifest.yml @@ -1,7 +1,7 @@ --- applications: - - name: carbon-svelte - memory: 32M - disk_quota: 32M + - name: carbon-components-svelte + memory: 64M + disk_quota: 64M buildpacks: - https://github.com/cloudfoundry/staticfile-buildpack.git diff --git a/docs/package.json b/docs/package.json index aa2009cd..b2b9cb42 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,33 +1,43 @@ { "private": true, "scripts": { - "dev": "sapper dev", - "build": "shx rm -rf public && sapper export && shx mv __sapper__/export public", - "cy:run": "cypress run", - "cy:open": "cypress open", - "test": "run-p --race dev cy:run", - "test:tdd": "run-p --race dev cy:open" - }, - "dependencies": { - "polka": "next", - "sirv": "^1.0.1" + "dev": "run-p dev:*", + "dev:routify": "NODE_ENV=development routify run", + "dev:svite": "svite", + "build": "run-s build:*", + "build:routify": "routify run -b", + "build:svite": "svite build --assetsDir=assets", + "postbuild": "node scripts/postbuild", + "deploy": "npx gh-pages -d dist" }, "devDependencies": { - "autoprefixer": "^9.8.5", - "carbon-components": "^10.17.0", + "@sveltech/routify": "^1.9.9", "carbon-components-svelte": "../", "clipboard-copy": "^3.1.0", - "cypress": "^4.10.0", + "fs-extra": "^9.0.1", + "mdsvex": "^0.8.8", "node-sass": "^4.14.1", "npm-run-all": "^4.1.5", - "postcss": "^7.0.32", - "sapper": "^0.27.16", - "shx": "^0.3.2", - "svelte": "^3.24.0", - "svelte-loader": "^2.9.0", - "webpack": "^4.7.0" + "playwright": "^1.4.2", + "polka": "^0.5.2", + "posthtml": "^0.13.3", + "prettier": "^2.1.2", + "prettier-plugin-svelte": "^1.4.0", + "prism-svelte": "^0.4.7", + "prismjs": "^1.21.0", + "remark-slug": "^6.0.0", + "sirv": "^1.0.6", + "svelte": "3.29.0", + "svelte-hmr": "0.11.1", + "svelte-preprocess": "^4.3.2", + "svite": "0.7.2" }, - "resolutions": { - "**/lodash": ">=4.17.19 " + "routify": { + "routifyDir": ".routify", + "dynamicImports": true, + "extensions": [ + "svelte", + "svx" + ] } } diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico new file mode 100644 index 00000000..00b6609f Binary files /dev/null and b/docs/public/favicon.ico differ diff --git a/docs/scripts/carbon-theme.js b/docs/scripts/carbon-theme.js deleted file mode 100644 index b594c2ed..00000000 --- a/docs/scripts/carbon-theme.js +++ /dev/null @@ -1,55 +0,0 @@ -const fs = require("fs"); -const sass = require("node-sass"); -const autoprefixer = require("autoprefixer"); -const postcss = require("postcss"); -const { promisify } = require("util"); - -const writeFile = promisify(fs.writeFile); -const outFile = "./static/style.css"; - -async function generateCss() { - sass.render( - { - outFile, - omitSourceMapUrl: true, - data: ` - $feature-flags: ( - enable-css-custom-properties: true, - grid-columns-16: true, - ); - - @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss"; - @import "node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss"; - - :root[carbon-theme="white"] { @include carbon--theme($carbon--theme--white, true); } - :root { @include carbon--theme($carbon--theme--g10, true); } - :root[carbon-theme="g90"] { @include carbon--theme($carbon--theme--g90, true); } - :root[carbon-theme="g100"] { @include carbon--theme($carbon--theme--g100, true); } - - $css--font-face: true; - $css--helpers: true; - $css--body: true; - $css--use-layer: true; - $css--reset: true; - $css--default-type: true; - $css--plex: true; - - @import "node_modules/carbon-components/scss/globals/scss/_css--reset.scss"; - @import "node_modules/carbon-components/scss/globals/scss/_css--font-face.scss"; - @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss"; - @import "node_modules/carbon-components/scss/globals/scss/_css--body.scss"; - @import "node_modules/carbon-components/scss/globals/grid/_grid.scss"; - @import "node_modules/carbon-components/scss/globals/scss/styles.scss";`, - }, - async (error, result) => { - if (!error) { - const prefixed = await postcss([autoprefixer]).process(result.css, { - from: undefined, - }); - await writeFile(outFile, prefixed.css); - } - } - ); -} - -generateCss(); diff --git a/docs/scripts/postbuild.js b/docs/scripts/postbuild.js new file mode 100644 index 00000000..b496b7f0 --- /dev/null +++ b/docs/scripts/postbuild.js @@ -0,0 +1,145 @@ +const sirv = require("sirv"); +const polka = require("polka"); +const { chromium } = require("playwright"); +const fs = require("fs-extra"); +const posthtml = require("posthtml"); +const path = require("path"); + +const PORT = process.env.PORT || 3000; +const OUT_DIR = "dist"; + +async function scrape(page, url = "") { + await page.goto(`http://localhost:${PORT}/${url}`); + await page.waitForLoadState("networkidle"); + const $html = await page.$("html"); + const html = await page.evaluate(([html]) => html.innerHTML, [$html]); + await $html.dispose(); + return html; +} + +function relativePaths(depth = 0) { + const asset_extension = new RegExp(/.(js|css|ico)$/); + let relative_path = + depth > 0 + ? Array.from({ length: depth }, (_, i) => "../") + .join("") + .slice(0, -1) + : "."; + + return (tree) => { + tree.match( + [ + { attrs: { href: asset_extension } }, + { attrs: { src: asset_extension } }, + ], + (node) => { + if ("href" in node.attrs) { + node.attrs.href = relative_path + node.attrs.href; + } + + if ("src" in node.attrs) { + node.attrs.src = relative_path + node.attrs.src; + } + + return node; + } + ); + + tree.match({ attrs: { id: "__routify_iframes" } }, (node) => {}); + }; +} + +async function processHtml(html, { dir, outfilePath, depth }) { + const processed = await posthtml().use(relativePaths(depth)).process(html); + if (dir) { + await fs.ensureDir(outfilePath); + await fs.writeFile( + path.join(outfilePath, "index.html"), + await `${processed.html}` + ); + } else { + await fs.writeFile( + path.join(outfilePath), + await `${processed.html}` + ); + } + + console.log("Prerendered:", outfilePath); +} + +const app = polka() + .use(sirv("dist", { single: true })) + .listen(PORT, async (error) => { + if (error) { + console.log(error); + process.exit(1); + } + + const browser = await chromium.launch(); + const context = await browser.newContext(); + const page = await context.newPage(); + + const components = await fs.readdir("src/pages/components"); + + for await (const component of components) { + const [file] = component.split(".svx"); + const filePath = `components/${file}`; + const result = await scrape(page, filePath); + + await processHtml(result, { + dir: true, + outfilePath: `${OUT_DIR}/${filePath}`, + depth: 2, + }); + } + + await fs.ensureDir(`${OUT_DIR}/framed/`); + await fs.ensureDir(`${OUT_DIR}/framed/Grid`); + + const framed = [ + { + folder: "Grid", + paths: fs.readdirSync("src/pages/framed/Grid"), + }, + { + folder: "Loading", + paths: fs.readdirSync("src/pages/framed/Loading"), + }, + { + folder: "Modal", + paths: fs.readdirSync("src/pages/framed/Modal"), + }, + { + folder: "UIShell", + paths: fs.readdirSync("src/pages/framed/UIShell"), + }, + ]; + + for await (const frame of framed) { + const { folder, paths } = frame; + + for await (framePath of paths) { + const { name } = path.parse(framePath); + await fs.ensureDir(`${OUT_DIR}/framed/${folder}/${name}`); + + const filePath = `framed/${folder}/${name}`; + const result = await scrape(page, filePath); + + await processHtml(result, { + dir: true, + outfilePath: `${OUT_DIR}/${filePath}`, + depth: 3, + }); + } + } + + const __404 = await scrape(page, "404"); + await processHtml(__404, { outfilePath: `${OUT_DIR}/404.html` }); + + const __index = await scrape(page); + await processHtml(__index, { outfilePath: `${OUT_DIR}/index.html` }); + + await browser.close(); + await app.server.close(); + process.exit(0); + }); diff --git a/docs/src/App.svelte b/docs/src/App.svelte new file mode 100644 index 00000000..40bf738e --- /dev/null +++ b/docs/src/App.svelte @@ -0,0 +1,10 @@ + + + + + diff --git a/docs/src/client.js b/docs/src/client.js deleted file mode 100644 index d67c6351..00000000 --- a/docs/src/client.js +++ /dev/null @@ -1,3 +0,0 @@ -import * as sapper from "@sapper/app"; - -sapper.start({ target: document.querySelector("#sapper") }); diff --git a/docs/src/components/AspectRatio.svelte b/docs/src/components/AspectRatio.svelte new file mode 100644 index 00000000..592ed2f4 --- /dev/null +++ b/docs/src/components/AspectRatio.svelte @@ -0,0 +1,16 @@ + + +
+
+ +
+
diff --git a/docs/src/components/CopyableCodeSnippet.svelte b/docs/src/components/CopyableCodeSnippet.svelte deleted file mode 100644 index 7aa37554..00000000 --- a/docs/src/components/CopyableCodeSnippet.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/docs/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte deleted file mode 100644 index b2d7d7df..00000000 --- a/docs/src/components/GlobalHeader.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - -
- - -
diff --git a/docs/src/components/Portfolio.svelte b/docs/src/components/Portfolio.svelte deleted file mode 100644 index 1e8bcfbc..00000000 --- a/docs/src/components/Portfolio.svelte +++ /dev/null @@ -1,227 +0,0 @@ - - - - - - - - - - -
- - - - - - Content 1 - - Content 2 - Content 3 - - - - - - - Breadcrumb 1 - Breadcrumb 2 - Breadcrumb 3 - - - - - - - - - Primary - - - - - - Secondary - - - - - - - Tertiary - - - - - - Ghost - - - - - - Danger - - - - - - - - - - With icon - - - - - - - - - - - - - - - - - -
- Checkbox heading - - - -
- - - - -
- Checkbox heading - - -
- - - - - - - - - {`node -v`} - - - - - - - {`tsc -c tsconfig.json`} - - - - - - - {`* { -margin: 0; -padding: 0; -box-sizing: border-box; -} - -body { -font-family: "IBM Plex Sans"; -lin-height: 1.45; -} - -h1 { -font-size: 1rem; -color: #171717; -} - -a { -color: currentColor; -text-decoration: underline; -}`} - - - - -
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte new file mode 100644 index 00000000..cbde3957 --- /dev/null +++ b/docs/src/components/Preview.svelte @@ -0,0 +1,176 @@ + + + + +
+ {#if framed} +
+
+ +
+ {/if} +
+ {#if framed && !success} +
+ +
+ {/if} + {#if framed} + + {:else} + + {/if} +
+
+ + {@html code} + +
+
diff --git a/docs/src/components/Theme.svelte b/docs/src/components/Theme.svelte index 1efadb56..41bc8e07 100644 --- a/docs/src/components/Theme.svelte +++ b/docs/src/components/Theme.svelte @@ -1,29 +1,24 @@ - - - + diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte index afd9f96e..5cf099ef 100644 --- a/docs/src/components/TileCard.svelte +++ b/docs/src/components/TileCard.svelte @@ -1,63 +1,86 @@ - -
{title}
-
- -
-
-
-
-
- +
+ + +
+
+
{title}
+ {#if subtitle} +
{subtitle}
+ {/if} +
+
+ + +
+
+ + +
diff --git a/docs/src/index.js b/docs/src/index.js new file mode 100644 index 00000000..74ef981f --- /dev/null +++ b/docs/src/index.js @@ -0,0 +1,8 @@ +import App from "./App.svelte"; + +const app = new App({ + target: document.getElementById("app"), + hydrate: process.env.NODE_ENV === "production", +}); + +export default app; diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte new file mode 100644 index 00000000..74a67da3 --- /dev/null +++ b/docs/src/layouts/ComponentLayout.svelte @@ -0,0 +1,133 @@ + + + + + + + + +

{component}

+
+ + +
+ + + + + +
+
Table of Contents
+ +
+

Usage

+ + + + + + +
+
Table of Contents
+ +
+ + diff --git a/docs/src/pages/_fallback.svelte b/docs/src/pages/_fallback.svelte new file mode 100644 index 00000000..29a40603 --- /dev/null +++ b/docs/src/pages/_fallback.svelte @@ -0,0 +1,20 @@ + + + + + + +

404

+
+ Page not found. + Return home +
+ + + + diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte new file mode 100644 index 00000000..9928e608 --- /dev/null +++ b/docs/src/pages/_layout.svelte @@ -0,0 +1,243 @@ + + + + + + + + + + + +
+
+ +
+ + + Carbon Components Svelte v{process.env.VERSION || ''} + + + + + + + Carbon Svelte portfolio + + Carbon Icons Svelte + + + Carbon Pictograms Svelte + + + Carbon Charts Svelte + + Resources + + Carbon Design System + + + IBM Design Language + + + + +
+ + + + + {#each components.children as child, i (child.path)} + + {/each} + + + + + diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx new file mode 100644 index 00000000..fe2c6517 --- /dev/null +++ b/docs/src/pages/components/Accordion.svx @@ -0,0 +1,72 @@ + + +### Default + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Chevron aligned left + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Custom title slot + + + +
Custom title slot
+ Content 1 + + + Content 2 + + + Content 3 + + + +### First item open + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Skeleton + + + +### Skeleton (closed) + + \ No newline at end of file diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx new file mode 100644 index 00000000..b7ce625b --- /dev/null +++ b/docs/src/pages/components/Breadcrumb.svx @@ -0,0 +1,26 @@ + + +### Default + + + Dashboard + Annual reports + 2019 + + +### No trailing slash + + + Home + Profile + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx new file mode 100644 index 00000000..a2a21ff7 --- /dev/null +++ b/docs/src/pages/components/Button.svx @@ -0,0 +1,71 @@ +--- +description: High-level description +--- + + + +### Primary button + + + +### Secondary button + + + +### Tertiary button + + + +### Ghost button + + + +### Danger button + + + +### Button with icon + + + +### Icon-only button + + + +### Custom element + + + +### Field button + + + + + + + +### Small button + + + + + + + +### Disabled button + + + +### Skeleton + + + + + +### Stacked + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx new file mode 100644 index 00000000..8bbd26c4 --- /dev/null +++ b/docs/src/pages/components/Checkbox.svx @@ -0,0 +1,28 @@ + + +### Default (unchecked) + + + +### Checked + + + +### Indeterminate + + + +### Hidden label + + + +### Disabled + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx new file mode 100644 index 00000000..4535df18 --- /dev/null +++ b/docs/src/pages/components/ClickableTile.svx @@ -0,0 +1,16 @@ +--- +source: Tile/ClickableTile.svelte +--- + + + +### Default + +Carbon Design System + +### Light variant + +Carbon Design System diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx new file mode 100644 index 00000000..59eb202b --- /dev/null +++ b/docs/src/pages/components/CodeSnippet.svx @@ -0,0 +1,44 @@ + + + + +### Default (single-line) + +yarn add -D carbon-components-svelte + +### Inline + +rm -rf node_modules/ + +### Multi-line + + + +### Hidden copy button + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx new file mode 100644 index 00000000..edc4601c --- /dev/null +++ b/docs/src/pages/components/ComboBox.svx @@ -0,0 +1,53 @@ + + +### Default + + + +### Selected index + + + +### Extra-large size + + + +### Small size + + + +### Disabled + + \ No newline at end of file diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx new file mode 100644 index 00000000..bcac44eb --- /dev/null +++ b/docs/src/pages/components/ComposedModal.svx @@ -0,0 +1,7 @@ + + +### Composed modal + + diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx new file mode 100644 index 00000000..0a60a60f --- /dev/null +++ b/docs/src/pages/components/ContentSwitcher.svx @@ -0,0 +1,39 @@ + + +### Default + + + + + + + +### Light variant + + + + + + + +### Custom switch slot + + + +
+ Third section +
+ + + + +### Disabled + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx new file mode 100644 index 00000000..b48be93a --- /dev/null +++ b/docs/src/pages/components/CopyButton.svx @@ -0,0 +1,14 @@ + + + + +### Default + + + +### Custom feedback + + \ No newline at end of file diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx new file mode 100644 index 00000000..64fa59c5 --- /dev/null +++ b/docs/src/pages/components/DataTable.svx @@ -0,0 +1,346 @@ + + +### Default + + + +### With title, description + + + +### Zebra stripes + + + +### Short rows + + + +### Compact rows + + + +### Sortable + + + +### Skeleton + + + +### Skeleton with headers, row count + + + +### Skeleton without header, toolbar + + \ No newline at end of file diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx new file mode 100644 index 00000000..2bb6e748 --- /dev/null +++ b/docs/src/pages/components/DatePicker.svx @@ -0,0 +1,56 @@ + + +### Default (simple) + + + + + +### Hidden label + + + + + +### Light variant + + + + + +### Extra-large size + + + + + +### Small size + + + + + +### Invalid state + + + + + +### Disabled state + + + + + +### Single + + + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx new file mode 100644 index 00000000..8fa84d79 --- /dev/null +++ b/docs/src/pages/components/Dropdown.svx @@ -0,0 +1,32 @@ + + +### Default + + + +### Light variant + + + +### Inline type + + + +### Disabled state + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx new file mode 100644 index 00000000..53da6317 --- /dev/null +++ b/docs/src/pages/components/ExpandableTile.svx @@ -0,0 +1,29 @@ +--- +source: Tile/ExpandableTile.svelte +--- + + + +### Default (unexpanded) + + +
Above the fold content here
+
Below the fold content here
+ + +### Expanded + + +
Above the fold content here
+
Below the fold content here
+ + +### Light variant + + +
Above the fold content here
+
Below the fold content here
+ \ No newline at end of file diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx new file mode 100644 index 00000000..99503248 --- /dev/null +++ b/docs/src/pages/components/FileUploader.svx @@ -0,0 +1,32 @@ + + +### File uploader (button-only) + + + +### File uploader + + + +### Item (uploading) + + + +### Item (complete) + + + +### Item (invalid) + + + +### Drop container + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/FluidForm.svx b/docs/src/pages/components/FluidForm.svx new file mode 100644 index 00000000..80e84bdc --- /dev/null +++ b/docs/src/pages/components/FluidForm.svx @@ -0,0 +1,19 @@ + + +### Fluid form + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/Form.svx b/docs/src/pages/components/Form.svx new file mode 100644 index 00000000..a28c8c6b --- /dev/null +++ b/docs/src/pages/components/Form.svx @@ -0,0 +1,58 @@ + + +### Form + +
+ + + + + + + + + + + + + + + + +
diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx new file mode 100644 index 00000000..88f6a075 --- /dev/null +++ b/docs/src/pages/components/Grid.svx @@ -0,0 +1,31 @@ + + +### Default + + + +### Full width + + + +### Narrow + + + +### Condensed + + + +### Responsive + + + +### Offset columns + + + +### Aspect ratio columns + + diff --git a/docs/src/pages/components/Icon.svx b/docs/src/pages/components/Icon.svx new file mode 100644 index 00000000..47f20550 --- /dev/null +++ b/docs/src/pages/components/Icon.svx @@ -0,0 +1,22 @@ + + +### Default + + + + + + +### Skeleton + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx new file mode 100644 index 00000000..e4dbe5d4 --- /dev/null +++ b/docs/src/pages/components/InlineLoading.svx @@ -0,0 +1,19 @@ + + +### Default + + + +### With description + + + +### Status states + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx new file mode 100644 index 00000000..400a9fc5 --- /dev/null +++ b/docs/src/pages/components/InlineNotification.svx @@ -0,0 +1,42 @@ +--- +source: Notification/InlineNotification.svelte +--- + + + +### Default (error) + + + +### Hidden close button + + + +### With actions + + +
+ Learn more +
+ + +### Notification variants + + + + + + + + +### Low contrast + + + + + + + diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx new file mode 100644 index 00000000..d6df7519 --- /dev/null +++ b/docs/src/pages/components/Link.svx @@ -0,0 +1,23 @@ + + +### Default + +Carbon Design System + +### Inline variant + +
+ Visit the + Carbon Design System. +
+ +### Disabled + +Carbon Design System + +### Visited styles + +Carbon Design System \ No newline at end of file diff --git a/docs/src/pages/components/Loading.svx b/docs/src/pages/components/Loading.svx new file mode 100644 index 00000000..7a1870b1 --- /dev/null +++ b/docs/src/pages/components/Loading.svx @@ -0,0 +1,16 @@ + + +### Default (with overlay) + + + +### No overlay + + + +### Small size + + \ No newline at end of file diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx new file mode 100644 index 00000000..6592e74d --- /dev/null +++ b/docs/src/pages/components/Modal.svx @@ -0,0 +1,34 @@ + + +### Default (transactional) + + + +### Danger modal + + + +### Passive modal + + + +### Extra-small size + + + +### Small size + + + +### Large size + + + +### Prevent close on outside click + +`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals. + + + diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx new file mode 100644 index 00000000..6a1c2ec1 --- /dev/null +++ b/docs/src/pages/components/MultiSelect.svx @@ -0,0 +1,36 @@ + + +### Default + + + +### Light variant + + + +### Inline type + + + +### Filterable + + \ No newline at end of file diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx new file mode 100644 index 00000000..ed75e9c0 --- /dev/null +++ b/docs/src/pages/components/NumberInput.svx @@ -0,0 +1,52 @@ + + +### Default + + + +### With helper text + + + +### Minimum and maximum values + + + +### Hidden label + + + +### Light variant + + + +### Mobile variant + + + +### Extra-large size + + + +### Small size + + + +### Invalid state + + + +### Disabled state + + + +### Skeleton + + + +### Skeleton without label + + \ No newline at end of file diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx new file mode 100644 index 00000000..4382f963 --- /dev/null +++ b/docs/src/pages/components/OrderedList.svx @@ -0,0 +1,46 @@ + + +### Default + + + Ordered list item + Ordered list item + Ordered list item + + +### With links + + + + Ordered list item + + + Ordered list item + + + Ordered list item + + + +### Nested + + + + Ordered list level 1 + + Ordered list level 2 + + Ordered list level 3 + + Ordered list level 3 + Ordered list level 3 + + + + + Ordered list level 1 + Ordered list level 1 + \ No newline at end of file diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx new file mode 100644 index 00000000..ef4b9830 --- /dev/null +++ b/docs/src/pages/components/OverflowMenu.svx @@ -0,0 +1,47 @@ + + +### Default + + + + + + + +### Flipped + + + + + + + +### Menu direction top + + + + + + + +### Custom primary focus + +By default, the first overflow menu item is focused when opening the dropdown. + + + + + + + +### Custom trigger slot + + +
Custom trigger
+ + + + \ No newline at end of file diff --git a/docs/src/pages/components/Pagination.svx b/docs/src/pages/components/Pagination.svx new file mode 100644 index 00000000..75973f9f --- /dev/null +++ b/docs/src/pages/components/Pagination.svx @@ -0,0 +1,24 @@ + + +### Default + + + +### Current page + + + +### Custom page sizes + + + +### Hidden page input + + + +### Skeleton + + diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx new file mode 100644 index 00000000..e6dafbaf --- /dev/null +++ b/docs/src/pages/components/PaginationNav.svx @@ -0,0 +1,12 @@ + + +### Default + + + +### Loopable + + diff --git a/docs/src/pages/components/PasswordInput.svx b/docs/src/pages/components/PasswordInput.svx new file mode 100644 index 00000000..0cf32697 --- /dev/null +++ b/docs/src/pages/components/PasswordInput.svx @@ -0,0 +1,38 @@ + + +### Default + + + +### Password is visible + +Set prop `type` to `"text"` to toggle password visibility. + + + +### Hidden label + + + +### Light variant + + + +### Extra-large size + + + +### Small size + + + +### Invalid state + + + +### Disabled state + + diff --git a/docs/src/pages/components/ProgressIndicator.svx b/docs/src/pages/components/ProgressIndicator.svx new file mode 100644 index 00000000..02a78895 --- /dev/null +++ b/docs/src/pages/components/ProgressIndicator.svx @@ -0,0 +1,59 @@ + + +### Default (horizontal) + + + + + + + +### Spaced-equally + + + + + + + +### Vertical + + + + + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx new file mode 100644 index 00000000..f2619f60 --- /dev/null +++ b/docs/src/pages/components/RadioButton.svx @@ -0,0 +1,54 @@ + + +### Default + + + + + + + + + +### Label text aligned left + + + + + + + + + +### Vertical orientation + + + + + + + + + +### Skeleton + + + + + + + + + +### Skeleton (vertical orientation) + + + + + + + + \ No newline at end of file diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx new file mode 100644 index 00000000..7080028e --- /dev/null +++ b/docs/src/pages/components/RadioTile.svx @@ -0,0 +1,32 @@ + + +### Default + + + + Lite plan + + + Standard plan + + + Plus plan + + + +### Light variant + + + + Lite plan + + + Standard plan + + + Plus plan + + \ No newline at end of file diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx new file mode 100644 index 00000000..7649671e --- /dev/null +++ b/docs/src/pages/components/Search.svx @@ -0,0 +1,28 @@ + + +### Default + + + +### Default value + + + +### Light variant + + + +### Large size + + + +### Small size + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx new file mode 100644 index 00000000..712d357b --- /dev/null +++ b/docs/src/pages/components/Select.svx @@ -0,0 +1,58 @@ + + +### Default + + + +### Item groups + + + +### Light variant + + + +### Inline type + + + +### Disabled + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx new file mode 100644 index 00000000..00c012cb --- /dev/null +++ b/docs/src/pages/components/SelectableTile.svx @@ -0,0 +1,32 @@ + + +### Multi-selectable tiles + +
+ + Multi-select Tile + + + Multi-select Tile + + + Multi-select Tile + +
+ +### Light variant + +
+ + Multi-select Tile + + + Multi-select Tile + + + Multi-select Tile + +
\ No newline at end of file diff --git a/docs/src/pages/components/SkeletonPlaceholder.svx b/docs/src/pages/components/SkeletonPlaceholder.svx new file mode 100644 index 00000000..b60f995d --- /dev/null +++ b/docs/src/pages/components/SkeletonPlaceholder.svx @@ -0,0 +1,12 @@ + + +### Default + + + +### Custom size + + diff --git a/docs/src/pages/components/SkeletonText.svx b/docs/src/pages/components/SkeletonText.svx new file mode 100644 index 00000000..caf0f45d --- /dev/null +++ b/docs/src/pages/components/SkeletonText.svx @@ -0,0 +1,24 @@ + + +### Default + + + +### Heading variant + + + +### Heading variant + + + +### Paragraph variant + + + +### Paragraph with max width + + \ No newline at end of file diff --git a/docs/src/pages/components/Slider.svx b/docs/src/pages/components/Slider.svx new file mode 100644 index 00000000..b8172917 --- /dev/null +++ b/docs/src/pages/components/Slider.svx @@ -0,0 +1,28 @@ + + +### Default + + + +### Custom minimum, maximum values + + + +### Custom step value + + + +### Light variant + + + +### Skeleton + + + +### Skeleton (hidden label) + + \ No newline at end of file diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx new file mode 100644 index 00000000..6f689745 --- /dev/null +++ b/docs/src/pages/components/StructuredList.svx @@ -0,0 +1,93 @@ + + +### Default (read-only) + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + 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. + + + + Row 2 + Row 2 + + 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. + + + + Row 3 + Row 3 + + 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. + + + + + +### Selectable rows + + + + + ColumnA + ColumnB + ColumnC + {''} + + + + {#each [1, 2, 3] as item} + + Row {item} + Row {item} + + 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. + + + + + + + {/each} + + + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx new file mode 100644 index 00000000..c49184cb --- /dev/null +++ b/docs/src/pages/components/Tabs.svx @@ -0,0 +1,34 @@ + + +### Default + + + + + +
+ Content 1 + Content 2 + Content 3 +
+ + +### Container type + + + + + +
+ Content 1 + Content 2 + Content 3 +
+ + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx new file mode 100644 index 00000000..0b197a1d --- /dev/null +++ b/docs/src/pages/components/Tag.svx @@ -0,0 +1,30 @@ + + +### Default + +IBM Cloud + +### Tag types + +red +magenta +purple +blue +cyan +teal +green +gray +cool-gray +warm-gray +high-contrast + +### Filterable + +Filterable + +### Skeleton + + \ No newline at end of file diff --git a/docs/src/pages/components/TextArea.svx b/docs/src/pages/components/TextArea.svx new file mode 100644 index 00000000..20e087ef --- /dev/null +++ b/docs/src/pages/components/TextArea.svx @@ -0,0 +1,40 @@ + + +### Default + +