@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/file-uploader/_file-uploader.scss

@@ -0,0 +1,141 @@
+//
+// 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/css--reset';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../button/button';
+@import '../form/form';
+@import '../loading/loading';
+@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';
+
+/// File uploader styles
+/// @access private
+/// @group file-uploader
+@mixin file-uploader {
+  .#{$prefix}--file {
+    width: 100%;
+  }
+
+  .#{$prefix}--file--invalid {
+    margin-right: $carbon--spacing-03;
+    fill: $support-01;
+  }
+
+  // TODO: sync with type
+  .#{$prefix}--file--label {
+    @include reset;
+    @include type-style('heading-01');
+
+    color: $text-01;
+    margin-bottom: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--file-input {
+    @include hidden;
+  }
+
+  .#{$prefix}--file-btn {
+    display: inline-flex;
+    margin: 0;
+    padding-right: rem(64px);
+  }
+
+  .#{$prefix}--label-description {
+    @include reset;
+    @include type-style('body-short-01');
+
+    color: $text-02;
+    margin-bottom: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--file-container {
+    display: block;
+    width: 100%;
+    margin-top: $carbon--spacing-06;
+  }
+
+  .#{$prefix}--file__selected-file {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: rem(40px);
+    max-width: rem(300px);
+    margin-bottom: $carbon--spacing-03;
+    padding: 0 $carbon--spacing-03 0 $carbon--spacing-05;
+    background-color: $field-01;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .#{$prefix}--inline-loading__animation,
+    .#{$prefix}--loading {
+      right: -0.25rem; // offset for loading svg container
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .#{$prefix}--file__selected-file--invalid {
+    @include focus-outline('invalid');
+    margin-bottom: $carbon--spacing-02;
+  }
+
+  .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
+    display: block;
+    max-height: rem(200px);
+    color: $support-01;
+    font-weight: 400;
+    margin: 0 0 $carbon--spacing-03 0;
+    overflow: visible;
+  }
+
+  .#{$prefix}--file-filename {
+    @include type-style('body-short-01');
+    @include text-overflow(300px);
+    display: inline-block;
+    align-items: center;
+    color: $text-01;
+    margin-right: $carbon--spacing-05;
+    padding: 1px 0;
+    /*rtl:ignore*/
+    direction: ltr;
+    justify-content: flex-start; /*rtl:{flex-end}*/
+  }
+
+  .#{$prefix}--file__state-container {
+    display: flex;
+    align-items: center;
+
+    .#{$prefix}--loading__svg {
+      stroke: $ui-05;
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
+    fill: $support-02;
+    cursor: pointer;
+
+    &:focus {
+      @include focus-outline('border');
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+}
+
+@include exports('file-uploader') {
+  @include file-uploader;
+}

package/styles/vendor/carbon-components/src/components/file-uploader/file-uploader.hbs

