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

package/scss/components/SidePanel/_side-panel.scss

@@ -0,0 +1,496 @@
+//
+// 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';
+@import './side-panel-variables';
+
+// Other Carbon settings.
+@import 'carbon-components/scss/globals/grid/grid';
+
+// SidePanel uses the following Carbon components:
+// Button
+@import 'carbon-components/scss/components/button/button';
+
+// SidePanel uses the following IBM Products components:
+// ActionSet
+@import '../ActionSet/action-set';
+
+$block-class: #{$pkg-prefix}--side-panel;
+$action-set-block-class: #{$pkg-prefix}--action-set;
+
+@mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
+  @keyframes sidePanelEntranceRight {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX(#{$size}); // the size width of the side panel
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+@mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
+  @keyframes sidePanelEntranceLeft {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX(-#{$size}); // the size width of the side panel
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+@mixin sidePanelEntrance(
+  $placement: 'right',
+  $size: map-get($side-panel-sizes, md)
+) {
+  min-width: $size;
+  max-width: $size;
+  @if $placement == right {
+    @include sidePanelEntranceRight($size);
+  } @else {
+    @include sidePanelEntranceLeft($size);
+  }
+}
+
+@mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
+  min-width: $size;
+  max-width: $size;
+}
+
+@mixin setDividerStyles() {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: $decorative-01;
+  content: '';
+  opacity: var(--#{$block-class}--divider-opacity);
+}
+
+@mixin setCommonTitleStyles() {
+  display: -webkit-box;
+  overflow: hidden;
+  padding-right: $spacing-09;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+@mixin side-panel {
+  @keyframes sidePanelExitLeft {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX(calc(-1 * #{map-get($side-panel-sizes, md)}));
+    }
+  }
+
+  @keyframes sidePanelExitRight {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX(map-get($side-panel-sizes, md));
+    }
+  }
+
+  .#{$block-class}__container {
+    --#{$block-class}--subtitle-opacity: 1;
+    --#{$block-class}--title-container-height: 0;
+    --#{$block-class}--title-text-height: 0;
+    --#{$block-class}--subtitle-container-height: 0;
+    --#{$block-class}--action-bar-container-height: 0;
+    --#{$block-class}--divider-opacity: 0;
+    --#{$block-class}--title-y-position: 0;
+    --#{$block-class}--content-bottom-padding: #{$spacing-10};
+    --#{$block-class}--collapsed-title-y-position: 1rem;
+    --#{$block-class}--label-text-height: 0;
+
+    position: fixed;
+    z-index: z('modal');
+    top: $spacing-09;
+    height: calc(100% - 3rem);
+    box-sizing: border-box;
+    background-color: $ui-01;
+    color: $text-01;
+    transition: transform $duration--moderate-02;
+    transition-timing-function: carbon--motion(standard);
+    @each $size, $size_value in $side-panel-sizes {
+      &.#{$block-class}__container--#{$size} {
+        @include setPanelSize($size_value);
+        .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation,
+        .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation,
+        .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation,
+        .#{$block-class}__actions-container.#{$action-set-block-class}--#{$size} {
+          @include setPanelSize($size_value);
+        }
+      }
+      &.#{$block-class}__container-right-placement.#{$block-class}__container--#{$size} {
+        @include sidePanelEntrance(right, $size_value);
+
+        right: 0;
+        border-left: 1px solid $decorative-01;
+      }
+      &.#{$block-class}__container-left-placement.#{$block-class}__container--#{$size} {
+        @include sidePanelEntrance(left, $size_value);
+
+        left: 0;
+        border-right: 1px solid $decorative-01;
+      }
+    }
+    &.#{$block-class}__container-with-action-toolbar.#{$block-class}__with-condensed-header {
+      .#{$block-class}__title-container {
+        &::before {
+          content: none;
+        }
+      }
+      .#{$block-class}__action-toolbar {
+        &::before {
+          @include setDividerStyles();
+        }
+      }
+    }
+    &.#{$block-class}__container-without-overlay {
+      box-shadow: 0 $spacing-01 $spacing-02 $overlay-01;
+    }
+    .#{$block-class}__title-container {
+      position: sticky;
+      z-index: 4;
+      top: 0;
+      height: calc(
+        var(--#{$block-class}--title-container-height) -
+          var(--#{$block-class}--label-text-height)
+      );
+      padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+      background-color: $ui-01;
+      &::before {
+        @include setDividerStyles();
+      }
+      &.#{$block-class}__on-detail-step .#{$block-class}__collapsed-title-text {
+        top: $spacing-09;
+      }
+      &.#{$block-class}__title-container-without-title {
+        padding: 0;
+      }
+      &.#{$block-class}__title-container-without-title.#{$block-class}__on-detail-step-without-title {
+        height: calc(#{$spacing-08} + #{$spacing-02});
+        padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+      }
+      &.#{$block-class}__title-container-without-title::before {
+        background-color: transparent;
+      }
+    }
+    &.#{$block-class}__container-is-animating {
+      pointer-events: none;
+    }
+    &.#{$block-class}__container-is-animating
+      .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
+      top: 0;
+    }
+    &.#{$block-class}__container-is-animating
+      .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation {
+      top: var(--#{$block-class}--title-text-height);
+    }
+    &.#{$block-class}__container-is-animating
+      .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
+      // stylelint-disable-next-line carbon/layout-token-use
+      top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--subtitle-container-height)
+      );
+    }
+    .#{$block-class}__title-text {
+      @include carbon--type-style('productive-heading-03');
+      @include setCommonTitleStyles();
+
+      position: inherit;
+      z-index: 4;
+      background-color: $ui-01;
+      opacity: var(--#{$block-class}--subtitle-opacity);
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(var(--#{$block-class}--title-y-position));
+    }
+    .#{$block-class}__label-text {
+      @include carbon--type-style('label-01');
+
+      overflow: hidden;
+      padding-right: $spacing-05;
+      opacity: var(--#{$block-class}--subtitle-opacity);
+      text-overflow: ellipsis;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(var(--#{$block-class}--title-y-position));
+      white-space: nowrap;
+    }
+    .#{$block-class}__collapsed-title-text {
+      @include carbon--type-style('productive-heading-02');
+      @include setCommonTitleStyles();
+
+      position: absolute;
+      top: $spacing-05;
+      opacity: var(--#{$block-class}--divider-opacity);
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(var(--#{$block-class}--collapsed-title-y-position));
+    }
+    .#{$block-class}__subtitle-text {
+      @include carbon--type-style('body-short-01');
+
+      overflow: hidden;
+      padding: 0 $spacing-09 $spacing-05 $spacing-05;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      opacity: var(--#{$block-class}--subtitle-opacity);
+    }
+    .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation {
+      position: fixed;
+      z-index: 2;
+      // stylelint-disable-next-line carbon/layout-token-use
+      top: calc(var(--#{$block-class}--title-text-height) + #{$spacing-09});
+      background-color: $ui-01;
+    }
+
+    .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation.#{$block-class}__subtitle-text-is-animating {
+      top: var(--#{$block-class}--title-text-height);
+    }
+
+    .#{$block-class}__subtitle-text.#{$block-class}__subtitle-without-title {
+      padding-top: $spacing-05;
+      padding-right: $spacing-09;
+    }
+
+    .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation.#{$block-class}__title-container-is-animating {
+      top: 0;
+    }
+
+    .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
+      position: fixed;
+      top: $spacing-09;
+      height: var(--#{$block-class}--title-text-height);
+    }
+
+    .#{$block-class}__inner-content {
+      overflow: auto;
+      height: calc(100vh - 3rem);
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--subtitle-container-height) +
+          var(--#{$block-class}--action-bar-container-height)
+      );
+      overflow-x: hidden;
+    }
+
+    .#{$block-class}__inner-content-with-actions {
+      height: calc(
+        100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem)
+      );
+    }
+
+    .#{$block-class}__inner-content.#{$block-class}__static-inner-content {
+      height: calc(
+        100vh -
+          calc(
+            var(--#{$block-class}--title-text-height) +
+              var(--#{$block-class}--subtitle-container-height) +
+              var(--#{$block-class}--action-bar-container-height)
+          ) + (calc(-1 * (#{$spacing-09} + #{$spacing-10})))
+      );
+      padding-top: $spacing-05;
+    }
+
+    .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
+      position: fixed;
+      // stylelint-disable-next-line carbon/layout-token-use
+      top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
+      );
+      width: 100%;
+      border-bottom: 1px solid $decorative-01;
+    }
+
+    .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation
+      + .#{$block-class}__body-content {
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
+      );
+    }
+
+    .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation.#{$block-class}__subtitle-text-no-animation-no-action-toolbar {
+      border-bottom: 1px solid $decorative-01;
+      margin-bottom: $spacing-05;
+    }
+    .#{$block-class}__action-toolbar {
+      position: sticky;
+      z-index: 4;
+      top: var(--#{$block-class}--title-height);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 $spacing-05;
+      margin-bottom: $spacing-03;
+      background-color: $ui-01;
+      transition: transform $duration--moderate-01;
+      transition-timing-function: carbon--motion(standard);
+      .#{$block-class}__action-toolbar-button {
+        min-width: 2rem;
+        &.#{$block-class}__action-toolbar-icon-only-button {
+          padding: 0;
+          color: $text-01;
+        }
+        &.#{$block-class}__action-toolbar-icon-only-button svg {
+          margin-left: $spacing-03;
+        }
+        &.#{$block-class}__action-toolbar-leading-button {
+          margin-right: $spacing-03;
+        }
+      }
+    }
+
+    .#{$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
+      position: relative;
+      z-index: 5;
+      top: calc(-1 * #{$spacing-03});
+      left: calc(-1 * #{$spacing-03});
+    }
+    .#{$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
+    .#{$carbon-prefix}--btn.#{$block-class}__close-button {
+      min-width: 2rem;
+      padding: 0;
+      color: $text-01;
+    }
+    .#{$carbon-prefix}--btn.#{$block-class}__close-button {
+      position: absolute;
+      z-index: 5;
+      top: $spacing-03;
+      right: $spacing-05;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: $ui-01;
+    }
+    .#{$carbon-prefix}--btn.#{$block-class}__close-button
+      .#{$carbon-prefix}--btn__icon {
+      margin: 0;
+    }
+    .#{$block-class}__body-content {
+      padding: $spacing-05;
+      padding-top: 0;
+    }
+    &.#{$block-class}__container-is-animating
+      .#{$block-class}__actions-container.#{$action-set-block-class}--max {
+      @include setPanelSize(100%);
+    }
+    .#{$block-class}__actions-container {
+      position: fixed;
+      bottom: 0;
+      border-top: 1px solid $decorative-01;
+      background-color: $ui-01;
+      &.#{$action-set-block-class}--max {
+        .#{$action-set-block-class}__action-button {
+          width: 100%;
+          max-width: 100%;
+        }
+
+        @include carbon--breakpoint(md) {
+          flex-direction: row;
+          .#{$action-set-block-class}__action-button {
+            width: 25%;
+          }
+        }
+
+        flex-direction: column;
+      }
+      .#{$action-set-block-class}__action-button {
+        height: $layout-05;
+      }
+      &.#{$block-class}__actions-container-condensed
+        .#{$action-set-block-class}__action-button {
+        height: $layout-04;
+      }
+    }
+  }
+
+  // form fields should receive correct background color
+  .#{$block-class}__container .bx--text-input,
+  .#{$block-class}__container .bx--text-area,
+  .#{$block-class}__container .bx--search-input,
+  .#{$block-class}__container .bx--select-input,
+  .#{$block-class}__container .bx--dropdown,
+  .#{$block-class}__container .bx--dropdown-list,
+  .#{$block-class}__container .bx--number input[type='number'],
+  .#{$block-class}__container .bx--date-picker__input {
+    background-color: $field-02;
+  }
+
+  @keyframes sidePanelOverlayEntrance {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes sidePanelOverlayExit {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .#{$block-class}__visually-hidden {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    visibility: inherit;
+    white-space: nowrap;
+  }
+
+  .#{$block-class}__overlay {
+    position: fixed;
+    z-index: z('overlay');
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $overlay-01;
+    transition: background-color $duration--moderate-02;
+    transition-timing-function: carbon--motion(standard);
+  }
+}
+
+@include exports('side-panel') {
+  @include side-panel;
+}

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

