diff --git a/addons/info/README.md b/addons/info/README.md index dd1735005b23..f582fa5f29ac 100644 --- a/addons/info/README.md +++ b/addons/info/README.md @@ -101,7 +101,7 @@ setDefaults({ propTables: [/* Components used in story */], // displays Prop Tables with this components propTablesExclude: [], // Exclude Components from being shown in Prop Tables section styles: {}, // Overrides styles of addon - marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details + components: {}, // Overrides components used to display markdown maxPropsIntoLine: 1, // Max props to display per line in source code maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name maxPropArrayLength: 10, // Displays the first 10 items in the default prop array diff --git a/addons/info/package.json b/addons/info/package.json index ef0f5b757949..01fb5027d233 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -14,10 +14,11 @@ "storybook": "start-storybook -p 9010" }, "dependencies": { + "@storybook/client-logger": "^3.3.0-alpha.4", "@storybook/components": "^3.3.0-alpha.4", "babel-runtime": "^6.26.0", "global": "^4.3.2", - "marksy": "^2.0.0", + "marksy": "^6.0.1", "prop-types": "^15.6.0", "react-addons-create-fragment": "^15.5.3", "util-deprecate": "^1.0.2" diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index bd6e8f992f85..43b0f2b4279b 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,6 +1,6 @@ /* eslint no-underscore-dangle: 0 */ -import React from 'react'; +import React, { createElement } from 'react'; import PropTypes from 'prop-types'; import global from 'global'; import { baseFonts } from '@storybook/components'; @@ -107,7 +107,10 @@ export default class Story extends React.Component { open: false, stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), }; - this.marksy = marksy(this.props.marksyConf); + this.marksy = marksy({ + createElement, + elements: this.props.components, + }); } componentWillReceiveProps(nextProps) { @@ -383,7 +386,7 @@ Story.propTypes = { showSource: PropTypes.bool, styles: PropTypes.func.isRequired, children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - marksyConf: PropTypes.object, // eslint-disable-line react/forbid-prop-types + components: PropTypes.shape({}), maxPropsIntoLine: PropTypes.number.isRequired, maxPropObjectKeys: PropTypes.number.isRequired, maxPropArrayLength: PropTypes.number.isRequired, @@ -398,5 +401,5 @@ Story.defaultProps = { showInline: false, showHeader: true, showSource: true, - marksyConf: {}, + components: {}, }; diff --git a/addons/info/src/index.js b/addons/info/src/index.js index a89ea2ea9c93..54a2ed530260 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import deprecate from 'util-deprecate'; +import logger from '@storybook/client-logger'; import Story from './components/Story'; import PropTable from './components/PropTable'; import makeTableComponent from './components/makeTableComponent'; @@ -17,7 +18,7 @@ const defaultOptions = { maxPropStringLength: 50, }; -const defaultMarksyConf = { +const defaultComponents = { h1: H1, h2: H2, h3: H3, @@ -31,6 +32,8 @@ const defaultMarksyConf = { ul: UL, }; +let hasWarned = false; + function addInfo(storyFn, context, infoOptions) { const options = { ...defaultOptions, @@ -44,9 +47,17 @@ function addInfo(storyFn, context, infoOptions) { options.propTables = null; } - const marksyConf = { ...defaultMarksyConf }; + const components = { ...defaultComponents }; + if (options && options.components) { + Object.assign(components, options.components); + } if (options && options.marksyConf) { - Object.assign(marksyConf, options.marksyConf); + if (!hasWarned) { + logger.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"'); + hasWarned = true; + } + + Object.assign(components, options.marksyConf); } const props = { info: options.text, @@ -58,7 +69,7 @@ function addInfo(storyFn, context, infoOptions) { propTablesExclude: options.propTablesExclude, PropTable: makeTableComponent(options.TableComponent), styles: typeof options.styles === 'function' ? options.styles : s => s, - marksyConf, + components, maxPropObjectKeys: options.maxPropObjectKeys, maxPropArrayLength: options.maxPropArrayLength, maxPropsIntoLine: options.maxPropsIntoLine, diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot index c161f17376d2..c5e699b5b548 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot @@ -510,11 +510,15 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = ` > Sometimes you might want to manually include some code examples: -
+- const codeblock = []; + const Button = () => <button />;
; ~~~ Maybe include a [link](http://storybook.js.org) to your project as well. diff --git a/lib/components/src/highlight_button.js b/lib/components/src/highlight_button.js index 609bdc5aa419..fb26f0bc0f90 100644 --- a/lib/components/src/highlight_button.js +++ b/lib/components/src/highlight_button.js @@ -5,7 +5,7 @@ export default glamorous.button( border: '1px solid rgba(0, 0, 0, 0)', font: 'inherit', background: 'none', - 'box-shadow': 'none', + boxShadow: 'none', padding: 0, ':hover': { backgroundColor: 'rgba(0, 0, 0, 0.05)', diff --git a/yarn.lock b/yarn.lock index 8f1756e02f14..2effa3cd4554 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8477,9 +8477,9 @@ marked@0.3.6, marked@^0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" -marksy@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/marksy/-/marksy-2.0.1.tgz#019eb9c13ff37120ce4dddeb7774aba152b5d7e0" +marksy@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/marksy/-/marksy-6.0.1.tgz#ea05f170a5f8a3f935b2ef51a9b7847c947b7402" dependencies: babel-standalone "^6.24.0" he "^1.1.1"