fix(code-snippet): Update templates (#779)

* fix(code-snippet): Update skeleton state styles

* fix: swap code and pre tag nesting order

* fix(code-snippet): Update hbs template for code snippet

* fix: spelling error

* chore: remove old files

* chore: move changes from PR 774 to this

* fix: Update click event to run on button

demo/scss/_page.scss

@@ -76,7 +76,7 @@ td {
   }
 
   & > *:not(.component-example):not(.component-variation),
-  & >  {
+  & > {
     button {
       border-radius: 0;
     }

gulpfile.js

@@ -254,7 +254,7 @@ gulp.task('sass:source', () => {
 });
 
 gulp.task('html:source', () =>
-  templates.render({ preview: 'NONE' }).then(renderedItems => {
+  templates.render().then(renderedItems => {
     const promises = [];
     renderedItems.forEach((rendered, item) => {
       const dirname = path.dirname(path.resolve(__dirname, 'html', item.relViewPath));

server.js

@@ -95,7 +95,7 @@ app.get('/component/:component', (req, res) => {
     res.status(404).end();
   } else {
     templates
-      .render({ defaultPreview: 'preview', concat: true }, name)
+      .render({ layout: 'preview', concat: true }, name)
       .then(rendered => {
         // eslint-disable-next-line eqeqeq
         if (rendered == null) {
@@ -117,7 +117,7 @@ app.get('/code/:component', (req, res) => {
     res.status(404).end();
   } else {
     templates
-      .render({ preview: 'NONE' }, name)
+      .render({}, name)
       .then(renderedItems => {
         const o = {};
         renderedItems.forEach((rendered, item) => {

src/components/code-snippet/_code-snippet.scss

@@ -61,12 +61,15 @@
     display: flex;
     align-items: center;
     height: 130%;
-    white-space: nowrap;
     overflow-x: scroll;
     position: relative;
     padding-bottom: $spacing-md;
   }
 
+  .#{$prefix}--snippet--single pre {
+    white-space: nowrap;
+  }
+
   // Multi Line Snippet
   .#{$prefix}--snippet--multi {
     @include bx--snippet;
@@ -185,6 +188,44 @@
     transform: rotate(180deg);
   }
 
+  // Skeleton
+
+  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton span {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+    margin-top: 0.5rem;
+
+    &:first-child {
+      margin: 0;
+    }
+
+    &:nth-child(2) {
+      width: 85%;
+    }
+
+    &:nth-child(3) {
+      width: 95%;
+    }
+  }
+
+  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    padding-bottom: 0;
+  }
+
   /* 
     Deprecated class names will be removed in v10.x
   */

src/components/code-snippet/code-snippet.config.js

@@ -4,26 +4,52 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Code',
+      label: 'Single Line',
       notes: `
         Code snippets are small blocks of reusable code that can be inserted in a code file.
 
-        The Code style is for larger, multi-line code snippets.
+        The Single style is for single-line code snippets.
       `,
       context: {
-        variant: 'code',
+        variant: 'single',
       },
     },
     {
-      name: 'terminal',
-      label: 'Terminal',
+      name: 'multi',
+      label: 'Multi Line',
       notes: `
         Code snippets are small blocks of reusable code that can be inserted in a code file.
 
-        The Terminal style is for single-line .
+        The Multi-line style is for larger code blocks.
       `,
       context: {
-        variant: 'terminal',
+        variant: 'multi',
+      },
+    },
+    {
+      name: 'inline',
+      label: 'Inline',
+      notes: `
+        Code snippets are small blocks of reusable code that can be inserted in a code file.
+
+        The inline style is for code blocks within a block of text on a white background.
+      `,
+      context: {
+        variant: 'inline',
+        light: 'false',
+      },
+    },
+    {
+      name: 'inline-light',
+      label: 'Inline Light',
+      notes: `
+        Code snippets are small blocks of reusable code that can be inserted in a code file.
+
+        The inline style is for code blocks within a block of text.
+      `,
+      context: {
+        variant: 'inline',
+        light: 'true',
       },
     },
   ],

src/components/code-snippet/code-snippet.hbs

@@ -1,36 +1,54 @@
-<div class="bx--snippet bx--snippet--{{variant}}">
-  <div class="bx--snippet-container">
-    {{#is variant "code"}}
-      <code>
-        <pre>
-@mixin bx--snippet($type) {
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
-  }
+{{#is variant "inline"}}
+<p>Here is an example of a text that a user would be reading. In this paragraph would be 
+<button data-copy-btn="" class="bx--snippet bx--snippet--inline {{#if light}} bx--snippet--light{{/if}}" aria-label="Copy code" tabindex="0">
+  <code>inline code</code>
+  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+</button> 
+that the user could look at and copy in to their code editor.</p>
+{{else}}
+
+  <div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
+    <div class="bx--snippet-container">
 
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
+      <pre>
+        <code>     
+  @mixin grid-container {
+    width: 100%;
+    padding-right: padding(mobile);
+    padding-left: padding(mobile);
+
+    @include breakpoint(bp--xs--major) {
+      padding-right: padding(xs);
+      padding-left: padding(xs);
+    }
   }
-}
-        </pre>
-      </code>
-    {{else}}
-      <pre><code>node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!</code></pre>
+
+  $z-indexes: (
+    modal : 9000,
+    overlay : 8000,
+    dropdown : 7000,
+    header : 6000,
+    footer : 5000,
+    hidden : - 1,
+    overflowHidden: - 1,
+    floating: 10000
+  );       
+
+  </code>
+  </pre>
+    </div>
+    <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
+      <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
+        <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
+        <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
+      </svg>
+      <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    </button>
+    {{#is variant "multi"}}
+      <button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
+        <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show more</span>
+        <svg class="bx--icon-chevron--down" width='12' height='8' viewBox='0 0 12 8' fill-rule='evenodd' aria-label="Show more icon" alt="Show more icon"><title>Show more icon</title><path d='M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z'></path></svg>
+      </button>
     {{/is}}
   </div>
-  <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-    <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
-      <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
-      <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
-    </svg>
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-  </button>
-</div>
+ {{/is}}

src/components/code-snippet/code-snippet.js

@@ -16,7 +16,7 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
     super(element, options);
 
     this._initCodeSnippet();
-    this.element.querySelector(this.options.classExpandText).addEventListener('click', evt => this._handleClick(evt));
+    this.element.querySelector(this.options.classExpandBtn).addEventListener('click', evt => this._handleClick(evt));
   }
 
   _handleClick() {
@@ -66,7 +66,7 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
     attribShowLessText: 'data-show-less-text',
     minHeight: 288,
     classExpanded: 'bx--snippet--expand',
-    classExpandBtn: 'bx--snippet-btn--expand',
+    classExpandBtn: '.bx--snippet-btn--expand',
     classExpandText: '.bx--snippet-btn--text',
     classHideExpand: 'bx--snippet-btn--expand--hide',
   };

src/globals/scss/_layout.scss

@@ -62,12 +62,12 @@ $padding: (
 }
 
 $z-indexes: (
-  modal : 9000,
-  overlay : 8000,
-  dropdown : 7000,
-  header : 6000,
-  footer : 5000,
-  hidden : - 1,
+  modal: 9000,
+  overlay: 8000,
+  dropdown: 7000,
+  header: 6000,
+  footer: 5000,
+  hidden: - 1,
   overflowHidden: - 1,
   floating: 10000
 );