From 31d91e8c0b39bc355479c4940f731fd473ece91c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 16 Oct 2021 00:05:31 +0900 Subject: [PATCH 1/5] Storybook: Add Controls --- package-lock.json | 333 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + storybook/main.js | 1 + 3 files changed, 335 insertions(+) diff --git a/package-lock.json b/package-lock.json index 97de983112cf1..235b750396072 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7995,6 +7995,339 @@ } } }, + "@storybook/addon-controls": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.3.12.tgz", + "integrity": "sha512-WO/PbygE4sDg3BbstJ49q0uM3Xu5Nw4lnHR5N4hXSvRAulZt1d1nhphRTHjfX+CW+uBcfzkq9bksm6nKuwmOyw==", + "dev": true, + "requires": { + "@storybook/addons": "6.3.12", + "@storybook/api": "6.3.12", + "@storybook/client-api": "6.3.12", + "@storybook/components": "6.3.12", + "@storybook/node-logger": "6.3.12", + "@storybook/theming": "6.3.12", + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0" + }, + "dependencies": { + "@emotion/styled": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", + "dev": true, + "requires": { + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@storybook/addons": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", + "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "dev": true, + "requires": { + "@storybook/api": "6.3.12", + "@storybook/channels": "6.3.12", + "@storybook/client-logger": "6.3.12", + "@storybook/core-events": "6.3.12", + "@storybook/router": "6.3.12", + "@storybook/theming": "6.3.12", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.3.12.tgz", + "integrity": "sha512-LScRXUeCWEW/OP+jiooNMQICVdusv7azTmULxtm72fhkXFRiQs2CdRNTiqNg46JLLC9z95f1W+pGK66X6HiiQA==", + "dev": true, + "requires": { + "@reach/router": "^1.3.4", + "@storybook/channels": "6.3.12", + "@storybook/client-logger": "6.3.12", + "@storybook/core-events": "6.3.12", + "@storybook/csf": "0.0.1", + "@storybook/router": "6.3.12", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.3.12", + "@types/reach__router": "^1.3.7", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^5.3.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channel-postmessage": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.12.tgz", + "integrity": "sha512-Ou/2Ga3JRTZ/4sSv7ikMgUgLTeZMsXXWLXuscz4oaYhmOqAU9CrJw0G1NitwBgK/+qC83lEFSLujHkWcoQDOKg==", + "dev": true, + "requires": { + "@storybook/channels": "6.3.12", + "@storybook/client-logger": "6.3.12", + "@storybook/core-events": "6.3.12", + "core-js": "^3.8.2", + "global": "^4.4.0", + "qs": "^6.10.0", + "telejson": "^5.3.2" + } + }, + "@storybook/channels": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.3.12.tgz", + "integrity": "sha512-l4sA+g1PdUV8YCbgs47fIKREdEQAKNdQIZw0b7BfTvY9t0x5yfBywgQhYON/lIeiNGz2OlIuD+VUtqYfCtNSyw==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-api": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.12.tgz", + "integrity": "sha512-xnW+lKKK2T774z+rOr9Wopt1aYTStfb86PSs9p3Fpnc2Btcftln+C3NtiHZl8Ccqft8Mz/chLGgewRui6tNI8g==", + "dev": true, + "requires": { + "@storybook/addons": "6.3.12", + "@storybook/channel-postmessage": "6.3.12", + "@storybook/channels": "6.3.12", + "@storybook/client-logger": "6.3.12", + "@storybook/core-events": "6.3.12", + "@storybook/csf": "0.0.1", + "@types/qs": "^6.9.5", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "stable": "^0.1.8", + "store2": "^2.12.0", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.3.12.tgz", + "integrity": "sha512-zNDsamZvHnuqLznDdP9dUeGgQ9TyFh4ray3t1VGO7ZqWVZ2xtVCCXjDvMnOXI2ifMpX5UsrOvshIPeE9fMBmiQ==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.3.12.tgz", + "integrity": "sha512-kdQt8toUjynYAxDLrJzuG7YSNL6as1wJoyzNUaCfG06YPhvIAlKo7le9tS2mThVFN5e9nbKrW3N1V1sp6ypZXQ==", + "dev": true, + "requires": { + "@popperjs/core": "^2.6.0", + "@storybook/client-logger": "6.3.12", + "@storybook/csf": "0.0.1", + "@storybook/theming": "6.3.12", + "@types/color-convert": "^2.0.0", + "@types/overlayscrollbars": "^1.12.0", + "@types/react-syntax-highlighter": "11.0.5", + "color-convert": "^2.0.1", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "markdown-to-jsx": "^7.1.3", + "memoizerific": "^1.11.3", + "overlayscrollbars": "^1.13.1", + "polished": "^4.0.5", + "prop-types": "^15.7.2", + "react-colorful": "^5.1.2", + "react-popper-tooltip": "^3.1.1", + "react-syntax-highlighter": "^13.5.3", + "react-textarea-autosize": "^8.3.0", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.3.12.tgz", + "integrity": "sha512-SXfD7xUUMazaeFkB92qOTUV8Y/RghE4SkEYe5slAdjeocSaH7Nz2WV0rqNEgChg0AQc+JUI66no8L9g0+lw4Gw==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/node-logger": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.3.12.tgz", + "integrity": "sha512-iktOem/Ls2+dsZY9PhPeC6T1QhX/y7OInP88neLsqEPEbB2UXca3Ydv7OZBhBVbvN25W45b05MRzbtNUxYLNRw==", + "dev": true, + "requires": { + "@types/npmlog": "^4.1.2", + "chalk": "^4.1.0", + "core-js": "^3.8.2", + "npmlog": "^4.1.2", + "pretty-hrtime": "^1.0.3" + } + }, + "@storybook/router": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.3.12.tgz", + "integrity": "sha512-G/pNGCnrJRetCwyEZulHPT+YOcqEj/vkPVDTUfii2qgqukup6K0cjwgd7IukAURnAnnzTi1gmgFuEKUi8GE/KA==", + "dev": true, + "requires": { + "@reach/router": "^1.3.4", + "@storybook/client-logger": "6.3.12", + "@types/reach__router": "^1.3.7", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "ts-dedent": "^2.0.0" + } + }, + "@storybook/semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", + "dev": true, + "requires": { + "core-js": "^3.6.5", + "find-up": "^4.1.0" + } + }, + "@storybook/theming": { + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.3.12.tgz", + "integrity": "sha512-wOJdTEa/VFyFB2UyoqyYGaZdym6EN7RALuQOAMT6zHA282FBmKw8nL5DETHEbctpnHdcrMC/391teK4nNSrdOA==", + "dev": true, + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/is-prop-valid": "^0.8.6", + "@emotion/styled": "^10.0.27", + "@storybook/client-logger": "6.3.12", + "core-js": "^3.8.2", + "deep-object-diff": "^1.1.0", + "emotion-theming": "^10.0.27", + "global": "^4.4.0", + "memoizerific": "^1.11.3", + "polished": "^4.0.5", + "resolve-from": "^5.0.0", + "ts-dedent": "^2.0.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "dev": true + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true + }, + "qs": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz", + "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==", + "dev": true, + "requires": { + "side-channel": "^1.0.4" + } + }, + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + }, + "side-channel": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", + "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.2", + "object-inspect": "^1.9.0" + } + } + } + }, "@storybook/addon-docs": { "version": "6.3.2", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.3.2.tgz", diff --git a/package.json b/package.json index 9b67f738af318..56d6ec47031de 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "@octokit/rest": "16.26.0", "@octokit/webhooks": "7.1.0", "@storybook/addon-a11y": "6.3.2", + "@storybook/addon-controls": "6.3.12", "@storybook/addon-docs": "6.3.2", "@storybook/addon-knobs": "6.2.9", "@storybook/addon-storysource": "6.3.2", diff --git a/storybook/main.js b/storybook/main.js index 4aa2e1865ffc2..39ce98a5697e7 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -41,6 +41,7 @@ module.exports = { options: { configureJSX: true }, }, '@storybook/addon-knobs', + '@storybook/addon-controls', '@storybook/addon-storysource', '@storybook/addon-viewport', '@storybook/addon-a11y', From f7a58f2f6e8b4864e608f76b89312620ed2975c6 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 16 Oct 2021 00:16:15 +0900 Subject: [PATCH 2/5] Disable Knobs by default --- storybook/main.js | 2 +- storybook/preview.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/storybook/main.js b/storybook/main.js index 39ce98a5697e7..faba3f0559496 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -40,8 +40,8 @@ module.exports = { name: '@storybook/addon-docs', options: { configureJSX: true }, }, - '@storybook/addon-knobs', '@storybook/addon-controls', + '@storybook/addon-knobs', // deprecated, new stories should use addon-controls '@storybook/addon-storysource', '@storybook/addon-viewport', '@storybook/addon-a11y', diff --git a/storybook/preview.js b/storybook/preview.js index cf9ba69d20c17..58ad450bd011c 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -20,3 +20,11 @@ export const globalTypes = { }; export const decorators = [ WithRTL ]; + +export const parameters = { + knobs: { + // Knobs are deprecated, and new stories should use addon-controls. + // Will be enabled on a per-story basis until migration is complete. + disabled: true, + }, +}; From 9da7646b68f2e6bc57d7a444294f54e2a04dd718 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 16 Oct 2021 00:09:17 +0900 Subject: [PATCH 3/5] Enable Knobs where currently used --- .../src/alignment-matrix-control/stories/index.js | 3 +++ packages/components/src/base-control/stories/index.js | 8 +++++++- packages/components/src/button/stories/index.js | 8 +++++++- packages/components/src/card/stories/index.js | 3 +++ packages/components/src/checkbox-control/stories/index.js | 3 +++ packages/components/src/color-indicator/stories/index.js | 3 +++ packages/components/src/color-palette/stories/index.js | 8 +++++++- packages/components/src/color-picker/stories/index.js | 3 +++ packages/components/src/date-time/stories/index.js | 3 +++ packages/components/src/date-time/stories/time.js | 8 +++++++- packages/components/src/divider/stories/index.js | 3 +++ packages/components/src/dropdown-menu/stories/index.js | 8 +++++++- packages/components/src/elevation/stories/index.js | 3 +++ packages/components/src/external-link/stories/index.js | 8 +++++++- packages/components/src/font-size-picker/stories/index.js | 3 +++ packages/components/src/form-token-field/stories/index.js | 3 +++ packages/components/src/gradient-picker/stories/index.js | 3 +++ packages/components/src/grid/stories/index.js | 3 +++ packages/components/src/guide/stories/index.js | 8 +++++++- packages/components/src/icon/stories/index.js | 8 +++++++- packages/components/src/input-control/stories/index.js | 3 +++ packages/components/src/item-group/stories/index.js | 3 +++ packages/components/src/modal/stories/index.js | 8 +++++++- packages/components/src/notice/stories/index.js | 3 +++ packages/components/src/number-control/stories/index.js | 3 +++ packages/components/src/panel/stories/index.js | 8 +++++++- packages/components/src/placeholder/stories/index.js | 8 +++++++- packages/components/src/popover/stories/index.js | 8 +++++++- packages/components/src/range-control/stories/index.js | 8 +++++++- packages/components/src/resizable-box/stories/index.js | 8 +++++++- packages/components/src/scrollable/stories/index.js | 3 +++ packages/components/src/search-control/stories/index.js | 3 +++ packages/components/src/select-control/stories/index.js | 3 +++ packages/components/src/slot-fill/stories/index.js | 3 +++ packages/components/src/snackbar/stories/index.js | 8 +++++++- packages/components/src/spacer/stories/index.js | 3 +++ packages/components/src/surface/stories/index.js | 3 +++ packages/components/src/tab-panel/stories/index.js | 8 +++++++- packages/components/src/text-control/stories/index.js | 3 +++ packages/components/src/text-highlight/stories/index.js | 8 +++++++- packages/components/src/textarea-control/stories/index.js | 3 +++ packages/components/src/tip/stories/index.js | 8 +++++++- packages/components/src/toggle-control/stories/index.js | 8 +++++++- .../components/src/toggle-group-control/stories/index.js | 3 +++ packages/components/src/toolbar-button/stories/index.js | 8 +++++++- packages/components/src/tooltip/stories/index.js | 3 +++ packages/components/src/tree-select/stories/index.js | 3 +++ packages/components/src/truncate/stories/index.js | 3 +++ packages/components/src/unit-control/stories/index.js | 3 +++ packages/components/src/z-stack/stories/index.js | 3 +++ 50 files changed, 230 insertions(+), 20 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/stories/index.js b/packages/components/src/alignment-matrix-control/stories/index.js index a7139239fbd6c..bf282fbbf5256 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.js +++ b/packages/components/src/alignment-matrix-control/stories/index.js @@ -19,6 +19,9 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => { export default { title: 'Components/AlignmentMatrixControl', component: AlignmentMatrixControl, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/base-control/stories/index.js b/packages/components/src/base-control/stories/index.js index 6e468d2769d47..40d61d1e1996f 100644 --- a/packages/components/src/base-control/stories/index.js +++ b/packages/components/src/base-control/stories/index.js @@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs'; import BaseControl from '../'; import TextareaControl from '../../textarea-control'; -export default { title: 'Components/BaseControl', component: BaseControl }; +export default { + title: 'Components/BaseControl', + component: BaseControl, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const id = text( 'Id', 'textarea-1' ); diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js index a6549008c4975..5b8fe44055280 100644 --- a/packages/components/src/button/stories/index.js +++ b/packages/components/src/button/stories/index.js @@ -20,7 +20,13 @@ import { import './style.css'; import Button from '../'; -export default { title: 'Components/Button', component: Button }; +export default { + title: 'Components/Button', + component: Button, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const label = text( 'Label', 'Default Button' ); diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js index 8bf66a57feaec..747311bef6f0a 100644 --- a/packages/components/src/card/stories/index.js +++ b/packages/components/src/card/stories/index.js @@ -21,6 +21,9 @@ import Button from '../../button'; export default { component: Card, title: 'Components/Card', + parameters: { + knobs: { disabled: false }, + }, }; const KNOBS_GROUPS = { diff --git a/packages/components/src/checkbox-control/stories/index.js b/packages/components/src/checkbox-control/stories/index.js index be0fb46aaa920..0f107c2e0b39d 100644 --- a/packages/components/src/checkbox-control/stories/index.js +++ b/packages/components/src/checkbox-control/stories/index.js @@ -16,6 +16,9 @@ import CheckboxControl from '../'; export default { title: 'Components/CheckboxControl', component: CheckboxControl, + parameters: { + knobs: { disabled: false }, + }, }; const CheckboxControlWithState = ( { checked, ...props } ) => { diff --git a/packages/components/src/color-indicator/stories/index.js b/packages/components/src/color-indicator/stories/index.js index f01d534ad0335..d752706e90b5c 100644 --- a/packages/components/src/color-indicator/stories/index.js +++ b/packages/components/src/color-indicator/stories/index.js @@ -11,6 +11,9 @@ import ColorIndicator from '../'; export default { title: 'Components/ColorIndicator', component: ColorIndicator, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.js index 11096ce9ae67c..d4b4190ae228b 100644 --- a/packages/components/src/color-palette/stories/index.js +++ b/packages/components/src/color-palette/stories/index.js @@ -13,7 +13,13 @@ import { useState } from '@wordpress/element'; */ import ColorPalette from '../'; -export default { title: 'Components/ColorPalette', component: ColorPalette }; +export default { + title: 'Components/ColorPalette', + component: ColorPalette, + parameters: { + knobs: { disabled: false }, + }, +}; const ColorPaletteWithState = ( props ) => { const [ color, setColor ] = useState( '#F00' ); diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js index 95a8fa1ef2bdb..795c347bba3c3 100644 --- a/packages/components/src/color-picker/stories/index.js +++ b/packages/components/src/color-picker/stories/index.js @@ -19,6 +19,9 @@ import { space } from '../../ui/utils/space'; export default { component: ColorPicker, title: 'Components/ColorPicker', + parameters: { + knobs: { disabled: false }, + }, }; const PROP_UNSET = 'unset'; diff --git a/packages/components/src/date-time/stories/index.js b/packages/components/src/date-time/stories/index.js index e929e9ab99955..8edf4ec6a3b4e 100644 --- a/packages/components/src/date-time/stories/index.js +++ b/packages/components/src/date-time/stories/index.js @@ -16,6 +16,9 @@ import DateTimePicker from '../'; export default { title: 'Components/DateTimePicker', component: DateTimePicker, + parameters: { + knobs: { disabled: false }, + }, }; const DateTimePickerWithState = ( { is12Hour } ) => { diff --git a/packages/components/src/date-time/stories/time.js b/packages/components/src/date-time/stories/time.js index 52ed6fb7ce832..5622d5ce279bc 100644 --- a/packages/components/src/date-time/stories/time.js +++ b/packages/components/src/date-time/stories/time.js @@ -9,7 +9,13 @@ import TimePicker from '../time'; import { date, boolean } from '@storybook/addon-knobs'; import { noop } from 'lodash'; -export default { title: 'Components/TimePicker', component: TimePicker }; +export default { + title: 'Components/TimePicker', + component: TimePicker, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { return ( diff --git a/packages/components/src/divider/stories/index.js b/packages/components/src/divider/stories/index.js index 6ba09152d874c..a3a7b595db3bf 100644 --- a/packages/components/src/divider/stories/index.js +++ b/packages/components/src/divider/stories/index.js @@ -11,6 +11,9 @@ import { Divider } from '..'; export default { component: Divider, title: 'Components (Experimental)/Divider', + parameters: { + knobs: { disabled: false }, + }, }; const BlackDivider = ( props ) => ( diff --git a/packages/components/src/dropdown-menu/stories/index.js b/packages/components/src/dropdown-menu/stories/index.js index 6c73fe4c0127c..9afcb69f58eb3 100644 --- a/packages/components/src/dropdown-menu/stories/index.js +++ b/packages/components/src/dropdown-menu/stories/index.js @@ -13,7 +13,13 @@ import DropdownMenu from '../'; */ import { menu, arrowUp, arrowDown } from '@wordpress/icons'; -export default { title: 'Components/DropdownMenu', component: DropdownMenu }; +export default { + title: 'Components/DropdownMenu', + component: DropdownMenu, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const label = text( 'Label', 'Select a direction.' ); diff --git a/packages/components/src/elevation/stories/index.js b/packages/components/src/elevation/stories/index.js index f52c1f8ae3216..c03ff38138011 100644 --- a/packages/components/src/elevation/stories/index.js +++ b/packages/components/src/elevation/stories/index.js @@ -25,6 +25,9 @@ import { useCallback } from '@wordpress/element'; export default { component: Elevation, title: 'Components (Experimental)/Elevation', + parameters: { + knobs: { disabled: false }, + }, }; const ElevationWrapper = ( { children } ) => ( diff --git a/packages/components/src/external-link/stories/index.js b/packages/components/src/external-link/stories/index.js index 82cc030f96882..ded0b1f3d8373 100644 --- a/packages/components/src/external-link/stories/index.js +++ b/packages/components/src/external-link/stories/index.js @@ -7,7 +7,13 @@ import { text } from '@storybook/addon-knobs'; */ import ExternalLink from '../'; -export default { title: 'Components/ExternalLink', component: ExternalLink }; +export default { + title: 'Components/ExternalLink', + component: ExternalLink, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const title = text( 'children', 'WordPress' ); diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js index 050ea47aa851d..aebfcfd422b77 100644 --- a/packages/components/src/font-size-picker/stories/index.js +++ b/packages/components/src/font-size-picker/stories/index.js @@ -16,6 +16,9 @@ import FontSizePicker from '../'; export default { title: 'Components/FontSizePicker', component: FontSizePicker, + parameters: { + knobs: { disabled: false }, + }, }; const FontSizePickerWithState = ( { initialValue, ...props } ) => { diff --git a/packages/components/src/form-token-field/stories/index.js b/packages/components/src/form-token-field/stories/index.js index 2bc3d1ef9f2a7..fd0e9791f59b8 100644 --- a/packages/components/src/form-token-field/stories/index.js +++ b/packages/components/src/form-token-field/stories/index.js @@ -16,6 +16,9 @@ import FormTokenField from '../'; export default { title: 'Components/FormTokenField', component: FormTokenField, + parameters: { + knobs: { disabled: false }, + }, }; const continents = [ diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.js index 30d719ce4bec3..0b15c04226a97 100644 --- a/packages/components/src/gradient-picker/stories/index.js +++ b/packages/components/src/gradient-picker/stories/index.js @@ -16,6 +16,9 @@ import GradientPicker from '../'; export default { title: 'Components/GradientPicker', component: GradientPicker, + parameters: { + knobs: { disabled: false }, + }, }; const GradientPickerWithState = ( props ) => { diff --git a/packages/components/src/grid/stories/index.js b/packages/components/src/grid/stories/index.js index 0d7b5c29b0563..76abdf00cf27d 100644 --- a/packages/components/src/grid/stories/index.js +++ b/packages/components/src/grid/stories/index.js @@ -12,6 +12,9 @@ import { Grid } from '..'; export default { component: Grid, title: 'Components (Experimental)/Grid', + parameters: { + knobs: { disabled: false }, + }, }; const Item = ( props ) => ( diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js index cae514e84107a..6daea82d72f61 100644 --- a/packages/components/src/guide/stories/index.js +++ b/packages/components/src/guide/stories/index.js @@ -15,7 +15,13 @@ import { useState } from '@wordpress/element'; import Button from '../../button'; import Guide from '../'; -export default { title: 'Components/Guide', component: Guide }; +export default { + title: 'Components/Guide', + component: Guide, + parameters: { + knobs: { disabled: false }, + }, +}; const ModalExample = ( { numberOfPages, ...props } ) => { const [ isOpen, setOpen ] = useState( false ); diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js index 06d6f6c4d9bc4..4ade0384e6e26 100644 --- a/packages/components/src/icon/stories/index.js +++ b/packages/components/src/icon/stories/index.js @@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons'; */ import Icon from '../'; -export default { title: 'Components/Icon', component: Icon }; +export default { + title: 'Components/Icon', + component: Icon, + parameters: { + knobs: { disabled: false }, + }, +}; const IconSizeLabel = ( { size } ) => (
{ size }px
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js index 4e170267dea5b..2a0d088f70065 100644 --- a/packages/components/src/input-control/stories/index.js +++ b/packages/components/src/input-control/stories/index.js @@ -16,6 +16,9 @@ import InputControl from '../'; export default { title: 'Components/InputControl', component: InputControl, + parameters: { + knobs: { disabled: false }, + }, }; function Example() { diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js index 6be6717e1f9ae..2ae503630345d 100644 --- a/packages/components/src/item-group/stories/index.js +++ b/packages/components/src/item-group/stories/index.js @@ -26,6 +26,9 @@ import { ZStack } from '../../z-stack'; export default { component: ItemGroup, title: 'Components (Experimental)/ItemGroup', + parameters: { + knobs: { disabled: false }, + }, }; // Using `unset` instead of `undefined` as Storybook seems to sometimes pass an diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index f08a08156efea..862b5f05f6fc0 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -16,7 +16,13 @@ import Modal from '../'; import { useState } from '@wordpress/element'; import { wordpress } from '@wordpress/icons'; -export default { title: 'Components/Modal', component: Modal }; +export default { + title: 'Components/Modal', + component: Modal, + parameters: { + knobs: { disabled: false }, + }, +}; const ModalExample = ( props ) => { const [ isOpen, setOpen ] = useState( false ); diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js index 598bc420fbf95..646fe070fea94 100644 --- a/packages/components/src/notice/stories/index.js +++ b/packages/components/src/notice/stories/index.js @@ -11,6 +11,9 @@ import Notice from '../'; export default { title: 'Components/Notice', component: Notice, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js index c7bb15b41e80d..42fb620217ee1 100644 --- a/packages/components/src/number-control/stories/index.js +++ b/packages/components/src/number-control/stories/index.js @@ -16,6 +16,9 @@ import NumberControl from '../'; export default { title: 'Components/NumberControl', component: NumberControl, + parameters: { + knobs: { disabled: false }, + }, }; function Example() { diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js index 03674251dc6a0..7eb8ff5002ba7 100644 --- a/packages/components/src/panel/stories/index.js +++ b/packages/components/src/panel/stories/index.js @@ -15,7 +15,13 @@ import PanelBody from '../body'; */ import { wordpress } from '@wordpress/icons'; -export default { title: 'Components/Panel', component: Panel }; +export default { + title: 'Components/Panel', + component: Panel, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const bodyTitle = text( 'Body Title', 'My Block Settings' ); diff --git a/packages/components/src/placeholder/stories/index.js b/packages/components/src/placeholder/stories/index.js index 171b68860a2d6..20f80f3ee0e47 100644 --- a/packages/components/src/placeholder/stories/index.js +++ b/packages/components/src/placeholder/stories/index.js @@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs'; import Placeholder from '../'; import TextControl from '../../text-control'; -export default { title: 'Components/Placeholder', component: Placeholder }; +export default { + title: 'Components/Placeholder', + component: Placeholder, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const icon = text( 'Icon', 'smiley' ); diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 3986a5bad8ec4..4c163f2e5ccb7 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -15,7 +15,13 @@ import { DraggableWrapper } from './_utils'; import Popover from '../'; import Button from '../../button'; -export default { title: 'Components/Popover', component: Popover }; +export default { + title: 'Components/Popover', + component: Popover, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const show = boolean( 'Example: Show', true ); diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js index febc98b4c8d80..d6b2e50e3a502 100644 --- a/packages/components/src/range-control/stories/index.js +++ b/packages/components/src/range-control/stories/index.js @@ -16,7 +16,13 @@ import { wordpress } from '@wordpress/icons'; import RangeControl from '../index'; import { COLORS } from '../../utils'; -export default { title: 'Components/RangeControl', component: RangeControl }; +export default { + title: 'Components/RangeControl', + component: RangeControl, + parameters: { + knobs: { disabled: false }, + }, +}; const RangeControlWithState = ( props ) => { const initialValue = props.value === undefined ? 5 : props.value; diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js index d5dbe702bc72c..5afd1f6af7705 100644 --- a/packages/components/src/resizable-box/stories/index.js +++ b/packages/components/src/resizable-box/stories/index.js @@ -13,7 +13,13 @@ import ResizableBox from '../'; */ import { useState } from '@wordpress/element'; -export default { title: 'Components/ResizableBox', component: ResizableBox }; +export default { + title: 'Components/ResizableBox', + component: ResizableBox, + parameters: { + knobs: { disabled: false }, + }, +}; const Example = ( props ) => { const [ attributes, setAttributes ] = useState( { diff --git a/packages/components/src/scrollable/stories/index.js b/packages/components/src/scrollable/stories/index.js index d04c37b516d47..6065e83d8dc5a 100644 --- a/packages/components/src/scrollable/stories/index.js +++ b/packages/components/src/scrollable/stories/index.js @@ -14,6 +14,9 @@ import { Scrollable } from '../'; export default { component: Scrollable, title: 'Components (Experimental)/Scrollable', + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js index 2710542a5d6a2..9b769ce0958e8 100644 --- a/packages/components/src/search-control/stories/index.js +++ b/packages/components/src/search-control/stories/index.js @@ -16,6 +16,9 @@ import SearchControl from '../'; export default { title: 'Components/SearchControl', component: SearchControl, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/select-control/stories/index.js b/packages/components/src/select-control/stories/index.js index 61959555429c8..bd3cca9e67320 100644 --- a/packages/components/src/select-control/stories/index.js +++ b/packages/components/src/select-control/stories/index.js @@ -16,6 +16,9 @@ import SelectControl from '..'; export default { title: 'Components/SelectControl', component: SelectControl, + parameters: { + knobs: { disabled: false }, + }, }; const SelectControlWithState = ( props ) => { diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.js index 2af19ecf012c3..665ac82d8e22d 100644 --- a/packages/components/src/slot-fill/stories/index.js +++ b/packages/components/src/slot-fill/stories/index.js @@ -16,6 +16,9 @@ import { Slot, Fill, Provider } from '../'; export default { title: 'Components/SlotFill', component: Slot, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/snackbar/stories/index.js b/packages/components/src/snackbar/stories/index.js index bf634c2131ebc..e9a52252a3957 100644 --- a/packages/components/src/snackbar/stories/index.js +++ b/packages/components/src/snackbar/stories/index.js @@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs'; */ import Snackbar from '../'; -export default { title: 'Components/Snackbar', component: Snackbar }; +export default { + title: 'Components/Snackbar', + component: Snackbar, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const content = text( diff --git a/packages/components/src/spacer/stories/index.js b/packages/components/src/spacer/stories/index.js index 230b5d1f298a8..02ab9c8c704c2 100644 --- a/packages/components/src/spacer/stories/index.js +++ b/packages/components/src/spacer/stories/index.js @@ -14,6 +14,9 @@ import { Spacer } from '..'; export default { component: Spacer, title: 'Components (Experimental)/Spacer', + parameters: { + knobs: { disabled: false }, + }, }; const PROPS = [ diff --git a/packages/components/src/surface/stories/index.js b/packages/components/src/surface/stories/index.js index ae514113374a8..463b5f29fddc8 100644 --- a/packages/components/src/surface/stories/index.js +++ b/packages/components/src/surface/stories/index.js @@ -12,6 +12,9 @@ import { Text } from '../../text'; export default { component: Surface, title: 'Components (Experimental)/Surface', + parameters: { + knobs: { disabled: false }, + }, }; const variantOptions = { diff --git a/packages/components/src/tab-panel/stories/index.js b/packages/components/src/tab-panel/stories/index.js index 3c15007f3aead..5610827013401 100644 --- a/packages/components/src/tab-panel/stories/index.js +++ b/packages/components/src/tab-panel/stories/index.js @@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs'; */ import TabPanel from '../'; -export default { title: 'Components/TabPanel', component: TabPanel }; +export default { + title: 'Components/TabPanel', + component: TabPanel, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { return ( diff --git a/packages/components/src/text-control/stories/index.js b/packages/components/src/text-control/stories/index.js index 4d7163faff545..67614188e902d 100644 --- a/packages/components/src/text-control/stories/index.js +++ b/packages/components/src/text-control/stories/index.js @@ -16,6 +16,9 @@ import TextControl from '../'; export default { title: 'Components/TextControl', component: TextControl, + parameters: { + knobs: { disabled: false }, + }, }; const TextControlWithState = ( props ) => { diff --git a/packages/components/src/text-highlight/stories/index.js b/packages/components/src/text-highlight/stories/index.js index 4e788b0c3c78a..eb4e3b6590995 100644 --- a/packages/components/src/text-highlight/stories/index.js +++ b/packages/components/src/text-highlight/stories/index.js @@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs'; */ import TextHighlight from '../'; -export default { title: 'Components/TextHighlight', component: TextHighlight }; +export default { + title: 'Components/TextHighlight', + component: TextHighlight, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const textToMatch = text( diff --git a/packages/components/src/textarea-control/stories/index.js b/packages/components/src/textarea-control/stories/index.js index 64f0d140c6d7c..6d971e580f050 100644 --- a/packages/components/src/textarea-control/stories/index.js +++ b/packages/components/src/textarea-control/stories/index.js @@ -16,6 +16,9 @@ import TextareaControl from '../'; export default { title: 'Components/TextareaControl', component: TextareaControl, + parameters: { + knobs: { disabled: false }, + }, }; const TextareaControlWithState = ( props ) => { diff --git a/packages/components/src/tip/stories/index.js b/packages/components/src/tip/stories/index.js index 19c0f2d0608c6..189d014c2f44a 100644 --- a/packages/components/src/tip/stories/index.js +++ b/packages/components/src/tip/stories/index.js @@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs'; */ import Tip from '../'; -export default { title: 'Components/Tip', component: Tip }; +export default { + title: 'Components/Tip', + component: Tip, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const tipText = text( 'Text', 'An example tip' ); diff --git a/packages/components/src/toggle-control/stories/index.js b/packages/components/src/toggle-control/stories/index.js index e006b68bc1a38..b4b49b4e31dd9 100644 --- a/packages/components/src/toggle-control/stories/index.js +++ b/packages/components/src/toggle-control/stories/index.js @@ -13,7 +13,13 @@ import { useState } from '@wordpress/element'; */ import ToggleControl from '../'; -export default { title: 'Components/ToggleControl', component: ToggleControl }; +export default { + title: 'Components/ToggleControl', + component: ToggleControl, + parameters: { + knobs: { disabled: false }, + }, +}; const ToggleControlWithState = ( { helpTextChecked, diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js index 3ca2b7ea602eb..b6b05de08bb47 100644 --- a/packages/components/src/toggle-group-control/stories/index.js +++ b/packages/components/src/toggle-group-control/stories/index.js @@ -18,6 +18,9 @@ import Button from '../../button'; export default { component: ToggleGroupControl, title: 'Components/ToggleGroupControl', + parameters: { + knobs: { disabled: false }, + }, }; const KNOBS_GROUPS = { diff --git a/packages/components/src/toolbar-button/stories/index.js b/packages/components/src/toolbar-button/stories/index.js index 18818224a85a3..b24fafe031987 100644 --- a/packages/components/src/toolbar-button/stories/index.js +++ b/packages/components/src/toolbar-button/stories/index.js @@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons'; import { Toolbar } from '../../'; import ToolbarButton from '../'; -export default { title: 'Components/ToolbarButton', component: ToolbarButton }; +export default { + title: 'Components/ToolbarButton', + component: ToolbarButton, + parameters: { + knobs: { disabled: false }, + }, +}; export const _default = () => { const label = text( 'Label', 'This is an example label.' ); diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js index a15588c264ca2..8685d6ecbe02e 100644 --- a/packages/components/src/tooltip/stories/index.js +++ b/packages/components/src/tooltip/stories/index.js @@ -17,6 +17,9 @@ import Tooltip from '../'; export default { title: 'Components/ToolTip', component: Tooltip, + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/tree-select/stories/index.js b/packages/components/src/tree-select/stories/index.js index c4f299bde2b4c..7a1e07c0f2a98 100644 --- a/packages/components/src/tree-select/stories/index.js +++ b/packages/components/src/tree-select/stories/index.js @@ -16,6 +16,9 @@ import TreeSelect from '../'; export default { title: 'Components/TreeSelect', component: TreeSelect, + parameters: { + knobs: { disabled: false }, + }, }; const TreeSelectWithState = ( props ) => { diff --git a/packages/components/src/truncate/stories/index.js b/packages/components/src/truncate/stories/index.js index 0417514d06841..55dd719bf14bc 100644 --- a/packages/components/src/truncate/stories/index.js +++ b/packages/components/src/truncate/stories/index.js @@ -11,6 +11,9 @@ import { Truncate } from '..'; export default { component: Truncate, title: 'Components (Experimental)/Truncate', + parameters: { + knobs: { disabled: false }, + }, }; export const _default = () => { diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js index 2605bc4b4c03b..de4bdfc52a4fe 100644 --- a/packages/components/src/unit-control/stories/index.js +++ b/packages/components/src/unit-control/stories/index.js @@ -18,6 +18,9 @@ import { CSS_UNITS } from '../utils'; export default { title: 'Components/UnitControl', component: UnitControl, + parameters: { + knobs: { disabled: false }, + }, }; const ControlWrapperView = styled.div` diff --git a/packages/components/src/z-stack/stories/index.js b/packages/components/src/z-stack/stories/index.js index 49cacc95b9c13..04685fdf9dae4 100644 --- a/packages/components/src/z-stack/stories/index.js +++ b/packages/components/src/z-stack/stories/index.js @@ -14,6 +14,9 @@ import { ZStack } from '..'; export default { component: ZStack, title: 'Components (Experimental)/ZStack', + parameters: { + knobs: { disabled: false }, + }, }; const Avatar = ( { backgroundColor } ) => { From 87ca2908569bf1a6f9865d2a2145825bc5a0746c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 16 Oct 2021 00:47:05 +0900 Subject: [PATCH 4/5] Update contributor docs --- packages/components/CONTRIBUTING.md | 48 +++++++++++++++++++---------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 088f56f43d6bb..8dab3b4d50f9b 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -8,17 +8,21 @@ This set of guidelines should apply especially to newly introduced components. I For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group). -- [Compatibility](#compatibility) -- [Compound components](#compound-components) -- [Components & Hooks](#components--hooks) -- [TypeScript](#typescript) -- [Styling](#styling) -- [Context system](#context-system) -- [Unit tests](#unit-tests) -- [Storybook](#storybook) -- [Documentation](#documentation) -- [README example](#README-example) -- [Folder structure](#folder-structure) +- [Contributing](#contributing) + - [Compatibility](#compatibility) + - [Compound components](#compound-components) + - [Components & Hooks](#components--hooks) + - [TypeScript](#typescript) + - [Styling](#styling) + - [Context system](#context-system) + - [Unit tests](#unit-tests) + - [Storybook](#storybook) + - [Documentation](#documentation) + - [README example](#readme-example) + - [Props](#props) + - [`propName`: Typescript style type i.e `string`, `number`, `( nextValue: string ) => void`](#propname-typescript-style-type-ie-string-number--nextvalue-string---void) + - [Inherited props](#inherited-props) + - [Context](#context) ## Compatibility @@ -277,14 +281,24 @@ import Button from '../'; export default { title: 'Components/Button', component: Button }; -export const _default = () => ; - -export const primary = () => ; - -export const secondary = () => ; +const Template = ( args ) =>