From 37aa85614228a88e9cc9905d47bfa1cd507edd12 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 15:20:38 -0400
Subject: [PATCH 1/9] Refactor prompts to allow conditional prompting

---
 _templates/playground/new/index.js | 106 +++++++++++++++--------------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index 91d3acf0134..8cf8871c686 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -5,60 +5,62 @@ const changeCase = require('change-case');
 //
 module.exports = {
   prompt: ({ inquirer }) => {
-    const questions = [
-      {
-        type: 'input',
-        name: 'name',
-        message: 'Which component is this playground for?',
-        initial: 'ion-button',
-        validate(value) {
-          return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
+    return inquirer
+      .prompt([
+        {
+          type: 'input',
+          name: 'name',
+          message: 'Which component is this playground for?',
+          initial: 'ion-button',
+          validate(value) {
+            return value.match(/^ion-[a-z/-]*[a-z]+$/)
+              ? true
+              : "Component name must be kebab-case and begin with 'ion-'";
+          },
         },
-      },
-      {
-        type: 'input',
-        name: 'path',
-        message: 'What should the playground path be?',
-        hint: 'e.g. `basic` or `theming/colors`',
-        validate(value) {
-          return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
-            ? true
-            : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
+        {
+          type: 'input',
+          name: 'path',
+          message: 'What should the playground path be?',
+          hint: 'e.g. `basic` or `theming/colors`',
+          validate(value) {
+            return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
+              ? true
+              : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
+          },
         },
-      },
-      {
-        type: 'select',
-        name: 'version',
-        message: 'Select the Ionic Framework version for the playground',
-        initial: '7',
-        choices: ['6', '7'],
-      },
-      {
-        type: 'toggle',
-        name: 'css',
-        message: 'Generate custom CSS files?',
-        enabled: 'Yes',
-        disabled: 'No',
-      },
-      {
-        type: 'toggle',
-        name: 'angular_ts',
-        message: 'Generate an Angular TypeScript file?',
-        enabled: 'Yes',
-        disabled: 'No',
-      },
-    ];
-
-    return inquirer.prompt(questions).then((answers) => {
-      const componentName = changeCase.pascal(answers.path.split('/').pop());
-      console.log(
-        `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
-          'ion-',
-          ''
-        )}/${answers.path}/index.md';\n\n<${componentName} />\n`
-      );
+        {
+          type: 'select',
+          name: 'version',
+          message: 'Select the Ionic Framework version for the playground',
+          initial: '7',
+          choices: ['6', '7'],
+        },
+        {
+          type: 'toggle',
+          name: 'css',
+          message: 'Generate custom CSS files?',
+          enabled: 'Yes',
+          disabled: 'No',
+        },
+        {
+          type: 'toggle',
+          name: 'angular_ts',
+          message: 'Generate an Angular TypeScript file?',
+          enabled: 'Yes',
+          disabled: 'No',
+        },
+      ])
+      .then((answers) => {
+        const componentName = changeCase.pascal(answers.path.split('/').pop());
+        console.log(
+          `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
+            'ion-',
+            ''
+          )}/${answers.path}/index.md';\n\n<${componentName} />\n`
+        );
 
-      return answers;
-    });
+        return answers;
+      });
   },
 };

From e4d6e729063c34b89e3e5187afba2578c9e36bfd Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 15:47:59 -0400
Subject: [PATCH 2/9] Conditional prompting

---
 _templates/playground/new/index.js | 114 +++++++++++++++++------------
 1 file changed, 66 insertions(+), 48 deletions(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index 8cf8871c686..a1eded5244b 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -1,5 +1,22 @@
 const changeCase = require('change-case');
 
+const componentPrompt = {
+  type: 'input',
+  name: 'name',
+  message: 'Which component is this playground for?',
+  initial: 'ion-button',
+  validate(value) {
+    return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
+  },
+};
+
+const nonComponentPrompt = {
+  type: 'input',
+  name: 'name',
+  message: 'What is this playground for?',
+  initial: 'animations',
+};
+
 // see types of prompts:
 // https://github.com/enquirer/enquirer/tree/master/examples
 //
@@ -7,60 +24,61 @@ module.exports = {
   prompt: ({ inquirer }) => {
     return inquirer
       .prompt([
-        {
-          type: 'input',
-          name: 'name',
-          message: 'Which component is this playground for?',
-          initial: 'ion-button',
-          validate(value) {
-            return value.match(/^ion-[a-z/-]*[a-z]+$/)
-              ? true
-              : "Component name must be kebab-case and begin with 'ion-'";
-          },
-        },
-        {
-          type: 'input',
-          name: 'path',
-          message: 'What should the playground path be?',
-          hint: 'e.g. `basic` or `theming/colors`',
-          validate(value) {
-            return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
-              ? true
-              : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
-          },
-        },
-        {
-          type: 'select',
-          name: 'version',
-          message: 'Select the Ionic Framework version for the playground',
-          initial: '7',
-          choices: ['6', '7'],
-        },
-        {
-          type: 'toggle',
-          name: 'css',
-          message: 'Generate custom CSS files?',
-          enabled: 'Yes',
-          disabled: 'No',
-        },
         {
           type: 'toggle',
-          name: 'angular_ts',
-          message: 'Generate an Angular TypeScript file?',
-          enabled: 'Yes',
-          disabled: 'No',
+          name: 'is_component',
+          message: 'Is this playground for a component?',
+          initial: true,
         },
       ])
       .then((answers) => {
-        const componentName = changeCase.pascal(answers.path.split('/').pop());
-        console.log(
-          `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
-            'ion-',
-            ''
-          )}/${answers.path}/index.md';\n\n<${componentName} />\n`
-        );
+        return inquirer
+          .prompt([
+            answers.is_component ? componentPrompt : nonComponentPrompt,
+            {
+              type: 'input',
+              name: 'path',
+              message: 'What should the playground path be?',
+              hint: 'e.g. `basic` or `theming/colors`',
+              validate(value) {
+                return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
+                  ? true
+                  : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
+              },
+            },
+            {
+              type: 'select',
+              name: 'version',
+              message: 'Select the Ionic Framework version for the playground',
+              initial: '7',
+              choices: ['6', '7'],
+            },
+            {
+              type: 'toggle',
+              name: 'css',
+              message: 'Generate custom CSS files?',
+              enabled: 'Yes',
+              disabled: 'No',
+            },
+            {
+              type: 'toggle',
+              name: 'angular_ts',
+              message: 'Generate an Angular TypeScript file?',
+              enabled: 'Yes',
+              disabled: 'No',
+            },
+          ])
+          .then((answers) => {
+            const componentName = changeCase.pascal(answers.path.split('/').pop());
+            console.log(
+              `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
+                'ion-',
+                ''
+              )}/${answers.path}/index.md';\n\n<${componentName} />\n`
+            );
 
-        return answers;
+            return answers;
+          });
       });
   },
 };

From 5a88878ddd188acb21e951ab6f17d51dcd4c841e Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 15:49:02 -0400
Subject: [PATCH 3/9] Improve console.log copy

Improve console.log copy
---
 _templates/playground/new/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index a1eded5244b..f5bf50e09ca 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -69,12 +69,12 @@ module.exports = {
             },
           ])
           .then((answers) => {
-            const componentName = changeCase.pascal(answers.path.split('/').pop());
+            const playgroundName = changeCase.pascal(answers.path.split('/').pop());
             console.log(
-              `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
+              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name.replace(
                 'ion-',
                 ''
-              )}/${answers.path}/index.md';\n\n<${componentName} />\n`
+              )}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
             );
 
             return answers;

From cbf3ece7d6e6df6404261b32cb96e36d6fcc9e11 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 16:30:45 -0400
Subject: [PATCH 4/9] Refactor

---
 _templates/playground/new/index.js | 36 +++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index f5bf50e09ca..975e7090be8 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -1,22 +1,5 @@
 const changeCase = require('change-case');
 
-const componentPrompt = {
-  type: 'input',
-  name: 'name',
-  message: 'Which component is this playground for?',
-  initial: 'ion-button',
-  validate(value) {
-    return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
-  },
-};
-
-const nonComponentPrompt = {
-  type: 'input',
-  name: 'name',
-  message: 'What is this playground for?',
-  initial: 'animations',
-};
-
 // see types of prompts:
 // https://github.com/enquirer/enquirer/tree/master/examples
 //
@@ -34,7 +17,24 @@ module.exports = {
       .then((answers) => {
         return inquirer
           .prompt([
-            answers.is_component ? componentPrompt : nonComponentPrompt,
+            answers.is_component
+              ? {
+                  type: 'input',
+                  name: 'name',
+                  message: 'Which component is this playground for?',
+                  initial: 'ion-button',
+                  validate(value) {
+                    return value.match(/^ion-[a-z/-]*[a-z]+$/)
+                      ? true
+                      : "Component name must be kebab-case and begin with 'ion-'";
+                  },
+                }
+              : {
+                  type: 'input',
+                  name: 'name',
+                  message: 'What is this playground for?',
+                  initial: 'animations',
+                },
             {
               type: 'input',
               name: 'path',

From 6e7a950cc8a76951be36345eabe285d90161b851 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 16:46:48 -0400
Subject: [PATCH 5/9] Adjust templates for non-component playground generation

Adjust templates for non-component playground generation

Adjust templates for non-component playground generation
---
 _templates/playground/new/angular.md.ejs.t          |  4 ++--
 .../new/angular_example_component_css.md.ejs.t      |  4 ++--
 .../new/angular_example_component_ts.md.ejs.t       |  2 +-
 _templates/playground/new/demo.html.ejs.t           | 10 +++++-----
 _templates/playground/new/index.js                  | 13 ++++++++-----
 _templates/playground/new/index.md.ejs.t            |  5 ++---
 _templates/playground/new/javascript.md.ejs.t       |  6 +++---
 _templates/playground/new/react.md.ejs.t            |  8 ++++----
 _templates/playground/new/react_main_css.md.ejs.t   |  4 ++--
 _templates/playground/new/vue.md.ejs.t              | 12 ++++++------
 10 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t
index ab2bc1a81d7..f44075feb06 100644
--- a/_templates/playground/new/angular.md.ejs.t
+++ b/_templates/playground/new/angular.md.ejs.t
@@ -1,7 +1,7 @@
 ---
 # this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
-to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
+to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
 ---
 ```html
-<<%= name %>></<%= name %>>
+<<%= component %>></<%= component %>>
 ```
diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t
index 233d88bd9d0..e6aab594e42 100644
--- a/_templates/playground/new/angular_example_component_css.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_css.md.ejs.t
@@ -1,9 +1,9 @@
 ---
 # this file only gets generated if `css` (from the command line prompt) is true
-to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_css.md` : null %>"
+to: "<%= css ? `static/usage/v${version}/${name}/${path}/angular/example_component_css.md` : null %>"
 ---
 ```css
-<%= name %> {
+<%= component %> {
   /* styles go here */
 }
 ```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index e6132304d6f..fb07f495acb 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -1,6 +1,6 @@
 ---
 # this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_ts.md` : null %>"
+to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
 ---
 ```ts
 import { Component } from '@angular/core';
diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t
index b8ea2dff630..27bf47e1760 100644
--- a/_templates/playground/new/demo.html.ejs.t
+++ b/_templates/playground/new/demo.html.ejs.t
@@ -1,20 +1,20 @@
 ---
-arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
-to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
+arbitrary: <% numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= h.changeCase.titleCase(nameWithoutIon) %></title>
+    <title><%= h.changeCase.titleCase(name) %></title>
     <link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
     <script src="<%= directoryChanges %>../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
 
     <style>
-      <%= name %> {
+      <%= component %> {
         /* styles go here */
       }
     </style><% } %>
@@ -24,7 +24,7 @@ to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
     <ion-app>
       <ion-content>
         <div class="container">
-          <<%= name %>></<%= name %>>
+          <<%= component %>></<%= component %>>
         </div>
       </ion-content>
     </ion-app>
diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index 975e7090be8..f0c60535e89 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -20,7 +20,7 @@ module.exports = {
             answers.is_component
               ? {
                   type: 'input',
-                  name: 'name',
+                  name: 'component',
                   message: 'Which component is this playground for?',
                   initial: 'ion-button',
                   validate(value) {
@@ -69,12 +69,15 @@ module.exports = {
             },
           ])
           .then((answers) => {
+            answers.name = answers.name || answers.component.replace('ion-', '');
+
+            // if the playground is not for a component,
+            // include an ion-card in the playground
+            answers.component = answers.component || 'ion-card';
+
             const playgroundName = changeCase.pascal(answers.path.split('/').pop());
             console.log(
-              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name.replace(
-                'ion-',
-                ''
-              )}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
+              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
             );
 
             return answers;
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
index fe9b7483a31..5c7bbf08e81 100644
--- a/_templates/playground/new/index.md.ejs.t
+++ b/_templates/playground/new/index.md.ejs.t
@@ -1,6 +1,5 @@
 ---
-arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
-to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
+to: "<%= `static/usage/v${version}/${name}/${path}/index.md` %>"
 ---
 import Playground from '@site/src/components/global/Playground';
 
@@ -56,5 +55,5 @@ import angular_example_component_css from './angular/example_component_css.md';
     angular,
 <% } -%>
   }}
-  src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html"
+  src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />
diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t
index 067c56a59c5..1aa3e7f1f2e 100644
--- a/_templates/playground/new/javascript.md.ejs.t
+++ b/_templates/playground/new/javascript.md.ejs.t
@@ -1,12 +1,12 @@
 ---
-to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>"
+to: "<%= `static/usage/v${version}/${name}/${path}/javascript.md` %>"
 ---
 ```html
-<<%= name %>></<%= name %>>
+<<%= component %>></<%= component %>>
 <% if (css){ -%>
 
 <style>
-  <%= name %> {
+  <%= component %> {
     /* styles go here */
   }
 </style>
diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t
index b446e39db5a..8a84f90e57f 100644
--- a/_templates/playground/new/react.md.ejs.t
+++ b/_templates/playground/new/react.md.ejs.t
@@ -1,17 +1,17 @@
 ---
-arbitrary: <% pascalName = h.changeCase.pascal(name) %>
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
 # this file's location depends on whether or not the css option is selected via the prompt
-to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>"
+to: "<%= `static/usage/v${version}/${name}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>"
 ---
 ```tsx
 import React from 'react';
-import { <%= pascalName %> } from '@ionic/react';<% if (css){ %>
+import { <%= pascalComponent %> } from '@ionic/react';<% if (css){ %>
 
 import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalName %>></<%= pascalName %>>
+    <<%= pascalComponent %>></<%= pascalComponent %>>
   );
 }
 export default Example;
diff --git a/_templates/playground/new/react_main_css.md.ejs.t b/_templates/playground/new/react_main_css.md.ejs.t
index 595e6eaef12..1abbc16100c 100644
--- a/_templates/playground/new/react_main_css.md.ejs.t
+++ b/_templates/playground/new/react_main_css.md.ejs.t
@@ -1,9 +1,9 @@
 ---
 # this file only gets generated if `css` (from the command line prompt) is true
-to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/react/main_css.md` : null %>"
+to: "<%= css ? `static/usage/v${version}/${name}/${path}/react/main_css.md` : null %>"
 ---
 ```css
-<%= name %> {
+<%= component %> {
   /* styles go here */
 }
 ```
diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
index b1bf2cd21eb..a22edd2b2b4 100644
--- a/_templates/playground/new/vue.md.ejs.t
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -1,26 +1,26 @@
 ---
-arbitrary: <% pascalName = h.changeCase.pascal(name) %>
-to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
 ---
 ```html
 <template>
-  <<%= name %>></<%= name %>>
+  <<%= component %>></<%= component %>>
 </template>
 
 <script lang="ts">
-  import { <%= pascalName %> } from '@ionic/vue';
+  import { <%= pascalComponent %> } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: {
-      <%= pascalName %>,
+      <%= pascalComponent %>,
     },
   });
 </script>
 <% if (css){ -%>
 
 <style scoped>
-  <%= name %> {
+  <%= component %> {
     /* styles go here */
   }
 </style>

From cde33a94a3251e504b0e53ff8c62faa3377f56db Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 17:05:28 -0400
Subject: [PATCH 6/9] Add a comment

---
 _templates/playground/new/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index f0c60535e89..893dc1d0232 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -17,6 +17,7 @@ module.exports = {
       .then((answers) => {
         return inquirer
           .prompt([
+            // ask a different question for components vs. other playgrounds
             answers.is_component
               ? {
                   type: 'input',

From bf2c87c98579cfeb6d870e9593bd3e8847237a0a Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 24 Aug 2023 17:17:19 -0400
Subject: [PATCH 7/9] Remove unnecessary prompt code

---
 _templates/playground/new/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index 893dc1d0232..5b877c8140a 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -58,15 +58,11 @@ module.exports = {
               type: 'toggle',
               name: 'css',
               message: 'Generate custom CSS files?',
-              enabled: 'Yes',
-              disabled: 'No',
             },
             {
               type: 'toggle',
               name: 'angular_ts',
               message: 'Generate an Angular TypeScript file?',
-              enabled: 'Yes',
-              disabled: 'No',
             },
           ])
           .then((answers) => {

From a0efda86fb11c1c3a9b0b45270d4690c0c159267 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 28 Aug 2023 09:13:47 -0400
Subject: [PATCH 8/9] Update _templates/playground/new/index.js

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 _templates/playground/new/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index 5b877c8140a..b22578816fb 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -33,7 +33,7 @@ module.exports = {
               : {
                   type: 'input',
                   name: 'name',
-                  message: 'What is this playground for?',
+                  message: 'Which guide section is this playground for?',
                   initial: 'animations',
                 },
             {

From 4f4abb3675edaf0c9b099b37af9de3400f0e9128 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 28 Aug 2023 09:17:15 -0400
Subject: [PATCH 9/9] Add validation

---
 _templates/playground/new/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index b22578816fb..869c85506dc 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -35,6 +35,9 @@ module.exports = {
                   name: 'name',
                   message: 'Which guide section is this playground for?',
                   initial: 'animations',
+                  validate(value) {
+                    return value.match(/^[a-z/-]+$/) ? true : 'Section must be kebab-case';
+                  },
                 },
             {
               type: 'input',