@carbon/charts 0.28.0 → 0.29.2

package/styles/vendor/carbon-components/src/components/tile/_tile.scss

@@ -0,0 +1,168 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Tiles
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/layer';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/css--reset';
+
+/// Tile styles
+/// @access private
+/// @group tile
+@mixin tile {
+  .#{$prefix}--tile {
+    display: block;
+    min-width: 8rem;
+    min-height: 4rem;
+    background-color: $ui-01;
+    position: relative;
+    padding: $carbon--spacing-05;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--selectable,
+  .#{$prefix}--tile--expandable {
+    transition: $duration--moderate-01 motion(standard, productive);
+    cursor: pointer;
+
+    &:hover {
+      background: $hover-ui;
+    }
+
+    &:hover,
+    &:focus {
+      .#{$prefix}--tile__checkmark {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--expandable {
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--tile--selectable {
+    padding-right: $carbon--spacing-09;
+  }
+
+  .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile__chevron {
+    position: absolute;
+    transition: $duration--fast-02 motion(standard, productive);
+    border: none;
+    background: transparent;
+  }
+
+  .#{$prefix}--tile__checkmark {
+    height: 1rem;
+    top: 1rem;
+    right: 1rem;
+    opacity: 0;
+
+    svg {
+      border-radius: 50%;
+      fill: $icon-02;
+    }
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--tile__chevron {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    height: 1rem;
+
+    svg {
+      transform-origin: center;
+      transition: $duration--fast-02 motion(standard, productive);
+      fill: $ui-05;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--tile--expandable {
+    overflow: hidden;
+    transition: $duration--moderate-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile-content__above-the-fold {
+    display: block;
+  }
+
+  .#{$prefix}--tile-content__below-the-fold {
+    display: block;
+    opacity: 0;
+    transition: $duration--fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile--is-expanded {
+    overflow: visible;
+    transition: $duration--fast-02 motion(standard, productive);
+
+    .#{$prefix}--tile__chevron svg {
+      transform: rotate(-180deg);
+    }
+
+    .#{$prefix}--tile-content__below-the-fold {
+      opacity: 1;
+      transition: $duration--fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$prefix}--tile--is-selected {
+    outline: 1px solid $interactive-02;
+    outline-offset: -1px;
+  }
+
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile-input:checked
+    + .#{$prefix}--tile
+    > .#{$prefix}--tile__checkmark
+    svg {
+    fill: $ui-05;
+  }
+
+  .#{$prefix}--tile-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$prefix}--tile-input {
+    @include hidden;
+  }
+}
+
+@include exports('tile') {
+  @include tile;
+}

package/styles/vendor/carbon-components/src/components/tile/migrate-to-10.x.md

@@ -0,0 +1,88 @@
+### HTML
+
+Minor markup changes in the selectable and expandable tile. Icons from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package are now
+used. Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/tile/code)
+site. React and other framework variants should reflect the change
+automatically.
+
+**Things to note**:
+
+- Tile input is no longer a child of the selectable tile, it's a sibling of it
+- New icons are used in both the selectable and expandable tiles
+
+**New structure**:
+
+```bash
+bx--tile-input
+bx--tile--selectable
+├── bx--tile__checkmark
+│   └── svg* (new icon)
+└──  bx--tile-content
+```
+
+```html
+<!-- *Selectable svg -->
+<svg
+  focusable="false"
+  preserveAspectRatio="xMidYMid meet"
+  style="will-change: transform;"
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  aria-hidden="true"
+>
+  <path
+    d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"
+  ></path>
+  <path d="M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z" opacity="0"></path>
+</svg>
+
+<!-- Expandable svg -->
+<svg
+  focusable="false"
+  preserveAspectRatio="xMidYMid meet"
+  style="will-change: transform;"
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  aria-hidden="true"
+>
+  <path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path>
+</svg>
+```
+
+**Old structure**:
+
+```bash
+bx--tile--selectable
+├── bx--tile-input
+├── bx--tile__checkmark
+│   └── svg* (old icon)
+└──  bx--tile-content
+```
+
+```html
+<!-- *Selectable svg -->
+<svg width="16" height="16" viewBox="0 0 16 16">
+  <path
+    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+    fill-rule="evenodd"
+  />
+</svg>
+
+<!-- Expandable svg -->
+<svg width="12" height="7" viewBox="0 0 12 7">
+  <path
+    fill-rule="nonzero"
+    d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"
+  />
+</svg>
+```
+
+### SCSS
+
+No selector changes.

package/styles/vendor/carbon-components/src/components/tile/tile--clickable.hbs

@@ -0,0 +1,8 @@
+<!-- 
+  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.
+-->
+
+<a data-tile="clickable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--clickable" tabindex="0"></a>

package/styles/vendor/carbon-components/src/components/tile/tile--expandable.hbs

@@ -0,0 +1,20 @@
+<!-- 
+  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.
+-->
+
+<div data-tile="expandable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--expandable" tabindex="0">
+  <button aria-label="expand menu" class="{{@root.prefix}}--tile__chevron">
+    {{ carbon-icon 'ChevronDown16' }}
+  </button>
+  <div class="{{@root.prefix}}--tile-content">
+    <span data-tile-atf class="{{@root.prefix}}--tile-content__above-the-fold">
+      <!-- Above the fold content here -->
+    </span>
+    <span class="{{@root.prefix}}--tile-content__below-the-fold">
+      <!-- Rest of the content here -->
+    </span>
+  </div>
+</div>

package/styles/vendor/carbon-components/src/components/tile/tile--grid.hbs

@@ -0,0 +1,118 @@
+<!-- 
+  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.
+-->
+
+<div class="{{@root.prefix}}--grid">
+
+  <div class="{{@root.prefix}}--tile-container" style="width: 100%">
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-12">
+        <div data-tile="expandable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--expandable" tabindex="0">
+          <button class="{{@root.prefix}}--tile__chevron">
+            <svg width="12" height="7" viewBox="0 0 12 7">
+              <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
+            </svg>
+          </button>
+          <div class="{{@root.prefix}}--tile-content">
+            <span data-tile-atf class="{{@root.prefix}}--tile-content__above-the-fold" style="height: 200px">
+              <!-- Above the fold content here -->
+              <h2>Above the fold content here</h2>
+            </span>
+            <span class="{{@root.prefix}}--tile-content__below-the-fold" style="height: 400px">
+              <!-- Rest of the content here -->
+              <h2>Below the fold content here</h2>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-sm-2">
+        <label for="tile-id-1" aria-label="tile" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--selectable" data-tile="selectable" tabindex="0">
+          <input tabindex="-1" id="tile-id-1" class="{{@root.prefix}}--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile"
+          />
+          <div class="{{@root.prefix}}--tile__checkmark">
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+                fill-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="{{@root.prefix}}--tile-content">
+            <!-- Tile content here -->
+          </div>
+        </label>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-sm-2">
+        <label for="tile-id-2" aria-label="tile-2" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--selectable" data-tile="selectable" tabindex="0">
+          <input tabindex="-1" id="tile-id-2" class="{{@root.prefix}}--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2"
+          />
+          <div class="{{@root.prefix}}--tile__checkmark">
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+                fill-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="{{@root.prefix}}--tile-content">
+            <!-- Tile content here -->
+          </div>
+        </label>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <a data-tile="clickable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--clickable" tabindex="0"></a>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <a data-tile="clickable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--clickable" tabindex="0"></a>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-8 {{@root.prefix}}--col-sm-4">
+        <a data-tile="clickable" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--clickable" tabindex="0"></a>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-4 {{@root.prefix}}--col-sm-4">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-lg-4 {{@root.prefix}}--col-md-8">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-lg-4 {{@root.prefix}}--col-md-8">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-lg-4 {{@root.prefix}}--col-md-8">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-lg-4 {{@root.prefix}}--col-md-8">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-lg-16">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-5 {{@root.prefix}}--col-sm-2">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+      <div class="{{@root.prefix}}--col {{@root.prefix}}--col-md-3 {{@root.prefix}}--col-sm-2">
+        <div class="{{@root.prefix}}--tile"></div>
+      </div>
+    </div>
+  </div>
+
+</div>

package/styles/vendor/carbon-components/src/components/tile/tile--selectable.hbs

@@ -0,0 +1,16 @@
+<!-- 
+  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.
+-->
+
+<input tabindex="-1" data-tile-input id="tile-id" class="{{@root.prefix}}--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
+<label for="tile-id" aria-label="tile" class="{{@root.prefix}}--tile {{@root.prefix}}--tile--selectable" data-tile="selectable" tabindex="0">
+  <div class="{{@root.prefix}}--tile__checkmark">
+    {{ carbon-icon 'CheckmarkFilled16' }}
+  </div>
+  <div class="{{@root.prefix}}--tile-content">
+    <!-- Tile content here -->
+  </div>
+</label>

package/styles/vendor/carbon-components/src/components/tile/tile.hbs

@@ -0,0 +1,8 @@
+<!-- 
+  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.
+-->
+
+<div class="{{@root.prefix}}--tile"></div>

package/styles/vendor/carbon-components/src/components/tile/tile.js

@@ -0,0 +1,129 @@
+/**
+ * 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 settings from '../../globals/js/settings';
+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 eventMatches from '../../globals/js/misc/event-matches';
+
+class Tile extends mixin(createComponent, initComponentBySearch) {
+  /**
+   * Tile.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @param {HTMLElement} element The element working as an Tile.
+   */
+  constructor(element, options) {
+    super(element, options);
+    this.tileType = this.element.dataset.tile;
+    this.tileHeight = 0; // Tracks expandable tile height
+    this.atfHeight = 0; // Tracks above the fold height
+    this._hookActions(this._getClass(this.tileType));
+  }
+
+  _getClass = type => {
+    const typeObj = {
+      expandable: this.options.classExpandedTile,
+      clickable: this.options.classClickableTile,
+      selectable: this.options.classSelectableTile,
+    };
+    return typeObj[type];
+  };
+
+  _hookActions = tileClass => {
+    const isExpandable = this.tileType === 'expandable';
+    if (isExpandable) {
+      const aboveTheFold = this.element.querySelector(
+        this.options.selectorAboveTheFold
+      );
+      const getStyle = this.element.ownerDocument.defaultView.getComputedStyle(
+        this.element,
+        null
+      );
+      const tilePaddingTop = parseInt(
+        getStyle.getPropertyValue('padding-top'),
+        10
+      );
+      const tilePaddingBottom = parseInt(
+        getStyle.getPropertyValue('padding-bottom'),
+        10
+      );
+      const tilePadding = tilePaddingTop + tilePaddingBottom;
+      if (aboveTheFold) {
+        this.tileHeight = this.element.getBoundingClientRect().height;
+        this.atfHeight =
+          aboveTheFold.getBoundingClientRect().height + tilePadding;
+        this.element.style.maxHeight = `${this.atfHeight}px`;
+      }
+
+      if (this.element.classList.contains(this.options.classExpandedTile)) {
+        this._setTileHeight();
+      }
+    }
+
+    this.element.addEventListener('click', evt => {
+      const input = eventMatches(evt, this.options.selectorTileInput);
+      if (!input) {
+        this.element.classList.toggle(tileClass);
+      }
+      if (isExpandable) {
+        this._setTileHeight();
+      }
+    });
+    this.element.addEventListener('keydown', evt => {
+      const input = this.element.querySelector(this.options.selectorTileInput);
+      if (input) {
+        if (evt.which === 13 || evt.which === 32) {
+          if (!isExpandable) {
+            this.element.classList.toggle(tileClass);
+            input.checked = !input.checked;
+          }
+        }
+      }
+    });
+  };
+
+  _setTileHeight = () => {
+    const isExpanded = this.element.classList.contains(
+      this.options.classExpandedTile
+    );
+    this.element.style.maxHeight = isExpanded
+      ? `${this.tileHeight}px`
+      : `${this.atfHeight}px`;
+  };
+
+  release() {
+    super.release();
+  }
+
+  /**
+   * The map associating DOM element and Tile UI instance.
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor,
+   * properties in this object are overriden for the instance being created.
+   * @property {string} selectorInit The CSS selector to find Tile instances.
+   */
+  static get options() {
+    const { prefix } = settings;
+    return {
+      selectorInit: '[data-tile]',
+      selectorAboveTheFold: '[data-tile-atf]',
+      selectorTileInput: '[data-tile-input]',
+      classExpandedTile: `${prefix}--tile--is-expanded`,
+      classClickableTile: `${prefix}--tile--is-clicked`,
+      classSelectableTile: `${prefix}--tile--is-selected`,
+    };
+  }
+}
+
+export default Tile;

