fix(structured-list): add modifier class for variant (#179)

* fix(structured-list): add selection class

* fix(structured-list): add styles using new class

* fix(structured-list): mark deprecated styles

* docs(structured-list): add modifier --selection

src/components/structured-list/README.md

@@ -29,6 +29,7 @@ Use these modifiers with `.bx--structured-list` class.
 | .bx--structured-list--border         | Applies border around structured-list and white background-color                             |
 | .bx--structured-list--condensed      | Applies condensed styles for all body rows                                                   |
 | .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports. |
+| .bx--structured-list--selection      | Applies styles used for selection variant of structured-list.                                |
 
 
 Use these modifiers with `.bx--structured-list-td` class. 
@@ -67,8 +68,8 @@ Use CSS to add visual styles to text.
 
 **HTML**
 ```html
-<div class="bx--structured-list-td">
-  <p class="bx--structured-list-content bold">Apache Spark</p>
+<div class="bx--structured-list-td bold">
+  Apache Spark
 </div>
 ```
 

src/components/structured-list/_structured-list.scss

@@ -7,6 +7,12 @@
 @import '../../globals/scss/import-once';
 
 @include exports('structured-list') {
+  .bx--structured-list--selection .bx--structured-list-td,
+  .bx--structured-list--selection .bx--structured-list-th {
+    @include padding--data-structured-list;
+  }
+
+  // Deprecated
   [data-structured-list] .bx--structured-list-td,
   [data-structured-list] .bx--structured-list-th {
     @include padding--data-structured-list;
@@ -44,6 +50,12 @@
     border-bottom: 1px solid $ui-04;
     transition: $transition--base $bx--standard-easing;
 
+    .bx--structured-list--selection &:hover:not(.bx--structured-list-row--header-row) {
+      background-color: rgba($brand-02, .1);
+      cursor: pointer;
+    }
+
+    // Deprecated
     [data-structured-list] &:hover:not(.bx--structured-list-row--header-row) {
       background-color: rgba($brand-02, .1);
       cursor: pointer;

src/components/structured-list/structured-list--selection.html

@@ -1,4 +1,4 @@
-<section class="bx--structured-list bx--structured-list--border" data-structured-list>
+<section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
   <div class="bx--structured-list-thead">
     <div class="bx--structured-list-row bx--structured-list-row--header-row">
       <div class="bx--structured-list-th"></div>