Merge remote-tracking branch 'upstream/master'

build/npm/clarity-angular.json

@@ -4,7 +4,7 @@
     "description": "Angular 2 components for Clarity",
     "homepage": "https://vmware.github.io/clarity/",
     "main": "clarity-angular.umd.js",
-    "jsnext:main": "index.js",
+    "module": "index.js",
     "repository" : {
         "type" : "git",
         "url" : "git@github.com:vmware/clarity.git"

gemini/tests/color.js

@@ -3,28 +3,8 @@ var WAIT_LOAD_TIME = 1000;
 
 gemini.suite('color', (child) => {
 
-    gemini.suite('color-palette-base', (child) => {
-        child.setUrl('/color/color-palette-base')
-            .before((actions, find) => {
-                actions.waitForElementToShow('.card-swatch', WAIT_TIME);
-                actions.wait(WAIT_LOAD_TIME);
-            })
-            .setCaptureElements('.row')
-            .capture('default');
-    });
-
-    gemini.suite('color-palette-stoplight', (child) => {
-        child.setUrl('/color/color-palette-stoplight')
-            .before((actions, find) => {
-                actions.waitForElementToShow('.card-swatch', WAIT_TIME);
-                actions.wait(WAIT_LOAD_TIME);
-            })
-            .setCaptureElements('.row')
-            .capture('default');
-    });
-
-    gemini.suite('color-palette-highlight', (child) => {
-        child.setUrl('/color/color-palette-highlight')
+    gemini.suite('color-palette', (child) => {
+        child.setUrl('/color/color-palette')
             .before((actions, find) => {
                 actions.waitForElementToShow('.card-swatch', WAIT_TIME);
                 actions.wait(WAIT_LOAD_TIME);

src/app/buttons/button-loading.html

@@ -0,0 +1,17 @@
+
+<!--
+  ~ Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+  ~ This software is released under MIT license.
+  ~ The full license information can be found in LICENSE in the root directory of this project.
+  -->
+
+<h4>Loading Buttons</h4>
+<button [clrLoading]="validateLoading" class="btn btn-info-outline" (click)="validateDemo()">Validate</button>
+<button [clrLoading]="submitLoading" type="submit" class="btn btn-success-outline" (click)="submitDemo()">Submit</button>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;button [clrLoading]=&quot;validateLoading&quot; class=&quot;btn btn-info-outline&quot;&gt;Validate&lt;/button&gt;
+    &lt;button [clrLoading]=&quot;submitLoading&quot; type=&quot;submit&quot; class=&quot;btn btn-success-outline&quot;&gt;Success&lt;/button&gt;
+    </code>
+</pre>

src/app/buttons/button-loading.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+import {Component} from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    selector: "clr-buttons-demo-button-loading",
+    templateUrl: "./button-loading.html",
+    styleUrls: ["./buttons.demo.css"]
+})
+export class ButtonLoadingDemo {
+  private validateLoading: boolean = false;
+  private submitLoading: boolean = false;
+
+  validateDemo() {
+    this.validateLoading = true;
+    setTimeout(() => this.validateLoading = false, 1500);
+  }
+
+  submitDemo() {
+    this.submitLoading = true;
+    setTimeout(() => this.submitLoading = false, 1500);
+  }
+}

src/app/buttons/buttons.demo.module.ts

@@ -14,6 +14,7 @@ import {SecondaryButtonDemo} from "./secondary-button";
 import {TertiaryButtonDemo} from "./tertiary-button";
 import {InverseButtonDemo} from "./inverse-button";
 import {ButtonStatesDemo} from "./button-states";
+import {ButtonLoadingDemo} from "./button-loading";
 import {ButtonSizesDemo} from "./button-sizes";
 import {ToggleDemo} from "./toggles";
 import {ButtonsTestDemo} from "./buttons-test";
@@ -33,6 +34,7 @@ import {ButtonsIconsDemo} from "./buttons-icons";
         TertiaryButtonDemo,
         InverseButtonDemo,
         ButtonStatesDemo,
+        ButtonLoadingDemo,
         ButtonSizesDemo,
         ToggleDemo,
         ButtonsTestDemo,
@@ -46,6 +48,7 @@ import {ButtonsIconsDemo} from "./buttons-icons";
         TertiaryButtonDemo,
         InverseButtonDemo,
         ButtonStatesDemo,
+        ButtonLoadingDemo,
         ButtonSizesDemo,
         ToggleDemo,
         ButtonsTestDemo,

src/app/buttons/buttons.demo.routing.ts

@@ -12,6 +12,7 @@ import {SecondaryButtonDemo} from "./secondary-button";
 import {TertiaryButtonDemo} from "./tertiary-button";
 import {InverseButtonDemo} from "./inverse-button";
 import {ButtonStatesDemo} from "./button-states";
+import {ButtonLoadingDemo} from "./button-loading";
 import {ButtonSizesDemo} from "./button-sizes";
 import {ToggleDemo} from "./toggles";
 import {ButtonsTestDemo} from "./buttons-test";
@@ -29,6 +30,7 @@ const ROUTES: Routes = [
             { path: "tertiary-button", component: TertiaryButtonDemo },
             { path: "inverse-button", component: InverseButtonDemo },
             { path: "button-states", component: ButtonStatesDemo },
+            { path: "button-loading", component: ButtonLoadingDemo },
             { path: "button-sizes", component: ButtonSizesDemo },
             { path: "toggles", component: ToggleDemo },
             { path: "buttons-test", component: ButtonsTestDemo },

src/app/buttons/buttons.demo.ts

@@ -19,6 +19,7 @@ import {Component} from "@angular/core";
             <li><a [routerLink]="['./tertiary-button']">Tertiary Buttons</a></li>
             <li><a [routerLink]="['./inverse-button']">Inverse Buttons</a></li>
             <li><a [routerLink]="['./button-states']">Button States</a></li>
+            <li><a [routerLink]="['./button-loading']">Loading Buttons</a></li>
             <li><a [routerLink]="['./button-sizes']">Button Sizes</a></li>
             <li><a [routerLink]="['./toggles']">Toggles</a></li>
             <li><a [routerLink]="['./icons']">Icons in Buttons</a></li>

src/app/color/color-palette.demo.html

@@ -0,0 +1,26 @@
+<!--
+  ~ Copyright (c) 2016 - 2017 VMware, Inc. All Rights Reserved.
+  ~ This software is released under MIT license.
+  ~ The full license information can be found in LICENSE in the root directory of this project.
+  -->
+
+<p>Colors that are twice as tall are part of the base color palette.</p>
+
+<div class="row">
+    <div class="col-sm-6 col-md-4 col-xs-12" *ngFor="let palette of palettes">
+        <div class="card card-block card-swatch-block">
+            <ng-container *ngFor="let color of palette.colors">
+                <div class="card-swatch-divider" *ngIf="color.value === 'divider'"></div>
+                <ng-container *ngIf="color.value !== 'divider'">
+                    <p class="card-swatch"
+                       [style.background-color]="color.value"
+                       [class.dark-text]="color.text === 'dark'"
+                       [class.upsize]="!!color.corePalette">
+                       <span class="hex-contrast">A<span *ngIf="color.text === 'mid'">A</span></span>
+                       <span class="rgb-value">{{color.value | uppercase}}</span>
+                    </p>
+                </ng-container>
+            </ng-container>
+        </div>
+    </div>
+</div>