@carbon/charts 0.28.0 → 0.29.2

package/styles/vendor/carbon-components/src/components/floating-menu/floating-menu.js

@@ -0,0 +1,324 @@
+/**
+ * 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 mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import eventedShowHideState from '../../globals/js/mixins/evented-show-hide-state';
+import trackBlur from '../../globals/js/mixins/track-blur';
+import getLaunchingDetails from '../../globals/js/misc/get-launching-details';
+import optimizedResize from '../../globals/js/misc/resize';
+
+/**
+ * The structure for the position of floating menu.
+ * @typedef {Object} FloatingMenu~position
+ * @property {number} left The left position.
+ * @property {number} top The top position.
+ * @property {number} right The right position.
+ * @property {number} bottom The bottom position.
+ */
+
+/**
+ * The structure for the size of floating menu.
+ * @typedef {Object} FloatingMenu~size
+ * @property {number} width The width.
+ * @property {number} height The height.
+ */
+
+/**
+ * The structure for the position offset of floating menu.
+ * @typedef {Object} FloatingMenu~offset
+ * @property {number} top The top position.
+ * @property {number} left The left position.
+ */
+
+export const DIRECTION_LEFT = 'left';
+export const DIRECTION_TOP = 'top';
+export const DIRECTION_RIGHT = 'right';
+export const DIRECTION_BOTTOM = 'bottom';
+
+/**
+ * @param {object} params The parameters.
+ * @param {FloatingMenu~size} params.menuSize The size of the menu.
+ * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
+ * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
+ * @param {string} [params.direction=bottom] The menu direction.
+ * @param {number} [params.scrollX=0] The scroll position of the viewport.
+ * @param {number} [params.scrollY=0] The scroll position of the viewport.
+ * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
+ * @private
+ */
+export const getFloatingPosition = ({
+  menuSize,
+  refPosition,
+  offset = {},
+  direction = DIRECTION_BOTTOM,
+  scrollX = 0,
+  scrollY = 0,
+}) => {
+  const {
+    left: refLeft = 0,
+    top: refTop = 0,
+    right: refRight = 0,
+    bottom: refBottom = 0,
+  } = refPosition;
+
+  const { width, height } = menuSize;
+  const { top = 0, left = 0 } = offset;
+  const refCenterHorizontal = (refLeft + refRight) / 2;
+  const refCenterVertical = (refTop + refBottom) / 2;
+
+  return {
+    [DIRECTION_LEFT]: {
+      left: refLeft - width + scrollX - left,
+      top: refCenterVertical - height / 2 + scrollY + top,
+    },
+    [DIRECTION_TOP]: {
+      left: refCenterHorizontal - width / 2 + scrollX + left,
+      top: refTop - height + scrollY - top,
+    },
+    [DIRECTION_RIGHT]: {
+      left: refRight + scrollX + left,
+      top: refCenterVertical - height / 2 + scrollY + top,
+    },
+    [DIRECTION_BOTTOM]: {
+      left: refCenterHorizontal - width / 2 + scrollX + left,
+      top: refBottom + scrollY + top,
+    },
+  }[direction];
+};
+
+class FloatingMenu extends mixin(
+  createComponent,
+  eventedShowHideState,
+  trackBlur
+) {
+  /**
+   * Floating menu.
+   * @extends CreateComponent
+   * @extends EventedShowHideState
+   * @param {HTMLElement} element The element working as a modal dialog.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorContainer] The CSS selector to find the container to put this menu in.
+   * @param {string} [options.attribDirection] The attribute name to specify menu placement direction (top/right/bottom/left).
+   * @param {string} [options.classShown] The CSS class for shown state, for the menu.
+   * @param {string} [options.classRefShown] The CSS class for shown state, for the trigger button.
+   * @param {string} [options.eventBeforeShown]
+   *   The name of the custom event fired before this menu is shown.
+   *   Cancellation of this event stops hiding the menu.
+   * @param {string} [options.eventAfterShown]
+   *   The name of the custom event telling that menu is sure shown
+   *   without being canceled by the event handler named by `eventBeforeShown` option (`floating-menu-beingshown`).
+   * @param {string} [options.eventBeforeHidden]
+   *   The name of the custom event fired before this menu is hidden.
+   *   Cancellation of this event stops hiding the menu.
+   * @param {string} [options.eventAfterHidden]
+   *   The name of the custom event telling that menu is sure hidden
+   *   without being canceled by the event handler named by `eventBeforeHidden` option (`floating-menu-beinghidden`).
+   * @param {Element} [options.refNode] The launching element of the menu. Used for calculating the geometry of the menu.
+   * @param {object} [options.offset] The offset to adjust the geometry of the menu. Should have `top`/`left` properties.
+   */
+  constructor(element, options) {
+    super(element, options);
+    const attribDirectionValue = this.element.getAttribute(
+      this.options.attribDirection
+    );
+    if (!this.options.direction) {
+      this.options.direction = attribDirectionValue || 'bottom';
+    }
+    if (!attribDirectionValue) {
+      // Update attribute for styling
+      this.element.setAttribute(
+        this.options.attribDirection,
+        this.options.direction
+      );
+    }
+  }
+
+  /**
+   * Focuses back on the trigger button if this component loses focus.
+   */
+  handleBlur(event) {
+    if (this.element.classList.contains(this.options.classShown)) {
+      this.changeState('hidden', getLaunchingDetails(event));
+      const { refNode, triggerNode } = this.options;
+
+      if (
+        this.element.contains(event.relatedTarget) &&
+        refNode &&
+        event.target !== refNode
+      ) {
+        HTMLElement.prototype.focus.call(triggerNode || refNode); // SVGElement in IE11 does not have `.focus()` method
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @returns {Element} The element that this menu should be placed to.
+   */
+  _getContainer() {
+    return (
+      this.element.closest(this.options.selectorContainer) ||
+      this.element.ownerDocument.body
+    );
+  }
+
+  /**
+   * @private
+   * @returns {object} The menu position, with `top` and `left` properties.
+   */
+  _getPos() {
+    const { element } = this;
+    const { refNode, offset, direction } = this.options;
+
+    if (!refNode) {
+      throw new Error(
+        'Cannot find the refernce node for positioning floating menu.'
+      );
+    }
+
+    return getFloatingPosition({
+      menuSize: element.getBoundingClientRect(),
+      refPosition: refNode.getBoundingClientRect(),
+      offset:
+        typeof offset !== 'function'
+          ? offset
+          : offset(element, direction, refNode),
+      direction,
+      scrollX: refNode.ownerDocument.defaultView.pageXOffset,
+      scrollY: refNode.ownerDocument.defaultView.pageYOffset,
+    });
+  }
+
+  /**
+   * Sees if the computed style is what this floating menu expects.
+   * @private
+   */
+  _testStyles() {
+    if (!this.options.debugStyle) {
+      return;
+    }
+    const { element } = this;
+    const computedStyle = element.ownerDocument.defaultView.getComputedStyle(
+      element
+    );
+    const styles = {
+      position: 'absolute',
+      right: 'auto',
+      margin: 0,
+    };
+    Object.keys(styles).forEach(key => {
+      const expected =
+        typeof styles[key] === 'number' ? parseFloat(styles[key]) : styles[key];
+      const actual = computedStyle.getPropertyValue(key);
+      if (expected !== actual) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Floating menu component expects ${key}: ${styles[key]} style.`
+        );
+      }
+    });
+  }
+
+  /**
+   * Places the menu.
+   * @private
+   */
+  _place() {
+    const { element } = this;
+    const { left, top } = this._getPos();
+    element.style.left = `${left}px`;
+    element.style.top = `${top}px`;
+    this._testStyles();
+  }
+
+  /**
+   * @param {string} state The new state.
+   * @returns {boolean} `true` of the current state is different from the given new state.
+   */
+  shouldStateBeChanged(state) {
+    return (
+      (state === 'shown' || state === 'hidden') &&
+      state !==
+        (this.element.classList.contains(this.options.classShown)
+          ? 'shown'
+          : 'hidden')
+    );
+  }
+
+  /**
+   * Changes the shown/hidden state.
+   * @private
+   * @param {string} state The new state.
+   * @param {object} detail The detail of the event trigging this action.
+   * @param {Function} callback Callback called when change in state completes.
+   */
+  _changeState(state, detail, callback) {
+    const shown = state === 'shown';
+    const { refNode, classShown, classRefShown } = this.options;
+    if (!refNode) {
+      throw new TypeError(
+        'Cannot find the refernce node for changing the style.'
+      );
+    }
+    this.element.classList.toggle(classShown, shown);
+    if (classRefShown) {
+      refNode.classList.toggle(classRefShown, shown);
+    }
+    if (state === 'shown') {
+      if (!this.hResize) {
+        this.hResize = optimizedResize.add(() => {
+          this._place();
+        });
+      }
+      this._getContainer().appendChild(this.element);
+      this._place();
+      // IE11 puts focus on elements with `.focus()`, even ones without `tabindex` attribute
+      if (!this.element.hasAttribute(this.options.attribAvoidFocusOnOpen)) {
+        (
+          this.element.querySelector(this.options.selectorPrimaryFocus) ||
+          this.element
+        ).focus();
+      }
+    }
+    if (state === 'hidden' && this.hResize) {
+      this.hResize.release();
+      this.hResize = null;
+    }
+    callback();
+  }
+
+  release() {
+    if (this.hResize) {
+      this.hResize.release();
+      this.hResize = null;
+    }
+    super.release();
+  }
+
+  static options /* #__PURE_CLASS_PROPERTY__ */ = {
+    selectorContainer: '[data-floating-menu-container]',
+    selectorPrimaryFocus: '[data-floating-menu-primary-focus]',
+    attribDirection: 'data-floating-menu-direction',
+    attribAvoidFocusOnOpen: 'data-avoid-focus-on-open',
+    classShown: '', // Should be provided from options arg in constructor
+    classRefShown: '', // Should be provided from options arg in constructor
+    eventBeforeShown: 'floating-menu-beingshown',
+    eventAfterShown: 'floating-menu-shown',
+    eventBeforeHidden: 'floating-menu-beinghidden',
+    eventAfterHidden: 'floating-menu-hidden',
+    refNode: null, // Should be provided from options arg in constructor
+    offset: {
+      left: 0,
+      top: 0,
+    },
+  };
+
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+}
+
+export default FloatingMenu;

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

@@ -0,0 +1,146 @@
+### SCSS
+
+#### Modifiers
+
+Modifiers are used with various form-related classes.
+
+| Selector               | Description                         |
+| ---------------------- | ----------------------------------- |
+| `.bx--label--disabled` | Applies disabled styles for a label |
+
+### FAQ
+
+#### Using Form Requirement
+
+Bluemix Components provides HTML attribtues and CSS to enable form validations
+for each input or control.
+
+For example, here's a **Form Item** with a required text input.
+
+```html
+<div class="bx--form-item">
+  <label for="text1" class="bx--label">Username</label>
+  <input
+    required
+    id="text1"
+    type="text"
+    class="bx--text__input"
+    placeholder="Enter username here"
+  />
+  <div class="bx--form-requirement">Username is taken.</div>
+</div>
+```
+
+The `bx--form-requirement` element will be hidden until `data-invalid` attribute
+gets added to the `input`. Validate the text input on your own and then use
+JavaScript to add the attribute if the input value is invalid.
+
+```html
+<div class="bx--form-item">
+  <label for="text1" class="bx--label">Username</label>
+  <input
+    data-invalid
+    required
+    id="text1"
+    type="text"
+    class="bx--text__input"
+    placeholder="Enter username here"
+  />
+  <div class="bx--form-requirement">Username is taken.</div>
+</div>
+```
+
+Now that `data-invalid` is added to the `input`, the `bx--form-requirement` will
+appear.
+
+#### HTML
+
+Bluemix Components provides inputs (checkboxes, text-inputs, etc.) and some
+default styles for forms:
+
+- `.bx--form-item`
+- `.bx--fieldset`
+- `.bx--label`
+- `.bx--form-requirement`
+
+Make use of HTML to compose and structure forms appropriate to your project's
+needs.
+
+For example, here's a simple form for a login page that uses a mix of HTML and
+Bluemix Components.
+
+```html
+<form>
+  <section>
+    <div class="bx--form-item">
+      <label for="text1" class="bx--label">Username</label>
+      <input
+        data-invalid
+        id="your-username-id"
+        type="text"
+        class="bx--text__input"
+        placeholder="Enter username here"
+      />
+      <div class="bx--form-requirement">Username is taken.</div>
+    </div>
+    <div class="bx--form-item">
+      <label for="text1" class="bx--label">Password</label>
+      <input
+        data-invalid
+        id="your-password-id"
+        type="password"
+        class="bx--text__input"
+        placeholder="Enter username here"
+      />
+      <div class="bx--form-requirement">Password must rhyme with Batman.</div>
+    </div>
+  </section>
+  <fieldset>
+    <legend>Click Register when you're ready!</legend>
+    <button class="bx--btn bx--btn--primary" type="submit">Register</button>
+  </fieldset>
+</form>
+```
+
+You can use any appropriate HTML for structuring and grouping your forms. If you
+want, those `<section>` elements could be `<div>` elements. Or you can change
+the `<fieldset>` element to be a `<section>` if that's what you want.
+
+#### Fieldset and Legend
+
+It's best practice to wrap any groups of checkboxes or radio inputs with
+`<fieldset>` and use `<legend>` to label the group. This best practice applies
+mainly to composing forms where users are submitting data.
+
+Here's an example from
+[MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+that explains why this is a best practice.
+
+> The `<legend>` element formally describes the purpose of the `<fieldset>`
+> element. Many assistive technologies will use the `<legend>` element as if it
+> is a part of the label of each widget inside the corresponding `<fieldset>`
+> element.
+>
+> ```html
+> <form>
+>   <fieldset>
+>     <legend>Fruit juice size</legend>
+>     <p>
+>       <input type="radio" name="size" id="size_1" value="small" />
+>       <label for="size_1">Small</label>
+>     </p>
+>     <p>
+>       <input type="radio" name="size" id="size_2" value="medium" />
+>       <label for="size_2">Medium</label>
+>     </p>
+>     <p>
+>       <input type="radio" name="size" id="size_3" value="large" />
+>       <label for="size_3">Large</label>
+>     </p>
+>   </fieldset>
+> </form>
+> ```
+>
+> With this example, a screen reader will pronounce "Fruit juice size small" for
+> the first widget, "Fruit juice size medium" for the second, and "Fruit juice
+> size large" for the third.

package/styles/vendor/carbon-components/src/components/form/_form.scss

@@ -0,0 +1,123 @@
+//
+// 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/typography';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Form styles
+/// @access private
+/// @group form
+@mixin form {
+  .#{$prefix}--fieldset {
+    @include reset;
+    margin-bottom: $carbon--spacing-07;
+  }
+
+  .#{$prefix}--form-item {
+    @include type-style('body-short-01');
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+  }
+
+  .#{$prefix}--label {
+    @include reset;
+    @include type-style('label-01');
+
+    color: $text-02;
+    font-weight: $input-label-weight;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: $carbon--spacing-03;
+    line-height: rem(16px);
+  }
+
+  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
+    // When tooltip trigger is put in form label the trigger button should fit in the size of label
+    // https://github.com/IBM/carbon-components-react/issues/115
+    @include type-style('label-01');
+  }
+
+  // Skeleton State
+  .#{$prefix}--label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(75px);
+    height: rem(14px);
+  }
+
+  input[type='number'] {
+    font-family: carbon--font-family('mono');
+  }
+
+  input[data-invalid],
+  .#{$prefix}--text-input__field-wrapper[data-invalid],
+  .#{$prefix}--text-area__wrapper[data-invalid]
+    > .#{$prefix}--text-area--invalid,
+  .#{$prefix}--select-input__wrapper[data-invalid],
+  .#{$prefix}--list-box[data-invalid],
+  .#{$prefix}--combo-box[data-invalid] .#{$prefix}--text-input {
+    @include focus-outline('invalid');
+  }
+
+  input[data-invalid],
+  .#{$prefix}--text-input__field-wrapper[data-invalid],
+  .#{$prefix}--text-area__wrapper[data-invalid],
+  .#{$prefix}--select-input__wrapper[data-invalid],
+  .#{$prefix}--time-picker[data-invalid],
+  .#{$prefix}--list-box[data-invalid] {
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+      display: block;
+      color: $support-01;
+    }
+  }
+
+  // Fix for red ring when input is marked required in Firefox, refs #744
+  input:not(output):not([data-invalid]):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .#{$prefix}--form-requirement {
+    @include reset;
+    @include type-style('caption-01');
+    margin: $carbon--spacing-02 0 0;
+    max-height: 0;
+    overflow: hidden;
+    line-height: 1.5;
+    display: none;
+  }
+
+  .#{$prefix}--label + .#{$prefix}--form__helper-text {
+    margin-top: rem(-6px); // when both helper text and label are rendered
+  }
+
+  .#{$prefix}--form__helper-text {
+    @include type-style('helper-text-01');
+    font-style: italic;
+    color: $text-02;
+    z-index: 0;
+    opacity: 1;
+    margin-bottom: $carbon--spacing-03;
+
+    @include carbon--breakpoint('sm') {
+      max-width: 75%;
+    }
+  }
+
+  .#{$prefix}--label--disabled,
+  .#{$prefix}--form__helper-text--disabled {
+    color: $disabled-02;
+  }
+}
+
+@include exports('form') {
+  @include form;
+}

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

@@ -0,0 +1,64 @@
+<!--
+  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">
+  <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+  <input id="text-input-3" type="text"
+    class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}"
+    placeholder="Optional placeholder text">
+</div>
+<div class="{{@root.prefix}}--form-item">
+  <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+  <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
+    rows="4" cols="50" placeholder="Placeholder text."></textarea>
+</div>
+<div class="{{@root.prefix}}--form-item">
+  <div
+    class="{{@root.prefix}}--select{{#if inline}} {{@root.prefix}}--select--inline{{/if}}{{#if light}} {{@root.prefix}}--select--light{{/if}}">
+    <label for="select-id" class="{{@root.prefix}}--label">Select label</label>
+    {{#unless inline}}
+    {{#if helperText}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/if}}
+    {{/unless}}
+    <div class="{{@root.prefix}}--select-input__wrapper">
+      <select {{#if invalid}} data-invalid{{/if}} id="select-id"
+        class="{{@root.prefix}}--select-input {{#if invalid}} {{@root.prefix}}--select--invalid {{/if}}">
+        {{#each selectItems}}
+        {{#if items}}
+        <optgroup class="{{@root.prefix}}--select-optgroup" label="{{label}}">
+          {{#each items}}
+          <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+            selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/each}} </optgroup> {{else}}
+        <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+            selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/if}} {{/each}} </select>
+      {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--select__arrow') }}
+      {{#if invalid}}
+      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--select__invalid-icon')}}
+      {{/if}}
+    </div>
+    {{#if inline}}
+    {{#if helperText}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/if}}
+    {{/if}}
+    {{#if invalid}}
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+    {{/if}}
+  </div>
+</div>
+<div class="{{@root.prefix}}--form-item">
+  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary" type="button">Submit</button>
+</div>