@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/scss/components/TagSet/_tag-set.scss

@@ -0,0 +1,162 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// TagSet uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalBody, Search, Link, Tag, Tooltip
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/search/search';
+@import 'carbon-components/scss/components/link/link';
+@import 'carbon-components/scss/components/tag/tag';
+@import 'carbon-components/scss/components/tooltip/tooltip';
+
+$block-class: #{$pkg-prefix}--tag-set;
+$block-class-overflow: #{$block-class}-overflow;
+$block-class-modal: #{$block-class}-modal;
+
+@mixin tag-set {
+  @include block-wrap($block-class) {
+    &.#{$block-class} {
+      display: block;
+      width: 100%;
+    }
+
+    .#{$block-class}__space {
+      position: relative;
+      display: block;
+      width: 100%;
+      white-space: nowrap;
+    }
+
+    .#{$block-class}__space--align-end {
+      text-align: end;
+    }
+
+    .#{$block-class}__space--align-center {
+      text-align: center;
+    }
+
+    .#{$block-class}__tag-container {
+      display: inline-flex; // needed to register a width
+      white-space: nowrap;
+    }
+
+    .#{$block-class}__tag-container--hidden {
+      // This tag container is used to measure the width of all displayable tags
+      @include measuring-container;
+    }
+
+    .#{$block-class-overflow} {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    .#{$block-class-overflow}--hidden {
+      overflow: hidden;
+      max-width: 0;
+      visibility: hidden;
+    }
+  }
+
+  @include block-wrap('#{$block-class-modal}') {
+    &.#{$block-class-modal} {
+      // not to be overridden by use in tag set
+      text-align: initial;
+      white-space: initial;
+    }
+
+    .#{$block-class-modal}__container {
+      @include carbon--breakpoint(md) {
+        height: 90%;
+        max-height: 450px;
+      }
+    }
+
+    .#{$block-class-modal}__search {
+      margin-top: $spacing-05;
+      margin-bottom: 0;
+    }
+
+    &.#{$block-class-modal} .#{$block-class-modal}__fade {
+      position: relative;
+      margin-right: $spacing-05;
+      margin-left: $spacing-05;
+    }
+
+    .#{$block-class-modal}__body {
+      padding-bottom: $spacing-06;
+    }
+
+    .#{$block-class-modal}__header {
+      padding-right: 0;
+      margin-right: $spacing-05;
+    }
+
+    &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
+      position: absolute;
+      top: calc(-1 * #{$spacing-11});
+      left: 0;
+      width: 100%;
+      height: $spacing-07;
+      background: linear-gradient(to bottom, transparent, $ui-01);
+      content: '';
+    }
+  }
+
+  @include block-wrap('#{$block-class-overflow}__tooltip') {
+    &.#{$block-class-overflow}__tooltip {
+      // removes the min width in Carbon
+      min-width: initial;
+    }
+
+    .#{$block-class-overflow}__show-all-tags-link {
+      display: inline-block;
+      margin: $spacing-03 0 $spacing-02; // to match the tags
+    }
+
+    .#{$block-class-overflow}__tag-item,
+    .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+      @include carbon--type-style('body-short-01');
+
+      display: block;
+      overflow: hidden;
+      min-width: initial;
+      min-height: initial;
+      padding: 0;
+      margin: 0;
+      background-color: inherit;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
+      // undo override by .bx--tooltip button
+      padding: 0;
+    }
+
+    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag--high-contrast {
+      background-color: $ui-background;
+      color: $text-01;
+    }
+
+    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:hover {
+      background-color: $hover-ui;
+    }
+
+    .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:focus {
+      box-shadow: inset 0 0 0 $spacing-01 $focus;
+    }
+  }
+}
+
+@include exports('tag-set') {
+  @include tag-set;
+}

package/scss/components/Tearsheet/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// 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 './tearsheet';

package/scss/components/Tearsheet/_storybook-styles.scss

