@storybook/addon-docs 6.2.5 → 6.2.9

package/dist/cjs/blocks/ArgsTable.js

@@ -245,10 +245,12 @@ var ComponentsTable = function ComponentsTable(props) {
   var context = (0, _react.useContext)(_DocsContext.DocsContext);
   var components = props.components,
       include = props.include,
-      exclude = props.exclude;
+      exclude = props.exclude,
+      sort = props.sort;
   var tabs = addComponentTabs({}, components, context, include, exclude);
   return /*#__PURE__*/_react.default.createElement(_components.TabbedArgsTable, {
-    tabs: tabs
+    tabs: tabs,
+    sort: sort
   });
 };
 
@@ -291,7 +293,9 @@ var ArgsTable = function ArgsTable(props) {
       };
     }
 
-    return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, mainProps);
+    return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, _extends({}, mainProps, {
+      sort: sort
+    }));
   }
 
   if (components) {

package/dist/esm/blocks/ArgsTable.js

@@ -212,10 +212,12 @@ export var ComponentsTable = function ComponentsTable(props) {
   var context = useContext(DocsContext);
   var components = props.components,
       include = props.include,
-      exclude = props.exclude;
+      exclude = props.exclude,
+      sort = props.sort;
   var tabs = addComponentTabs({}, components, context, include, exclude);
   return /*#__PURE__*/React.createElement(TabbedArgsTable, {
-    tabs: tabs
+    tabs: tabs,
+    sort: sort
   });
 };
 export var ArgsTable = function ArgsTable(props) {
@@ -255,7 +257,9 @@ export var ArgsTable = function ArgsTable(props) {
       };
     }
 
-    return /*#__PURE__*/React.createElement(PureArgsTable, mainProps);
+    return /*#__PURE__*/React.createElement(PureArgsTable, _extends({}, mainProps, {
+      sort: sort
+    }));
   }
 
   if (components) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.2.5",
+  "version": "6.2.9",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -58,19 +58,19 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.2.5",
-    "@storybook/api": "6.2.5",
-    "@storybook/builder-webpack4": "6.2.5",
-    "@storybook/client-api": "6.2.5",
-    "@storybook/client-logger": "6.2.5",
-    "@storybook/components": "6.2.5",
-    "@storybook/core": "6.2.5",
-    "@storybook/core-events": "6.2.5",
+    "@storybook/addons": "6.2.9",
+    "@storybook/api": "6.2.9",
+    "@storybook/builder-webpack4": "6.2.9",
+    "@storybook/client-api": "6.2.9",
+    "@storybook/client-logger": "6.2.9",
+    "@storybook/components": "6.2.9",
+    "@storybook/core": "6.2.9",
+    "@storybook/core-events": "6.2.9",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.2.5",
-    "@storybook/postinstall": "6.2.5",
-    "@storybook/source-loader": "6.2.5",
-    "@storybook/theming": "6.2.5",
+    "@storybook/node-logger": "6.2.9",
+    "@storybook/postinstall": "6.2.9",
+    "@storybook/source-loader": "6.2.9",
+    "@storybook/theming": "6.2.9",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -97,10 +97,10 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.2.5",
-    "@storybook/react": "6.2.5",
-    "@storybook/vue": "6.2.5",
-    "@storybook/web-components": "6.2.5",
+    "@storybook/angular": "6.2.9",
+    "@storybook/react": "6.2.9",
+    "@storybook/vue": "6.2.9",
+    "@storybook/web-components": "6.2.9",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -131,9 +131,9 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
-    "@storybook/angular": "6.2.5",
-    "@storybook/vue": "6.2.5",
-    "@storybook/vue3": "6.2.5",
+    "@storybook/angular": "6.2.9",
+    "@storybook/vue": "6.2.9",
+    "@storybook/vue3": "6.2.9",
     "babel-loader": "^8.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -174,7 +174,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fd587f55266ddb52ba0a508b11089895ce8c3b59",
+  "gitHead": "588d1330b80596a41cc6bae7aecc00201a6c0679",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/web-components/README.md

@@ -0,0 +1,107 @@
+<h1>Storybook Docs for Web Components</h1>
+
+- [Installation](#installation)
+- [Props tables](#props-tables)
+- [Stories not inline](#stories-not-inline)
+- [More resources](#more-resources)
+
+## Installation
+
+- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
+- Be sure to have a [custom-elements.json](./#custom-elementsjson) file.
+- Add to your `.storybook/preview.js`
+
+  ```js
+  import { setCustomElements } from '@storybook/web-components';
+  import customElements from '../custom-elements.json';
+
+  setCustomElements(customElements);
+  ```
+
+- Add to your story files
+
+  ```js
+  export default {
+    title: 'Demo Card',
+    component: 'your-component-name', // which is also found in the `custom-elements.json`
+  };
+  ```
+
+## Props tables
+
+In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
+
+You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
+
+Known analyzers that output `custom-elements.json`:
+
+- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
+  - Supports LitElement, Polymer, Vanilla, (Stencil)
+- [stenciljs](https://stenciljs.com/)
+  - Supports Stencil (but does not have all metadata)
+
+To generate this file with Stencil, add `docs-vscode` to outputTargets in `stencil.config.ts`:
+
+```
+{
+  type: 'docs-vscode',
+  file: 'custom-elements.json'
+},
+```
+
+The file looks something like this:
+
+```json
+{
+  "version": 2,
+  "tags": [
+    {
+      "name": "demo-wc-card",
+      "properties": [
+        {
+          "name": "header",
+          "type": "String",
+          "attribute": "header",
+          "description": "Shown at the top of the card",
+          "default": "Your Message"
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssProperties": []
+    }
+  ]
+}
+```
+
+For a full example see the [web-components-kitchen-sink/custom-elements.json](../../../examples/web-components-kitchen-sink/custom-elements.json).
+
+## Stories not inline
+
+By default stories are rendered inline.
+For web components that is usually fine as they are style encapsulated via shadow dom.
+However when you have a style tag in you template it might be best to show them in an iframe.
+
+To always use iframes you can set
+
+```js
+addParameters({
+  docs: {
+    inlineStories: false,
+  },
+});
+```
+
+or add it to individual stories.
+
+```js
+<Story inline={false} />
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)

package/web-components/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/common/index');