Migrate to marksy@6

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

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"

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: {},
 };

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,

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:
           </div>
-          <pre>
+          <pre
+            class="language-js"
+            style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+          >
             <code
-              class="hljs js"
+              class="language-js"
+              style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa"
             >
-              const codeblock = [];
+              const Button = () =&gt; &lt;button /&gt;;
             </code>
           </pre>
           <div

examples/cra-kitchen-sink/src/stories/addon-info.stories.js

@@ -33,7 +33,7 @@ const markdownDescription = `
 
 Sometimes you might want to manually include some code examples:
 ~~~js
-const codeblock = [];
+const Button = () => <button />;
 ~~~
 
 Maybe include a [link](http://storybook.js.org) to your project as well.

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)',

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"