remove styles from components

cal-smith · cal-smith · commit cdb776c7bef2 · 2018-08-07T14:10:51.000-04:00
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,9 +1,13 @@
 import { configure } from "@storybook/angular";
 
+// load global styles
+require("!style-loader!css-loader!sass-loader!./preview.scss");
+
 require("../src/index.stories");
 // automatically import all files ending in *.stories.ts
 const req = require.context("../src", true, /.stories.ts$/);
 function loadStories() {
+
 	req.keys().forEach(filename => {
 		if (!filename.includes("index")) { req(filename) }
 	});
diff --git a/.storybook/notwebpack.config.js b/.storybook/notwebpack.config.js
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
@@ -0,0 +1,5 @@
+@import "~carbon-components/scss/globals/scss/styles.scss";
+
+body {
+	margin: 20px;
+}
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "rxjs": "6.2.2",
     "sass-loader": "7.0.1",
     "semantic-release": "^15.9.3",
-    "style-loader": "0.21.0",
+    "style-loader": "^0.21.0",
     "stylelint": "8.4.0",
     "stylelint-webpack-plugin": "0.10.4",
     "svgxuse": "1.2.6",
diff --git a/src/dropdown/dropdown.component.ts b/src/dropdown/dropdown.component.ts
@@ -74,8 +74,7 @@ import { position } from "../utils/position";
 			useExisting: Dropdown,
 			multi: true
 		}
-	],
-	styleUrls: [ "./dropdown.scss" ]
+	]
 })
 export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	/**
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
diff --git a/src/dropdown/list/dropdown-list.component.ts b/src/dropdown/list/dropdown-list.component.ts
@@ -88,8 +88,7 @@ import { ScrollableList } from "./../scrollable-list.directive";
 			provide: AbstractDropdownView,
 			useExisting: DropdownList
 		}
-	],
-	styleUrls: ["./dropdown-list.scss"]
+	]
 }) // conceptually this extends list-group, but we dont have to
 export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChanges, OnDestroy {
 	/**
diff --git a/src/dropdown/list/dropdown-list.scss b/src/dropdown/list/dropdown-list.scss
diff --git a/src/forms/checkbox.component.ts b/src/forms/checkbox.component.ts
@@ -83,8 +83,7 @@ export class CheckboxChange {
 			multi: true
 		}
 	],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	styleUrls: [ "./../../node_modules/carbon-components/scss/components/checkbox/_checkbox.scss" ]
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CheckboxComponent implements ControlValueAccessor, AfterViewInit {
 	/**
diff --git a/src/forms/forms.stories.ts b/src/forms/forms.stories.ts
@@ -43,8 +43,7 @@ storiesOf("Forms", module).addDecorator(
 			Some Title
 			<input type="text" class="bx--text-input" placeholder="Optional placeholder text">
 		</ibm-label>
-	`,
-		styleUrls: ["./../../node_modules/carbon-components/scss/components/text-input/_text-input.scss"]
+	`
 	}))
 	.add("Switch", () => ({
 		template: `<ibm-switch></ibm-switch>`
diff --git a/src/forms/label.component.ts b/src/forms/label.component.ts
@@ -30,8 +30,7 @@ import { Component, Input, AfterContentInit, ElementRef } from "@angular/core";
 		<label [for]="labelInputID" class="bx--label"><ng-content></ng-content></label>
 		<ng-content select="input,textarea,div"></ng-content>
 	</div>
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/form/_form.scss"]
+	`
 })
 export class LabelComponent implements AfterContentInit {
 	/**
diff --git a/src/forms/radio.component.ts b/src/forms/radio.component.ts
@@ -86,8 +86,7 @@ export class RadioChange {
 			useExisting: RadioGroup,
 			multi: true
 		}
-	],
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/radio-button/_radio-button.scss"]
+	]
 })
 export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccessor {
 	/**
diff --git a/src/forms/switch.component.ts b/src/forms/switch.component.ts
@@ -78,8 +78,7 @@ export class SwitchChange {
 			useExisting: SwitchComponent,
 			multi: true
 		}
-	],
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/toggle/_toggle.scss"]
+	]
 })
 export class SwitchComponent extends CheckboxComponent implements OnInit {
 	/**
diff --git a/src/index.stories.ts b/src/index.stories.ts
@@ -1,15 +1,11 @@
-import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { Welcome } from "@storybook/angular/demo";
+import { storiesOf } from "@storybook/angular";
 
-storiesOf("Welcome", module).add("to Storybook", () => ({
-	component: Welcome,
+// import "carbon-components/scss/globals/scss/styles.scss";
+
+storiesOf("Welcome", module).add("to Carbon Angular", () => ({
+	template: `
+		<h1>Carbon Components Angular</h1>
+		<h2>An Angular implementation of the Carbon Design System</h2>
+	`,
 	props: {},
 }));
-
-// storiesOf("Another Button", module).add("button with link to another story", () => ({
-// 	component: Button,
-// 	props: {
-// 		text: "Go to Welcome Story",
-// 		onClick: linkTo("Welcome"),
-// 	},
-// }));
diff --git a/src/modal/modal-footer.component.ts b/src/modal/modal-footer.component.ts
@@ -11,7 +11,6 @@ import { Component } from "@angular/core";
 		<footer role="contentinfo" class="bx--modal-footer">
 			<ng-content></ng-content>
 		</footer>
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+	`
 })
 export class ModalFooterComponent {}
diff --git a/src/modal/modal-header.component.ts b/src/modal/modal-header.component.ts
@@ -41,8 +41,7 @@ import { Component, Output, EventEmitter, Input } from "@angular/core";
 			</button>
 		</header>
 
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+	`
 })
 export class ModalHeaderComponent {
 	/**
diff --git a/src/modal/modal.component.ts b/src/modal/modal.component.ts
@@ -108,8 +108,7 @@ import { cycleTabs } from "./../common/tab.service";
 				animate(200, style({transform: "translate(0, 5%)", opacity: 0}))
 			])
 		])
-	],
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+	]
 })
 export class ModalComponent implements OnInit, OnDestroy {
 	/**
diff --git a/src/modal/modal.stories.ts b/src/modal/modal.stories.ts
@@ -22,8 +22,7 @@ import { Modal, ModalService } from "../";
 				<button class="bx--btn bx--btn--primary" (click)="closeModal()">Close</button>
 			</ibm-modal-footer>
 		</ibm-modal>
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+	`
 })
 class SampleModalComponent {
 	modalText: string;
@@ -37,8 +36,7 @@ class SampleModalComponent {
 	selector: "app-modal-story",
 	template: `
 		<button class="bx--btn bx--btn--primary" (click)="openModal()">Open Modal</button>
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/button/_button.scss"]
+	`
 })
 class ModalStory {
 
@@ -77,4 +75,5 @@ storiesOf("Modal", module)
 	<app-modal-story></app-modal-story>
 	<ibm-modal-placeholder></ibm-modal-placeholder>
 	`
-	}));
+	}
+));
diff --git a/src/modal/overlay.component.ts b/src/modal/overlay.component.ts
@@ -24,8 +24,7 @@ import {
 			#overlay>
 			<ng-content></ng-content>
 		</section>
-	`,
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/modal/_modal.scss"]
+	`
 })
 export class OverlayComponent {
 	/**

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +@import "~carbon-components/scss/globals/scss/styles.scss";
++
 +body {
 +	margin: 20px;
 +}