feat: table updates to match UI Kit v1.4.3

docs/pages/components/table.md

@@ -205,6 +205,92 @@ It is recommended to add the parameter `area-selected="true` to the row that is
 
 <br />
 
+
+## Table with semantic row highlithging 
+Table rows support semantic row lighlithing with the modifiers `fd-table__row--valid`, `fd-table__row--warning`, `fd-table__row--error` and `fd-table__row--information` 
+
+{% capture table-checkbox %}
+<table class="fd-table">
+    <thead>
+        <tr>
+            <th scope="col"><input type="checkbox"></th>
+            <th scope="col">Column Header</th>
+            <th scope="col">Column Header</th>
+            <th scope="col">Column Header</th>
+            <th scope="col">Column Header</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><input type="checkbox" checked></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+        <tr class="fd-table__row--valid">
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+         <tr class="fd-table__row--warning">
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+         <tr class="fd-table__row--error">
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>  
+        <tr>
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>
+         <tr class="fd-table__row--information">
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>   
+        <tr>
+            <td><input type="checkbox"></td>
+            <td><a class="fd-has-font-weight-semi">user.name@email.com</a></td>
+            <td>First Name</td>
+            <td>Last Name</td>
+            <td>01/26/17</td>
+        </tr>                    
+    </tbody>
+</table>
+{% endcapture %}
+{% include display-component.html component=table-checkbox %}
+
+<br />
+
 ## Table with Contextual Menu
 When more than three actions exist per row and/or space doesn't allow for actions,
 a contextual menu can be substituted in order to display all actions in one menu.
@@ -669,3 +755,9 @@ a contextual menu can be substituted in order to display all actions in one menu
 </div>
 {% endcapture %}
 {% include display-component.html component=table-sort %}
+
+<style>
+   .fd-table a{ 
+      color: #0a6ed1; 
+   }
+</style>

scss/components/table.scss

@@ -23,6 +23,7 @@ $block: #{$fd-namespace}-table;
     --fd-table-cell-spacing: var(--fd-width-gutter);
 
     $fd-table-cell-padding: fd-space("s") !default;
+    $fd-table-header-cell-padding: fd-space(3) !default;
     $fd-table-transition-params: $fd-animation--speed ease-in !default;
     $fd-table-sort-icon-size: fd-space(3);
     $fd-table-sort-column-header-background-color: fd-color("neutral", 2);
@@ -118,6 +119,18 @@ $block: #{$fd-namespace}-table;
         &.fd-table__fixed-col {
             @include fd-var-color("background-color", $fd-table-fixed-column-cell-color, --fd-color-background-2);
         }
+
+        @include fd-rtl() {
+            &:first-child {
+                @include fd-var-size("padding-right", $fd-width--gutter, --fd-width-gutter);
+              }
+
+            text-align: right;
+        }
+    }
+    th {
+        padding-top: $fd-table-header-cell-padding;
+        padding-bottom: $fd-table-header-cell-padding;
     }
 
     &__sort-column {
@@ -209,4 +222,78 @@ $block: #{$fd-namespace}-table;
             @include fd-var-color("background-color", fd-color-state("hover"), --fd-color-background-hover);
         }
     }
+
+    &__row--valid,
+    &__row--warning,
+    &__row--error,
+    &__row--information {
+        & td:first-child {
+            position: relative;
+            &::before {
+                position: absolute;
+                left: 0;
+                top: 0;
+                border: fd-space(.5) solid;
+                border-top-left-radius: fd-space(1);
+                border-bottom-left-radius: fd-space(1);
+                content: "";
+                height: 100%;
+            }
+            @include fd-rtl() {
+                &::before {
+                    left: auto;
+                    right: 0;
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    border-top-right-radius: fd-space(1);
+                    border-bottom-right-radius: fd-space(1);
+                }
+            }
+        }
+    }
+    &__row--valid {
+        &:hover {
+            --fd-color-background-hover: var(--fd-color-background-3);
+        }
+        @include fd-var-color("background-color", fd-color('background', 3), --fd-color-background-3);
+        & td:first-child {
+            &::before {
+                @include fd-var-color("border-color", fd-color('status', 1), --fd-color-status-1);
+            }
+        }
+    }
+    &__row--warning {
+        &:hover {
+            --fd-color-background-hover: var(--fd-color-background-4);
+        }
+        @include fd-var-color("background-color", fd-color('background', 4), --fd-color-background-4);
+        & td:first-child {
+            &::before {
+                @include fd-var-color("border-color", fd-color('status', 2), --fd-color-status-2);
+            }
+        }
+    }
+    &__row--error {
+        &:hover {
+            --fd-color-background-hover: var(--fd-color-background-5);
+        }
+        @include fd-var-color("background-color", fd-color('background', 5), --fd-color-background-5);
+        & td:first-child {
+            &::before {
+                @include fd-var-color("border-color", fd-color('status', 3), --fd-color-status-3);
+            }
+        }
+    }
+    &__row--information {
+        &:hover {
+            --fd-color-background-hover: var(--fd-color-background-6);
+        }
+        @include fd-var-color("background-color", fd-color('background', 6), --fd-color-background-6);
+        & td:first-child {
+            &::before {
+                @include fd-var-color("border-color", fd-color('status', 5), --fd-color-status-5);
+                border-color: fd-color('status', 5);
+            }
+        }
+    }
 }

test/templates/table/component.njk

@@ -58,7 +58,7 @@ table:
     </thead>
     <tbody>
         {%- for row in properties.rows %}
-        <tr{% if properties.selectedRow === loop.index %} aria-selected="true"{% endif %}>
+        <tr{% if properties.selectedRow === loop.index %} aria-selected="true"{% endif %} {% if properties.rowClass.rowIndex === loop.index %} class="{{properties.rowClass.class}}"{% endif %}>
             {%- for item in row %}
             {%- if item.label %}
             <td class="{{item.class}}" style="left:{{0 if item.fixed_col else item.offset }}; width:{{item.width}}">{{ item.label }}</td>

test/templates/table/index.njk

@@ -39,6 +39,75 @@
 {% set example %}
 {{  table(properties={
         rows: [row, row, row],
+        rowClass : {"rowIndex": 2, "class": "fd-table__row--valid"},
+        headers: [
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            }
+        ]
+    })
+}}
+{{  table(properties={
+        rows: [row, row, row],
+        rowClass : {"rowIndex": 2, "class": "fd-table__row--warning"},
+        headers: [
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            }
+        ]
+    })
+}}
+
+{{  table(properties={
+        rows: [row, row, row],
+        rowClass : {"rowIndex": 2, "class": "fd-table__row--error"},
+        headers: [
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            },
+            {
+                label: "Header Column"
+            }
+        ]
+    })
+}}
+
+{{  table(properties={
+        rows: [row, row, row],
+        rowClass : {"rowIndex": 2, "class": "fd-table__row--information"},
         headers: [
             {
                 label: "Header Column"