@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.30

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

@@ -1,29 +0,0 @@
-//
-// 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.
-//
-
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing';
-
-$block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
-$story-prefix: create-side-panel-stories__;
-
-.#{$story-prefix}example-container {
-  display: grid;
-  align-items: flex-end;
-  grid-gap: spacing.$spacing-04;
-  grid-template-columns: 1fr 1fr;
-}
-
-.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
-  margin-bottom: 0;
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: $field-02;
-}

package/scss/components/CreateTearsheet/_carbon-imports.scss

@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// CreateTearsheet uses the following Carbon components:
-// ProgressIndicator, ProgressStep
-@use '@carbon/react/scss/components/progress-indicator';

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -1,153 +0,0 @@
-//
-// 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.
-//
-
-// Other Carbon settings.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/react/scss/components/button/tokens' as *;
-@use '@carbon/react/scss/grid' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-
-// CreateTearsheet uses the following IBM Products components:
-// TearsheetShell
-@use '../Tearsheet/tearsheet';
-@use '../CreateInfluencer';
-
-@keyframes step-content-entrance {
-  0% {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-0.75rem);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-$create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
-$step-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step;
-$section-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section;
-$tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section--divider;
-$tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--fieldset;
-
-.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
-  // stylelint-disable-next-line carbon/motion-easing-use
-  animation: step-content-entrance $duration-slow-01;
-  animation-fill-mode: forwards;
-  animation-timing-function: $standard-easing;
-  opacity: 0;
-}
-
-.#{$create-tearsheet-block-class} {
-  --#{$create-tearsheet-block-class}--total-width: 0;
-}
-
-.#{$step-block-class} .#{c4p-settings.$carbon-prefix}--css-grid {
-  padding-left: 0;
-  margin-left: 0;
-}
-
-.#{$create-tearsheet-block-class} .#{$step-block-class}__step--hidden-step {
-  display: none;
-}
-
-.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
-  // stylelint-disable-next-line carbon/motion-easing-use
-  animation: step-content-entrance $duration-slow-01;
-  animation-fill-mode: forwards;
-  animation-timing-function: $standard-easing;
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion) {
-  .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
-    animation: none;
-    opacity: 1;
-  }
-}
-
-.#{$create-tearsheet-block-class} .#{$create-tearsheet-block-class}__content {
-  height: 100%;
-  padding: $spacing-06;
-  overflow-x: hidden;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__content
-  .#{c4p-settings.$carbon-prefix}--grid {
-  padding: 0;
-  margin: 0;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__step--heading {
-  padding-bottom: $spacing-06;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{c4p-settings.$carbon-prefix}--btn-set
-  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--disabled {
-  box-shadow: -0.0625rem 0 0 0 $button-separator;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{c4p-settings.$carbon-prefix}--side-nav--ux {
-  position: initial;
-  background-color: transparent;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__section--divider {
-  position: relative;
-  display: block;
-  width: var(--#{$create-tearsheet-block-class}--total-width);
-  height: 1px;
-  margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
-    calc(-1 * #{$spacing-06});
-  background-color: $layer-accent-01;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__step--title,
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__section--title {
-  margin-bottom: $spacing-05;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__section--subtitle,
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__step--subtitle {
-  @include type.type-style('productive-heading-01');
-
-  margin-bottom: $spacing-03;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__section--description,
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__step--description {
-  @include type.type-style('body-long-01');
-
-  margin-bottom: $spacing-06;
-}
-
-.#{$create-tearsheet-block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-bottom: 0;
-}
-
-.#{$create-tearsheet-block-class}
-  .#{$create-tearsheet-block-class}__step--fieldset
-  > * {
-  margin-bottom: $spacing-05;
-}

package/scss/components/CreateTearsheet/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './carbon-imports';
-@use './create-tearsheet';

package/scss/components/CreateTearsheet/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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.
-//
-
-@use './create-tearsheet';

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

@@ -1,56 +0,0 @@
-//
-// 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.
-//
-
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/type';
-@use '@carbon/type/scss/font-family';
-@use '@carbon/styles/scss/spacing' as *;
-
-$preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
-
-.#{$preview-block-class}__description {
-  @include type.type-style('body-short-01');
-
-  padding-bottom: $spacing-04;
-}
-
-p.#{$preview-block-class}__description:last-of-type {
-  padding-bottom: $spacing-07;
-}
-
-.#{$preview-block-class}__heading {
-  @include font-family.font-weight('semibold');
-}
-
-.#{$preview-block-class}
-  .#{c4p-settings.$pkg-prefix}--tearsheet__content
-  .#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{c4p-settings.$carbon-prefix}--tile-group div {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
-  width: 280px;
-  height: 240px;
-  margin-right: $spacing-05;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile
-  .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
-  min-width: 120px;
-  height: 120px;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
-  position: absolute;
-  bottom: $spacing-05;
-  left: $spacing-05;
-}

package/scss/components/CreateTearsheetNarrow/_carbon-imports.scss

@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// CreateTearsheetNarrow uses the following Carbon components:
-// Form
-@use '@carbon/react/scss/components/form';

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -1,61 +0,0 @@
-//
-// 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.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '../../global/styles/project-settings' as c4p-settings;
-
-// CreateTearsheetNarrow uses the following IBM Products components:
-// TearsheetNarrow
-@use '../Tearsheet/tearsheet';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__heading,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__label,
-.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
-  max-width: 100%;
-  padding-right: calc(20% - #{$spacing-05});
-}
-
-.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
-  margin-top: $spacing-02;
-}
-
-.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header {
-  border-bottom: 1px solid $border-subtle-02;
-}
-
-.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__content {
-  padding: $spacing-05;
-}
-
-.#{$block-class} .#{$block-class}__form {
-  padding-top: $spacing-05;
-}
-
-.#{$block-class} .#{$block-class}__form > * {
-  margin-bottom: $spacing-05;
-
-  /* stylelint-disable-next-line max-nesting-depth */
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.#{$block-class} .#{$block-class}__form-title-text {
-  @include type.type-style('productive-heading-02');
-
-  padding-bottom: $spacing-03;
-}
-
-.#{$block-class} .#{$block-class}__form-description-text {
-  @include type.type-style('body-long-01');
-}

