From 2008d0035fef80062016d689856fd6f3b695740c Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 2 Oct 2020 20:13:02 -0700 Subject: [PATCH] docs: add new component docs --- .prettierignore | 1 + README.md | 6 + docs/.cfignore | 2 +- docs/.gitignore | 12 +- docs/README.md | 81 - docs/Staticfile | 3 +- docs/cypress.json | 5 - docs/cypress/integration/Button.js | 21 - docs/cypress/plugins/index.js | 21 - docs/cypress/support/commands.js | 7 - docs/cypress/support/index.js | 1 - docs/includes/header.conf | 5 - docs/index.html | 13 + docs/manifest.yml | 6 +- docs/package.json | 52 +- docs/public/favicon.ico | Bin 0 -> 5430 bytes docs/scripts/carbon-theme.js | 55 - docs/scripts/postbuild.js | 145 + docs/src/App.svelte | 10 + docs/src/client.js | 3 - docs/src/components/AspectRatio.svelte | 16 + .../src/components/CopyableCodeSnippet.svelte | 14 - docs/src/components/GlobalHeader.svelte | 35 - docs/src/components/Portfolio.svelte | 227 - docs/src/components/Preview.svelte | 176 + docs/src/components/Theme.svelte | 37 +- docs/src/components/TileCard.svelte | 111 +- docs/src/index.js | 8 + docs/src/layouts/ComponentLayout.svelte | 133 + docs/src/pages/_fallback.svelte | 20 + docs/src/pages/_layout.svelte | 243 + docs/src/pages/components/Accordion.svx | 72 + docs/src/pages/components/Breadcrumb.svx | 26 + docs/src/pages/components/Button.svx | 71 + docs/src/pages/components/ButtonSet.svx | 22 + docs/src/pages/components/Checkbox.svx | 28 + docs/src/pages/components/ClickableTile.svx | 16 + docs/src/pages/components/CodeSnippet.svx | 44 + docs/src/pages/components/ComboBox.svx | 53 + docs/src/pages/components/ComposedModal.svx | 7 + docs/src/pages/components/ContentSwitcher.svx | 39 + docs/src/pages/components/CopyButton.svx | 14 + docs/src/pages/components/DataTable.svx | 346 ++ docs/src/pages/components/DatePicker.svx | 56 + docs/src/pages/components/Dropdown.svx | 32 + docs/src/pages/components/ExpandableTile.svx | 29 + docs/src/pages/components/FileUploader.svx | 32 + docs/src/pages/components/FluidForm.svx | 19 + docs/src/pages/components/Form.svx | 58 + docs/src/pages/components/Grid.svx | 31 + docs/src/pages/components/Icon.svx | 22 + docs/src/pages/components/InlineLoading.svx | 19 + .../pages/components/InlineNotification.svx | 42 + docs/src/pages/components/Link.svx | 23 + docs/src/pages/components/Loading.svx | 16 + docs/src/pages/components/Modal.svx | 34 + docs/src/pages/components/MultiSelect.svx | 36 + docs/src/pages/components/NumberInput.svx | 52 + docs/src/pages/components/OrderedList.svx | 46 + docs/src/pages/components/OverflowMenu.svx | 47 + docs/src/pages/components/Pagination.svx | 24 + docs/src/pages/components/PaginationNav.svx | 12 + docs/src/pages/components/PasswordInput.svx | 38 + .../pages/components/ProgressIndicator.svx | 59 + docs/src/pages/components/RadioButton.svx | 54 + docs/src/pages/components/RadioTile.svx | 32 + docs/src/pages/components/Search.svx | 28 + docs/src/pages/components/Select.svx | 58 + docs/src/pages/components/SelectableTile.svx | 32 + .../pages/components/SkeletonPlaceholder.svx | 12 + docs/src/pages/components/SkeletonText.svx | 24 + docs/src/pages/components/Slider.svx | 28 + docs/src/pages/components/StructuredList.svx | 93 + docs/src/pages/components/Tabs.svx | 34 + docs/src/pages/components/Tag.svx | 30 + docs/src/pages/components/TextArea.svx | 40 + docs/src/pages/components/TextInput.svx | 48 + docs/src/pages/components/Tile.svx | 16 + docs/src/pages/components/TimePicker.svx | 43 + .../pages/components/ToastNotification.svx | 34 + docs/src/pages/components/Toggle.svx | 24 + docs/src/pages/components/ToggleSmall.svx | 24 + docs/src/pages/components/Tooltip.svx | 57 + .../pages/components/TooltipDefinition.svx | 16 + docs/src/pages/components/TooltipIcon.svx | 19 + docs/src/pages/components/UIShell.svx | 15 + docs/src/pages/components/UnorderedList.svx | 46 + .../framed/Grid/AspectRatioColumns.svelte | 20 + .../pages/framed/Grid/CondensedGrid.svelte | 12 + .../pages/framed/Grid/FullWidthGrid.svelte | 12 + docs/src/pages/framed/Grid/Grid.svelte | 12 + docs/src/pages/framed/Grid/NarrowGrid.svelte | 12 + .../pages/framed/Grid/OffsetColumns.svelte | 32 + .../pages/framed/Grid/ResponsiveGrid.svelte | 40 + docs/src/pages/framed/Loading/Loading.svelte | 5 + .../pages/framed/Modal/ComposedModal.svelte | 19 + .../src/pages/framed/Modal/DangerModal.svelte | 21 + docs/src/pages/framed/Modal/Modal.svelte | 20 + .../pages/framed/Modal/ModalExtraSmall.svelte | 17 + docs/src/pages/framed/Modal/ModalLarge.svelte | 17 + .../Modal/ModalPreventOutsideClick.svelte | 17 + docs/src/pages/framed/Modal/ModalSmall.svelte | 17 + .../pages/framed/Modal/PassiveModal.svelte | 14 + .../src/pages/framed/UIShell/HeaderNav.svelte | 60 + .../framed/UIShell/HeaderSwitcher.svelte | 66 + .../framed/UIShell/HeaderUtilities.svelte | 71 + docs/src/pages/framed/_reset.svelte | 7 + docs/src/pages/index.svelte | 112 + docs/src/routes/_error.svelte | 21 - docs/src/routes/_layout.svelte | 117 - docs/src/routes/components/[slug].json.js | 17 - docs/src/routes/components/[slug].svelte | 132 - docs/src/routes/components/_components.js | 23 - docs/src/routes/components/index.json.js | 6 - docs/src/routes/components/index.svelte | 55 - docs/src/routes/examples/Button.svelte | 92 - docs/src/routes/getting-started/index.svelte | 42 - docs/src/routes/index.svelte | 13 - docs/src/server.js | 11 - docs/src/service-worker.js | 85 - docs/src/store.js | 3 + docs/src/template.html | 22 - docs/static/favicon.png | Bin 4441 -> 0 bytes docs/static/logo-192.png | Bin 6701 -> 0 bytes docs/static/logo-512.png | Bin 17083 -> 0 bytes docs/static/manifest.json | 20 - docs/svelte.config.js | 191 + docs/vite.config.js | 11 + docs/webpack.config.js | 69 - docs/yarn.lock | 5189 +++++++++-------- 130 files changed, 6662 insertions(+), 3801 deletions(-) delete mode 100644 docs/README.md delete mode 100644 docs/cypress.json delete mode 100644 docs/cypress/integration/Button.js delete mode 100644 docs/cypress/plugins/index.js delete mode 100644 docs/cypress/support/commands.js delete mode 100644 docs/cypress/support/index.js delete mode 100644 docs/includes/header.conf create mode 100644 docs/index.html create mode 100644 docs/public/favicon.ico delete mode 100644 docs/scripts/carbon-theme.js create mode 100644 docs/scripts/postbuild.js create mode 100644 docs/src/App.svelte delete mode 100644 docs/src/client.js create mode 100644 docs/src/components/AspectRatio.svelte delete mode 100644 docs/src/components/CopyableCodeSnippet.svelte delete mode 100644 docs/src/components/GlobalHeader.svelte delete mode 100644 docs/src/components/Portfolio.svelte create mode 100644 docs/src/components/Preview.svelte create mode 100644 docs/src/index.js create mode 100644 docs/src/layouts/ComponentLayout.svelte create mode 100644 docs/src/pages/_fallback.svelte create mode 100644 docs/src/pages/_layout.svelte create mode 100644 docs/src/pages/components/Accordion.svx create mode 100644 docs/src/pages/components/Breadcrumb.svx create mode 100644 docs/src/pages/components/Button.svx create mode 100644 docs/src/pages/components/ButtonSet.svx create mode 100644 docs/src/pages/components/Checkbox.svx create mode 100644 docs/src/pages/components/ClickableTile.svx create mode 100644 docs/src/pages/components/CodeSnippet.svx create mode 100644 docs/src/pages/components/ComboBox.svx create mode 100644 docs/src/pages/components/ComposedModal.svx create mode 100644 docs/src/pages/components/ContentSwitcher.svx create mode 100644 docs/src/pages/components/CopyButton.svx create mode 100644 docs/src/pages/components/DataTable.svx create mode 100644 docs/src/pages/components/DatePicker.svx create mode 100644 docs/src/pages/components/Dropdown.svx create mode 100644 docs/src/pages/components/ExpandableTile.svx create mode 100644 docs/src/pages/components/FileUploader.svx create mode 100644 docs/src/pages/components/FluidForm.svx create mode 100644 docs/src/pages/components/Form.svx create mode 100644 docs/src/pages/components/Grid.svx create mode 100644 docs/src/pages/components/Icon.svx create mode 100644 docs/src/pages/components/InlineLoading.svx create mode 100644 docs/src/pages/components/InlineNotification.svx create mode 100644 docs/src/pages/components/Link.svx create mode 100644 docs/src/pages/components/Loading.svx create mode 100644 docs/src/pages/components/Modal.svx create mode 100644 docs/src/pages/components/MultiSelect.svx create mode 100644 docs/src/pages/components/NumberInput.svx create mode 100644 docs/src/pages/components/OrderedList.svx create mode 100644 docs/src/pages/components/OverflowMenu.svx create mode 100644 docs/src/pages/components/Pagination.svx create mode 100644 docs/src/pages/components/PaginationNav.svx create mode 100644 docs/src/pages/components/PasswordInput.svx create mode 100644 docs/src/pages/components/ProgressIndicator.svx create mode 100644 docs/src/pages/components/RadioButton.svx create mode 100644 docs/src/pages/components/RadioTile.svx create mode 100644 docs/src/pages/components/Search.svx create mode 100644 docs/src/pages/components/Select.svx create mode 100644 docs/src/pages/components/SelectableTile.svx create mode 100644 docs/src/pages/components/SkeletonPlaceholder.svx create mode 100644 docs/src/pages/components/SkeletonText.svx create mode 100644 docs/src/pages/components/Slider.svx create mode 100644 docs/src/pages/components/StructuredList.svx create mode 100644 docs/src/pages/components/Tabs.svx create mode 100644 docs/src/pages/components/Tag.svx create mode 100644 docs/src/pages/components/TextArea.svx create mode 100644 docs/src/pages/components/TextInput.svx create mode 100644 docs/src/pages/components/Tile.svx create mode 100644 docs/src/pages/components/TimePicker.svx create mode 100644 docs/src/pages/components/ToastNotification.svx create mode 100644 docs/src/pages/components/Toggle.svx create mode 100644 docs/src/pages/components/ToggleSmall.svx create mode 100644 docs/src/pages/components/Tooltip.svx create mode 100644 docs/src/pages/components/TooltipDefinition.svx create mode 100644 docs/src/pages/components/TooltipIcon.svx create mode 100644 docs/src/pages/components/UIShell.svx create mode 100644 docs/src/pages/components/UnorderedList.svx create mode 100644 docs/src/pages/framed/Grid/AspectRatioColumns.svelte create mode 100644 docs/src/pages/framed/Grid/CondensedGrid.svelte create mode 100644 docs/src/pages/framed/Grid/FullWidthGrid.svelte create mode 100644 docs/src/pages/framed/Grid/Grid.svelte create mode 100644 docs/src/pages/framed/Grid/NarrowGrid.svelte create mode 100644 docs/src/pages/framed/Grid/OffsetColumns.svelte create mode 100644 docs/src/pages/framed/Grid/ResponsiveGrid.svelte create mode 100644 docs/src/pages/framed/Loading/Loading.svelte create mode 100644 docs/src/pages/framed/Modal/ComposedModal.svelte create mode 100644 docs/src/pages/framed/Modal/DangerModal.svelte create mode 100644 docs/src/pages/framed/Modal/Modal.svelte create mode 100644 docs/src/pages/framed/Modal/ModalExtraSmall.svelte create mode 100644 docs/src/pages/framed/Modal/ModalLarge.svelte create mode 100644 docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte create mode 100644 docs/src/pages/framed/Modal/ModalSmall.svelte create mode 100644 docs/src/pages/framed/Modal/PassiveModal.svelte create mode 100644 docs/src/pages/framed/UIShell/HeaderNav.svelte create mode 100644 docs/src/pages/framed/UIShell/HeaderSwitcher.svelte create mode 100644 docs/src/pages/framed/UIShell/HeaderUtilities.svelte create mode 100644 docs/src/pages/framed/_reset.svelte create mode 100644 docs/src/pages/index.svelte delete mode 100644 docs/src/routes/_error.svelte delete mode 100644 docs/src/routes/_layout.svelte delete mode 100644 docs/src/routes/components/[slug].json.js delete mode 100644 docs/src/routes/components/[slug].svelte delete mode 100644 docs/src/routes/components/_components.js delete mode 100644 docs/src/routes/components/index.json.js delete mode 100644 docs/src/routes/components/index.svelte delete mode 100644 docs/src/routes/examples/Button.svelte delete mode 100644 docs/src/routes/getting-started/index.svelte delete mode 100644 docs/src/routes/index.svelte delete mode 100644 docs/src/server.js delete mode 100644 docs/src/service-worker.js create mode 100644 docs/src/store.js delete mode 100644 docs/src/template.html delete mode 100644 docs/static/favicon.png delete mode 100644 docs/static/logo-192.png delete mode 100644 docs/static/logo-512.png delete mode 100644 docs/static/manifest.json create mode 100644 docs/svelte.config.js create mode 100644 docs/vite.config.js delete mode 100644 docs/webpack.config.js 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 0000000000000000000000000000000000000000..00b6609f29ec716fa286990cd1ae37b490943633 GIT binary patch literal 5430 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 U-Uj*-Hpn_O53*(6TLIqx0Z&K2mjD0& literal 0 HcmV?d00001 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 + +