ui: Start using mermaid state diagrams in our docs (#12350)
This commit is contained in:
John Cowen
GitHub
parent
895da50986
commit
bdb89af605
|
|
@ -20,7 +20,10 @@
|
|||
"npm-run-all": "^4.1.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"xmlhttprequest-ssl": "^1.6.3"
|
||||
"xmlhttprequest-ssl": "^1.6.3",
|
||||
"ember-basic-dropdown": "3.0.21",
|
||||
"ember-changeset": "3.10.1",
|
||||
"validated-changeset": "0.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10 <=14"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
const path = require('path');
|
||||
|
||||
const autolinkHeadings = require('remark-autolink-headings');
|
||||
const prism = require('./lib/rehype-prism/index');
|
||||
const refractor = require('refractor');
|
||||
const gherkin = require('refractor/lang/gherkin');
|
||||
const prism = require('@mapbox/rehype-prism');
|
||||
const mermaid = require('refractor/lang/mermaid');
|
||||
const handlebars = require('refractor/lang/handlebars');
|
||||
|
||||
const fs = require('fs');
|
||||
const read = fs.readFileSync;
|
||||
|
|
@ -26,8 +28,14 @@ if($CONSUL_DOCFY_CONFIG.length > 0) {
|
|||
}
|
||||
|
||||
refractor.register(gherkin);
|
||||
refractor.alias('handlebars', 'hbs');
|
||||
refractor.alias('shell', 'sh');
|
||||
refractor.register(mermaid);
|
||||
refractor.register(handlebars);
|
||||
|
||||
refractor.alias({
|
||||
handlebars: ['hbs'],
|
||||
shell: ['sh']
|
||||
});
|
||||
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
|
|
|||
|
|
@ -209,6 +209,30 @@ An `<Action />` component with the correct aria attributes added.
|
|||
| `id` | `String` | A unique id which you **should** (for aria reasons) use for the root DOM element you are controlling with the disclosure |
|
||||
| `expanded` | `Boolean` | An alias of `disclosure.expanded`. Whether the disclosure is 'expanded' or not. If disclosure of the `Details` is controlled via CSS you **should** use this to set/unset `aria-hidden` |
|
||||
|
||||
## Internal States
|
||||
|
||||
Opened and closed states of the Disclosure are managed internally by a simple boolean state machine:
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> false
|
||||
true --> false: TOGGLE
|
||||
true --> false: FALSE
|
||||
false --> true: TOGGLE
|
||||
false --> true: TRUE
|
||||
```
|
||||
|
||||
which in the context of the Disclosure component is better represented via:
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> closed
|
||||
opened --> closed: TOGGLE
|
||||
opened --> closed: CLOSE
|
||||
closed --> opened: TOGGLE
|
||||
closed --> opened: OPEN
|
||||
```
|
||||
|
||||
## See
|
||||
|
||||
- [Component Source Code](./index.js)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
// modified from https://github.com/mapbox/rehype-prism/blob/fb4174fce30a1cde8d784fa94e7c04d8a7fa6d28/index.js
|
||||
|
||||
// MIT License
|
||||
|
||||
// Copyright (c) 2017 Mapbox
|
||||
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
|
||||
// The above copyright notice and this permission notice shall be included in all
|
||||
// copies or substantial portions of the Software.
|
||||
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
// SOFTWARE.
|
||||
|
||||
'use strict';
|
||||
|
||||
const visit = require('unist-util-visit');
|
||||
const nodeToString = require('hast-util-to-string');
|
||||
const refractor = require('refractor');
|
||||
|
||||
module.exports = (options) => {
|
||||
options = options || {};
|
||||
|
||||
if (options.alias) {
|
||||
refractor.alias(options.alias);
|
||||
}
|
||||
|
||||
return (tree) => {
|
||||
visit(tree, 'element', (node, index, parent) => {
|
||||
if (typeof parent === 'undefined' ||
|
||||
parent.tagName !== 'pre' ||
|
||||
node.tagName !== 'code'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const languagePrefix = 'language-';
|
||||
const langClass = ((node.properties.className || []).find(item => item.startsWith(languagePrefix)) || '').toLowerCase();
|
||||
if (langClass.length === 0) {
|
||||
return;
|
||||
}
|
||||
const lang = langClass.substr(languagePrefix.length);
|
||||
try {
|
||||
parent.properties.className = (parent.properties.className || []).concat(langClass);
|
||||
const result = refractor.highlight(nodeToString(node), lang);
|
||||
node.children = result;
|
||||
} catch (err) {
|
||||
if (options.ignoreMissing && /Unknown language/.test(err.message)) {
|
||||
return;
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
@ -64,7 +64,6 @@
|
|||
"@glimmer/tracking": "^1.0.0",
|
||||
"@hashicorp/ember-cli-api-double": "^3.1.0",
|
||||
"@lit/reactive-element": "^1.2.1",
|
||||
"@mapbox/rehype-prism": "^0.6.0",
|
||||
"@xstate/fsm": "^1.4.0",
|
||||
"a11y-dialog": "^6.0.1",
|
||||
"babel-eslint": "^10.0.3",
|
||||
|
|
@ -149,6 +148,7 @@
|
|||
"eslint-plugin-node": "^11.0.0",
|
||||
"faker": "^5.5.3",
|
||||
"flat": "^5.0.0",
|
||||
"hast-util-to-string": "^1.0.4",
|
||||
"husky": "^4.2.5",
|
||||
"ivy-codemirror": "^2.1.0",
|
||||
"js-yaml": "^4.0.0",
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
"pretty-ms": "^7.0.1",
|
||||
"qunit-dom": "^1.0.0",
|
||||
"react-is": "^17.0.1",
|
||||
"refractor": "^3.3.1",
|
||||
"refractor": "^3.5.0",
|
||||
"remark-autolink-headings": "^6.0.1",
|
||||
"remark-hbs": "^0.4.0",
|
||||
"sass": "^1.28.0",
|
||||
|
|
@ -171,13 +171,9 @@
|
|||
"text-encoding": "^0.7.0",
|
||||
"tippy.js": "^6.2.7",
|
||||
"torii": "^0.10.1",
|
||||
"unist-util-visit": "^2.0.3",
|
||||
"wayfarer": "^7.0.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"ember-basic-dropdown": "^3.0.10",
|
||||
"ember-changeset": "3.10.1",
|
||||
"validated-changeset": "0.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10 <=14"
|
||||
},
|
||||
|
|
|
|||
37
ui/yarn.lock
37
ui/yarn.lock
|
|
@ -1565,15 +1565,6 @@
|
|||
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.2.1.tgz#8620d7f0baf63e12821fa93c34d21e23477736f7"
|
||||
integrity sha512-03FYfMguIWo9E1y1qcTpXzoO8Ukpn0j5o4GjNFq/iHqJEPY6pYopsU44e7NSFIgCTorr8wdUU5PfVy8VeD6Rwg==
|
||||
|
||||
"@mapbox/rehype-prism@^0.6.0":
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.6.0.tgz#3d8a860870951d4354257d0ba908d11545bd5ed5"
|
||||
integrity sha512-/0Ev/PB4fXdKPT6VDzVpnAPxGpWFIc4Yz3mf/DzLEMxlpIPZpZlCzaFk4V4NGFofQXPc41+GpEcZtWP3VuFWVA==
|
||||
dependencies:
|
||||
hast-util-to-string "^1.0.4"
|
||||
refractor "^3.3.1"
|
||||
unist-util-visit "^2.0.3"
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
|
|
@ -4525,7 +4516,7 @@ cli-width@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
|
||||
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
|
||||
|
||||
clipboard@^2.0.0, clipboard@^2.0.4:
|
||||
clipboard@^2.0.4:
|
||||
version "2.0.8"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
|
||||
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
|
||||
|
|
@ -5511,7 +5502,7 @@ ember-auto-import@^1.5.2, ember-auto-import@^1.5.3, ember-auto-import@^1.6.0:
|
|||
walk-sync "^0.3.3"
|
||||
webpack "^4.43.0"
|
||||
|
||||
ember-basic-dropdown@^3.0.16:
|
||||
ember-basic-dropdown@3.0.21, ember-basic-dropdown@^3.0.16:
|
||||
version "3.0.21"
|
||||
resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.21.tgz#5711d071966919c9578d2d5ac2c6dcadbb5ea0e0"
|
||||
integrity sha512-Wu9hJWyqorKo+ZT2PMSIO1BxAeAdaiIC2IjSic0+HcKjmMU47botvG0xbxlprimOWaS9vM+nHat6Pt3xPvcB0A==
|
||||
|
|
@ -5556,7 +5547,7 @@ ember-changeset-validations@~3.9.0:
|
|||
ember-get-config "^0.2.4"
|
||||
ember-validators "^2.0.0"
|
||||
|
||||
ember-changeset@^3.9.1:
|
||||
ember-changeset@3.10.1, ember-changeset@^3.9.1:
|
||||
version "3.10.1"
|
||||
resolved "https://registry.yarnpkg.com/ember-changeset/-/ember-changeset-3.10.1.tgz#d6f06bc55f867a2c1ac7c5fd780776bd1e5a9b60"
|
||||
integrity sha512-4FoGKRcKxixSr+NBQ+ZoiwwbJE0/fuZRULUp9M1RIHejYhst+U8/ni47SsphrMhoRAcZCeyl+JqlBMlwR7v50g==
|
||||
|
|
@ -11616,12 +11607,10 @@ printf@^0.5.1:
|
|||
resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"
|
||||
integrity sha512-t3lYN6vPU5PZXDiEZZqoyXvN8wCsBfi8gPoxTKo2e5hhV673t/KUh+mfO8P8lCOCDC/BWcOGIxKyebxc5FuqLA==
|
||||
|
||||
prismjs@~1.23.0:
|
||||
version "1.23.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
|
||||
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
|
||||
optionalDependencies:
|
||||
clipboard "^2.0.0"
|
||||
prismjs@~1.25.0:
|
||||
version "1.25.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
|
||||
integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
|
||||
|
||||
private@^0.1.6, private@^0.1.8:
|
||||
version "0.1.8"
|
||||
|
|
@ -11980,14 +11969,14 @@ redeyed@~1.0.0:
|
|||
dependencies:
|
||||
esprima "~3.0.0"
|
||||
|
||||
refractor@^3.3.1:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.3.1.tgz#ebbc04b427ea81dc25ad333f7f67a0b5f4f0be3a"
|
||||
integrity sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==
|
||||
refractor@^3.5.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.5.0.tgz#334586f352dda4beaf354099b48c2d18e0819aec"
|
||||
integrity sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==
|
||||
dependencies:
|
||||
hastscript "^6.0.0"
|
||||
parse-entities "^2.0.0"
|
||||
prismjs "~1.23.0"
|
||||
prismjs "~1.25.0"
|
||||
|
||||
regenerate-unicode-properties@^8.2.0:
|
||||
version "8.2.0"
|
||||
|
|
@ -14275,7 +14264,7 @@ validate-npm-package-name@^3.0.0:
|
|||
dependencies:
|
||||
builtins "^1.0.3"
|
||||
|
||||
validated-changeset@~0.10.0:
|
||||
validated-changeset@0.10.0, validated-changeset@~0.10.0:
|
||||
version "0.10.0"
|
||||
resolved "https://registry.yarnpkg.com/validated-changeset/-/validated-changeset-0.10.0.tgz#2e8188c089ab282c1b51fba3c289073f6bd14c8b"
|
||||
integrity sha512-n8NB3ol6Tbi0O7bnq1wz81m5Wd1gfHw0HUcH4MatOfqO3DyXzWZV+bUaNq6wThXn20rMFB82C8pTNFSWbgXJLA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue