Merge remote-tracking branch 'origin/master' into generic-addon-decor…

…ators

# Conflicts:
#	ADDONS_SUPPORT.md
#	examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot

ADDONS_SUPPORT.md

@@ -5,7 +5,7 @@
 |[a11y](addons/a11y)              |+| |+|+|+|+|+|+|
 |[actions](addons/actions)        |+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)  |+| |+|+|+|+|+|+|
-|[centered](addons/centered)      |+| |+| | |+|+| |
+|[centered](addons/centered)      |+| |+|+| |+|+| |
 |[events](addons/events)          |+| |+|+|+|+|+|+|
 |[graphql](addons/graphql)        |+| | | | | | | |
 |[info](addons/info)              |+| | | | | | | |

addons/centered/README.md

@@ -74,6 +74,50 @@ storiesOf('MyComponent', module)
   }));
 ```
 
+example for Angular with component:
+
+```ts
+import { centered } from '@storybook/addon-centered/angular';
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(centered)
+  .add('centered component', () => ({
+    component: AppComponent,
+    props: {},
+  }));
+
+```
+
+example for Angular with template:
+
+```ts
+import { centered } from '@storybook/addon-centered/angular';
+import { moduleMetadata, storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [Button],
+    })
+  )
+  .addDecorator(centered)
+  .add('centered template', () => ({
+    template: `<storybook-button-component 
+        [text]="text" (onClick)="onClick($event)">
+      </storybook-button-component>`,
+    props: {
+      text: 'Hello Button',
+      onClick: event => {
+        console.log('some bindings work');
+        console.log(event);
+      },
+    },
+  }));
+```
+
 Also, you can also add this decorator globally
 
 example for React:

addons/centered/angular.d.ts

@@ -0,0 +1,5 @@
+import { IStory } from '@storybook/angular';
+
+declare module '@storybook/addon-centered/angular' {
+  export function centered(story: IStory): IStory;
+}

addons/centered/angular.js

@@ -0,0 +1,3 @@
+import fromCentered from './dist/angular';
+
+export const centered = fromCentered;

addons/centered/src/angular.js

@@ -0,0 +1,58 @@
+import styles from './styles';
+
+function getComponentSelector(component) {
+  // eslint-disable-next-line no-underscore-dangle
+  return component.__annotations__[0].selector;
+}
+
+function getTemplate(metadata) {
+  let tpl = '';
+  if (metadata.component) {
+    const selector = getComponentSelector(metadata.component);
+    tpl = `<${selector}></${selector}>`;
+  }
+
+  if (metadata.template) {
+    tpl = metadata.template;
+  }
+
+  return `      
+      <div [ngStyle]="styles.style">
+        <div [ngStyle]="styles.innerStyle">
+          ${tpl}
+        </div>
+      </div>`;
+}
+
+function getModuleMetadata(metadata) {
+  const { moduleMetadata, component } = metadata;
+
+  if (component && !moduleMetadata) {
+    return {
+      declarations: [metadata.component],
+    };
+  }
+
+  if (component && moduleMetadata) {
+    return {
+      ...moduleMetadata,
+      declarations: [...moduleMetadata.declarations, metadata.component],
+    };
+  }
+
+  return moduleMetadata;
+}
+
+export default function(metadataFn) {
+  const metadata = metadataFn();
+
+  return {
+    ...metadata,
+    template: getTemplate(metadata),
+    moduleMetadata: getModuleMetadata(metadata),
+    props: {
+      ...metadata.props,
+      styles,
+    },
+  };
+}

addons/centered/src/index.js

@@ -3,5 +3,4 @@ import ReactCentered from './react';
 import VueCentered from './vue';
 
 const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
-
 export default Centered;

addons/info/src/components/PropVal.js

@@ -191,7 +191,6 @@ function PropVal(props) {
   } = props;
   let { val } = props;
   const { codeColors } = theme || {};
-  let braceWrap = true;
   let content = null;
   const valueStyles = props.valueStyles || getValueStyles(codeColors);
 
@@ -201,8 +200,10 @@ function PropVal(props) {
     if (val.length > maxPropStringLength) {
       val = `${val.slice(0, maxPropStringLength)}…`;
     }
+    if (level > 1) {
+      val = `'${val}'`;
+    }
     content = <span style={valueStyles.string}>{val}</span>;
-    braceWrap = false;
   } else if (typeof val === 'boolean') {
     content = <span style={valueStyles.bool}>{`${val}`}</span>;
   } else if (Array.isArray(val)) {
@@ -245,9 +246,7 @@ function PropVal(props) {
     );
   }
 
-  if (!braceWrap) return content;
-
-  return <span>&#123;{content}&#125;</span>;
+  return content;
 }
 
 PropVal.defaultProps = {

addons/info/src/components/Props.js

@@ -45,15 +45,15 @@ export default function Props(props) {
           <span>
             =
             <span style={propValueStyle}>
-              {typeof nodeProps[name] === 'string' && '"'}
+              {typeof nodeProps[name] === 'string' ? '"' : '{'}
               <PropVal
                 val={nodeProps[name]}
                 maxPropObjectKeys={maxPropObjectKeys}
                 maxPropArrayLength={maxPropArrayLength}
                 maxPropStringLength={maxPropStringLength}
                 maxPropsIntoLine={maxPropsIntoLine}
               />
-              {typeof nodeProps[name] === 'string' && '"'}
+              {typeof nodeProps[name] === 'string' ? '"' : '}'}
             </span>
           </span>
         )}

docs/package.json

@@ -18,21 +18,21 @@
     "storybook": "start-storybook -p 9009 -s src/pages"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.4.3",
-    "@storybook/addon-links": "^3.4.3",
-    "@storybook/addons": "^3.4.3",
-    "@storybook/react": "^3.4.3",
+    "@storybook/addon-actions": "^3.4.4",
+    "@storybook/addon-links": "^3.4.4",
+    "@storybook/addons": "^3.4.4",
+    "@storybook/react": "^3.4.4",
     "babel-loader": "^6.4.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.259",
+    "gatsby": "^1.9.260",
     "gatsby-link": "^1.6.44",
     "gatsby-plugin-sharp": "^1.6.44",
     "gatsby-remark-autolink-headers": "^1.4.18",
     "gatsby-remark-copy-linked-files": "^1.5.32",
     "gatsby-remark-images": "^1.5.63",
     "gatsby-remark-smartypants": "^1.4.12",
     "gatsby-source-filesystem": "^1.5.35",
-    "gatsby-transformer-remark": "^1.7.40",
+    "gatsby-transformer-remark": "^1.7.41",
     "gh-pages": "^1.1.0",
     "global": "^4.3.2",
     "highlight.js": "^9.12.0",