@carbon/charts 0.28.0 → 0.29.2

package/styles/vendor/carbon-components/src/components/data-table/_data-table-inline-edit.scss

@@ -0,0 +1,78 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+
+@include exports('data-table-inline-edit') {
+  .#{$prefix}--inline-edit-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &:hover {
+      .#{$prefix}--inline-edit-label__icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$prefix}--inline-edit-label--inactive {
+    display: none;
+  }
+
+  .#{$prefix}--inline-edit-label__action {
+    @include button-reset(false);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus {
+      @include focus-outline;
+      padding: $spacing-3xs;
+
+      .#{$prefix}--inline-edit-label__icon {
+        width: auto;
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$prefix}--inline-edit-label__icon {
+    fill: $ui-05;
+    opacity: 0;
+  }
+
+  .#{$prefix}--inline-edit-input {
+    display: none;
+  }
+
+  .#{$prefix}--inline-edit-input--active {
+    display: block;
+    margin-left: rem(-12px);
+
+    input {
+      padding-left: $spacing-sm;
+    }
+  }
+
+  .#{$prefix}--data-table--short {
+    input {
+      height: rem(32px);
+    }
+
+    select {
+      padding: 0.45rem 2.75rem 0.45rem $spacing-md;
+    }
+
+    .#{$prefix}--select__arrow {
+      top: 0.875rem;
+    }
+  }
+}

package/styles/vendor/carbon-components/src/components/data-table/_data-table-skeleton.scss

@@ -0,0 +1,55 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+
+@include exports('data-table-v2-skeleton') {
+  .#{$prefix}--data-table.#{$prefix}--skeleton {
+    th {
+      border-bottom: 1px solid $brand-01;
+      vertical-align: middle;
+
+      &:nth-child(3n + 1) {
+        width: 10%;
+      }
+
+      &:nth-child(3n + 2) {
+        width: 30%;
+      }
+
+      &:nth-child(3n + 3) {
+        width: 15%;
+      }
+    }
+
+    th span,
+    td span {
+      @include skeleton;
+      width: 75%;
+      height: 1rem;
+      display: block;
+    }
+
+    tr:hover {
+      td {
+        border-color: $ui-03;
+        background: transparent;
+
+        &:first-of-type,
+        &:last-of-type {
+          border-color: $ui-03;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
+    pointer-events: none;
+  }
+}

package/styles/vendor/carbon-components/src/components/data-table/_data-table-sort.scss

@@ -0,0 +1,188 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+
+/// Data table sort styles
+/// @access private
+/// @group data-table
+@mixin data-table-sort {
+  // -------------------------------------
+  // Sortable table
+  // -------------------------------------
+  .#{$prefix}--data-table--sort th,
+  .#{$prefix}--data-table--sort
+    th:first-of-type:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-expand) {
+    padding: 0;
+  }
+
+  .#{$prefix}--data-table--sort th {
+    height: $layout-04;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .#{$prefix}--data-table--sort td {
+    padding-left: $spacing-03;
+    padding-right: $spacing-03;
+  }
+
+  .#{$prefix}--data-table--sort th:first-of-type .#{$prefix}--table-sort {
+    padding-left: $spacing-04;
+  }
+
+  // -------------------------------------
+  // Th > Button
+  // -------------------------------------
+  .#{$prefix}--table-sort {
+    @include button-reset(false);
+    position: relative;
+    font: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    color: $text-01;
+    padding: 0 $spacing-03;
+    height: 100%;
+    background-color: $ui-03;
+    transition: background-color $duration--fast-01 motion(entrance, productive),
+      outline $duration--fast-01 motion(entrance, productive);
+  }
+
+  .#{$prefix}--table-sort:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--table-sort:hover {
+    background: $data-table-column-hover;
+  }
+
+  // changes opacity when th is inactive (see line 161)
+  .#{$prefix}--table-sort:focus svg,
+  .#{$prefix}--table-sort:hover svg {
+    opacity: 1;
+  }
+
+  // -------------------------------------
+  //Th > Button > Svg (Sort Icons)
+  // -------------------------------------
+  // inactive icons
+  .#{$prefix}--table-sort .#{$prefix}--table-sort__icon-inactive {
+    display: block;
+  }
+
+  .#{$prefix}--table-sort .#{$prefix}--table-sort__icon {
+    display: none;
+  }
+
+  .#{$prefix}--table-sort__icon-unsorted {
+    position: relative;
+    left: rem(2px);
+    margin-left: $spacing-03;
+    margin-right: 0;
+    opacity: 0;
+    fill: $ui-05;
+    width: auto;
+    min-width: $layout-01;
+  }
+
+  // active icons
+  .#{$prefix}--table-sort.#{$prefix}--table-sort--active
+    .#{$prefix}--table-sort__icon-unsorted {
+    display: none;
+  }
+
+  .#{$prefix}--table-sort.#{$prefix}--table-sort--active
+    .#{$prefix}--table-sort__icon {
+    display: block;
+    opacity: 1; //changes opacity when th is active (see line 125)
+  }
+
+  .#{$prefix}--table-sort--ascending .#{$prefix}--table-sort__icon {
+    transform: rotate(180deg);
+  }
+
+  .#{$prefix}--table-sort__icon {
+    position: relative;
+    left: rem(2px);
+    margin-left: $spacing-03;
+    margin-right: 0;
+    transition: transform $transition--base $carbon--standard-easing;
+    transform: rotate(0);
+    opacity: 0;
+    fill: $ui-05;
+    width: auto;
+    min-width: $layout-01;
+  }
+
+  //----------------------------------------------------------------------------
+  // Compact, Short, Tall Sortable
+  //----------------------------------------------------------------------------
+  // Sortable compact
+  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort th {
+    height: rem(24px);
+  }
+
+  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // Sortable Short
+  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort th {
+    height: rem(32px);
+  }
+
+  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // Sortable Tall
+  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort th {
+    height: rem(64px);
+  }
+
+  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort
+    svg {
+    align-self: flex-start;
+    top: $spacing-03;
+  }
+
+  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort
+    .#{$prefix}--table-header-label {
+    align-self: flex-start;
+    position: relative;
+    top: rem(-8px);
+    max-height: 3rem;
+    display: -webkit-box; // weird text truncation style used
+    -webkit-line-clamp: 2; // because we need text to wrap
+    -webkit-box-orient: vertical; // can't use white-space: nowrap
+  }
+}
+
+@include exports('data-table-sort') {
+  @include data-table-sort;
+}

