@carbon/charts 0.58.2 → 1.0.2

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

@@ -1,52 +0,0 @@
-### HTML
-
-HTML changes pertain only to the SVG icon for tabs dropdown. Icon from
-[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
-Vanilla markup should be migrated to one shown in
-[carbondesignsystem.com](https://next.carbondesignsystem.com/components/tabs/code)
-site. React and other framework variants should reflect the change
-automatically.
-
-**New Markup**:
-
-```html
-<svg
-  focusable="false"
-  preserveAspectRatio="xMidYMid meet"
-  style="will-change: transform;"
-  xmlns="http://www.w3.org/2000/svg"
-  width="10"
-  height="6"
-  viewBox="0 0 10 6"
-  aria-hidden="true"
->
-  <path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path>
-</svg>
-```
-
-**Old Markup**:
-
-```html
-<svg
-  class="bx--dropdown__arrow"
-  width="10"
-  height="5"
-  viewBox="0 0 10 5"
-  fill-rule="evenodd"
->
-  <path d="M10 0L5 5 0 0z"></path>
-</svg>
-```
-
-### SCSS
-
-One new class, all other selectors remain unchanged.
-
-| v9  | v10                      | Remarks                                                                                           |
-| --- | ------------------------ | ------------------------------------------------------------------------------------------------- |
-| -   | `bx--tabs-trigger--open` | :sparkles: New; Added via JS to the trigger button when open in mobile view. Allows for animation |
-
-### JavaScript
-
-A new component option, `selectorButtonEnabled` has been added. Please see
-[`README.md`](./README.md#options) for more details.

package/styles/vendor/carbon-components/src/components/tabs/migrate-to-7.x.md

@@ -1,27 +0,0 @@
-### HTML
-
-No changes.
-
-### SCSS
-
-The `_tabs.scss` file is now located at `src/components/tabs/_tabs.scss`. You
-will need to update any `@import` statements for this file to reflect this
-change.
-
-**New**:
-
-```scss
-@import 'path_to_node_modules/carbon-components/src/components/tabs/tabs';
-```
-
-**Old**:
-
-```scss
-@import 'path_to_node_modules/@console/bluemix-components/src/components/tabs/tabs';
-```
-
-No class changes.
-
-### JavaScript
-
-All methods for Tab class have been changed to private methods.

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

@@ -1,33 +0,0 @@
-<!--
-  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-tabs class="{{@root.prefix}}--tabs{{#if container}} {{@root.prefix}}--tabs--container{{/if}}">
-  <div class="{{@root.prefix}}--tabs-trigger" tabindex="0">
-    <a href="javascript:void(0)" class="{{@root.prefix}}--tabs-trigger-text" tabindex="-1"></a>
-    {{ carbon-icon 'ChevronDown16' }}
-  </div>
-  <ul class="{{@root.prefix}}--tabs__nav {{@root.prefix}}--tabs__nav--hidden" role="tablist">
-    {{#each items}}
-    <li
-      class="{{@root.prefix}}--tabs__nav-item{{#if selected}} {{@root.prefix}}--tabs__nav-item--selected{{/if}} {{#if disabled}} {{@root.prefix}}--tabs__nav-item--disabled {{/if}}"
-      data-target=".{{panelClass}}" role="tab" {{#if selected}} aria-selected="true" {{/if}} {{#if disabled}}
-      aria-disabled="true" {{/if}}>
-      <a tabindex="0" id="{{linkId}}" class="{{@root.prefix}}--tabs__nav-link" href="javascript:void(0)" role="tab"
-        aria-controls="{{panelId}}">{{label}}</a>
-    </li>
-    {{/each}}
-  </ul>
-</div>
-<!-- The markup below is for demonstration purposes only -->
-<div class="{{@root.prefix}}--tab-content">
-  {{#each items}}
-  <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
-    aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
-    <div>{{panelContent}}</div>
-  </div>
-  {{/each}}
-</div>

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

@@ -1,250 +0,0 @@
-/**
- * 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 eventMatches from '../../globals/js/misc/event-matches';
-import ContentSwitcher from '../content-switcher/content-switcher';
-import on from '../../globals/js/misc/on';
-
-const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
-
-class Tab extends ContentSwitcher {
-  /**
-   * Container of tabs.
-   * @extends ContentSwitcher
-   * @param {HTMLElement} element The element working as a container of tabs.
-   * @param {object} [options] The component options.
-   * @param {string} [options.selectorMenu] The CSS selector to find the drop down menu used in narrow mode.
-   * @param {string} [options.selectorTrigger] The CSS selector to find the button to open the drop down menu used in narrow mode.
-   * @param {string} [options.selectorTriggerText]
-   *   The CSS selector to find the element used in narrow mode showing the selected tab item.
-   * @param {string} [options.selectorButton] The CSS selector to find tab containers.
-   * @param {string} [options.selectorButtonSelected] The CSS selector to find the selected tab.
-   * @param {string} [options.selectorLink] The CSS selector to find the links in tabs.
-   * @param {string} [options.classActive] The CSS class for tab's selected state.
-   * @param {string} [options.classHidden] The CSS class for the drop down menu's hidden state used in narrow mode.
-   * @param {string} [options.eventBeforeSelected]
-   *   The name of the custom event fired before a tab is selected.
-   *   Cancellation of this event stops selection of tab.
-   * @param {string} [options.eventAfterSelected] The name of the custom event fired after a tab is selected.
-   */
-  constructor(element, options) {
-    super(element, options);
-
-    this.manage(
-      on(this.element, 'keydown', (event) => {
-        this._handleKeyDown(event);
-      })
-    );
-    this.manage(
-      on(this.element.ownerDocument, 'click', (event) => {
-        this._handleDocumentClick(event);
-      })
-    );
-
-    const selected = this.element.querySelector(
-      this.options.selectorButtonSelected
-    );
-    if (selected) {
-      this._updateTriggerText(selected);
-    }
-  }
-
-  /**
-   * Internal method of {@linkcode Tab#setActive .setActive()}, to select a tab item.
-   * @private
-   * @param {object} detail The detail of the event trigging this action.
-   * @param {HTMLElement} detail.item The tab item to be selected.
-   * @param {Function} callback Callback called when change in state completes.
-   */
-  _changeState(detail, callback) {
-    super._changeState(detail, (error, ...data) => {
-      if (!error) {
-        this._updateTriggerText(detail.item);
-      }
-      callback(error, ...data);
-    });
-  }
-
-  /**
-   * Handles click on tab container.
-   * * If the click is on a tab, activates it.
-   * * If the click is on the button to open the drop down menu, does so.
-   * @param {Event} event The event triggering this method.
-   */
-  _handleClick(event) {
-    const button = eventMatches(event, this.options.selectorButton);
-    const trigger = eventMatches(event, this.options.selectorTrigger);
-    if (
-      button &&
-      !button.classList.contains(this.options.classButtonDisabled)
-    ) {
-      super._handleClick(event);
-      this._updateMenuState(false);
-    }
-    if (trigger) {
-      this._updateMenuState();
-    }
-  }
-
-  /**
-   * Handles click on document.
-   * @param {Event} event The triggering event.
-   * @private
-   */
-  _handleDocumentClick(event) {
-    const { element } = this;
-    const isOfSelf = element.contains(event.target);
-    if (isOfSelf) {
-      return;
-    }
-    this._updateMenuState(false);
-  }
-
-  /**
-   * Handles arrow keys on tab container.
-   * * Left keys are used to go to previous tab.
-   * * Right keys are used to go to next tab.
-   * @param {Event} event The event triggering this method.
-   */
-  _handleKeyDown(event) {
-    const triggerNode = eventMatches(event, this.options.selectorTrigger);
-    if (triggerNode) {
-      if (event.which === 13) {
-        this._updateMenuState();
-      }
-      return;
-    }
-
-    const direction = {
-      37: this.constructor.NAVIGATE.BACKWARD,
-      39: this.constructor.NAVIGATE.FORWARD,
-    }[event.which];
-
-    if (direction) {
-      const buttons = toArray(
-        this.element.querySelectorAll(this.options.selectorButtonEnabled)
-      );
-      const button = this.element.querySelector(
-        this.options.selectorButtonSelected
-      );
-      const nextIndex = Math.max(
-        buttons.indexOf(button) + direction,
-        -1 /* For `button` not found in `buttons` */
-      );
-      const nextIndexLooped =
-        nextIndex >= 0 && nextIndex < buttons.length
-          ? nextIndex
-          : nextIndex - Math.sign(nextIndex) * buttons.length;
-      this.setActive(buttons[nextIndexLooped], (error, item) => {
-        if (item) {
-          const link = item.querySelector(this.options.selectorLink);
-          if (link) {
-            link.focus();
-          }
-        }
-      });
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * Shows/hides the drop down menu used in narrow mode.
-   * @param {boolean} [force] `true` to show the menu, `false` to hide the menu, otherwise toggles the menu.
-   */
-  _updateMenuState(force) {
-    const menu = this.element.querySelector(this.options.selectorMenu);
-    const trigger = this.element.querySelector(this.options.selectorTrigger);
-    if (menu) {
-      menu.classList.toggle(
-        this.options.classHidden,
-        typeof force === 'undefined' ? force : !force
-      );
-      if (menu.classList.contains(this.options.classHidden)) {
-        trigger.classList.remove(this.options.classOpen);
-      } else {
-        trigger.classList.add(this.options.classOpen);
-      }
-    }
-  }
-
-  /**
-   * Updates the text indicating the currently selected tab item.
-   * @param {HTMLElement} target The newly selected tab item.
-   */
-  _updateTriggerText(target) {
-    const triggerText = this.element.querySelector(
-      this.options.selectorTriggerText
-    );
-    if (triggerText) {
-      triggerText.textContent = target.textContent;
-    }
-  }
-
-  /**
-   * The map associating DOM element and tab container instance.
-   * @member Tab.components
-   * @type {WeakMap}
-   */
-  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
-
-  /**
-   * The component options.
-   * If `options` is specified in the constructor, {@linkcode ContentSwitcher.create .create()}, or {@linkcode Tab.init .init()},
-   * properties in this object are overridden for the instance being create and how {@linkcode Tab.init .init()} works.
-   * @member Tab.options
-   * @type {object}
-   * @property {string} selectorInit The CSS selector to find tab containers.
-   * @property {string} [selectorMenu] The CSS selector to find the drop down menu used in narrow mode.
-   * @property {string} [selectorTrigger] The CSS selector to find the button to open the drop down menu used in narrow mode.
-   * @property {string} [selectorTriggerText]
-   *   The CSS selector to find the element used in narrow mode showing the selected tab item.
-   * @property {string} [selectorButton] The CSS selector to find tab containers.
-   * @property {string} [selectorButtonSelected] The CSS selector to find the selected tab.
-   * @property {string} [selectorLink] The CSS selector to find the links in tabs.
-   * @property {string} [classActive] The CSS class for tab's selected state.
-   * @property {string} [classHidden] The CSS class for the drop down menu's hidden state used in narrow mode.
-   * @property {string} [eventBeforeSelected]
-   *   The name of the custom event fired before a tab is selected.
-   *   Cancellation of this event stops selection of tab.
-   * @property {string} [eventAfterSelected] The name of the custom event fired after a tab is selected.
-   */
-  static get options() {
-    const { prefix } = settings;
-    return Object.assign(Object.create(ContentSwitcher.options), {
-      selectorInit: '[data-tabs]',
-      selectorMenu: `.${prefix}--tabs__nav`,
-      selectorTrigger: `.${prefix}--tabs-trigger`,
-      selectorTriggerText: `.${prefix}--tabs-trigger-text`,
-      selectorButton: `.${prefix}--tabs__nav-item`,
-      selectorButtonEnabled: `.${prefix}--tabs__nav-item:not(.${prefix}--tabs__nav-item--disabled)`,
-      selectorButtonSelected: `.${prefix}--tabs__nav-item--selected`,
-      selectorLink: `.${prefix}--tabs__nav-link`,
-      classActive: `${prefix}--tabs__nav-item--selected`,
-      classHidden: `${prefix}--tabs__nav--hidden`,
-      classOpen: `${prefix}--tabs-trigger--open`,
-      classButtonDisabled: `${prefix}--tabs__nav-item--disabled`,
-      eventBeforeSelected: 'tab-beingselected',
-      eventAfterSelected: 'tab-selected',
-    });
-  }
-
-  /**
-   * Enum for navigating backward/forward.
-   * @readonly
-   * @member Tab.NAVIGATE
-   * @type {object}
-   * @property {number} BACKWARD Navigating backward.
-   * @property {number} FORWARD Navigating forward.
-   */
-  static NAVIGATE /* #__PURE_CLASS_PROPERTY__ */ = {
-    BACKWARD: -1,
-    FORWARD: 1,
-  };
-}
-
-export default Tab;

package/styles/vendor/carbon-components/src/components/tag/README.md

@@ -1,9 +0,0 @@
-### SCSS
-
-#### Mixins
-
-Mixins specific to tag are located in [src/components/tag/\_mixins.scss]().
-
-| Name        | Params                     | Description                                |
-| ----------- | -------------------------- | ------------------------------------------ |
-| `tag-theme` | `$bg-color`, `$text-color` | Adds given background-color and text color |

package/styles/vendor/carbon-components/src/components/tag/_mixins.scss

@@ -1,20 +0,0 @@
-//
-// 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.
-//
-
-/// @access private
-/// @group tag
-@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.#{$prefix}--tag--interactive,
-  .#{$prefix}--tag__close-icon {
-    &:hover {
-      background-color: $filter-hover-color;
-    }
-  }
-}

package/styles/vendor/carbon-components/src/components/tag/_tag.scss

@@ -1,293 +0,0 @@
-//
-// 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/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/component-tokens';
-@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'mixins';
-@import 'tokens';
-
-/// Tag styles
-/// @access private
-/// @group tag
-@mixin tags {
-  .#{$prefix}--tag {
-    @include button-reset($width: false);
-    @include type-style('label-01');
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-gray'),
-      get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray')
-    );
-
-    display: inline-flex;
-    // ensures tag stays pill shaped;
-    min-width: rem(32px);
-    // restricts size of contained elements
-    max-width: 100%;
-    min-height: rem(24px);
-    align-items: center;
-    justify-content: center;
-    padding: $carbon--spacing-02 $carbon--spacing-03;
-    margin: $carbon--spacing-02;
-    border-radius: rem(15px);
-    cursor: default;
-    vertical-align: middle;
-    word-break: break-word;
-
-    &:not(:first-child) {
-      margin-left: 0;
-    }
-  }
-
-  .#{$prefix}--tag--red {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-red'),
-      get-token-value($tag-colors, 'tag-color-red'),
-      get-token-value($tag-colors, 'tag-hover-red')
-    );
-  }
-
-  .#{$prefix}--tag--magenta {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-magenta'),
-      get-token-value($tag-colors, 'tag-color-magenta'),
-      get-token-value($tag-colors, 'tag-hover-magenta')
-    );
-  }
-
-  .#{$prefix}--tag--purple {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-purple'),
-      get-token-value($tag-colors, 'tag-color-purple'),
-      get-token-value($tag-colors, 'tag-hover-purple')
-    );
-  }
-
-  .#{$prefix}--tag--blue {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-blue'),
-      get-token-value($tag-colors, 'tag-color-blue'),
-      get-token-value($tag-colors, 'tag-hover-blue')
-    );
-  }
-
-  .#{$prefix}--tag--cyan {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-cyan'),
-      get-token-value($tag-colors, 'tag-color-cyan'),
-      get-token-value($tag-colors, 'tag-hover-cyan')
-    );
-  }
-
-  .#{$prefix}--tag--teal {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-teal'),
-      get-token-value($tag-colors, 'tag-color-teal'),
-      get-token-value($tag-colors, 'tag-hover-teal')
-    );
-  }
-
-  .#{$prefix}--tag--green {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-green'),
-      get-token-value($tag-colors, 'tag-color-green'),
-      get-token-value($tag-colors, 'tag-hover-green')
-    );
-  }
-
-  .#{$prefix}--tag--gray {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-gray'),
-      get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray')
-    );
-  }
-
-  .#{$prefix}--tag--cool-gray {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-cool-gray'),
-      get-token-value($tag-colors, 'tag-color-cool-gray'),
-      get-token-value($tag-colors, 'tag-hover-cool-gray')
-    );
-  }
-
-  .#{$prefix}--tag--warm-gray {
-    @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-warm-gray'),
-      get-token-value($tag-colors, 'tag-color-warm-gray'),
-      get-token-value($tag-colors, 'tag-hover-warm-gray')
-    );
-  }
-
-  .#{$prefix}--tag--high-contrast {
-    @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
-  }
-
-  .#{$prefix}--tag--outline {
-    @include tag-theme($background, $text-01, $hover-ui);
-
-    box-shadow: inset 0 0 0 1px $inverse-02;
-  }
-
-  .#{$prefix}--tag--disabled,
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
-  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
-    @include tag-theme($disabled-01, $disabled-02);
-
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-
-  .#{$prefix}--tag__label {
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--tag--interactive:focus {
-    box-shadow: inset 0 0 0 1px $focus;
-    outline: none;
-  }
-
-  .#{$prefix}--tag--interactive:hover {
-    cursor: pointer;
-  }
-
-  // tags used for filtering
-  .#{$prefix}--tag--filter {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    cursor: pointer;
-
-    &:hover {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--tag--interactive {
-    transition: background-color $duration--fast-01 motion(entrance, productive);
-  }
-
-  .#{$prefix}--tag__close-icon {
-    display: flex;
-    width: rem(24px);
-    height: rem(24px);
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 0;
-    margin: 0 0 0 rem(2px);
-    background-color: transparent;
-    border-radius: 50%;
-    color: currentColor;
-    cursor: pointer;
-    transition: background-color $duration--fast-01 motion(standard, productive),
-      box-shadow $duration--fast-01 motion(standard, productive);
-
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  .#{$prefix}--tag__custom-icon {
-    width: rem(16px);
-    height: rem(16px);
-    flex-shrink: 0;
-    padding: 0;
-    border: 0;
-    margin-right: $spacing-02;
-    background-color: transparent;
-    color: currentColor;
-    outline: none;
-
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--tag__close-icon:focus {
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 1px $focus;
-    outline: none;
-  }
-
-  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 1px $inverse-focus-ui;
-  }
-
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag__close-icon:hover {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
-    fill: $disabled-02;
-  }
-
-  // small tags
-  .#{$prefix}--tag--sm {
-    min-height: rem(18px);
-    padding: 0 $carbon--spacing-03;
-  }
-
-  .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
-    padding-right: 0;
-  }
-
-  .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
-    width: rem(18px);
-    height: rem(18px);
-    margin-left: rem(5px);
-  }
-
-  // Skeleton state
-  .#{$prefix}--tag.#{$prefix}--skeleton {
-    @include skeleton;
-    @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
-
-    overflow: hidden;
-    width: rem(60px);
-
-    // Safari specific bug (#7672)
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-        transform: translateZ(0);
-      }
-    }
-  }
-
-  // Windows HCM fix
-  /* stylelint-disable */
-  .#{$prefix}--tag {
-    @include high-contrast-mode('outline');
-  }
-
-  .#{$prefix}--tag__close-icon svg,
-  .#{$prefix}--tag__custom-icon svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
-  .#{$prefix}--tag__close-icon:focus {
-    @include high-contrast-mode('focus');
-  }
-  /* stylelint-enable */
-}
-
-@include exports('tags') {
-  @include tags;
-}