[UI Framework] [K7] Improve generator snippets (#13598) (#13599)

* Remove extraneous path info from SCSS import snippet.
* Add GuideCode to demo page. Put stateless function params on multiple lines.
* Log an error if you try to create a component with a blank name.

ui_framework/generator-kui/component/index.js

@@ -27,6 +27,11 @@ module.exports = class extends Generator {
       default: true,
     }]).then(answers => {
       this.config = answers;
+
+      if (!answers.name || !answers.name.trim()) {
+        this.log.error('Sorry, please run this generator again and provide a component name.');
+        process.exit(1);
+      }
     });
   }
 
@@ -121,7 +126,7 @@ module.exports = class extends Generator {
 
       this.log(chalk.white('\n// Import component styles into the root index.scss.'));
       this.log(
-        `${chalk.magenta('@import')} ${chalk.cyan(`'./${this.config.name}/index'`)};`
+        `${chalk.magenta('@import')} ${chalk.cyan(`'${this.config.name}/index'`)};`
       );
     };
 

ui_framework/generator-kui/component/templates/stateless_function.js

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const <%= componentName %> = ({ children, className, ...rest }) => {
+export const <%= componentName %> = ({
+  children,
+  className,
+  ...rest,
+}) => {
   const classes = classNames('<%= cssClassName %>', className);
 
   return (

ui_framework/generator-kui/documentation/templates/documentation_page.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { renderToHtml } from '../../services';
 
 import {
+  GuideCode,
   GuideDemo,
   GuidePage,
   GuideSection,
@@ -27,7 +28,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        Description needed: how to use the <%= componentExampleName %> component.
+        Description needed: how to use the <GuideCode><%= componentExampleName %></GuideCode> component.
       </GuideText>
 
       <GuideDemo>