From f1d1fc54aba80fe5cb46bd8f56c5a05d7b566cfc Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 25 Oct 2018 17:17:19 +0200
Subject: [PATCH] feat(ng-add): add preview URLs for theme choices (#13723)

Adds URLs that people can use to preview a theme, before selecting it, when going through the ng-add prompts.
Formatting is aligned with https://github.com/angular/angular-cli/blob/907ce5c94c774147c4b52870b3522aed4e087c76/packages/schematics/angular/ng-new/schema.json#L121

Fixes #13708.

**A couple of notes:**
* Blocked until https://github.com/angular/material.angular.io/pull/549 is merged and released.
* Marking this as `patch`, even though it's a `feat`, since it's basically just message changes.
---
 src/lib/schematics/ng-add/schema.json | 22 ++++++++++++++++------
 src/lib/schematics/ng-add/schema.ts   |  7 +++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/schematics/ng-add/schema.json b/src/lib/schematics/ng-add/schema.json
index 64ec969d3a9b..71c1b2bf57f6 100644
--- a/src/lib/schematics/ng-add/schema.json
+++ b/src/lib/schematics/ng-add/schema.json
@@ -6,27 +6,37 @@
   "properties": {
     "project": {
       "type": "string",
-      "description": "The name of the project.",
+      "description": "Name of the project.",
       "$default": {
         "$source": "projectName"
       }
     },
     "theme": {
-      "enum": ["indigo-pink", "deeppurple-amber", "pink-bluegrey", "purple-green", "custom"],
-      "default": "indigo-pink",
       "description": "The theme to apply",
-      "x-prompt": "Enter a prebuilt theme name, or \"custom\" for a custom theme:"
+      "type": "string",
+      "default": "indigo-pink",
+      "x-prompt": {
+        "message": "Choose a prebuilt theme name, or \"custom\" for a custom theme:",
+        "type": "list",
+        "items": [
+          { "value": "indigo-pink",       "label": "Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]" },
+          { "value": "deeppurple-amber",  "label": "Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]" },
+          { "value": "pink-bluegrey",     "label": "Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]" },
+          { "value": "purple-green",      "label": "Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]" },
+          { "value": "custom",            "label": "Custom" }
+        ]
+      }
     },
     "gestures": {
       "type": "boolean",
       "default": true,
-      "description": "Whether gesture support should be set up or not.",
+      "description": "Whether gesture support should be set up.",
       "x-prompt": "Set up HammerJS for gesture recognition?"
     },
     "animations": {
       "type": "boolean",
       "default": true,
-      "description": "Whether Angular browser animations should be set up or not.",
+      "description": "Whether Angular browser animations should be set up.",
       "x-prompt": "Set up browser animations for Angular Material?"
     }
   },
diff --git a/src/lib/schematics/ng-add/schema.ts b/src/lib/schematics/ng-add/schema.ts
index 992a8e2b521f..ee716e740e0d 100644
--- a/src/lib/schematics/ng-add/schema.ts
+++ b/src/lib/schematics/ng-add/schema.ts
@@ -7,14 +7,13 @@
  */
 
 export interface Schema {
-
-  /** Name of the project to target. */
+  /** Name of the project. */
   project: string;
 
-  /** Whether gesture support should be set up or not. */
+  /** Whether gesture support should be set up. */
   gestures: boolean;
 
-  /** Whether Angular browser animations should be set up or not. */
+  /** Whether Angular browser animations should be set up. */
   animations: boolean;
 
   /** Name of pre-built theme to install. */