feat(code-snippet): Add new Code snippet variation and styles

demo/scss/_page.scss

@@ -75,12 +75,12 @@ td {
     }
   }
 
-  button {
-    border-radius: 0;
-  }
-
   & > *:not(.component-example):not(.component-variation),
   & >  {
+    button {
+      border-radius: 0;
+    }
+
     .page__divider-heading {
       @include typescale('zeta');
       font-weight: 600;
@@ -151,7 +151,7 @@ td {
         display: block;
         background-color: $brand-01;
         position: absolute;
-        top: -.5rem;
+        top: -0.5rem;
         left: 0;
       }
 

src/components/code-snippet/README.md

@@ -11,9 +11,10 @@ Mixins specific to Code Snippet are located in [src/components/code-snippet/_mix
 
 #### Modifiers
 
-Use these modifiers with `.bx--root-class` class.
+Use these modifiers with `.bx--snippet` class.
 
 | Selector                         | Description                        |
 |----------------------------------|------------------------------------|
-| .bx--snippet--code               | Styles for multiple lines of code  |
-| .bx--snippet--terminal           | Styles for single lines of code    |
+| .bx--snippet--single             | Styles for multiple lines of code  |
+| .bx--snippet--multi              | Styles for single lines of code    |
+| .bx--snippet--inline             | Styles for code inline inside text  |

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

@@ -8,68 +8,102 @@
 @import 'mixins';
 
 @include exports('snippet') {
-  .#{$prefix}--snippet--code {
-    @include bx--snippet;
-    background-color: $snippet-background-color;
-    padding: $spacing-md $spacing-2xl $spacing-md $spacing-md;
-  }
-
   .#{$prefix}--snippet code {
-    @include typescale('epsilon');
+    font-family: $font-family-mono;
   }
 
-  .#{$prefix}--snippet--code .#{$prefix}--snippet-container {
-    max-height: rem(192px);
-    overflow-y: scroll;
-    margin-right: $spacing-md;
+  // Inline Code Snippet
+  .#{$prefix}--snippet--inline {
+    @include reset;
     position: relative;
+    display: inline;
+    padding: 0;
+    background: transparent;
+    font-size: inherit;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: $field-01;
+    font-size: 85%;
+    cursor: pointer;
+
+    &:hover {
+      background-color: darken($field-01, 10%);
+    }
+
+    &:focus {
+      @include focus-outline;
+      outline: none;
+      border: 1px solid $brand-01;
+    }
   }
 
-  .#{$prefix}--snippet--code .#{$prefix}--snippet-container pre {
-    white-space: pre-wrap;
+  .#{$prefix}--snippet--inline code {
+    padding: rem(1px) $spacing-xs;
   }
 
-  .#{$prefix}--snippet--terminal {
+  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
+    background-color: $field-02;
+
+    &:hover {
+      background-color: darken($field-02, 10%);
+    }
+  }
+
+  // Single Line Snippet
+  .#{$prefix}--snippet--single {
     @include bx--snippet;
-    background-color: $text-01;
-    color: $inverse-01;
-    height: 3.5rem;
+    height: rem(56px);
     padding: 0 $spacing-2xl 0 $spacing-md;
   }
 
-  .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container {
+  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
     display: flex;
     align-items: center;
     height: 130%;
     white-space: nowrap;
     overflow-x: scroll;
     position: relative;
+    padding-bottom: $spacing-md;
+  }
+
+  // Multi Line Snippet
+  .#{$prefix}--snippet--multi {
+    @include bx--snippet;
+    padding: $spacing-md $spacing-3xl $spacing-md $spacing-lg;
+  }
+
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    overflow: hidden;
+    position: relative;
+    max-height: rem(254px);
+    min-height: rem(56px);
+    transition: all $transition--base $carbon--standard-easing;
+  }
+
+  .#{$prefix}--snippet--expand.#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    max-height: rem(1500px);
+  }
+
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
+    white-space: pre-wrap;
   }
 
   .#{$prefix}--snippet__icon {
     fill: $brand-01;
     height: rem(24px);
     width: rem(18px);