@@ -0,0 +1,24 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// 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 '../../global/styles/project-settings';
+
+.tearsheet-stories__dummy-content-block {
+  padding: $layout-02 $layout-03;
+}
+
+.tearsheet-stories__narrow-content-block {
+  padding: $layout-01;
+}
+
+.tearsheet-stories__tabs {
+  margin-left: calc(-1 * #{$layout-01});
+}
+
+.tearsheet-stories__tabs .#{$carbon-prefix}--tab-content {
+  display: none;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -0,0 +1,308 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Tearsheets use the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalBody,
+@import 'carbon-components/scss/components/modal/modal';
+
+// Tearsheets use the following IBM Products components:
+// ActionSet
+@import '../ActionSet/action-set';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin tearsheet {
+  $block-class: #{$pkg-prefix}--tearsheet;
+
+  // stylelint-disable-next-line carbon/theme-token-use
+  $overlay-color: $carbon--gray-100;
+
+  $motion-duration: $duration--moderate-02;
+
+  @include block-wrap($block-class) {
+    &.#{$block-class} {
+      z-index: z('modal') + 1;
+      align-items: flex-end;
+      color: $text-01;
+      // stylelint-disable-next-line carbon/motion-token-use
+      transition: visibility 0s linear $motion-duration,
+        background-color $motion-duration motion(exit, expressive),
+        opacity $motion-duration motion(exit, expressive);
+      --#{$block-class}--stacking-scale-factor-single: 0.95;
+      --#{$block-class}--stacking-scale-factor-double: 0.9;
+    }
+
+    &.is-visible {
+      z-index: z('modal');
+      align-items: flex-end;
+      // stylelint-disable-next-line carbon/motion-token-use
+      transition: visibility 0s linear,
+        background-color $motion-duration motion(entrance, expressive),
+        opacity $motion-duration motion(entrance, expressive);
+    }
+
+    &.#{$block-class}--stacked-1-of-2 {
+      z-index: z('modal') - 1;
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: rgba($overlay-color, 0.33);
+    }
+
+    &.#{$block-class}--stacked-1-of-3 {
+      z-index: z('modal') - 2;
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: rgba($overlay-color, 0.11);
+    }
+
+    &.#{$block-class}--stacked-2-of-3 {
+      z-index: z('modal') - 1;
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: rgba($overlay-color, 0.25);
+    }
+
+    &.#{$block-class}--stacked-2-of-2,
+    &.#{$block-class}--stacked-3-of-3 {
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: rgba($overlay-color, 0.25);
+    }
+
+    .#{$block-class}__container {
+      top: auto;
+      height: 100%;
+      max-height: calc(100% - #{$spacing-09});
+      // we want the enter/leave animation to run up most of the height of the
+      // viewport, capped at 500px to set an upper limit on the movement speed
+      // For the reason for calc() see https://github.com/sass/sass/issues/2849
+      // and https://github.com/sass/node-sass/issues/2815.
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translate3d(0, calc(min(95vh, 500px)), 0);
+    }
+
+    // extra specificity to ensure this transition overrides the carbon default
+    &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+      transition: transform $motion-duration motion(entrance, expressive),
+        max-height $motion-duration motion(entrance, expressive);
+    }
+
+    &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container,
+    &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container {
+      max-height: calc(100% - #{$spacing-09} + #{$spacing-05});
+    }
+
+    &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container {
+      max-height: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
+    }
+
+    .#{$block-class}__container--lower {
+      max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}));
+    }
+
+    &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container--lower,
+    &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container--lower {
+      max-height: calc(
+        100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
+      );
+    }
+
+    &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container--lower {
+      max-height: calc(
+        100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
+      );
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__container {
+      width: 100%;
+    }
+
+    @include carbon--breakpoint(md) {
+      &.#{$block-class}--wide .#{$block-class}__container {
+        width: calc(100% - (2 * #{$spacing-10}));
+      }
+    }
+
+    &.#{$block-class}--stacked-1-of-2.is-visible .#{$block-class}__container,
+    &.#{$block-class}--stacked-2-of-3.is-visible .#{$block-class}__container {
+      transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
+    }
+
+    &.#{$block-class}--stacked-1-of-3.is-visible .#{$block-class}__container {
+      transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__header {
+      padding: $spacing-06 $spacing-07;
+      border-bottom: 1px solid $ui-03;
+      margin: 0;
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__header--with-nav {
+      padding-bottom: 0;
+    }
+
+    &.#{$block-class}--narrow .#{$block-class}__header {
+      padding: $spacing-05;
+      margin: 0;
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__header--with-close-icon {
+      padding-right: $spacing-05;
+      margin-right: $spacing-09;
+    }
+
+    .#{$block-class}__header-content {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .#{$block-class}__header-fields {
+      flex: 1 1 100%;
+    }
+
+    .#{$block-class}__header-actions {
+      flex: 0 0 auto;
+      padding-left: $spacing-06;
+    }
+
+    // buttons inside button sets in the header action area have 8px gap
+    .#{$block-class}__header-actions
+      .#{$carbon-prefix}--btn-set
+      .#{$carbon-prefix}--btn:not(:first-of-type) {
+      margin-left: $spacing-03;
+    }
+
+    .#{$block-class}__header--no-close-icon {
+      display: none;
+    }
+
+    &.#{$block-class}--wide
+      .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
+      @include carbon--type-style('productive-heading-04');
+    }
+
+    .#{$block-class}__header-description {
+      display: -webkit-box;
+      overflow: hidden;
+      max-width: 100%;
+      margin-top: $spacing-05;
+      @include carbon--type-style('body-short-01');
+
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+
+      @include carbon--breakpoint-up('md') {
+        max-width: 60%;
+      }
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__header-description {
+      margin-top: $spacing-03;
+    }
+
+    .#{$block-class}__header-navigation {
+      margin: $spacing-04 0 0;
+    }
+
+    &.#{$block-class} .#{$block-class}__body {
+      display: flex;
+      flex-direction: row;
+      padding: 0;
+      margin: 0;
+    }
+
+    .#{$block-class}__resize-detector {
+      width: 100%;
+      height: 0;
+    }
+
+    .#{$block-class}__influencer {
+      flex: 0 0 257px; // influencer width 256px plus 1px border
+      border-right: 1px solid $ui-03;
+      overflow-y: auto;
+    }
+
+    .#{$block-class}__influencer--wide {
+      flex-basis: 321px; // influencer width 320px plus 1px border
+    }
+
+    .#{$block-class}__right {
+      display: grid;
+      flex-grow: 1;
+      grid-template-columns: 100%;
+      grid-template-rows: 1fr auto;
+    }
+
+    .#{$block-class}__main {
+      display: flex;
+      flex-direction: row;
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+    }
+
+    .#{$block-class}__main .#{$block-class}__influencer {
+      border-right: none;
+      border-left: 1px solid $ui-03;
+    }
+
+    .#{$block-class}__content {
+      overflow: auto;
+      flex-grow: 1;
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__content {
+      background: $ui-background;
+
+      // revert the background colour overridden by bx--modal styles
+      .#{$prefix}--pagination,
+      .#{$prefix}--pagination__control-buttons,
+      .#{$prefix}--text-input,
+      .#{$prefix}--text-area,
+      .#{$prefix}--search-input,
+      .#{$prefix}--select-input,
+      .#{$prefix}--dropdown,
+      .#{$prefix}--dropdown-list,
+      .#{$prefix}--number input[type='number'],
+      .#{$prefix}--date-picker__input {
+        background-color: $field-01;
+      }
+
+      // and restore the 'light' prop in case light fields are wanted
+      .#{$prefix}--text-input--light,
+      .#{$prefix}--text-area--light,
+      .#{$prefix}--search--light .#{$prefix}--search-input,
+      .#{$prefix}--select--light .#{$prefix}--select-input,
+      .#{$prefix}--dropdown--light,
+      .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list,
+      .#{$prefix}--number--light input[type='number'],
+      .#{$prefix}--date-picker--light .#{$prefix}--date-picker__input {
+        background-color: $field-02;
+      }
+    }
+
+    .#{$block-class}__button-container {
+      grid-column: 1 / -1;
+      grid-row: -1 / -1;
+      overflow-x: auto;
+    }
+
+    .#{$block-class}__buttons {
+      display: inline-flex;
+      min-width: 100%;
+      border-top: 1px solid $ui-03;
+    }
+
+    &.#{$block-class}--wide .#{$block-class}__buttons {
+      background: $ui-background;
+    }
+  }
+}
+
+@include exports('tearsheet') {
+  @include tearsheet;
+}

