feat(form components): Add invalid and disabled

Author: youda97

.storybook/addons.js

@@ -19,6 +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-notes/register';
 import "@storybook/addon-knobs/register";
 import '@storybook/addon-options/register';

.storybook/bootstrap.module.ts

@@ -27,8 +27,7 @@ addDecorator(
 );
 
 // load global styles
-require("!style-loader!css-loader!sass-loader!./preview.scss");
-require("!style-loader!css-loader!sass-loader!./preview-experimental.scss");
+require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");
 
 require("../src/index.stories");
 // automatically import all files ending in *.stories.ts

.storybook/config.js

@@ -1,85 +1,16 @@
+<!-- Open Graph -->
 <meta property="og:title" content="Carbon Components Angular">
 <meta property="og:description" content="An Angular implementation of the Carbon Design System for IBM.">
 <meta property="og:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta property="og:url" content="https://angular.carbondesignsystem.com">
 
+<!-- Social -->
 <meta name="twitter:title" content="Carbon Components Angular">
 <meta name="twitter:description" content="An Angular implementation of the Carbon Design System for IBM.">
 <meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta name="twitter:card" content="summary_large_image">
 
-<style id="iframestyle">
-.sb-show-main:not(.welcome) {
-	padding: 3em;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-.experimental .toggle-btn,
-.toggle-btn {
-	padding: 9px;
-	background: white;
-	border: none;
-	border-radius: 5px;
-	color: darkcyan;
-	transition: all 0.2s ease-out;
-	outline: 0;
-	cursor: pointer;
-}
-.experimental .experimental-selected,
-.experimental-selected {
-	background: darkcyan;
-	color: white;
-}
-</style>
-
+<!-- Storybook override -->
 <script>
-function setExperimental(event) {
-	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() {
-	var frame = document.querySelector("#storybook-preview-iframe");
-	if(!frame ||
-		!frame.contentDocument ||
-		!frame.contentDocument.getElementById("root")) {
-		return;
-	}
-
-	frame.contentDocument.head.appendChild(
-		document.getElementById("iframestyle")
-	);
-
-	clearInterval(experimentalToggleInterval);
-	frame.contentDocument.body.insertAdjacentHTML(
-		"beforeend",
-		`<div style="position: fixed; right: 15px; bottom: 15px">
-			<button
-				class="toggle-btn experimental-selected"
-				onclick="setExperimental(event)">
-				Standard
-			</button>
-			<button
-				class="toggle-btn"
-				onclick="setExperimental(event)">
-				Experimental
-			</button>
-		</div>
-	`);
-	frame.contentWindow.setExperimental = setExperimental;
-
-	var classList = frame.contentDocument.body.classList;
-	classList.add("carbon");
-}, 100);
+	document.title = "Carbon Components Angular";
 </script>

.storybook/experimental.component.ts

@@ -1,37 +1,12 @@
 $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...
+@import '~carbon-components/scss/globals/scss/styles';
 
-.carbon {
-	@import '~carbon-components/scss/globals/scss/styles';
-	@import '~carbon-components/scss/globals/scss/css--typography';
-
-	// carbon body reset and styles
-	@include typography;
-	@include font-family;
-	//reset
-	color: $text-01;
-	background-color: $ui-02;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	vertical-align: baseline;
-
-	& > *,
-	& > *:before,
-	& > *:after {
-		box-sizing: inherit;
-	}
-
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
+.sb-show-main:not(.full-page) {
+	padding: 3em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

.storybook/manager-head.html

@@ -1,7 +1,7 @@
 const path = require('path');
 
-module.exports = (baseConfig, env, defaultConfig) => {
-	defaultConfig.module.rules.push({
+module.exports = ({config, mode}) => {
+	config.module.rules.push({
 		test: [/\.stories\.tsx?$/, /index\.ts$/],
 		loaders: [
 		  {
@@ -15,7 +15,7 @@ module.exports = (baseConfig, env, defaultConfig) => {
 		enforce: 'pre',
 	});
 
-	defaultConfig.mode = "development";
-	defaultConfig.devtool = "source-map";
-	return defaultConfig;
+	config.mode = "development";
+	config.devtool = "source-map";
+	return config;
 };

.storybook/preview-experimental.scss

@@ -1,4 +1,3 @@
-sudo: required
 dist: trusty
 language: node_js
 node_js:
@@ -15,22 +14,10 @@ before_script:
   - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
 script: "npm run lint && npm test"
 deploy:
-  -
-    provider: script
-    script: "bash ./scripts/deploy.sh"
-    skip_cleanup: true
-    true:
-      branch: master
-  -
-    allow-empty-commit: true
-    email: [email protected]
-    github-token: $GH_TOKEN
-    keep-history: true
-    local-dir: pages
-    name: carbon-bot
-    provider: pages
-    skip_cleanup: true
-    true:
-      branch: master
+  provider: script
+  script: "bash ./scripts/deploy.sh"
+  skip_cleanup: true
+  on:
+    all_branches: true
 notifications:
   email: false

.storybook/preview.scss

@@ -1 +1 @@
-* @cal-smith @zvonimirfras @magedhennawy @youda97
+* @cal-smith @zvonimirfras @youda97