From 9aa01ce5fbb5ebe9b9b67a504ff4a50bc65cb7cd Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 23 Jul 2020 19:38:09 -0700 Subject: [PATCH 1/7] docs: display button variants --- docs/cypress.json | 2 +- docs/cypress/integration/Button.js | 18 ++++++++ docs/cypress/support/commands.js | 6 ++- docs/src/routes/_layout.svelte | 57 +++++++++++++++++++++++- docs/src/routes/components/[slug].svelte | 40 ++++++++++++++--- docs/src/routes/components/index.svelte | 31 +++++++++++-- docs/src/routes/examples/Button.svelte | 41 +++++++++++++++-- docs/src/routes/examples/_layout.svelte | 1 - docs/yarn.lock | 12 ++--- 9 files changed, 184 insertions(+), 24 deletions(-) delete mode 100644 docs/src/routes/examples/_layout.svelte diff --git a/docs/cypress.json b/docs/cypress.json index f2f24765..66d2b558 100644 --- a/docs/cypress.json +++ b/docs/cypress.json @@ -1,5 +1,5 @@ { "baseUrl": "http://localhost:3000", "video": false, - "defaultCommandTimeout": 1000 + "defaultCommandTimeout": 20 } diff --git a/docs/cypress/integration/Button.js b/docs/cypress/integration/Button.js index 9eda6102..52372707 100644 --- a/docs/cypress/integration/Button.js +++ b/docs/cypress/integration/Button.js @@ -8,4 +8,22 @@ describe("Button", () => { expect($.length).to.eql(4); }); }); + + it.only("clicks", () => { + cy.get('[data-test="button-primary"]') + .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/support/commands.js b/docs/cypress/support/commands.js index 5003b2cf..163629b8 100644 --- a/docs/cypress/support/commands.js +++ b/docs/cypress/support/commands.js @@ -1,3 +1,7 @@ Cypress.Commands.add("examples", (component) => { - cy.visit(`/examples/${component}`); + cy.visit(`/examples/${component}`, { + onBeforeLoad(win) { + cy.stub(win.console, "log").as("log"); + }, + }); }); diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index a8c7cb46..966b9f39 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -1,14 +1,67 @@ + + {#if segment !== 'examples'} - + + + + + + Home + + {#if segment} + + {urlIds[segment]} + + {/if} + {#if segment && $tail} + + {$tail.title} + + {/if} + + + + + {:else} diff --git a/docs/src/routes/components/[slug].svelte b/docs/src/routes/components/[slug].svelte index f6f0076a..3bfb7173 100644 --- a/docs/src/routes/components/[slug].svelte +++ b/docs/src/routes/components/[slug].svelte @@ -14,25 +14,53 @@ + + {data.title}

{data.title}

- -{#if component} - -{/if} +
+ {#if component} + + {/if} +
diff --git a/docs/src/routes/components/index.svelte b/docs/src/routes/components/index.svelte index 348c85ae..5a048cda 100644 --- a/docs/src/routes/components/index.svelte +++ b/docs/src/routes/components/index.svelte @@ -1,23 +1,48 @@ + + Components

Components

- {#each data as data, i (data.title)} diff --git a/docs/src/routes/examples/Button.svelte b/docs/src/routes/examples/Button.svelte index b485cc4e..929f60a2 100644 --- a/docs/src/routes/examples/Button.svelte +++ b/docs/src/routes/examples/Button.svelte @@ -1,8 +1,41 @@ - - - - +
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
diff --git a/docs/src/routes/examples/_layout.svelte b/docs/src/routes/examples/_layout.svelte deleted file mode 100644 index 4fa864ce..00000000 --- a/docs/src/routes/examples/_layout.svelte +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/yarn.lock b/docs/yarn.lock index ded42162..1e8da793 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -633,15 +633,15 @@ camel-case@^3.0.0: upper-case "^1.1.1" carbon-components-svelte@../: - version "0.7.6" + version "0.8.5" dependencies: - carbon-icons-svelte "^10.13.0" + carbon-icons-svelte "^10.14.0" flatpickr "4.6.3" -carbon-icons-svelte@^10.13.0: - version "10.13.0" - resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.13.0.tgz#fbb3d863901bee94418e8caf2959777655edfa78" - integrity sha512-WXEr+cE1IXtYQspp3cwE2l2qlYUeHWd46wyqYM2PJ3Qw5n4tPD7OCs+MZa6hmOaziv/fns+uYMeeisGvJp5Slg== +carbon-icons-svelte@^10.14.0: + version "10.14.0" + resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.14.0.tgz#a26984db41bb3b04afcabfdbcf481d0387c4763b" + integrity sha512-Ucfy6A0GtvCxBPNCuUaFj7QsxV6hN/R8E8L/RMoytdrkZFD+tkl5pUVOHypcmYYZF7Dumnxr6ePr2bvwyTs5lg== caseless@~0.12.0: version "0.12.0" From e2c8ea6d7653726a75cd781254b43c7f16388647 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 23 Jul 2020 19:58:54 -0700 Subject: [PATCH 2/7] docs: build carbon themes using sass --- docs/.gitignore | 1 + docs/README.md | 8 + docs/package.json | 4 + docs/scripts/carbon-theme.js | 55 ++ docs/src/components/GlobalHeader.svelte | 3 +- docs/src/components/Theme.svelte | 29 + docs/src/routes/_layout.svelte | 4 + docs/src/routes/index.svelte | 7 +- docs/src/template.html | 5 +- docs/yarn.lock | 720 +++++++++++++++++++++++- 10 files changed, 808 insertions(+), 28 deletions(-) create mode 100644 docs/scripts/carbon-theme.js create mode 100644 docs/src/components/Theme.svelte diff --git a/docs/.gitignore b/docs/.gitignore index 6089ea11..f3d44b2a 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -5,3 +5,4 @@ yarn-error.log /cypress/screenshots/ /__sapper__/ +static/style.css \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index a888f86c..db0e8dec 100644 --- a/docs/README.md +++ b/docs/README.md @@ -29,6 +29,14 @@ 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` diff --git a/docs/package.json b/docs/package.json index 7e911591..bdfe8a61 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,9 +13,13 @@ "sirv": "^1.0.1" }, "devDependencies": { + "autoprefixer": "^9.8.5", + "carbon-components": "^10.16.0", "carbon-components-svelte": "../", "cypress": "^4.10.0", + "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", diff --git a/docs/scripts/carbon-theme.js b/docs/scripts/carbon-theme.js new file mode 100644 index 00000000..b594c2ed --- /dev/null +++ b/docs/scripts/carbon-theme.js @@ -0,0 +1,55 @@ +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/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte index a730ce28..a40f9a8d 100644 --- a/docs/src/components/GlobalHeader.svelte +++ b/docs/src/components/GlobalHeader.svelte @@ -7,8 +7,9 @@ HeaderNav, HeaderNavItem, HeaderUtilities, - HeaderActionLink + HeaderActionLink, } from "carbon-components-svelte"; + import Theme from "./Theme.svelte";
+ import { onMount } from "svelte"; + import { Select, SelectItem } from "carbon-components-svelte"; + + let theme = undefined; + + onMount(() => { + theme = localStorage.getItem("theme") || "g10"; + }); + + $: if (theme) { + localStorage.setItem("theme", theme); + document.documentElement.setAttribute("carbon-theme", theme); + } + + + + + diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index 966b9f39..98a615b4 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -29,6 +29,10 @@ + + + + + + + +
+ + + + +
Accordion
+
+ + + Content 1 + + + Content 2 + + + Content 3 + + +
+
Actions
+ + + + +
Breadcrumb
+
+ + Breadcrumb 1 + Breadcrumb 2 + Breadcrumb 3 + +
+
Actions
+ + + + + + + +
Primary button
+
+ Primary +
+
Actions
+ + + + +
Secondary button
+
+ Secondary +
+
Actions
+ + + + +
Tertiary button
+
+ Tertiary +
+
Actions
+ + + + +
Ghost button
+
+ Ghost +
+
Actions
+ + + + +
Danger button
+
+ Danger +
+
Actions
+ + + + + + + +
Primary button with icon
+
+ With icon +
+
Actions
+ + + + +
Icon-only buttons
+
+ + + + + +
+
Actions
+ + + + + + + +
Checkbox
+
+
+ Checkbox heading + + + +
+
+
Actions
+ + + + +
Code Snippet
+
+ + {`body { margin: 0; padding: 0; }`} + +
+
Actions
+ + + +
diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index 98a615b4..7d7b5c3e 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -8,16 +8,25 @@ Breadcrumb, BreadcrumbItem, Content, + SideNav, + SideNavItems, + SideNavMenu, + SideNavMenuItem, + SideNavLink, } from "carbon-components-svelte"; import GlobalHeader from "../components/GlobalHeader.svelte"; - import { setContext } from "svelte"; + import Theme from "../components/Theme.svelte"; + import { afterUpdate, setContext } from "svelte"; import { writable } from "svelte/store"; const tail = writable(undefined); + let prevSegment = undefined; + const urlIds = { about: "About", components: "Components", + "getting-started": "Getting Started", }; setContext("navigation", { @@ -26,45 +35,73 @@ tail.set(value); }, }); + + afterUpdate(() => { + if (prevSegment !== segment) { + if (prevSegment !== undefined) { + tail.set(undefined); + } + + prevSegment = segment; + } + }); {#if segment !== 'examples'} + + + + + + + + + - - + + Home - {#if segment} + {#if segment && $tail} {urlIds[segment]} {/if} - {#if segment && $tail} - - {$tail.title} - - {/if} - +
+ +
+ {:else} diff --git a/docs/src/routes/about.svelte b/docs/src/routes/about.svelte deleted file mode 100644 index e708243c..00000000 --- a/docs/src/routes/about.svelte +++ /dev/null @@ -1,6 +0,0 @@ -

About

- -

- carbon-components-svelte - is the Svelte implementation of the Carbon Design System -

diff --git a/docs/src/routes/components/[slug].json.js b/docs/src/routes/components/[slug].json.js index 1f4ade0e..3eb82f28 100644 --- a/docs/src/routes/components/[slug].json.js +++ b/docs/src/routes/components/[slug].json.js @@ -2,8 +2,8 @@ import components from "./_components.js"; const componentsMap = new Map(); -components.forEach((post) => { - componentsMap.set(post.slug, JSON.stringify(post)); +components.forEach(($) => { + componentsMap.set($.slug, JSON.stringify($)); }); export function get(req, res, next) { diff --git a/docs/src/routes/components/[slug].svelte b/docs/src/routes/components/[slug].svelte index 3bfb7173..2278c99e 100644 --- a/docs/src/routes/components/[slug].svelte +++ b/docs/src/routes/components/[slug].svelte @@ -15,10 +15,35 @@ export let data = {}; import { onMount, getContext } from "svelte"; + import { + Grid, + Row, + Column, + CodeSnippet, + FormGroup, + RadioButtonGroup, + RadioButton, + } from "carbon-components-svelte"; + import copy from "clipboard-copy"; const ctx = getContext("navigation"); let component = undefined; + let defaultProps = {}; + + $: props = data.props || {}; + $: { + if (data.props) { + Object.keys(data.props).forEach((prop) => { + if (!(prop in defaultProps)) { + defaultProps = { + ...defaultProps, + [prop]: data.props[prop].default, + }; + } + }); + } + } onMount(async () => { ctx.setTail(data); @@ -37,20 +62,24 @@ @@ -58,9 +87,44 @@ {data.title} -

{data.title}

-
- {#if component} - - {/if} -
+ + +

{data.title}

+ + + + +
+ {#if component} + + {/if} +
+ + + + + {#each Object.keys(props) as key} + {#if Array.isArray(props[key].values)} + + { + defaultProps = { ...defaultProps, [key]: detail }; + }}> + {#each props[key].values as value} + + {/each} + + + {/if} + {/each} + + + { + copy(data.source); + }} /> + + diff --git a/docs/src/routes/components/_components.js b/docs/src/routes/components/_components.js index 1588fc53..4ad36c7d 100644 --- a/docs/src/routes/components/_components.js +++ b/docs/src/routes/components/_components.js @@ -1,6 +1,19 @@ +import fs from "fs"; +import path from "path"; + const components = [ { title: "Button", + source: fs.readFileSync( + path.resolve(process.cwd(), "./src/routes/examples/Button.svelte"), + "utf8" + ), + props: { + size: { + values: ["default", "field", "small"], + default: "default", + }, + }, }, ].map((post) => ({ ...post, diff --git a/docs/src/routes/components/index.svelte b/docs/src/routes/components/index.svelte index 5a048cda..19dba046 100644 --- a/docs/src/routes/components/index.svelte +++ b/docs/src/routes/components/index.svelte @@ -10,7 +10,13 @@ export let data = []; import { getContext, onMount } from "svelte"; - import { UnorderedList, ListItem, Link } from "carbon-components-svelte"; + import { + Row, + Column, + UnorderedList, + ListItem, + Link, + } from "carbon-components-svelte"; const ctx = getContext("navigation"); @@ -31,22 +37,19 @@ }); - - Components -

Components

- - {#each data as data, i (data.title)} - - {data.title} - - {/each} - + + +

Components

+ + {#each data as data, i (data.title)} + + {data.title} + + {/each} + + + diff --git a/docs/src/routes/examples/Button.svelte b/docs/src/routes/examples/Button.svelte index 929f60a2..db6bc8bf 100644 --- a/docs/src/routes/examples/Button.svelte +++ b/docs/src/routes/examples/Button.svelte @@ -4,8 +4,9 @@
+

Buttons

- - - - + + + + + + + +
+
- - - - - +

Buttons with Icons

+ + + + + + + + +
+
- - - - - -
-
- - - - - +

Icon-only Buttons

+
diff --git a/docs/src/routes/getting-started/index.svelte b/docs/src/routes/getting-started/index.svelte new file mode 100644 index 00000000..ae78578d --- /dev/null +++ b/docs/src/routes/getting-started/index.svelte @@ -0,0 +1,53 @@ + + + + + + Getting Started + + + +

Getting Started

+

+ + can be installed as a development dependency. +

+

+ + + +

+ + + + + + +
+ +

+ + + diff --git a/docs/src/routes/index.svelte b/docs/src/routes/index.svelte index 57459dc5..1d6f28a8 100644 --- a/docs/src/routes/index.svelte +++ b/docs/src/routes/index.svelte @@ -1,7 +1,13 @@ -

Welcome

+ - +

Component Grid

+ + diff --git a/docs/yarn.lock b/docs/yarn.lock index 8bb4aa71..8ad6e728 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -876,6 +876,11 @@ cli-truncate@^0.2.1: slice-ansi "0.0.4" string-width "^1.0.1" +clipboard-copy@^3.1.0: + version "3.1.0" + resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4" + integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA== + cliui@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5" From 5eebd49037a06ca06bdc7450fb250b0ccd374ba7 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 Jul 2020 21:00:28 -0700 Subject: [PATCH 7/7] docs: prefetch links --- docs/src/routes/_layout.svelte | 3 +++ docs/webpack.config.js | 7 ++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index 7d7b5c3e..c0a5835b 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -64,6 +64,7 @@ diff --git a/docs/webpack.config.js b/docs/webpack.config.js index 179e613e..bcf50e9e 100644 --- a/docs/webpack.config.js +++ b/docs/webpack.config.js @@ -21,7 +21,12 @@ module.exports = { test: /\.(svelte|html)$/, use: { loader: "svelte-loader", - options: { dev, hydratable: true, hotReload: false }, + options: { + dev, + immutable: true, + hydratable: true, + hotReload: false, + }, }, }, ],