-    transition: $transition--base;
+    transition: all $transition--base $carbon--standard-easing;
 
     &:hover {
-      fill: $brand-02;
-    }
-  }
-
-  .#{$prefix}--snippet--terminal .#{$prefix}--snippet__icon {
-    fill: $inverse-01;
-
-    &:hover {
-      fill: $brand-02;
+      fill: $hover-primary;
     }
   }
 
   .#{$prefix}--snippet-button {
     @include reset;
     cursor: pointer;
     position: absolute;
-    top: 0.5rem;
+    top: 0.675rem;
     right: 0.5rem;
     border: none;
     background-color: transparent;
@@ -86,9 +120,40 @@
   .#{$prefix}--snippet .#{$prefix}--btn--copy__feedback {
     @include font-family;
     z-index: z('overlay');
-    font-weight: 600;
+    font-weight: 400;
     left: inherit;
     top: 1rem;
     right: 1.25rem;
   }
+
+  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
+    right: auto;
+  }
+
+  // Show more / less button
+  .#{$prefix}--snippet-btn--expand {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
+  .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
+    display: none;
+  }
+
+  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
+    fill: $brand-01;
+    margin-left: $spacing-2xs;
+    transform: rotate(0deg);
+    transition: $transition--base;
+  }
+
+  .#{$prefix}--snippet-btn--expand:hover .#{$prefix}--icon-chevron--down,
+  .#{$prefix}--snippet-btn--expand:focus .#{$prefix}--icon-chevron--down {
+    fill: $inverse-01;
+  }
+
+  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
+    transform: rotate(180deg);
+  }
 }

src/components/code-snippet/_mixins.scss

@@ -1,6 +1,10 @@
 @mixin bx--snippet {
+  @include typescale('omega');
+  line-height: 1.45;
+  background: $snippet-background-color;
+  border: 1px solid $snippet-border-color;
   font-family: $font-family-mono;
   position: relative;
-  max-width: rem(640px);
+  max-width: rem(600px);
   width: 100%;
 }

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

@@ -0,0 +1,68 @@
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import on from '../../globals/js/misc/on';
+
+class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles) {
+  /**
+   * CodeSnippet UI.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a CodeSnippet UI.
+   */
+
+  constructor(element, options) {
+    super(element, options);
+    this.manage(
+      on(this.element, 'click', event => {
+        this._handleClick(event);
+      })
+    );
+
+    this._initCodeSnippet();
+  }
+
+  _handleClick() {
+    this.element.parentElement.classList.toggle('bx--snippet--expand');
+
+    if (this.element.parentElement.classList.contains('bx--snippet--expand')) {
+      this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showLess;
+    } else {
+      this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showMore;
+    }
+  }
+
+  _initCodeSnippet() {
+    this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showMore;
+    if (this.element.parentElement.offsetHeight < 288) {
+      this.element.classList.add('bx--snippet-btn--expand--hide');
+      this.element.parentElement.classList.add('bx--snippet--expand');
+    }
+  }
+
+  /**
+   * The map associating DOM element and copy button UI instance.
+   * @member CodeSnippet.components
+   * @type {WeakMap}
+   */
+  static components = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor, {@linkcode CodeSnippet.create .create()},
+   * or {@linkcode CodeSnippet.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode CodeSnippet.init .init()} works.
+   * @member CodeSnippet.options
+   * @type {Object}
+   * @property {string} selectorInit The data attribute to find copy button UIs.
+   */
+  static options = {
+    selectorInit: '.bx--snippet--multi .bx--snippet-btn--expand',
+    showMore: 'Show more',
+    showLess: 'Show less',
+  };
+}
+
+export default CodeSnippet;

src/components/code-snippet/inline-code-snippet-light.html

@@ -0,0 +1,7 @@
+
+<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 bx--snippet--light" 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>

src/components/code-snippet/inline-code-snippet.html

@@ -0,0 +1,8 @@
+
+<!-- This should be on a white background -->
+<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" 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>

src/components/code-snippet/migrate-to-9.x.md

@@ -0,0 +1,13 @@
+### HTML
+
+Terminal snippet has been renamed to Single line snippet, Code snippet has been renamed to Multi-line snippet and we have added a new variation, Inline snippet. 
+
+### SCSS
+
+|Old Class               |New Class               |  
+|------------------------|------------------------|
+|`bx--snippet--terminal` |`bx--snippet--single`   | 
+|`bx--snippet--code`     |`bx--snippet--multi`    |  
+| n/a                    | `bx--snippet--inline`  |  
+
+