package/styles/vendor/carbon-components/src/components/data-table/_data-table.scss

@@ -0,0 +1,13 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'data-table-action';
+@import 'data-table-core';
+@import 'data-table-expandable';
+@import 'data-table-sort';
+@import 'data-table-inline-edit';
+@import 'data-table-skeleton';

package/styles/vendor/carbon-components/src/components/data-table/_mixins.scss

@@ -0,0 +1,26 @@
+// @access public
+// @content Includes a block of styles for sticky data tables that sets table max-width, max-height and column min-width
+// @example - @include sticky-header($max-height: rem(900px), $min-width: rem(30px));
+// @param {value} $max-width [100%] - sets the max-width of the data table parent container
+// @param {value} $max-height [rem(300px)] - sets the max-height of the data table
+// @param {value} $min-width [rem(100px)] - sets the min-width of th's and td's so their sizes align
+@mixin sticky-header(
+  $min-width: false,
+  $max-width: 100%,
+  $max-height: rem(300px)
+) {
+  .#{$prefix}--data-table--max-width {
+    max-width: $max-width;
+  }
+
+  .#{$prefix}--data-table--sticky-header {
+    max-height: $max-height;
+
+    @if $min-width {
+      th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon),
+      td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) {
+        min-width: $min-width;
+      }
+    }
+  }
+}

package/styles/vendor/carbon-components/src/components/data-table/data-table--row-header.hbs

