Merge pull request #542 from youda97/notes

feat(documentation): Add documentation to stories

Author: zvonimirfras

.storybook/addons.js

@@ -19,5 +19,6 @@ import "zone.js/dist/zone";
 import '@storybook/addon-storysource/register';
 import "@storybook/addon-actions/register";
 import "@storybook/addon-links/register";
+import '@storybook/addon-notes/register';
 import "@storybook/addon-knobs/register";
 import '@storybook/addon-options/register';

.storybook/preview.scss

@@ -4,7 +4,7 @@ $feature-flags: (
 
 @import '~carbon-components/scss/globals/scss/styles';
 
-.sb-show-main:not(.welcome) {
+.sb-show-main:not(.full-page) {
 	padding: 3em;
 	display: flex;
 	flex-direction: column;

package-lock.json

@@ -91,6 +91,7 @@
     "@storybook/addon-links": "5.0.6",
     "@storybook/addon-options": "5.0.6",
     "@storybook/addon-storysource": "5.0.6",
+    "@storybook/addon-notes": "5.0.6",
     "@storybook/addons": "5.0.6",
     "@storybook/angular": "5.0.6",
     "@types/jasmine": "3.3.12",

package.json

@@ -7,6 +7,15 @@ import {
 } from "@angular/core";
 import { AccordionItem } from "./accordion-item.component";
 
+/**
+ * [See demo](../../?path=/story/accordion--basic)
+ *
+ * <example-url>../../iframe.html?id=accordion--basic</example-url>
+ *
+ * @export
+ * @class Accordion
+ * @implements {AfterContentInit}
+ */
 @Component({
 	selector: "ibm-accordion",
 	template: `

src/accordion/accordion.component.ts

@@ -2,13 +2,14 @@ import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
 
-import { AccordionModule } from "../";
+import { AccordionModule, DocumentationModule } from "../";
 
 storiesOf("Accordion", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				AccordionModule
+				AccordionModule,
+				DocumentationModule
 			]
 		})
 	)
@@ -63,4 +64,9 @@ storiesOf("Accordion", module)
 				</ibm-accordion>
 			</div>
 		`
+	}))
+	.add("Documentation", () => ({
+		template: `
+			<ibm-documentation src="documentation/components/Accordion.html"></ibm-documentation>
+		`
 	}));

src/accordion/accordion.stories.ts

@@ -11,6 +11,15 @@ import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
 
 const MINIMUM_OVERFLOW_THRESHOLD = 4;
 
+/**
+ *  [See demo](../../?path=/story/breadcrumb--basic)
+ *
+ * <example-url>../../iframe.html?id=breadcrumb--basic</example-url>
+ *
+ * @export
+ * @class Breadcrumb
+ * @implements {AfterContentInit}
+ */
 @Component({
 	selector: "ibm-breadcrumb",
 	template: `

src/breadcrumb/breadcrumb.component.ts

@@ -1,7 +1,7 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withKnobs, boolean, number } from "@storybook/addon-knobs/angular";
 
-import { BreadcrumbModule, DialogModule } from "../";
+import { BreadcrumbModule, DialogModule, DocumentationModule } from "../";
 import { BreadcrumbItem } from "../breadcrumb/breadcrumb-item.interface";
 
 let breadcrumbItems;
@@ -19,7 +19,8 @@ storiesOf("Breadcrumb", module)
 	moduleMetadata({
 		imports: [
 			BreadcrumbModule,
-			DialogModule
+			DialogModule,
+			DocumentationModule
 		]
 	})
 )
@@ -69,4 +70,9 @@ storiesOf("Breadcrumb", module)
 	props: {
 		noTrailingSlash: boolean("noTrailingSlash", true)
 	}
+}))
+.add("Documentation", () => ({
+	template: `
+		<ibm-documentation src="documentation/components/Breadcrumb.html"></ibm-documentation>
+	`
 }));

src/breadcrumb/breadcrumb.stories.ts

@@ -8,6 +8,8 @@ import {
 /**
  * A convinence directive for applying styling to a button.
  *
+ * [See demo](../../?path=/story/button--basic)
+ *
  * Example:
  *
  * ```html
@@ -16,6 +18,8 @@ import {
  * ```
  *
  * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
+ *
+ * <example-url>../../iframe.html?id=button--basic</example-url>
  */
 @Directive({
 	selector: "[ibmButton]"

src/button/button.directive.ts

@@ -2,12 +2,12 @@ import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, select } from "@storybook/addon-knobs/angular";
 
-import { ButtonModule } from "../";
+import { ButtonModule, DocumentationModule } from "../";
 
 storiesOf("Button", module)
 	.addDecorator(
 		moduleMetadata({
-			imports: [ButtonModule]
+			imports: [ButtonModule, DocumentationModule]
 		})
 	)
 	.addDecorator(withKnobs)
@@ -35,4 +35,9 @@ storiesOf("Button", module)
 			 
 			<button ibmButton skeleton="true" size="sm"></button>
 		`
+	}))
+	.add("Documentation", () => ({
+		template: `
+			<ibm-documentation src="documentation/directives/Button.html"></ibm-documentation>
+		`
 	}));