package/scss/components/CreateTearsheetNarrow/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use './carbon-imports';
-@use './create-tearsheet-narrow';

package/scss/components/CreateTearsheetNarrow/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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.
-//
-
-@use './create-tearsheet-narrow';

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

@@ -1,27 +0,0 @@
-//
-// 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.
-//
-
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/spacing' as *;
-
-$story-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow--story;
-
-.#{$story-class}__flex-container {
-  display: flex;
-  align-items: baseline;
-}
-
-.#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
-.#{$story-class}__form .#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
-.#{$story-class}__flex-container
-  .#{c4p-settings.$carbon-prefix}--dropdown__wrapper.#{c4p-settings.$carbon-prefix}--list-box__wrapper {
-  width: 50%;
-}

package/scss/components/DataSpreadsheet/_carbon-imports.scss

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// 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/DataSpreadsheet/_data-spreadsheet.scss

@@ -1,294 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// 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.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/type/scss/font-family';
-@use '@carbon/styles/scss/utilities';
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins' as *;
-
-@mixin set-header-borders {
-  border-right: 1px solid $border-subtle-selected-01;
-  border-bottom: 1px solid $border-subtle-selected-01;
-}
-@mixin set-active-header-borders {
-  border-right: 1px solid $text-placeholder;
-  border-bottom: 1px solid $text-placeholder;
-}
-@mixin set-body-borders {
-  border-right: 1px solid $border-subtle-01;
-  border-bottom: 1px solid $border-subtle-01;
-}
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--data-spreadsheet;
-$body-cell-background: $field-01;
-$header-cell-background: $layer-accent-01;
-
-.#{$block-class} {
-  --#{$block-class}--total-width: 0;
-
-  display: inline-block;
-  border-spacing: 0;
-
-  &.#{$block-class}__container-has-focus {
-    outline: 2px solid $link-inverse;
-  }
-
-  .#{$block-class}__header--container {
-    position: relative;
-  }
-
-  .#{$block-class}__tr {
-    :last-child .#{$block-class}__body--td {
-      .#{$block-class}__td {
-        border-bottom: 0;
-      }
-    }
-  }
-
-  .#{$block-class}__th,
-  .#{$block-class}__td {
-    @include type.type-style('body-short-01');
-
-    width: 100%;
-    height: 100%;
-    padding: 0 $spacing-03;
-    border: 0;
-    margin: 0;
-    color: $text-primary;
-    font-family: inherit;
-  }
-
-  .#{$block-class}__body--td {
-    color: $text-secondary;
-  }
-
-  /* stylelint-disable-next-line max-nesting-depth */
-  [role="'columnheader'"]:last-child,
-  [role="'gridcell'"]:last-child {
-    border-right: 1px solid $text-placeholder;
-  }
-  .#{$block-class}__th,
-  .#{$block-class}__td-th.#{$block-class}__td {
-    @include set-header-borders();
-
-    height: 100%;
-    background-color: $header-cell-background;
-    cursor: pointer;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:hover,
-    &:focus {
-      background-color: $background-selected-hover;
-    }
-  }
-  .#{$block-class}__th--select-all {
-    width: $spacing-10;
-  }
-  .#{$block-class}__td-th--cell-container,
-  .#{$block-class}__select-all-cell-container {
-    position: sticky;
-    z-index: 4;
-    left: 0;
-  }
-  .#{$block-class}__td-th.#{$block-class}__td {
-    @include font-family.font-weight('semibold');
-
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .#{$block-class}__td {
-    @include set-body-borders();
-
-    overflow: hidden;
-    margin: 0;
-    background-color: $body-cell-background;
-    cursor: cell;
-    text-align: left;
-  }
-  .#{$block-class}__th {
-    @include type.type-style('productive-heading-01');
-
-    color: $text-primary;
-    text-align: left;
-  }
-  .#{$block-class}__cell-editor {
-    @include type.type-style('body-short-01');
-    @include utilities.focus-outline('reset');
-
-    position: absolute;
-    z-index: 4;
-    display: none;
-    overflow: hidden;
-    min-width: initial;
-    min-height: initial;
-    /* stylelint-disable-next-line carbon/layout-token-use */
-    padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
-    margin: 0;
-    background-color: $body-cell-background;
-    color: $text-primary;
-    font-family: inherit;
-    resize: none;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:focus,
-    &:active {
-      @include utilities.focus-outline('outline');
-    }
-    &.#{$block-class}__cell-editor--active {
-      outline: $spacing-01 solid $background-brand;
-      outline-offset: -2px;
-    }
-  }
-  .#{$block-class}__cell-editor-ruler {
-    @include type.type-style('body-short-01');
-
-    position: absolute;
-    overflow: hidden;
-    width: fit-content;
-    max-width: var(--#{$block-class}--total-width);
-    /* stylelint-disable-next-line carbon/layout-token-use */
-    padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
-    visibility: hidden;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:focus {
-      outline: $spacing-01 solid $background-brand;
-    }
-  }
-  .#{$block-class}__active-cell--highlight {
-    @include type.type-style('body-short-01');
-    @include set-body-borders();
-
-    position: absolute;
-    z-index: 3;
-    display: none;
-    overflow: hidden;
-    // Could be fixed by using border-right but the fact that
-    // this element is positioned absolute prevents that from working
-    /* stylelint-disable-next-line carbon/layout-token-use */
-    padding-right: calc(#{$spacing-03} - 1px);
-    padding-bottom: $spacing-01;
-    /* stylelint-disable-next-line carbon/layout-token-use */
-    padding-left: calc(#{$spacing-03} - #{$spacing-01});
-    border: $spacing-01 solid $background-brand;
-    background-color: $body-cell-background;
-    color: $text-primary;
-    font-family: inherit;
-    text-align: left;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &[data-active-row-index='header'],
-    &[data-active-column-index='header'] {
-      z-index: 4;
-      background-color: transparent;
-    }
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:focus {
-      border: $spacing-01 solid $background-brand;
-      outline: 0;
-    }
-  }
-  .#{$block-class}__selection-area--element {
-    position: absolute;
-    z-index: 2;
-    border: 1px solid $background-brand;
-    pointer-events: none;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: $background-brand;
-      content: '';
-      opacity: 0.2;
-    }
-    &.#{$block-class}__selection-area--element-cloned {
-      z-index: 4;
-
-      /* stylelint-disable-next-line max-nesting-depth */
-      &::before {
-        background-color: $border-inverse;
-        opacity: 0.25;
-      }
-    }
-    .#{$block-class}__reorder-indicator-line {
-      position: absolute;
-      z-index: 4;
-      width: $spacing-01;
-      background-color: $background-brand;
-      pointer-events: none;
-    }
-    .#{$block-class}__th--active-header,
-    .#{$block-class}__td-th--active-header.#{$block-class}__td {
-      @include set-active-header-borders();
-
-      background-color: $background-selected-hover;
-    }
-    .#{$block-class}__th--selected-header,
-    .#{$block-class}__td-th--selected-header.#{$block-class}__td {
-      background-color: $background-inverse;
-      color: $text-inverse;
-
-      /* stylelint-disable-next-line max-nesting-depth */
-      &:focus,
-      &:hover {
-        background-color: $background-inverse;
-      }
-    }
-    .#{$block-class}__th--selected-header.#{$block-class}__th {
-      cursor: grab;
-    }
-    .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
-      cursor: grabbing;
-    }
-    .#{$block-class}__list--container {
-      overscroll-behavior: none;
-    }
-  }
-  .#{$block-class}__reorder-indicator-line {
-    position: absolute;
-    z-index: 4;
-    width: $spacing-01;
-    background-color: $background-brand;
-  }
-  .#{$block-class}__th--active-header,
-  .#{$block-class}__td-th--active-header.#{$block-class}__td {
-    background-color: $background-selected-hover;
-  }
-  .#{$block-class}__th--selected-header,
-  .#{$block-class}__td-th--selected-header.#{$block-class}__td {
-    background-color: $background-inverse;
-    color: $text-on-color;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:focus,
-    &:hover {
-      background-color: $background-inverse;
-    }
-  }
-  .#{$block-class}__th--selected-header.#{$block-class}__th {
-    cursor: grab;
-  }
-  .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
-    cursor: grabbing;
-  }
-  .#{$block-class}__list--container {
-    overscroll-behavior: none;
-  }
-}