@@ -0,0 +1,56 @@
+<!--
+  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}}--form-item">
+  <strong class="{{@root.prefix}}--file--label">Account
+    photo</strong>
+  <p class="{{@root.prefix}}--label-description">Only .jpg and .png files. 500kb max file size.</p>
+  <div class="{{@root.prefix}}--file" data-file>
+    <label for="your-file-importer-id-here"
+      class="{{@root.prefix}}--file-btn {{@root.prefix}}--btn {{@root.prefix}}--btn--primary"
+      role="button" tabindex="0">Add file</label>
+    <input type="file" class="{{@root.prefix}}--file-input" id="your-file-importer-id-here" data-file-uploader
+      data-target="[data-file-container]" multiple />
+    <div data-file-container class="{{@root.prefix}}--file-container">
+      {{#if exampleUploadStates}}
+      <div class="{{@root.prefix}}--file__selected-file">
+        <p class="{{@root.prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
+          sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
+          veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
+        <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
+          {{ carbon-icon 'CheckmarkFilled16' class=(add @root.prefix '--file-complete') }}
+        </span>
+      </div>
+      <div class="{{@root.prefix}}--file__selected-file--invalid__wrapper">
+        <div class="{{@root.prefix}}--file__selected-file {{@root.prefix}}--file__selected-file--invalid" data-invalid>
+          <p class="{{@root.prefix}}--file-filename">color.jpeg</p>
+          <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
+            {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--file--invalid')}}
+            {{ carbon-icon 'Close16' class=(add @root.prefix '--file--close') }}
+          </span>
+        </div>
+        <div class="{{@root.prefix}}--form-requirement">
+          File size exceeds limit
+        </div>
+      </div>
+      <div class="{{@root.prefix}}--file__selected-file">
+        <p class="{{@root.prefix}}--file-filename">color.jpeg</p>
+        <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
+          <div class="{{@root.prefix}}--inline-loading__animation">
+            <div data-inline-loading-spinner="" class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
+              <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
+                <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5"></circle>
+                <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="37.5"></circle>
+              </svg>
+            </div>
+          </div>
+        </span>
+      </div>
+      {{/if}}
+    </div>
+  </div>
+</div>

package/styles/vendor/carbon-components/src/components/file-uploader/file-uploader.js

@@ -0,0 +1,220 @@
+/**
+ * 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 eventedState from '../../globals/js/mixins/evented-state';
+import handles from '../../globals/js/mixins/handles';
+import eventMatches from '../../globals/js/misc/event-matches';
+import on from '../../globals/js/misc/on';
+
+const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
+
+class FileUploader extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState,
+  handles
+) {
+  /**
+   * File uploader.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends eventedState
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a file uploader.
+   * @param {object} [options] The component options. See static options.
+   */
+  constructor(element, options = {}) {
+    super(element, options);
+    this.input = this.element.querySelector(this.options.selectorInput);
+    this.container = this.element.querySelector(this.options.selectorContainer);
+
+    if (!this.input) {
+      throw new TypeError('Cannot find the file input box.');
+    }
+
+    if (!this.container) {
+      throw new TypeError('Cannot find the file names container.');
+    }
+
+    this.inputId = this.input.getAttribute('id');
+    this.manage(on(this.input, 'change', () => this._displayFilenames()));
+    this.manage(on(this.container, 'click', this._handleDeleteButton));
+  }
+
+  _filenamesHTML(name, id) {
+    return `<span class="${this.options.classSelectedFile}">
+      <p class="${this.options.classFileName}">${name}</p>
+      <span data-for="${id}" class="${this.options.classStateContainer}"></span>
+    </span>`;
+  }
+
+  _uploadHTML() {
+    return `
+      <div data-loading class="${this.options.classLoading}">
+        <svg class="${this.options.classLoadingSvg}" viewBox="-42 -42 84 84">
+          <circle cx="0" cy="0" r="37.5" />
+        </svg>
+      </div>`;
+  }
+
+  _closeButtonHTML() {
+    return `
+      <button class="${this.options.classFileClose}" type="button" aria-label="close">
+      <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
+      <path fill="#231F20" d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"/>
+      </svg>
+      </button>`;
+  }
+
+  _checkmarkHTML() {
+    return `
+      <svg class="${this.options.classFileComplete}" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
+       <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"/>
+      </svg>`;
+  }
+
+  _changeState = (state, detail, callback) => {
+    if (state === 'delete-filename-fileuploader') {
+      this.container.removeChild(detail.filenameElement);
+    }
+    if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  _getStateContainers() {
+    const stateContainers = toArray(
+      this.element.querySelectorAll(`[data-for=${this.inputId}]`)
+    );
+
+    if (stateContainers.length === 0) {
+      throw new TypeError(
+        'State container elements not found; invoke _displayFilenames() first'
+      );
+    }
+
+    if (stateContainers[0].dataset.for !== this.inputId) {
+      throw new TypeError('File input id must equal [data-for] attribute');
+    }
+
+    return stateContainers;
+  }
+
+  /**
+   * Inject selected files into DOM. Invoked on change event.
+   */
+  _displayFilenames() {
+    const container = this.element.querySelector(
+      this.options.selectorContainer
+    );
+    const HTMLString = toArray(this.input.files)
+      .map(file => this._filenamesHTML(file.name, this.inputId))
+      .join('');
+
+    container.insertAdjacentHTML('afterbegin', HTMLString);
+  }
+
+  _removeState(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      throw new TypeError(
+        'DOM element should be given to initialize this widget.'
+      );
+    }
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+  }
+
+  _handleStateChange(elements, selectIndex, html) {
+    if (selectIndex === undefined) {
+      elements.forEach(el => {
+        this._removeState(el);
+        el.insertAdjacentHTML('beforeend', html);
+      });
+    } else {
+      elements.forEach((el, index) => {
+        if (index === selectIndex) {
+          this._removeState(el);
+          el.insertAdjacentHTML('beforeend', html);
+        }
+      });
+    }
+  }
+
+  /**
+   * Handles delete button.
+   * @param {Event} evt The event triggering this action.
+   * @private
+   */
+  _handleDeleteButton = evt => {
+    const target = eventMatches(evt, `[data-for=${this.inputId}]`);
+    if (target) {
+      this._changeState('delete-filename-fileuploader', {
+        initialEvt: evt,
+        filenameElement: target.parentNode,
+      });
+    }
+  };
+
+  setState(state, selectIndex) {
+    const stateContainers = this._getStateContainers();
+
+    if (state === 'edit') {
+      this._handleStateChange(
+        stateContainers,
+        selectIndex,
+        this._closeButtonHTML()
+      );
+    }
+
+    if (state === 'upload') {
+      this._handleStateChange(stateContainers, selectIndex, this._uploadHTML());
+    }
+
+    if (state === 'complete') {
+      this._handleStateChange(
+        stateContainers,
+        selectIndex,
+        this._checkmarkHTML()
+      );
+    }
+  }
+
+  /**
+   * The map associating DOM element and file uploader instance.
+   * @member FileUploader.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  static get options() {
+    const { prefix } = settings;
+    return {
+      selectorInit: '[data-file]',
+      selectorInput: `input[type="file"].${prefix}--file-input`,
+      selectorContainer: '[data-file-container]',
+      selectorCloseButton: `.${prefix}--file-close`,
+      classLoading: `${prefix}--loading`,
+      classLoadingSvg: `${prefix}--loading__svg`,
+      classFileName: `${prefix}--file-filename`,
+      classFileClose: `${prefix}--file-close`,
+      classFileComplete: `${prefix}--file-complete`,
+      classSelectedFile: `${prefix}--file__selected-file`,
+      classStateContainer: `${prefix}--file__state-container`,
+      eventBeforeDeleteFilenameFileuploader:
+        'fileuploader-before-delete-filename',
+      eventAfterDeleteFilenameFileuploader:
+        'fileuploader-after-delete-filename',
+    };
+  }
+}
+
+export default FileUploader;

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

@@ -0,0 +1,30 @@
+### HTML
+
+No structural changes, however, the label now has a new CSS class.
+
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/file-uploader/code)
+site. React and other framework variants should reflect the change
+automatically.
+
+**New Markup**:
+
+```html
+<div class="bx--form-item">
+  <strong class="bx--file--label">Account photo</strong> ...
+</div>
+```
+
+**Old Markup**:
+
+```html
+<div class="bx--form-item">
+  <strong class="bx--label">Account photo</strong> ...
+</div>
+```
+
+### SCSS
+
+| v9  | v10              | Note  |
+| --- | ---------------- | ----- |
+| -   | `bx--file—label` | ✨New |

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

@@ -0,0 +1,46 @@
+### HTML
+
+HTML for File Uploader has changed a lot, it will be best to simply copy and
+paste the HTML to your project. With that said, here are some of the main
+changes to be aware of.
+
+HTML for File Uploader (along with all other form elements) now use
+`.bx--form-item` to wrap the HTML and `.bx--label` to use as a label. There's
+also a new `.bx--file-container` element that is used to display filename
+elements. See README for details on how this works.
+
+### SCSS
+
+The `_file-uploader.scss` file is now located at
+`src/components/file-uploader/_file-uploader.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/file-uploader/file-uploader';
+```
+
+**Old**:
+
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/file-uploader/file-uploader';
+```
+
+| Old Class         | New Class                   | Note    |
+| ----------------- | --------------------------- | ------- |
+| bx--file\_\_label | bx--label                   | Changed |
+|                   | bx--form-item               | Added   |
+|                   | bx--label-description       | Added   |
+|                   | bx--file                    | Added   |
+|                   | bx--file-btn                | Added   |
+|                   | bx--file-container          | Added   |
+|                   | .bx--file=filename          | Added   |
+|                   | bx--file\_\_state-container | Added   |
+|                   | bx--file--close             | Added   |
+|                   | bx--file--complete          | Added   |
+|                   | bx--loading                 | Added   |
+
+### JavaScript
+
+The entire API for `FileUploader` has changed. See README for details.

package/styles/vendor/carbon-components/src/components/floating-menu/README.md

@@ -0,0 +1,32 @@
+#### Public Methods
+
+| Name                   | Params                                                        | Description                                                            |
+| ---------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `show`/`hide`          | `evt`: `Event` or `Element`, `callback`: `Function`           | Shows/hides the menu.                                                  |
+| `changeState`          | `state`: `string`, `detail`: `Object`, `callback`: `Function` | Changes the shown/hidden state.                                        |
+| `shouldStateBeChanged` | `state`: `string`                                             | Returns `true` if the given state is different from the current state. |
+| `release`              |                                                               | Deletes the instance and removes resize event listeners.               |
+
+#### Options
+
+| Option              | Default value                    | Description                                                                                               |
+| ------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `selectorContainer` | `[data-floating-menu-container]` | The CSS selector to find the element you wish the append the menu contents to.                            |
+| `attribDirection`   | `data-floating-menu-direction`   | The attribute name to specify menu placement direction (top/right/bottom/left).                           |
+| `classShown`        | None                             | The CSS class for shown state, for the menu. Should be provided via component creation options.           |
+| `classRefShown`     | None                             | The CSS class for shown state, for the trigger button. Should be provided via component creation options. |
+| `eventBeforeShown`  | `floating-menu-beingshown`       | The name of the custom event fired before a menu is opened.                                               |
+| `eventAfterShown`   | `floating-menu-shown`            | The name of the custom event fired after a menu is opened.                                                |
+| `eventBeforeHidden` | `floating-menu-beinghidden`      | The name of the custom event fired before a menu is closed.                                               |
+| `eventAfterHidden`  | `floating-menu-hidden`           | The name of the custom event fired after a menu is closed.                                                |
+| `refNode`           | None                             | The trigger button. Should be provided via component creation options.                                    |
+| `offset`            | `{ top: 0, left: 0}`             | An object containing the top and left offset values in px.                                                |
+
+#### Events
+
+| Event Name                  | Description                                                                                              |
+| --------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `floating-menu-beingshown`  | The name of the custom event fired before a menu is opened. Cancellation of this event stops it opening. |
+| `floating-menu-shown`       | The name of the custom event fired after a menu is opened.                                               |
+| `floating-menu-beinghidden` | The name of the custom event fired before a menu is closed. Cancellation of this event stops it closing. |
+| `floating-menu-hidden`      | The name of the custom event fired after a menu is closed.                                               |