diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..42061c0 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +README.md \ No newline at end of file diff --git a/README.md b/README.md index 8d975be..ad3acc0 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,313 @@ This component library implements [Primer CSS components](https://primer.style/css/components). -[Documentation](docs) +## Table of Contents -## Not supported +- [Alert](#alert) +- [Autocomplete](#autocomplete) +- [Avatar](#avatar) +- [AvatarStack](#avatarstack) +- [AvatarParentChild](#avatarparentchild) +- [Button](#button) +- [ButtonMarketing](#buttonmarketing) +- [BranchName](#branchname) +- [Breadcrumb](#breadcrumb) +- [Dropdown](#dropdown) +- [Label](#label) +- [Loader](#loader) +- [Pagination](#pagination) +- [Truncate](#truncate) +- [SelectMenu](#selectmenu) + +--- + +## Alert + +```svelte + + +Alert (default) +Alert (full) +Alert (dismissable) +Alert (full and dismissable) + +Alert (success) +Alert (warn) +Alert (error) +``` + +## Autocomplete + +```svelte + + + + GitHub Inc + Hubot + Monalisa Octocat + +``` + +## Avatar + +```svelte + + + + + +``` + +## AvatarStack + +```svelte + + + + + + +``` + +## AvatarParentChild + +```svelte + + + + + + +``` + +## Button + +```svelte + + + + + + + + +
+ + + + + +
+ + + + +
+ + + +``` + +## ButtonMarketing + +```svelte + + +Default +Primary +Outline + +Default large +Primary large +Outline large +
+ Transparent +
+``` + +## BranchName + +```svelte + + +patch-1 +my-feature +``` + +## Breadcrumb + +```svelte + + + +Home +Repositories +svelte-primer + +``` + +## Dropdown + +```svelte + + + + Header + Item 1 + + Item 2 + + +Open: {open} +``` + +### Dropdown (dark variant) + +```svelte + + Header + Item 1 + + Item 2 + +``` + +## Label + +```svelte + + + + + + + + + + + + + +``` + +## Loader + +```svelte + + + +``` + +## Pagination + +```svelte + + + + + + + + + + 1 + 2 + … + 9 + 10 + + +``` + +## Truncate + +```svelte + + +
+ + branch-name-that-is-really-long + +
+``` + +## SelectMenu + +```svelte + + + + Item 1 + Item 2 + Item 3 + +``` + +--- + +## Unsupported components - [Popover directions](https://primer.style/css/components/popover) diff --git a/demo/src/routes/index.svelte b/demo/src/routes/index.svelte index c2ad7a5..2893c3c 100644 --- a/demo/src/routes/index.svelte +++ b/demo/src/routes/index.svelte @@ -1,7 +1,7 @@ @@ -72,32 +72,32 @@

- + diff --git a/package.json b/package.json index f76bc65..e61249e 100644 --- a/package.json +++ b/package.json @@ -10,20 +10,25 @@ "types": "./types/index.d.ts", "sideEffects": false, "scripts": { - "prepack": "prettier --write '*/**/*.svelte' && rollup -c" + "dev": "rollup -cw", + "predeploy": "rollup -c", + "deploy": "npx gh-pages -d dist", + "prepack": "BUNDLE=true rollup -c", + "format": "prettier --write '{src,types}/**/*.{svelte,ts}'" }, "dependencies": { "svelte-octicons": "^9.6.3" }, "devDependencies": { + "@primer/css": "14.4.0", + "@rollup/plugin-node-resolve": "^11.0.0", "@tsconfig/svelte": "^1.0.10", - "prettier": "^2.1.2", - "prettier-plugin-svelte": "^1.4.0", - "rollup": "^2.28.2", - "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-svelte": "^6.0.1", - "rollup-plugin-terser": "^7.0.2", - "svelte": "^3.28.0", + "prettier": "^2.2.1", + "prettier-plugin-svelte": "^1.4.2", + "rollup": "^2.34.2", + "rollup-plugin-svelte": "^7.0.0", + "svelte": "^3.31.0", + "svelte-readme": "^1.1.0", "typescript": "^4.1.2" }, "repository": { diff --git a/rollup.config.js b/rollup.config.js index 5a25e1d..541f239 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,18 +1,42 @@ -import resolve from "rollup-plugin-node-resolve"; +import resolve from "@rollup/plugin-node-resolve"; import svelte from "rollup-plugin-svelte"; -import { terser } from "rollup-plugin-terser"; -import { main, module, name } from "./package.json"; +import svelteReadme from "svelte-readme"; +import fs from "fs"; +import pkg from "./package.json"; -export default ["es", "umd"].map((format) => { - const UMD = format === "umd"; +const DEV = process.env.ROLLUP_WATCH; +const BUNDLE = process.env.BUNDLE === "true"; - return { - input: "src", - output: { - format, - file: UMD ? main : module, - name: UMD ? name : undefined, - }, - plugins: [svelte(), resolve(), UMD && terser()], - }; -}); +export default () => { + if (!BUNDLE) { + return svelteReadme({ + svelte: { dev: DEV, immutable: true }, + minify: !DEV, + prefixUrl: `${pkg.homepage}/tree/master/`, + style: ` + .markdown-body .code-fence ul, .markdown-body .code-fence ol { + padding-left: 0; + } + + ${fs.readFileSync( + "node_modules/@primer/css/dist/primer.css", + "utf-8" + )}`, + }); + } + + return ["es", "umd"].map((format) => { + const UMD = format === "umd"; + + return { + input: pkg.svelte, + output: { + format, + file: UMD ? pkg.main : pkg.module, + name: UMD ? pkg.name : undefined, + exports: "named", + }, + plugins: [svelte({ emitCss: false }), resolve()], + }; + }); +}; diff --git a/src/Avatar/Avatar.svelte b/src/Avatar/Avatar.svelte index a25cbfc..2d3c997 100644 --- a/src/Avatar/Avatar.svelte +++ b/src/Avatar/Avatar.svelte @@ -37,8 +37,9 @@ + class:avatar="{true}" + class:avatar-small="{small}" + class:avatar-child="{child}" + width="{width}" + height="{height}" +/> diff --git a/src/Button/ButtonMarketing.svelte b/src/Button/ButtonMarketing.svelte index fc6081c..cd37c19 100644 --- a/src/Button/ButtonMarketing.svelte +++ b/src/Button/ButtonMarketing.svelte @@ -1,6 +1,4 @@