@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/button/_button.scss

@@ -0,0 +1,256 @@
+//
+// 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/tooltip';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import 'mixins';
+@import '../../globals/scss/css--reset';
+
+/// Button styles
+/// @access private
+/// @group button
+@mixin button {
+  // button set styles
+  .#{$prefix}--btn-set {
+    display: flex;
+  }
+
+  .#{$prefix}--btn-set > .#{$prefix}--btn {
+    max-width: rem(196px); // 196px from design kit
+    width: 100%;
+  }
+
+  .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled
+    + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled
+    + .#{$prefix}--btn--danger.#{$prefix}--btn--disabled {
+    border-left: rem(1px) solid $disabled-03;
+  }
+
+  .#{$prefix}--btn {
+    @include button-base;
+
+    &.#{$prefix}--btn--disabled > svg.#{$prefix}--btn__icon,
+    &:disabled > svg.#{$prefix}--btn__icon {
+      fill: $disabled-03;
+    }
+  }
+
+  // Reset intrisic padding in Firefox (see #731)
+  .#{$prefix}--btn::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  .#{$prefix}--btn--primary {
+    @include button-theme(
+      $interactive-01,
+      transparent,
+      $text-04,
+      $hover-primary,
+      currentColor,
+      $active-primary
+    );
+
+    &:hover {
+      color: $text-04;
+    }
+  }
+
+  .#{$prefix}--btn--secondary {
+    @include button-theme(
+      $interactive-02,
+      transparent,
+      $text-04,
+      $hover-secondary,
+      currentColor,
+      $active-secondary
+    );
+
+    &:hover,
+    &:focus {
+      color: $text-04;
+    }
+  }
+
+  .#{$prefix}--btn--tertiary {
+    @include button-theme(
+      transparent,
+      $interactive-03,
+      $interactive-03,
+      $hover-tertiary,
+      currentColor,
+      $active-tertiary,
+      1px
+    );
+
+    &:hover {
+      color: $inverse-01;
+    }
+
+    &:focus {
+      color: $text-04;
+      background-color: $interactive-03;
+    }
+
+    &:active {
+      background-color: $active-primary;
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled,
+    &.#{$prefix}--btn--disabled,
+    &.#{$prefix}--btn--disabled:hover,
+    &.#{$prefix}--btn--disabled:focus {
+      background: transparent;
+      color: $disabled;
+
+      & > .#{$prefix}--btn__icon path {
+        fill: $disabled;
+      }
+    }
+
+    &:hover > .#{$prefix}--btn__icon path {
+      fill: $inverse-01;
+    }
+  }
+
+  .#{$prefix}--btn--ghost {
+    @include button-theme(
+      transparent,
+      transparent,
+      $link-01,
+      $hover-ui,
+      currentColor,
+      $active-ui
+    );
+    padding: $button-padding-ghost;
+
+    .#{$prefix}--btn__icon {
+      position: static;
+      margin-left: $carbon--spacing-03;
+    }
+
+    &:hover,
+    &:active {
+      color: $hover-primary-text;
+
+      .#{$prefix}--btn__icon path {
+        fill: $hover-primary-text;
+      }
+    }
+
+    &:active {
+      background-color: $active-ui;
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled,
+    &.#{$prefix}--btn--disabled,
+    &.#{$prefix}--btn--disabled:hover,
+    &.#{$prefix}--btn--disabled:focus {
+      color: $disabled;
+      background: transparent;
+      border-color: transparent;
+
+      .#{$prefix}--btn__icon path {
+        fill: $disabled;
+      }
+    }
+
+    &.#{$prefix}--btn--sm {
+      padding: $button-padding-ghost-sm;
+    }
+
+    &.#{$prefix}--btn--field {
+      padding: $button-padding-ghost-field;
+    }
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
+    @include tooltip--trigger('icon', 'bottom');
+    outline: $button-outline-width solid transparent;
+    outline-offset: -4px;
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
+    border-color: $focus;
+    outline-color: $ui-02;
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
+    svg {
+    outline-color: transparent;
+  }
+
+  .#{$prefix}--btn--icon-only--top {
+    @include tooltip--trigger('icon', 'top');
+    @include tooltip--placement('icon', 'top', 'center');
+  }
+
+  .#{$prefix}--btn--icon-only--bottom {
+    @include tooltip--placement('icon', 'bottom', 'center');
+  }
+
+  .#{$prefix}--btn--icon-only,
+  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only,
+  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
+    padding-right: rem(13px);
+
+    .#{$prefix}--btn__icon {
+      position: static;
+    }
+
+    &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon {
+      margin: 0;
+    }
+  }
+
+  .#{$prefix}--btn--danger {
+    @include button-theme(
+      // $support-01, TODO: replace with updated token
+        #dc222b,
+      // $support-01, TODO: replace with updated token
+        #dc222b,
+      $text-04,
+      $hover-danger,
+      $icon-03,
+      $active-danger
+    );
+
+    &:hover {
+      color: $text-04;
+      border: $button-border-width solid transparent;
+    }
+  }
+
+  .#{$prefix}--btn--sm {
+    min-height: rem(32px);
+    padding: $button-padding-sm;
+  }
+
+  .#{$prefix}--btn--field {
+    height: 40px;
+    min-height: 40px;
+    padding: $button-padding-field;
+  }
+
+  // Skeleton State
+  .#{$prefix}--btn.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(150px);
+  }
+}
+
+@include exports('button') {
+  @include button;
+}

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

