feat(experimental): add experimnetal serivce

Author: cal-smith

.storybook/experimental.component.ts

@@ -0,0 +1,34 @@
+import { Component, AfterViewInit, OnDestroy } from "@angular/core";
+import { ExperimentalService } from "../src/experimental.module";
+
+@Component({
+	selector: "app-experimental-component",
+	template: ``
+})
+export class ExperimentalComponenent implements AfterViewInit, OnDestroy {
+	constructor(protected experimental: ExperimentalService) {
+		experimental.isExperimental = false;
+	}
+
+	ngAfterViewInit() {
+		this.toggleExperimental();
+		document.querySelectorAll(".toggle-btn").forEach(button => {
+			button.addEventListener("click", this.toggleExperimental);
+		});
+	}
+
+	ngOnDestroy() {
+		document.querySelectorAll(".toggle-btn").forEach(button => {
+			button.removeEventListener("click", this.toggleExperimental);
+		});
+	}
+
+	// arrow function to capture the correct `this`
+	toggleExperimental = () => {
+		if (document.body.classList.contains("experimental")) {
+			this.experimental.isExperimental = true;
+		} else {
+			this.experimental.isExperimental = false;
+		}
+	}
+}

.storybook/manager-head.html

@@ -35,30 +35,34 @@
 
 <script>
 function setExperimental(event) {
-	var classList = document.getElementsByTagName("iframe")[0].contentDocument.body.classList;
+	var frame = document.querySelector("#storybook-preview-iframe");
+	var classList = frame.contentDocument.body.classList;
 	if(event.target.previousElementSibling) {
 		classList.add("experimental");
+		classList.remove("carbon");
 		event.target.previousElementSibling.classList.remove("experimental-selected");
 	} else {
 		classList.remove("experimental");
+		classList.add("carbon");
 		event.target.nextElementSibling.classList.remove("experimental-selected");
 	}
 	event.target.classList.add("experimental-selected");
 };
 
 var experimentalToggleInterval = setInterval(function() {
-	if(!document.getElementsByTagName("iframe")[0] ||
-		!document.getElementsByTagName("iframe")[0].contentDocument ||
-		!document.getElementsByTagName("iframe")[0].contentDocument.getElementById("root")) {
+	var frame = document.querySelector("#storybook-preview-iframe");
+	if(!frame ||
+		!frame.contentDocument ||
+		!frame.contentDocument.getElementById("root")) {
 		return;
 	}
 
-	document.getElementsByTagName("iframe")[0].contentDocument.head.appendChild(
+	frame.contentDocument.head.appendChild(
 		document.getElementById("iframestyle")
 	);
 
 	clearInterval(experimentalToggleInterval);
-	document.getElementsByTagName("iframe")[0].contentDocument.body.insertAdjacentHTML(
+	frame.contentDocument.body.insertAdjacentHTML(
 		"beforeend",
 		`<div style="position: fixed; right: 15px; bottom: 15px">
 			<button
@@ -73,6 +77,9 @@
 			</button>
 		</div>
 	`);
-	document.getElementsByTagName("iframe")[0].contentWindow.setExperimental = setExperimental;
+	frame.contentWindow.setExperimental = setExperimental;
+
+	var classList = frame.contentDocument.body.classList;
+	classList.add("carbon");
 }, 100);
 </script>

.storybook/preview-experimental.scss

@@ -1,7 +1,23 @@
 $feature-flags: (
 	components-x: true,
 	ui-shell: true,
+	css--body: false, // we're providing our own body styles
+	css--reset: false // prevent thousands of resets being included...
 );
+
 .experimental {
-	@import "~carbon-components/src/globals/scss/styles";
+	@import '~carbon-components/scss/globals/scss/styles';
+
+	// carbon body reset and styles
+	// @include reset;
+	@include font-family;
+	color: $text-01;
+	background-color: $ui-02;
+	line-height: 1;
+
+	@include typography;
+
+	// padding/margin body reset
+	padding: 0;
+	margin: 0;
 }

.storybook/preview.scss

@@ -1 +1,59 @@
-@import "~carbon-components/src/globals/scss/styles";
+$feature-flags: (
+	components-x: false,
+	ui-shell: true,
+	css--body: false, // we're providing our own body styles
+	css--reset: false // prevent thousands of resets being included...
+);
+
+.carbon {
+	@import '~carbon-components/scss/globals/scss/styles';
+
+	// carbon body reset and styles
+	// @include reset;
+	@include font-family;
+	color: $text-01;
+	background-color: $ui-02;
+	line-height: 1;
+
+	@include typography;
+
+	// padding/margin body reset
+	padding: 0;
+	margin: 0;
+
+	// for some reason this isn't included when tabs are built. So lets just manually include it here.
+	.bx--tabs__nav-item + .bx--tabs__nav-item {
+		margin-left: 3rem;
+	}
+
+	// for some reason this isn't included when progress indicator is built. So lets just manually include it here.
+	.bx--progress-step:first-child .bx--progress-line {
+		display: none;
+	}
+
+	// for some reason all this isn't included when structured list is built. So lets just manually include it here.
+	.bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) {
+		background-color: $hover-row;
+		cursor: pointer;
+	}
+
+	.bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
+		@include focus-outline('border');
+	}
+
+	.bx--structured-list-svg {
+		display: inline-block;
+		fill: transparent;
+		vertical-align: middle;
+		transition: $transition--base $carbon--standard-easing;
+	}
+
+	.bx--structured-list-row:hover .bx--structured-list-svg {
+		fill: $hover-row;
+	}
+
+	.bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
+	.bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
+		fill: $brand-02;
+	}
+}

.storybook/webpack.config.js

@@ -15,7 +15,6 @@ module.exports = (baseConfig, env, defaultConfig) => {
 		enforce: 'pre',
 	});
 
-	console.log(defaultConfig);
 	defaultConfig.mode = "development";
 	defaultConfig.devtool = "source-map";
 	return defaultConfig;