@carbon/charts 0.28.0 → 0.29.2

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

@@ -0,0 +1,48 @@
+### HTML
+
+Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
+are now used. Additionally, some internal changes involves re-ordering the
+markup.
+
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/form/code)
+site. React and other framework variants should reflect the change
+automatically.
+
+**Things to note**:
+
+- Submit button structure remains the same.
+- Label now goes above inputs.
+- For specific form input changes, view the migration doc for said component
+  (i.e. select, textarea, etc).
+
+**New Structure**:
+
+```bash
+bx--form-item
+├── bx--label
+├── bx--form__helper-text (optional)
+├── input
+└── bx--form-requirement (invalid use only)
+```
+
+**Old Structure**:
+
+```bash
+bx--form-item
+├── input
+├── bx--label
+└── bx--form-requirement (invalid use only)
+```
+
+### SCSS
+
+One new selector; no changes to existing classes.
+
+| v9                     | v10                     | Note  |
+| ---------------------- | ----------------------- | ----- |
+| -                      | `bx--form__helper-text` | ✨New |
+| `bx--form-item`        | No change               |       |
+| `bx—label`             | No change               |       |
+| `bx--form-requirement` | No change               |       |
+| `.bx--label—disabled`  | No change               |       |

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

@@ -0,0 +1,47 @@
+### HTML
+
+The `form` component has been simplified. `.bx--form` has been removed since it
+was not providing anything significant. Your forms should still be contained in
+a `<form>` element but the `.bx--form` class is unneeded. The `.bx--form__row`
+and `.bx--form__row--column` classes for form layout have been removed. Form
+styles will no longer dictate default layouts. See HTML docs for more details
+
+The form component supplies 3 classes.
+
+- `.bx--form-item`
+- `.bx--label`
+- `.bx--form-requirement`
+
+Styles for form components such as `text-input` are contained in their own
+component files.
+
+For full usage guidelines of the new HTML see the component README file.
+
+### SCSS
+
+The `_form.scss` file is now located at `src/components/form/_form.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/form/form';
+```
+
+**Old**:
+
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/form/form';
+```
+
+Quite a few class names have changed. See table below.
+
+| Old Class                | New Class            | Note    |
+| ------------------------ | -------------------- | ------- |
+| bx--form\_\_row-item     | bx--form-item        | Changed |
+| bx--form\_\_label        | bx--label            | Changed |
+| bx--form\_\_requirements | bx--form-requirement | Changed |
+| bx--form\_\_row          | N/A                  | Removed |
+| bx--form\_\_row--column  | N/A                  | Removed |
+|                          | bx--fieldset         | Added   |

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

@@ -0,0 +1,54 @@
+<!--
+  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.
+-->
+
+{{#if @root.featureFlags.grid}}
+<div class="{{@root.prefix}}--grid">
+  {{#each @root.rows as |row|}}
+    <div class="{{@root.prefix}}--row">
+      <div class="bx--col bx--col--auto">
+        <p>{{row.title}}</p>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      {{#each row.columns}}
+        <div class="{{@root.prefix}}--col-{{row.breakpoint}}-1">
+          <div class="outside">
+            <div class="inside">1</div>
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  {{/each}}
+</div>
+{{else}}
+<div class="{{@root.prefix}}--grid">
+  <div class="{{@root.prefix}}--row">
+    <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 indigo">
+      <div class="{{@root.prefix}}--row">
+        <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6">
+          <div class="col-example">
+            <p>Content space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6</p>
+          </div>
+        </div>
+        <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 green">
+          <p>Full space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 (columns naturally have padding on them, adding a background color to
+            the column directly will effect the entire column, as opposed to using a child element in the example to the
+            left). </p>
+        </div>
+      </div>
+
+      <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
+    </div>
+    <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 red">
+      <p>Background color over entire column, not just content space</p>
+    </div>
+    <div class="{{@root.prefix}}--row">
+      <div class="{{@root.prefix}}--offset-xs-2 {{@root.prefix}}--col-xs-10">This content is offset. Offset adds a left-margin for x columns.</div>
+    </div>
+  </div>
+</div>
+{{/if}}

package/styles/vendor/carbon-components/src/components/inline-loading/README.md

@@ -0,0 +1,56 @@
+### JavaScript
+
+#### Getting component class reference
+
+##### ES2015
+
+```javascript
+import { InlineLoading } from 'carbon-components';
+```
+
+##### With pre-build bundle (`carbon-components.min.js`)
+
+```javascript
+var InlineLoading = CarbonComponents.InlineLoading;
+```
+
+#### Instantiating
+
+```javascript
+// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
+InlineLoading.create(document.getElementById('my-inline-loading'));
+```
+
+#### Static properties
+
+| Name   | Type   | Description                                                                  |
+| ------ | ------ | ---------------------------------------------------------------------------- |
+| states | Object | The loading states. Contains `INACTIVE`, `ACTIVE` and `FINISHED` properties. |
+
+#### Public Methods
+
+| Name       | Params           | Description                             |
+| ---------- | ---------------- | --------------------------------------- |
+| `release`  |                  | Deletes the instance                    |
+| `setState` | state : `string` | Sets the active/inactive/finished state |
+
+##### Example - Transitioning the loading spinner to the finished state
+
+```javascript
+// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
+var inlineLoadingInstance = InlineLoading.create(
+  document.getElementById('my-inline-loading')
+);
+inlineLoadingInstance.setState(InlineLoading.states.FINISHED);
+```
+
+#### Options
+
+| Option                 | Default Selector                      | Description                                                     |
+| ---------------------- | ------------------------------------- | --------------------------------------------------------------- |
+| `selectorInit`         | `[data-inline-loading]`               | The CSS selector to find the inline loading components          |
+| `selectorSpinner`      | `[data-inline-loading-spinner]`       | The CSS selector to find the spinner                            |
+| `selectorFinished`     | `[data-inline-loading-finished]`      | The CSS selector to find the "finished" icon                    |
+| `selectorTextActive`   | `[data-inline-loading-text-active]`   | The CSS selector to find the text describing the active state   |
+| `selectorTextFinished` | `[data-inline-loading-text-finished]` | The CSS selector to find the text describing the finished state |
+| `classLoadingStop`     | `.bx--loading--stop`                  | The CSS class for spinner's stopped state                       |

package/styles/vendor/carbon-components/src/components/inline-loading/_inline-loading.scss

@@ -0,0 +1,90 @@
+//
+// 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/typography';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../loading/loading';
+@import 'keyframes';
+
+/// Inline loading styles
+/// @access private
+/// @group inline-loading
+@mixin inline-loading {
+  .#{$prefix}--inline-loading {
+    display: flex;
+    width: 100%;
+    align-items: center;
+
+    .#{$prefix}--loading__svg circle {
+      stroke-width: 12;
+    }
+
+    .#{$prefix}--loading__stroke {
+      stroke-dashoffset: 99;
+    }
+  }
+
+  .#{$prefix}--inline-loading__text {
+    @include type-style('body-short-01');
+    color: $text-02;
+  }
+
+  .#{$prefix}--inline-loading__animation {
+    position: relative;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .#{$prefix}--inline-loading__checkmark-container {
+    width: 0.75rem;
+    position: absolute;
+    top: 0.75rem;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--inline-loading__checkmark {
+    fill: none;
+    stroke: $interactive-04;
+    transform-origin: 50% 50%;
+    stroke-width: 1.8;
+    stroke-dasharray: 12;
+    stroke-dashoffset: 12;
+    animation-name: stroke;
+    animation-duration: 0.25s;
+    animation-fill-mode: forwards;
+  }
+
+  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
+    stroke: $interactive-04;
+  }
+  /* If IE11 Don't show check animation */
+  @media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
+    .#{$prefix}--inline-loading__checkmark-container {
+      top: 1px;
+      right: 0.5rem;
+    }
+
+    .#{$prefix}--inline-loading__checkmark {
+      animation: none;
+      stroke-dashoffset: 0;
+      stroke-dasharray: 0;
+    }
+  }
+}
+
+@include exports('inline-loading') {
+  @include inline-loading;
+}

package/styles/vendor/carbon-components/src/components/inline-loading/_keyframes.scss

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}

package/styles/vendor/carbon-components/src/components/inline-loading/inline-loading.hbs

@@ -0,0 +1,29 @@
+<!--
+  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.
+-->
+
+<!-- Loading Success State -->
+<div data-inline-loading class="{{@root.prefix}}--inline-loading" role="alert" aria-live="assertive">
+  <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="30" />
+        <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="30"/>
+      </svg>
+    </div>
+    <svg data-inline-loading-finished hidden
+      class="{{@root.prefix}}--inline-loading__checkmark-container {{@root.prefix}}--inline-loading__svg"
+      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+      <polyline class="{{@root.prefix}}--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
+    </svg>
+  </div>
+  <p data-inline-loading-text-active class="{{@root.prefix}}--inline-loading__text">Loading data...</p>
+  <p data-inline-loading-text-finished hidden class="{{@root.prefix}}--inline-loading__text">Data loaded.</p>
+</div>
+{{#if showToggleButton}}
+<button data-inline-loading-demo-button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary">Toggle
+  state</button>
+{{/if}}

package/styles/vendor/carbon-components/src/components/inline-loading/inline-loading.js

@@ -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.
+ */
+
+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 handles from '../../globals/js/mixins/handles';
+import toggleAttribute from '../../globals/js/misc/toggle-attribute';
+
+class InlineLoading extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
+  /**
+   * Spinner indicating loading state.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a spinner.
+   * @param {object} [options] The component options.
+   * @param {string} [options.initialState] The initial state, should be `inactive`, `active` or `finished`.
+   */
+  constructor(element, options) {
+    super(element, options);
+    // Sets the initial state
+    const { initialState } = this.options;
+    if (initialState) {
+      this.setState(initialState);
+    }
+  }
+
+  /**
+   * Sets active/inactive state.
+   * @param {string} state The new state, should be `inactive`, `active` or `finished`.
+   */
+  setState(state) {
+    const { states } = this.constructor;
+    const values = Object.keys(states).map(key => states[key]);
+    if (values.indexOf(state) < 0) {
+      throw new Error(
+        `One of the following value should be given as the state: ${values.join(
+          ', '
+        )}`
+      );
+    }
+
+    const elem = this.element;
+    const {
+      selectorSpinner,
+      selectorFinished,
+      selectorTextActive,
+      selectorTextFinished,
+    } = this.options;
+    const spinner = elem.querySelector(selectorSpinner);
+    const finished = elem.querySelector(selectorFinished);
+    const textActive = elem.querySelector(selectorTextActive);
+    const textFinished = elem.querySelector(selectorTextFinished);
+
+    if (spinner) {
+      spinner.classList.toggle(
+        this.options.classLoadingStop,
+        state !== states.ACTIVE
+      );
+      toggleAttribute(spinner, 'hidden', state === states.FINISHED);
+    }
+
+    if (finished) {
+      toggleAttribute(finished, 'hidden', state !== states.FINISHED);
+    }
+
+    if (textActive) {
+      toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
+    }
+
+    if (textFinished) {
+      toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
+    }
+
+    return this;
+  }
+
+  /**
+   * The list of states.
+   * @type {Object<string, string>}
+   */
+  static states /* #__PURE_CLASS_PROPERTY__ */ = {
+    INACTIVE: 'inactive',
+    ACTIVE: 'active',
+    FINISHED: 'finished',
+  };
+
+  /**
+   * The map associating DOM element and spinner instance.
+   * @member InlineLoading.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
+   * or {@linkcode InlineLoading.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
+   * @member InlineLoading.options
+   * @type {object}
+   * @property {string} selectorInit The CSS selector to find inline loading components.
+   * @property {string} selectorSpinner The CSS selector to find the spinner.
+   * @property {string} selectorFinished The CSS selector to find the "finished" icon.
+   * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
+   * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
+   * @property {string} classLoadingStop The CSS class for spinner's stopped state.
+   */
+  static get options() {
+    const { prefix } = settings;
+    return {
+      selectorInit: '[data-inline-loading]',
+      selectorSpinner: '[data-inline-loading-spinner]',
+      selectorFinished: '[data-inline-loading-finished]',
+      selectorTextActive: '[data-inline-loading-text-active]',
+      selectorTextFinished: '[data-inline-loading-text-finished]',
+      classLoadingStop: `${prefix}--loading--stop`,
+    };
+  }
+}
+
+export default InlineLoading;

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

@@ -0,0 +1,34 @@
+### HTML
+
+Design change around the spinner UI involves markup change for the loading SVG's
+circle, utilizing new CSS classes (below). Vanilla markup should be migrated to
+one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/inline-loading/code)
+site. React and other framework variants should reflect the change
+automatically.
+
+**New Markup**:
+
+```html
+<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+  <circle class="bx--loading__background" cx="0" cy="0" r="30" />
+  <circle class="bx--loading__stroke" cx="0" cy="0" r="30" />
+</svg>
+```
+
+**Old Markup**:
+
+```html
+<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+  <circle cx="0" cy="0" r="37.5" />
+</svg>
+```
+
+###
+
+### SCSS
+
+| v9  | v10                       | Note  |
+| --- | ------------------------- | ----- |
+| -   | `bx--loading__background` | ✨New |
+| -   | `bx--loading__stroke`     | ✨New |

package/styles/vendor/carbon-components/src/components/link/_link.scss

@@ -0,0 +1,75 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Link
+//-----------------------------
+
+@import '../../globals/scss/colors';
+@import '../../globals/scss/vars';
+@import '../../globals/scss/theme';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/css--reset';
+
+/// Link styles
+/// @access private
+/// @group link
+@mixin link {
+  .#{$prefix}--link {
+    @include reset;
+    @include type-style('body-long-01');
+    color: $link-01;
+    text-decoration: none;
+    outline: none;
+    transition: $duration--fast-01 motion(standard, productive);
+
+    &:hover {
+      color: $link-01;
+      text-decoration: underline;
+    }
+
+    &:active,
+    &:active:visited {
+      color: $text-01;
+      text-decoration: underline;
+    }
+
+    &:focus {
+      @include focus-outline;
+    }
+
+    &:not([href]) {
+      color: $disabled-02;
+      cursor: not-allowed;
+      pointer-events: none;
+      touch-action: none;
+    }
+
+    &:visited {
+      color: $link-01;
+    }
+  }
+
+  .#{$prefix}--link--visited {
+    color: $visited-link;
+  }
+
+  .#{$prefix}--link--disabled {
+    @include reset;
+    @include type-style('body-long-01');
+    display: inline;
+    color: $disabled-02;
+    font-weight: 400;
+    cursor: not-allowed;
+  }
+}
+
+@include exports('link') {
+  @include link;
+}

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

@@ -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.
+-->
+
+<a href="#" class="{{@root.prefix}}--link">Link</a>
+<a class="{{@root.prefix}}--link" aria-disabled="true">Placeholder link</a>
+<p class="{{@root.prefix}}--link--disabled">Disabled Link</p>
+<div style="width:200px">
+  <a href="#" class="{{@root.prefix}}--link">Text wrap example for hover, focus, and active state testing.</a>
+</div>

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

@@ -0,0 +1,25 @@
+### HTML
+
+No changes.
+
+### SCSS
+
+The `_link.scss` file is now located at `src/components/link/_link.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/link/link';
+```
+
+**Old**:
+
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/link/link';
+```
+
+### JavaScript
+
+No changes.

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

@@ -0,0 +1,11 @@
+### SCSS
+
+#### Modifiers
+
+Use these modifiers with `.bx--list` class.
+
+| Selector               | Description                                                              |
+| ---------------------- | ------------------------------------------------------------------------ |
+| `.bx--list--unordered` | Use to apply styles to an unordered list                                 |
+| `.bx--list--ordered`   | Use to apply styles to an ordered list                                   |
+| `.bx--list--nested`    | Use to apply styles to a nested list inside an ordered or unordered list |