package/styles/vendor/carbon-components/src/components/time-picker/README.md

@@ -0,0 +1,26 @@
+### FAQ
+
+The Time Picker consists of a mandatory input field and two optional
+[Inline Select](http://carbondesignsystem.com/components/select/code)
+components. The Inline Select components are only used when the user is required
+to select either a time zone and/or when specifying AM/PM is required.
+
+The Time Picker uses form validation, and the valid pattern should be specified
+in the pattern attribute of the input field. You can read more about patterns
+[here](https://www.w3schools.com/tags/att_input_pattern.asp).
+
+Here are some examples:
+
+#### 24-hour military time
+
+`<input type="text" class="bx--time-picker__input-field" pattern="[01]?[0-9]|2[0-3]):[0-5][0-9]" placeholder="hh:mm" maxlength="5" />`
+
+#### 12-hour am-pm clock
+
+`<input type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />`
+
+#### Localization
+
+In order for the component to be localized, please make sure you update the
+validation pattern, the AM/PM select component (if it is needed), and the time
+zone select component (if it is needed).

package/styles/vendor/carbon-components/src/components/time-picker/_time-picker.scss

@@ -0,0 +1,66 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Time Picker
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Time picker styles
+/// @access private
+/// @group time-picker
+@mixin time-picker {
+  .#{$prefix}--time-picker {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .#{$prefix}--time-picker[data-invalid] .#{$prefix}--time-picker__input-field {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--time-picker__select {
+    justify-content: center;
+
+    &:not(:last-of-type) {
+      margin: 0 $carbon--spacing-01;
+    }
+  }
+
+  .#{$prefix}--time-picker__input {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--time-picker .#{$prefix}--select-input {
+    min-width: auto;
+    width: auto;
+    padding-right: rem(48px);
+    line-height: 1;
+  }
+
+  .#{$prefix}--time-picker__input-field {
+    @include reset;
+    @include focus-outline('reset');
+    @include type-style('code-02');
+    display: flex;
+    align-items: center;
+    width: 4.875rem;
+    height: rem(40px);
+    transition: outline $duration--fast-01 motion(standard, productive),
+      background-color $duration--fast-01 motion(standard, productive);
+  }
+}
+
+@include exports('time-picker') {
+  @include time-picker;
+}