@@ -0,0 +1,95 @@
+//
+// 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/typography';
+
+/// Button base styles
+/// @access private
+/// @group button
+@mixin button-base {
+  @include reset;
+  @include type-style('body-short-01');
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  min-height: rem($button-height);
+  padding: $button-padding;
+  border-radius: $button-border-radius;
+  text-align: left;
+  text-decoration: none;
+  transition: all $duration--fast-01 motion(entrance, productive);
+  outline: $button-outline-width solid transparent;
+  outline-offset: -4px;
+  position: relative;
+  max-width: rem(320px);
+
+  &:disabled,
+  &.#{$prefix}--btn--disabled {
+    cursor: not-allowed;
+    color: $disabled-03;
+    background: $disabled-02;
+    border-color: $disabled-02;
+  }
+
+  .#{$prefix}--btn__icon {
+    position: absolute;
+    right: rem(16px);
+    flex-shrink: 0;
+    width: rem(16px);
+    height: rem(16px);
+  }
+}
+
+/// Button variant styles
+/// @access private
+/// @group button
+@mixin button-theme(
+  $bg-color,
+  $border-color,
+  $font-color,
+  $hover-bg-color,
+  $icon-color,
+  $active-color,
+  $border-width: $button-border-width
+) {
+  background-color: $bg-color;
+  border-width: $border-width;
+  border-style: solid;
+  border-color: $border-color;
+  color: $font-color;
+
+  &:hover {
+    background-color: $hover-bg-color;
+  }
+
+  &:focus {
+    border-color: $focus;
+    outline-color: $ui-02;
+  }
+
+  &:disabled:hover,
+  &:disabled:focus,
+  &:hover.#{$prefix}--btn--disabled,
+  &:focus.#{$prefix}--btn--disabled {
+    color: $ui-04;
+    background-color: $disabled-02;
+    border-color: $disabled-02;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: $active-color;
+  }
+
+  .#{$prefix}--btn__icon,
+  .#{$prefix}--btn__icon path {
+    fill: $icon-color;
+  }
+}

package/styles/vendor/carbon-components/src/components/button/button--set.hbs

@@ -0,0 +1,24 @@
+<!--
+  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}}--btn-set">
+  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--secondary">
+    Secondary Button
+  </button>
+  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary">
+    Primary Button
+  </button>
+</div>
+
+<div class="{{@root.prefix}}--btn-set">
+  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--secondary {{@root.prefix}}--btn--disabled" disabled>
+    Secondary Button
+  </button>
+  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--disabled" disabled>
+    Primary Button
+  </button>
+</div>