@@ -0,0 +1,38 @@
+//
+// 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';
+
+$story-prefix: side-panel-stories__;
+
+.side-panel-stories__body-content {
+  .#{$story-prefix}text-inputs {
+    display: flex;
+    margin: $spacing-05 0;
+  }
+  .#{$story-prefix}text-inputs #side-panel-story-text-input-a,
+  .#{$story-prefix}text-inputs #side-panel-story-text-input-c {
+    margin-right: $spacing-05;
+  }
+  .#{$story-prefix}text-area-container {
+    position: relative;
+  }
+  .#{$story-prefix}text-area-container .#{$story-prefix}allowed-characters {
+    @include carbon--type-style('label-01');
+
+    position: absolute;
+    right: 0;
+    color: $text-02;
+  }
+  .#{$story-prefix}text-area-container
+    .#{$story-prefix}allowed-characters-invalid {
+    color: $support-01;
+  }
+  .#{$story-prefix}content-subtitle {
+    margin: $spacing-05 0 $spacing-04;
+  }
+}

package/scss/components/StatusIcon/_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 './status-icon.scss';

package/scss/components/StatusIcon/_status-icon.scss

@@ -0,0 +1,139 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+$colors: (
+  fatal: (
+    light: $carbon--black-100,
+    dark: $carbon--gray-50,
+  ),
+  critical: (
+    light: $carbon--red-60,
+    dark: $carbon--red-50,
+  ),
+  major-warning: (
+    light: $carbon--orange-40,
+    dark: $carbon--orange-40,
+  ),
+  minor-warning: (
+    light: $carbon--yellow-20,
+    dark: $carbon--yellow-20,
+  ),
+  undefined: (
+    light: $carbon--purple-60,
+    dark: $carbon--purple-50,
+  ),
+  unknown: (
+    light: $carbon--gray-60,
+    dark: $carbon--gray-50,
+  ),
+  normal: (
+    light: $carbon--green-60,
+    dark: $carbon--green-50,
+  ),
+  info: (
+    light: $carbon--blue-60,
+    dark: $carbon--blue-50,
+  ),
+  in-progress: (
+    light: $carbon--blue-60,
+    dark: $carbon--blue-50,
+  ),
+  running: (
+    light: $carbon--green-60,
+    dark: $carbon--green-50,
+  ),
+  pending: (
+    light: $carbon--gray-60,
+    dark: $carbon--gray-50,
+  ),
+);
+
+$icons: (
+  'fatal',
+  'critical',
+  'major-warning',
+  'minor-warning',
+  'undefined',
+  'unknown',
+  'normal',
+  'info',
+  'in-progress',
+  'running',
+  'pending'
+);
+$themes: ('light', 'dark');
+
+$block-class: #{$pkg-prefix}--status-icon;
+
+@function clr($name, $theme: light) {
+  // stylelint-disable-next-line carbon/theme-token-use
+  $color: map-get(map-get($colors, $name), $theme);
+  @return $color;
+}
+
+@keyframes rotating {
+  0% {
+    transform: scaleY(-1) rotate(360deg);
+  }
+  100% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+}
+
+.#{$block-class} {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.#{$block-class}--light.#{$block-class}--light-minor-warning,
+.#{$block-class}--dark.#{$block-class}--dark-minor-warning {
+  // stylelint-disable-next-line carbon/theme-token-use
+  fill: $carbon--yellow-20;
+}
+
+.#{$block-class}--light.#{$block-class}--light-major-warning
+  path:nth-of-type(1),
+.#{$block-class}--dark.#{$block-class}--dark-major-warning path:nth-of-type(1),
+.#{$block-class}--light.#{$block-class}--light-minor-warning
+  path:nth-of-type(1),
+.#{$block-class}--dark.#{$block-class}--dark-minor-warning path:nth-of-type(1) {
+  // stylelint-disable-next-line carbon/theme-token-use
+  fill: $carbon--gray-100;
+}
+
+@each $theme in $themes {
+  @each $icon in $icons {
+    @each $theme-key in $themes {
+      .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
+        @if $icon == in-progress {
+          @media (prefers-reduced-motion: reduce) {
+            animation: none;
+          }
+          // stylelint-disable-next-line carbon/motion-token-use
+          animation: rotating 8000ms infinite linear;
+          // stylelint-disable-next-line carbon/theme-token-use
+          fill: clr($icon, $theme);
+        } @else if $icon == running {
+          // stylelint-disable-next-line carbon/theme-token-use
+          fill: clr($icon, $theme);
+          transform: scaleY(-1);
+        } @else {
+          // stylelint-disable-next-line carbon/theme-token-use
+          fill: clr($icon, $theme);
+          @media (prefers-reduced-motion) {
+            .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
+              animation: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/StatusIcon/_storybook-styles.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.
+//

package/scss/components/TagSet/_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 './tag-set.scss';