package/scss/components/Toolbar/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 './toolbar';

package/scss/components/Toolbar/_toolbar.scss

@@ -0,0 +1,78 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 'carbon-components/scss/components/button/button';
+@import '../../global/styles/project-settings';
+
+@include exports('ibm-products--toolbar') {
+  $block-class: #{$pkg-prefix}--toolbar;
+
+  $border: carbon--rem(
+      $px: 1px,
+    )
+    solid $ui-03;
+
+  $toolbar-dimensions: carbon--rem(
+    $px: 40px,
+  );
+
+  .#{$block-class} {
+    @include carbon--breakpoint($name: lg) {
+      justify-content: flex-end;
+    }
+
+    display: flex;
+    min-width: $toolbar-dimensions;
+    min-height: $toolbar-dimensions;
+    background-color: $ui-01;
+  }
+
+  .#{$block-class}--vertical,
+  .#{$block-class}--vertical > .#{$block-class}__group {
+    flex-wrap: wrap;
+  }
+
+  .#{$block-class}--vertical {
+    max-width: $toolbar-dimensions;
+  }
+
+  .#{$block-class}__group {
+    display: flex;
+    border-right: $border;
+    border-bottom: $border;
+  }
+
+  .#{$block-class}--vertical > .#{$block-class}__group,
+  .#{$block-class}__group:last-of-type {
+    border-right-width: 0;
+  }
+
+  .#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
+  .#{$block-class} .#{$prefix}--dropdown {
+    border-bottom-width: 0;
+  }
+
+  .#{$block-class}__button--caret {
+    position: relative;
+  }
+
+  .#{$block-class}__button__caret {
+    $caret-dimensions: carbon--rem(
+      $px: 6px,
+    );
+
+    $position: $carbon--spacing-01;
+
+    position: absolute;
+    right: $position;
+    bottom: $position;
+    width: $caret-dimensions;
+    height: $caret-dimensions;
+    background: linear-gradient(to right bottom, transparent 50%, $icon-01 50%);
+    content: '';
+  }
+}