@@ -0,0 +1,132 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+  <!-- Table -->
+  <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}}{{#if sticky}} {{@root.prefix}}--data-table--sticky-header{{/if}}{{#if zebra}} {{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}}{{#if tall}} {{@root.prefix}}--data-table--tall{{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort{{/if}}{{#if displayOverflowMenus}} {{@root.prefix}}--data-table--visible-overflow-menu{{/if}} {{#if short}}{{@root.prefix}}--data-table--short{{/if}} {{#if static}}{{@root.prefix}}--data-table--static{{/if}}" >
+    <thead>
+      <tr>
+        {{#each columns}}
+          <th {{#if checkbox}} class="{{@root.prefix}}--table-column-checkbox" {{/if}}{{#if section}}class="{{@root.prefix}}--table-expand"{{/if}} {{#if numerical}} class="{{@root.prefix}}--data-table--numerical-cell"{{/if}} {{#if section}} data-event="expandAll"{{/if}}>
+            <!-- checkbox th -->
+            {{#if checkbox}}
+              <input data-event="select-all" id="{{checkboxId}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{checkboxValue}}" name="{{checkboxName}}">
+              <label for="{{checkboxId}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{title}}"></label>
+            {{else if (and section ../hasExpandAll)}}
+              <button class="{{@root.prefix}}--table-expand__button">
+                {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--table-expand__svg') }}
+              </button>
+            {{else if (not menu)}}
+            <!-- sortable th  -->
+              {{#if sortable}}
+                <button class="{{@root.prefix}}--table-sort" data-event="sort" title="{{title}}">
+                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
+                  {{carbon-icon 'ArrowDown16' class=(add @root.prefix '--table-sort__icon')}}
+                  {{carbon-icon 'Arrows16' class=(add @root.prefix '--table-sort__icon-unsorted')}}
+                  {{#if ../truncate}}
+                    <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
+                      <span class="{{@root.prefix}}--tooltip__caret"></span>
+                      <p class="{{@root.prefix}}--tooltip__text">{{title}}</p>
+                    </div>
+                  {{/if}}
+                </button>
+              <!-- no sort th -->
+                {{else if small}}
+                  {{title}}
+                {{else}}
+                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
+                {{/if}}
+              {{/if}}
+          </th>
+        {{/each}}
+      </tr>
+    </thead>
+  <tbody>
+    {{#each rows as |row|}}
+      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
+      <tr{{#if row.sectionContent}} class="{{@root.prefix}}--parent-row" data-parent-row {{/if}} {{#if row.disabled}} class="{{@root.prefix}}--row-disabled" {{/if}}>
+        {{#each ../columns as |column index|}}
+          {{#with (lookup row column.name) as |data|}}
+            {{#if @first }}
+              <th {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}} scope="row">
+                <!-- truncated new markup -->
+                {{#if ../../truncate}}
+                  <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
+                      {{#if ../../../tall }}
+                        {{#if (and row.secondaryText column.secondary)}}
+                        <div class="{{@root.prefix}}--data-table--cell-secondary-text">
+                          {{row.secondaryText}}
+                        </div>
+                        {{/if}}
+                      {{/if}}
+                    </span>
+                  <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
+                    <span class="{{@root.prefix}}--tooltip__caret"></span>
+                    <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
+                  </div>
+                <!-- default (non truncated) -->
+                {{else}}
+                  {{data}}
+                  {{#if ../../../tall}}
+                    {{#if (and row.secondaryText column.secondary)}}
+                    <div class="{{@root.prefix}}--data-table--cell-secondary-text">
+                      {{row.secondaryText}}
+                    </div>
+                    {{/if}}
+                  {{/if}}
+                {{/if}}
+              </th>
+            {{else}}
+              <td {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}}>
+                <!-- truncated new markup -->
+                {{#if ../../truncate}}
+                  <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
+                      {{#if ../../../tall }}
+                        {{#if (and row.secondaryText column.secondary)}}
+                        <div class="{{@root.prefix}}--data-table--cell-secondary-text">
+                          {{row.secondaryText}}
+                        </div>
+                        {{/if}}
+                      {{/if}}
+                    </span>
+                  <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
+                    <span class="{{@root.prefix}}--tooltip__caret"></span>
+                    <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
+                  </div>
+                <!-- default (non truncated) -->
+                {{else}}
+                  {{data}}
+                  {{#if ../../../tall}}
+                    {{#if (and row.secondaryText column.secondary)}}
+                    <div class="{{@root.prefix}}--data-table--cell-secondary-text">
+                      {{row.secondaryText}}
+                    </div>
+                    {{/if}}
+                  {{/if}}
+                {{/if}}
+              </td>
+            {{/if}}
+          {{/with}}
+        {{/each}}
+      </tr>
+      <!-- Expandable child row -->
+      {{#if row.sectionContent}}
+          <tr class="{{@root.prefix}}--expandable-row {{@root.prefix}}--expandable-row--hidden" data-child-row>
+            <td colspan="{{../columns.length}}">
+              <div class="{{@root.prefix}}--child-row-inner-container">
+                {{{row.sectionContent}}}
+              </div>
+            </td>
+          </tr>
+        {{/if}}
+      {{/each}}
+    </tbody>
+  </table>
+  {{#if sticky}}
+  </section>
+  {{/if}}
+
+ {{#if (not small)}}</div>{{/if}}