From c63ce595519f6a38337a46ff4f502a3520eda620 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 6 Jun 2022 11:45:41 -0700 Subject: [PATCH] Release 2.4.0 (#92) * 2.4.0 * fix(heroku): build with NODE_ENV=production * Add CSS utilities listing (#88) * 2.2.0 * Add CodePen edit links to examples (#50) * add CodePen links to all live examples * simplify * reposition CodePen link w/pencil icon * nix .relative from example container * rewrap codepen link in template conditional * add margin to prevent overlap of kbd elements when stacked (#48) * add margin to prevent overlap of kbd elements when stacked * additional example to illustrate wrap behavior * remove old kbd component, move into the markdown file * move data stories text out of code example * use spacing between kbd elements and update implementation suggestions Co-authored-by: Shawn Allen * fix additional instances of kbd margins * update docs to use mix of space and margin utilities * apply spacing Co-authored-by: Shawn Allen * docs: add subtitle and see_also links to title template * chore(docs): make css usage docs a directory * fix(docs): make color swatches inline-flex * fix(docs): add bg-white to TOC * feat(docs): add global "utilites" data * feat(docs): add get_path template filter * feat(docs): add CSS utilities page * docs(utilities): add more utility listings * docs(utilities): update intro para Co-authored-by: Jackson Flint-Gonzales * Lint CSS; add expiring-todo-comments rules for JS + CSS (#55) * chore(deps): install eslint-plugin-unicorn * chore(lint): update deprecation comments to unicorn style * chore(lint): enable unicorn/expiring-todo-comments * chore(css): add todo comments for focus tweaks * chore(lint): install and set up stylelint * chore(lint): fix up stylelint errors * chore(deps): install semver * lint(css): tweak expiring todo comment version ranges (">=" instead of "^") * lint(css): add local/expiring-todo-comments rule * lint(js): fix up todo version comments * chore(deps): upgrade to eleventy@1.0.1 * chore(lint): stylelint --fix * feat(tokens): add colors.grey.focus * chore(lint): set allowWarningComments: true * chore(lint): whitespace * fix(lint): only shellcheck scripts/*.sh * Lint markdown (#56) * lint(markdown): install markdownlilnt-cli * lint(markdown): add "lint-docs" npm script, et al * lint(markdown): add markdownlint config, custom frontmatter rule * lint(docs): lint whitespace, headings * lint(ci): add markdownlint problem matcher * chore(lint): test markdownlint problem matcher * chore(lint): add some lines to bad markdown * lint(markdown): tweak frontmatter error output * lint(markdown): add no-empty rule, tag our rules as "local" * lint(markdown): fix up resources landing page (placeholder) * chore(lint): npm run lint-docs -- --fix * fix: nix lint-css script (not yet implemented) * fix(scripts): remove lint-css from run-p list (not yet implemented) * Extract Tailwind preset (#87) * chore(build): nix purge option from tailwind config * chore(deps): move tailwind-interaction-variants to dependencies * chore(browserslist): run browserslist --update-db * feat(tailwind): add tailwind preset * feat(tailwind): use tailwind preset in our config * chore: delete redundant comment * chore(tailwind): move corePlugins + variants to tailwind.theme * fix(deps): move tailwindcss to dependencies * fix(npm): add lib/tailwind to package files * fix(npm): include tailwind.preset.js * Editing buttons docs (#79) * Testing editing buttons docs * Added text from google doc * Added images + small tweaks * Trying a real button * removing image * update content to match google doc * chore(docs): reduce noise in github API errors * feat(docs): add docs/static/images * fix(docs): rebuild package-lock.json * fix(docs): safelist table[class=w-full] for styling * chore(docs): add get/setAttribute() remark helpers * chore(docs): reduce noise when version status fails * feat(docs): update button docs Co-authored-by: laurenajong * feat(docs): add basic yes/no table styling * feat(tokens): add 12 + "full" to spacing * feat(theme): add full (100%) to borderRadius * chore(docs): add more spacing around button examples * fix(docs): add icons to yes/no examples * chore(docs): more consistent line breaks * fix(heroku): create a review app on pr label * fix(docs): add alt="" to decorative img Co-authored-by: Jackson Flint-Gonzales * chore(lint): nuke hanging spaces * chore(docs): delete icon-example.png reference design * fix(docs): add empty link listener to prevent scrolling * fix(docs): fix bad merge Co-authored-by: Shawn Allen Co-authored-by: laurenajong Co-authored-by: Jackson Flint-Gonzales * Update color values from Figma (#97) * fix(tokens): update color values from Figma Saved as v2.4.1 in https://www.figma.com/file/PztEA9PIX00czGHf68Gsr5/?node-id=0%3A1 * chore(lint): fix spaces * Release 2.4.0 fixes (#93) * Editing buttons docs (#79) * Testing editing buttons docs * Added text from google doc * Added images + small tweaks * Trying a real button * removing image * update content to match google doc * chore(docs): reduce noise in github API errors * feat(docs): add docs/static/images * fix(docs): rebuild package-lock.json * fix(docs): safelist table[class=w-full] for styling * chore(docs): add get/setAttribute() remark helpers * chore(docs): reduce noise when version status fails * feat(docs): update button docs Co-authored-by: laurenajong * feat(docs): add basic yes/no table styling * feat(tokens): add 12 + "full" to spacing * feat(theme): add full (100%) to borderRadius * chore(docs): add more spacing around button examples * fix(docs): add icons to yes/no examples * chore(docs): more consistent line breaks * fix(heroku): create a review app on pr label * fix(docs): add alt="" to decorative img Co-authored-by: Jackson Flint-Gonzales * chore(lint): nuke hanging spaces * chore(docs): delete icon-example.png reference design * fix(docs): add empty link listener to prevent scrolling * fix(docs): fix bad merge Co-authored-by: Shawn Allen Co-authored-by: laurenajong Co-authored-by: Jackson Flint-Gonzales * fix(develop): move watching logic out of .eleventy.js * chore(lint): line breaks * docs(tailwind): cross-reference css pages * docs(tailwind): add tailwind usage docs * chore(lint): fix heading levels in Tailwind docs Co-authored-by: laurenajong <32344055+laurenajong@users.noreply.github.com> Co-authored-by: laurenajong Co-authored-by: Jackson Flint-Gonzales Co-authored-by: Jackson Flint-Gonzales Co-authored-by: laurenajong <32344055+laurenajong@users.noreply.github.com> Co-authored-by: laurenajong --- .eleventy.js | 15 +- .eslintrc.js | 10 +- .github/workflows/ci.yml | 3 +- .markdownlint.yml | 15 + .stylelintrc.js | 23 + docs/_data/eleventyComputed.js | 6 +- docs/_data/examples.js | 1 - docs/_data/package.js | 2 +- docs/_data/utilities.js | 41 + docs/_includes/toc.njk | 2 +- docs/components/buttons.md | 168 +- docs/components/fields-and-forms.md | 1 - docs/foundations/color.md | 5 +- docs/foundations/icons.md | 1 - docs/foundations/typography.md | 2 +- docs/resources/index.md | 2 + docs/static/images/alignment-correct.png | Bin 0 -> 18745 bytes docs/static/images/alignment-incorrect.png | Bin 0 -> 18746 bytes docs/static/images/block-example-mobile.png | Bin 0 -> 60510 bytes docs/static/images/button-specs.png | Bin 0 -> 11383 bytes docs/static/images/length-correct.png | Bin 0 -> 1816 bytes docs/static/images/length-incorrect.png | Bin 0 -> 4394 bytes docs/static/images/length-incorrect2.png | Bin 0 -> 4307 bytes docs/static/images/side-by-side-example.png | Bin 0 -> 2712 bytes docs/static/images/side-by-side-incorrect.png | Bin 0 -> 3148 bytes docs/usage/{css.md => css/index.md} | 10 +- docs/usage/css/tailwind.md | 59 + docs/usage/css/utilities.md | 42 + docs/usage/docs.md | 1 - docs/usage/javascript.md | 3 + lib/markdownlint/frontmatter.js | 47 + lib/markdownlint/no-empty.js | 19 + lib/nunjucks/index.js | 18 + lib/remark/code-example.js | 2 +- lib/remark/inline-code.js | 4 +- lib/remark/presets.js | 1 + lib/remark/utils.js | 30 +- lib/remark/yes-no.js | 44 + lib/stylelint/expiring-todo-comments.js | 44 + package-lock.json | 4563 ++++++++++------- package.json | 34 +- src/css/base.css | 4 +- src/css/components/button.css | 3 - src/css/components/index.css | 1 - src/css/docs.css | 21 +- src/css/fonts.css | 2 +- src/js/docs.js | 6 + src/theme.js | 7 +- src/tokens/colors.js | 158 +- src/tokens/spacing.js | 3 +- src/tokens/typography.js | 2 +- tailwind.config.js | 136 +- tailwind.preset.js | 128 + 53 files changed, 3595 insertions(+), 2094 deletions(-) create mode 100644 .markdownlint.yml create mode 100644 .stylelintrc.js create mode 100644 docs/_data/utilities.js create mode 100644 docs/static/images/alignment-correct.png create mode 100644 docs/static/images/alignment-incorrect.png create mode 100644 docs/static/images/block-example-mobile.png create mode 100644 docs/static/images/button-specs.png create mode 100644 docs/static/images/length-correct.png create mode 100644 docs/static/images/length-incorrect.png create mode 100644 docs/static/images/length-incorrect2.png create mode 100644 docs/static/images/side-by-side-example.png create mode 100644 docs/static/images/side-by-side-incorrect.png rename docs/usage/{css.md => css/index.md} (83%) create mode 100644 docs/usage/css/tailwind.md create mode 100644 docs/usage/css/utilities.md create mode 100644 lib/markdownlint/frontmatter.js create mode 100644 lib/markdownlint/no-empty.js create mode 100644 lib/remark/yes-no.js create mode 100644 lib/stylelint/expiring-todo-comments.js create mode 100644 tailwind.preset.js diff --git a/.eleventy.js b/.eleventy.js index 2f121af6..f98867b0 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -11,20 +11,6 @@ const toc = require('./lib/eleventy/toc') const { environment } = require('./lib/nunjucks') module.exports = config => { - if (dev) { - const throttle = 100 - const reloadOnChange = require('./lib/eleventy/reload') - reloadOnChange(__filename, [ - 'lib/**/*.js', - // we need to watch these ones explicitly because they - // change how examples and color swatches are rendered - 'docs/_includes/{example,macros}.njk' - ], throttle) - - // throttle subsequent rebuilds - config.setWatchThrottleWaitTime(throttle) - } - config.addPlugin(navigation) config.addPlugin(remark, remarkConfig) config.addPlugin(toc, { @@ -38,6 +24,7 @@ module.exports = config => { config.setUseGitIgnore(false) config.addWatchTarget('./dist') config.addPassthroughCopy('dist') + config.addPassthroughCopy('docs/static') return { dir: { diff --git a/.eslintrc.js b/.eslintrc.js index 58bee9a7..7122b29e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,14 +1,20 @@ module.exports = { parser: '@babel/eslint-parser', - plugins: ['sfgov'], + plugins: [ + 'sfgov', + 'unicorn' + ], extends: [ 'plugin:sfgov/recommended' ], rules: { + 'unicorn/expiring-todo-comments': ['error', { + allowWarningComments: true + }] }, overrides: [ { - files: ['src/js/*.js', 'src/icons/index.js'], + files: ['src/**/*.js'], env: { browser: true }, diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 12aebf6c..4070f787 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -10,8 +10,9 @@ jobs: with: node-version: 14 cache: npm - - run: npm ci + + - uses: xt0rted/markdownlint-problem-matcher@v1 - run: npm run lint # this sets NODE_ENV=production for all of the build scripts diff --git a/.markdownlint.yml b/.markdownlint.yml new file mode 100644 index 00000000..5476c14b --- /dev/null +++ b/.markdownlint.yml @@ -0,0 +1,15 @@ +default: false +heading-increment: true +heading-style: atx +first-heading-h1: { level: 2 } +front-matter: + required_keys: + - title +line-length: false +links: true +list-indent: true +no-bare-urls: false +no-empty: true +ul-indent: { indent: 2, start_indented: false } +ul-style: consistent +whitespace: true diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 00000000..d1a9be45 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,23 @@ +module.exports = { + extends: [ + 'stylelint-config-standard' + ], + plugins: [ + './lib/stylelint/expiring-todo-comments' + ], + rules: { + 'at-rule-no-unknown': [true, { + ignoreAtRules: [ + 'apply', + 'layer', + 'responsive', + 'screen', + 'tailwind', + 'variants' + ] + }], + 'local/expiring-todo-comments': [true, { + }], + 'string-quotes': 'single' + } +} diff --git a/docs/_data/eleventyComputed.js b/docs/_data/eleventyComputed.js index ba602e57..f07ef3df 100644 --- a/docs/_data/eleventyComputed.js +++ b/docs/_data/eleventyComputed.js @@ -44,6 +44,8 @@ function getLastCommitFromGit (path) { } async function getLastCommitFromGitHub (path) { + if (process.env.NODE_ENV === 'development') return null + const args = { ...context, path, sha: branch, per_page: 1 } // console.info('getting last commit from github:', args) @@ -53,7 +55,7 @@ async function getLastCommitFromGitHub (path) { res = await github.rest.repos.listCommits(args) commits = res.data } catch (error) { - console.warn('error loading commits for "%s"', path, error) + console.warn('error loading commits for "%s"', path) gitMetaCache.set(path, null) return null } @@ -71,7 +73,7 @@ async function getLastCommitFromGitHub (path) { // console.info('caching git meta for "%s"', path, meta) return meta } else { - console.warn('unable to get commit for "%s"', path, res) + console.warn('unable to get commit for "%s"', path) return null } } diff --git a/docs/_data/examples.js b/docs/_data/examples.js index 279975ff..c0a0deb2 100644 --- a/docs/_data/examples.js +++ b/docs/_data/examples.js @@ -32,6 +32,5 @@ async function getExamples () { }) } - return examples } diff --git a/docs/_data/package.js b/docs/_data/package.js index 5a82c09f..96b17a16 100644 --- a/docs/_data/package.js +++ b/docs/_data/package.js @@ -30,6 +30,6 @@ async function getPublishedStatusVersion () { console.warn('no published version status for %s', sha, statuses) } } catch (error) { - console.warn('unable to get published version status:', error) + console.warn('unable to get published version status:', error.message) } } diff --git a/docs/_data/utilities.js b/docs/_data/utilities.js new file mode 100644 index 00000000..74232673 --- /dev/null +++ b/docs/_data/utilities.js @@ -0,0 +1,41 @@ +const postcss = require('postcss') +const { readFileSync } = require('fs') + +const UTILITY_SELECTOR_PATTERN = /^\.[-:\w]+$/ + +module.exports = function getUtilities () { + const css = readFileSync('dist/css/utilities.css', 'utf8') + const root = postcss.parse(css) + /** @type [postcss.Declaration] */ + const decls = [] + root.walkRules(rule => { + if (UTILITY_SELECTOR_PATTERN.test(rule.selector)) { + rule.walkDecls((decl, index) => { + decls.push(decl) + }) + } + }) + + return { + decls, + byClassname: Object.fromEntries( + decls.map(decl => [ + decl.parent.selector.substring(1), + decl + ]) + ), + byProperty: groupBy( + decls, + decl => decl.prop + ) + } +} + +function groupBy (list /** @type [any] */, keyFunction /** type Function */) { + return list.reduce((map, d, i) => { + const key = keyFunction(d, i) + if (key in map) map[key].push(d) + else map[key] = [d] + return map + }, {}) +} diff --git a/docs/_includes/toc.njk b/docs/_includes/toc.njk index 2e8364d3..882a83c5 100644 --- a/docs/_includes/toc.njk +++ b/docs/_includes/toc.njk @@ -1,5 +1,5 @@