package/scss/components/UserProfileImage/_color-map.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 '@carbon/colors/scss/colors';
+
+$carbon-colors: (
+  'blue30': $carbon--blue-30,
+  'blue50': $carbon--blue-50,
+  'blue60': $carbon--blue-60,
+  'blue80': $carbon--blue-80,
+  'cyan30': $carbon--cyan-30,
+  'cyan50': $carbon--cyan-50,
+  'cyan60': $carbon--cyan-60,
+  'cyan80': $carbon--cyan-80,
+  'gray30': $carbon--gray-30,
+  'gray50': $carbon--gray-50,
+  'gray60': $carbon--gray-60,
+  'gray80': $carbon--gray-80,
+  'green30': $carbon--green-30,
+  'green50': $carbon--green-50,
+  'green60': $carbon--green-60,
+  'green80': $carbon--green-80,
+  'magenta30': $carbon--magenta-30,
+  'magenta50': $carbon--magenta-50,
+  'magenta60': $carbon--magenta-60,
+  'magenta80': $carbon--magenta-80,
+  'purple30': $carbon--purple-30,
+  'purple50': $carbon--purple-50,
+  'purple60': $carbon--purple-60,
+  'purple80': $carbon--purple-80,
+  'teal30': $carbon--teal-30,
+  'teal50': $carbon--teal-50,
+  'teal60': $carbon--teal-60,
+  'teal80': $carbon--teal-80,
+);

package/scss/components/UserProfileImage/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 './user-profile-image.scss';

package/scss/components/UserProfileImage/_storybook.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//