package/styles/vendor/carbon-components/src/components/button/button.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.
+-->
+
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
+  {{#if danger}} aria-label="danger" {{/if}} type="button">
+  Button
+</button>
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
+  {{#if danger}} aria-label="danger" {{/if}} type="button" disabled>
+  Button
+</button>
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
+  {{#if danger}} aria-label="danger" {{/if}} type="button">
+  With icon
+  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
+</button>
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
+  {{#if danger}} aria-label="danger" {{/if}} type="button" disabled>
+  With icon
+  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
+</button>
+{{#if hasIconOnly}}
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}} {{@root.prefix}}--btn--icon-only {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center {{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}">
+  <span class="{{@root.prefix}}--assistive-text">Add</span>
+  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
+</button>
+{{/if}}
+{{#if field}}
+<!-- The markup below is for demonstration purposes only -->
+<div class="example-input-button-pairing">
+  <div class="{{@root.prefix}}--form-item">
+    <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
+    <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="example-button-wrapper">
+    <button class=" {{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}}
+      {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}" {{#if danger}}
+      aria-label="danger" {{/if}} type="button">
+      Button
+    </button>
+  </div>
+</div>
+{{/if}}

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

@@ -0,0 +1,60 @@
+### HTML
+
+Updating HTML pertains only to SVG icon. 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/button/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"
+  class="bx--btn__icon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  aria-hidden="true"
+>
+  <path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path>
+</svg>
+```
+
+**Old Markup**:
+
+```html
+<svg
+  class="bx--btn__icon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+>
+  <path
+    d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+    fill-rule="evenodd"
+  />
+</svg>
+```
+
+### SCSS
+
+No changes to _existing_ selectors, but now has _new selectors_.
+
+| v9                    | v10                | Note                                   |
+| --------------------- | ------------------ | -------------------------------------- |
+| -                     | `bx--btn—disabled` | ✨New; Used to target disabled buttons |
+| `.bx--btn`            | No change          |                                        |
+| `.bx--btn--primary`   | No change          |                                        |
+| `.bx--btn--secondary` | No change          |                                        |
+| `.bx--btn--tertiary`  | No change          |                                        |
+| `.bx--btn--danger`    | No change          |                                        |
+| `.bx--btn--sm`        | No change          |                                        |
+| `.bx--btn—ghost`      | No change          |                                        |

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

@@ -0,0 +1,35 @@
+### SCSS
+
+The `_button.scss` file is now located at `src/components/button/_button.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/button/button';
+```
+
+**Old**:
+
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/button/button';
+```
+
+The `.bx--sets-of-buttons` class has been removed and is no longer in use.
+Secondary and Primary buttons are meant to be paired together in that order
+according to UX guidelines. When paired as siblings, Primary buttons will have a
+`margin-left: 1rem` or `16px`.
+
+The `.bx--btn--right-icon__icon` class has been replaced by `.bx--btn__icon`.
+
+SCSS Extends for buttons have been removed and are no longer in use. SCSS
+Variables specific to Button have been removed and are no longer in use.
+
+SCSS Mixins have been reduced. The following mixins have been removed:
+
+- @mixin btn--browser-fixes (CSS browser fixes applied directly to element and
+  class selectors)
+- @mixin btn--primary (replaced by @mixin button-theme)
+- @mixin btn--secondary (replaced by @mixin button-theme)
+- @mixin btn--danger (replaced by @mixin button-theme)

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

@@ -0,0 +1,71 @@
+### Javascript
+
+#### Public Methods
+
+| Name          | Params                                       | Description                                                                                       |
+| ------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `setState`    | `state`: `String` ['true', 'false', 'mixed'] | Can be used to set the checkbox to `true`(checked), `false`(unchecked) or `mixed` (indeterminate) |
+| `setDisabled` | `state`: `Boolean`                           | Can be used to set the checkbox to disabled, needed for the `label > input`                       |
+
+#### Options
+
+| Option                              | Default Selector                     | Description                                                                |
+| ----------------------------------- | ------------------------------------ | -------------------------------------------------------------------------- |
+| `selectorInit`                      | `.bx--checkbox`                      | The CSS selector to find checkbox                                          |
+| `selectorContainedCheckboxState`    | `[data-contained-checkbox-state]`    | The CSS selector to find a container of checkbox preserving checked state  |
+| `selectorContainedCheckboxDisabled` | `[data-contained-checkbox-disabled]` | The CSS selector to find a container of checkbox preserving disabled state |
+| `classLabel`                        | `.bx--checkbox-label`                | The CSS class for the label                                                |
+| `classLabelFocused`                 | `.bx--checkbox-label__focus`         | The CSS class for the focused label                                        |
+| `attribContainedCheckboxState`      | `data-contained-checkbox-state`      | The attribute name for the checked state of contained checkbox             |
+| `attribContainedCheckboxDisabled`   | `data-contained-checkbox-disabled`   | The attribute name for the disabled state of contained checkbox            |
+
+### FAQ
+
+#### Two ways to write checkbox HTML
+
+Checkbox HTML can be written in two ways:
+
+With `input` and `label` as siblings
+
+```html
+<div class="bx--form-item">
+  <input
+    id="bx--checkbox"
+    class="bx--checkbox"
+    type="checkbox"
+    value="green"
+    name="checkbox"
+  />
+  <label for="bx--checkbox" class="bx--checkbox-label">
+    Checkbox (input + label)
+  </label>
+</div>
+```
+
+With `label` wrapping `input`
+
+```html
+<div class="bx--form-item">
+  <label class="bx--checkbox-label">
+    <input
+      class="bx--checkbox"
+      type="checkbox"
+      value="yellow"
+      name="checkbox"
+    />
+    Checkbox (label > input)
+  </label>
+</div>
+```
+
+Note: You no longer need to include a SVG for the checkmark to render.
+
+#### Fieldset and Legend
+
+As a best practice, groups of checkboxes should make use of `<fieldset>` and
+`<legend>` (see Form for details). This is especially true for forms submitting
+data.
+
+But, there are exceptions to the rule. For example, Data Tables make use of
+checkboxes as a way to select rows of data. Checkboxes in this context would
+represent an entire row of data in its associated table row.