@storybook/addon-cssresources - Hide Code (#9627)

@storybook/addon-cssresources - Hide Code
storybookjs · Jan 29, 2020 · 9c62740 · 9c62740
2 parents 544091d + fc6d8d1
commit 9c62740
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md
@@ -20,8 +20,8 @@ Add following content to it:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-cssresources/register']
-}
+  addons: ['@storybook/addon-cssresources/register'],
+};
 ```
 
 ## Usage
@@ -34,17 +34,17 @@ import { withCssResources } from '@storybook/addon-cssresources';
 export default {
   title: 'CssResources',
   parameters: {
-    cssresources: [{
+    cssresources: [
+      {
         id: `bluetheme`,
         code: `<style>body { background-color: lightblue; }</style>`,
         picked: false,
+        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
       },
     ],
   },
   decorators: [withCssResources],
 };
 
-export const defaultView = () => (
-  <div />
-);
+export const defaultView = () => <div />;
 ```
diff --git a/addons/cssresources/src/CssResource.ts b/addons/cssresources/src/CssResource.ts
@@ -2,4 +2,5 @@ export interface CssResource {
   id: string;
   code: string;
   picked: boolean;
+  hideCode: boolean;
 }
diff --git a/addons/cssresources/src/css-resource-panel.test.js b/addons/cssresources/src/css-resource-panel.test.js
@@ -300,5 +300,32 @@ describe('CSSResourcePanel', () => {
       node.instance().onStoryChange('fake-story-id');
       expect(node.find(SyntaxHighlighter).length).toEqual(1);
     });
+
+    it('should not render code for items /w the `hideCode` flag', () => {
+      const apiGetParameters = jest.fn(() => [
+        {
+          id: 'local-fake-id-1',
+          code: 'local-fake-code-1',
+          picked: true,
+          hideCode: true,
+        },
+        {
+          id: 'local-fake-id-2',
+          code: 'local-fake-code-2',
+          picked: false,
+        },
+      ]);
+
+      const node = shallowNode({
+        ...defaultProps,
+        api: {
+          ...defaultProps.api,
+          getParameters: apiGetParameters,
+        },
+      });
+
+      node.instance().onStoryChange('fake-story-id');
+      expect(node.find(SyntaxHighlighter).length).toEqual(1);
+    });
   });
 });
diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx
@@ -112,16 +112,16 @@ export class CssResourcePanel extends Component<Props, State> {
     return (
       <div>
         {list &&
-          list.map(({ id, code, picked }) => (
+          list.map(({ id, code, picked, hideCode = false }) => (
             <div key={id} style={{ padding: 10 }}>
               <label>
                 <input type="checkbox" checked={picked} onChange={this.onChange} id={id} />
                 <span>#{id}</span>
               </label>
-              {code && code.length < maxLimitToUseSyntaxHighlighter && (
+              {code && !hideCode && code.length < maxLimitToUseSyntaxHighlighter && (
                 <SyntaxHighlighter language="html">{code}</SyntaxHighlighter>
               )}
-              {code && code.length >= maxLimitToUseSyntaxHighlighter && (
+              {code && !hideCode && code.length >= maxLimitToUseSyntaxHighlighter && (
                 <Placeholder>
                   <Spaced row={1}>
                     <PlainCode>{code.substring(0, maxLimitToUseSyntaxHighlighter)} ...</PlainCode>