@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -0,0 +1,322 @@
+// stylelint-disable carbon/theme-use, declaration-empty-line-before
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 'sass:list';
+@use 'sass:math';
+@use 'sass:string';
+@use '@carbon/styles/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/components/tag/tokens' as *;
+
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/colors' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+@mixin actions-animation($translateValue) {
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+  /* stylelint-disable-next-line carbon/layout-use */
+  transform: translateX($translateValue);
+  transition: all $duration-fast-02 motion(standard, productive);
+}
+
+.#{$block-class}__condition-wrapper {
+  @include type-style('body-01');
+}
+
+.#{$block-class}__popover-content-wrapper {
+  overflow: auto;
+  max-block-size: $spacing-13 + $spacing-13 + $spacing-07;
+  max-inline-size: $spacing-13 + $spacing-13;
+  min-inline-size: $spacing-07 + $spacing-13;
+}
+
+.#{$block-class}__item__title {
+  @include type-style('heading-01');
+
+  padding: $spacing-05;
+}
+
+.#{$block-class}__item-option__search {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__item-option__option {
+  display: grid;
+  cursor: pointer;
+  min-block-size: 2rem;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__item-option__option[aria-disabled] {
+  color: $text-disabled;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    cursor: not-allowed;
+    outline: none;
+  }
+}
+.#{$block-class}__item-option__option[aria-hidden] {
+  display: none;
+}
+
+.#{$block-class}__item-option__option:not([aria-disabled]):hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__item-option__option-content {
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+}
+
+.#{$block-class}__item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: $spacing-03;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__item-option
+  > ul[aria-multiSelectable='true']
+  .#{$block-class}__item-option__option-label {
+  justify-content: center;
+}
+
+.#{$block-class}__item-option__option:not(:first-of-type)
+  .#{$block-class}__item-option__option-content {
+  border-block-start: 0.0625rem solid $border-subtle;
+}
+
+.#{$block-class}__item-option__option:not([aria-disabled]) {
+  &:hover,
+  &[aria-selected='true'],
+  &:hover + .#{$block-class}__item-option__option,
+  &[aria-selected='true'] + .#{$block-class}__item-option__option {
+    .#{$block-class}__item-option__option-content {
+      border-block-start-color: transparent;
+    }
+  }
+}
+
+.#{$block-class}__item-option__option[aria-selected='true'] {
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__item-option__option[aria-selected='true']:hover {
+  background-color: $layer-selected-hover;
+}
+
+.#{$block-class}__item-date,
+.#{$block-class}__item-text,
+.#{$block-class}__item-number,
+.#{$block-class}__item-time {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__checkmark {
+  margin-inline-start: auto;
+}
+
+.#{$block-class}__button {
+  @include utilities.button-reset();
+
+  display: inline-flex;
+  align-items: center;
+  background-color: $layer;
+  block-size: $spacing-07;
+  color: inherit;
+  column-gap: $spacing-02;
+  cursor: pointer;
+  padding-inline: $spacing-03;
+  white-space: nowrap;
+}
+.#{$block-class}__button:hover {
+  background-color: $layer-hover;
+}
+.#{$block-class}__condition-builder__group.hoveredConnector
+  .#{$block-class}__condition-wrapper
+  > .#{$block-class}__condition-block
+  .#{$block-class}__connector-button {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__button:focus {
+  @include focus-outline.focus-outline('outline');
+
+  content: '';
+  inset: 0;
+}
+
+.#{$block-class}__statement-button,
+.#{$block-class}__connector-button {
+  min-inline-size: $spacing-10;
+  padding-inline: $spacing-03;
+}
+.#{$block-class}__property-field {
+  @include type.type-style('heading-01');
+
+  padding-inline-start: $spacing-03;
+}
+.#{$block-class}__close-condition {
+  padding-inline-end: $spacing-03;
+}
+.#{$block-class}__add-button {
+  padding-inline: $spacing-03;
+}
+
+.#{$block-class}__multiselectSelectionStatusContainer {
+  display: flex;
+  align-items: center;
+  padding-inline: $spacing-05;
+  .#{$block-class}__selectAll-button {
+    margin-inline-start: auto;
+  }
+}
+
+.#{$block-class}__item-option__option:focus {
+  @include focus-outline.focus-outline('outline');
+}
+//need to revamp to a simpler logic
+$colors: (
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30),
+  ($blue-70, $blue-60, $blue-50, $blue-40, $blue-30),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30),
+  ($green-70, $green-60, $green-50, $green-40, $green-30)
+);
+
+@for $i from 1 through list.length($colors) {
+  $selector: (
+    string.unquote(
+      '.#{$block-class}__content-container > .#{$block-class}__group-wrapper:nth-of-type(#{list.length($colors)}n+#{$i})'
+    )
+  );
+  $group-colors: list.nth($colors, $i);
+  $group-colors-length: list.length($group-colors);
+
+  //this is to select and add color to the new group preview
+  .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
+    button {
+    $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1));
+    box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
+  }
+
+  //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
+  @for $el-index from 1 through 50 {
+    $item-index: $el-index;
+    $item-index: ((($item-index - 1) % $group-colors-length) + 1);
+    #{$selector} {
+      @if $item-index != 1 {
+        --#{$block-class}__condition-wrapper-color: #{list.nth(
+            $group-colors,
+            $item-index
+          )};
+      }
+    }
+
+    $selector: list.append(
+      $selector,
+      string.unquote('.#{$block-class}__group')
+    );
+  }
+}
+
+.#{$block-class}__Hierarchical {
+  .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
+    flex-basis: 100%;
+  }
+  .#{$block-class}__groupConnector {
+    background-color: $layer;
+  }
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
+    > :nth-child(1)
+    .#{$block-class}__button,
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
+    > :nth-child(2)
+    .#{$block-class}__button:not(
+      .#{$block-class}__add-button,
+      .#{$block-class}__add-condition-sub-group
+    ) {
+    box-shadow: inset 0 #{$spacing-01} 0 0
+      var(--#{$block-class}__condition-wrapper-color);
+  }
+}
+
+.#{$block-class}__groupOperatorConnector {
+  margin-block-end: $spacing-02;
+}
+.#{$block-class}__option-check-box {
+  display: flex;
+  margin-inline-end: $spacing-03;
+}
+.#{$block-class}__option-icon {
+  align-self: center;
+  margin-inline-start: auto;
+}
+.#{$block-class}__content-container {
+  .#{$block-class}__add-button-wrapper > :nth-child(1) {
+    @include actions-animation(-100%);
+  }
+  .#{$block-class}__add-button-wrapper > :nth-child(2) {
+    @include actions-animation(-200%);
+  }
+
+  .#{$block-class}__condition-block:focus-within:first-child
+    .#{$block-class}__add-button-wrapper
+    > span,
+  .#{$block-class}__condition--interacting
+    .#{$block-class}__add-button-wrapper
+    > span {
+    z-index: 0;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateX(0);
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: transform motion(exit, productive) $duration-fast-02;
+  }
+  .#{$block-class}__condition--interacting
+    .#{$block-class}__close-condition-wrapper {
+    z-index: 2;
+  }
+}
+
+.#{$block-class}__invalid-input {
+  display: flex;
+  direction: rtl;
+}
+.#{$block-class}__invalid-input > svg {
+  color: $support-warning;
+  /* stylelint-disable max-nesting-depth */
+  > path:first-child {
+    fill: $icon-primary;
+  }
+}
+
+.#{$block-class}__statement_wrapper {
+  padding: $spacing-03 0;
+
+  :nth-child(2) {
+    color: $text-secondary;
+  }
+}

package/scss/components/ConditionBuilder/styles/_index.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 './conditionBuilderItem';
+@use './conditionBuilderCondition';

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

@@ -0,0 +1,17 @@
+//
+// 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.
+//
+
+// CreateFullPage uses the following Carbon components:
+// Grid, Row, Column, Form, ProgressIndicator, ProgressStep, Toggle,
+// ComposedModal, ModalHeader, ModalBody, ModalFooter, Button
+// Other Carbon settings.
+@use '@carbon/styles/scss/grid';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/progress-indicator';
+@use '@carbon/styles/scss/components/toggle';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/button';

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -0,0 +1,188 @@
+//
+// Copyright IBM Corp. 2021, 2023
+//
+// 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;
+
+// CreateFullPage uses the following IBM Products components:
+// ActionSet, CreateInfluencer and SimpleHeader
+@use '../CreateInfluencer/index' as *;
+@use '../ActionSet/action-set' as *;
+@use '../SimpleHeader' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
+$step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
+
+.#{$block-class} {
+  display: grid;
+  block-size: 100%;
+  color: $text-primary;
+  grid-template-rows: minmax(auto, 100%);
+
+  &:has(.#{$block-class}__header) {
+    grid-template-rows: auto minmax(auto, 100%);
+  }
+}
+
+.#{$block-class}
+  .#{$block-class}__content
+  .#{c4p-settings.$carbon-prefix}--grid {
+  margin-inline: 0;
+  padding-block-start: $spacing-06;
+}
+
+.#{$block-class} .#{$step-block-class}__step--hidden-step {
+  display: none;
+}
+
+.#{$block-class} .#{$step-block-class}__step--visible-step {
+  display: block;
+}
+
+.#{$block-class} .#{$block-class}__step-subtitle {
+  @include type.type-style('heading-compact-01');
+
+  margin-block-end: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__step-description {
+  @include type.type-style('body-01');
+
+  margin-block-end: $spacing-06;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-block-end: 0;
+}
+
+.#{$block-class} .#{$block-class}__step-fieldset > * {
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
+
+.#{$block-class}__influencer-and-body-container {
+  display: flex;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  max-block-size: 100%;
+}
+
+.#{$block-class} .#{$block-class}__left-nav {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
+}
+
+.#{$block-class} .#{$block-class}__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.#{$block-class} .#{$block-class}__main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-block-size: 100%;
+}
+
+.#{$block-class} .#{$block-class}__content {
+  overflow: auto;
+  flex-grow: 1;
+  background-color: $background;
+  color: $text-primary;
+  overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    overflow-inline: hidden;
+  }
+
+  padding-block-start: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__step {
+  position: relative;
+  padding-block-end: $spacing-07;
+}
+
+.#{$block-class}__step .#{c4p-settings.$carbon-prefix}--css-grid {
+  margin-inline-start: 0;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  background-color: transparent;
+  block-size: min-content;
+  border-inline-end: 1px solid $border-subtle-01;
+  grid-row: 1;
+  inset-block-start: 0;
+  overflow-x: auto;
+  @supports (overflow-inline: auto) {
+    overflow-inline: auto;
+  }
+
+  padding-block-start: 0;
+}
+
+.#{$block-class} .#{$block-class}__section-divider {
+  position: relative;
+  display: block;
+  margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
+    calc(-1 * #{$spacing-08});
+  block-size: 1px;
+  inline-size: 0;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &::after {
+    position: absolute;
+    background-color: $layer-accent-01;
+    block-size: 1px;
+    content: '';
+    inline-size: 100vw;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+}
+
+.#{$block-class} .#{$block-class}__step-title {
+  @include type.type-style('heading-04');
+
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__influencer {
+  display: grid;
+  flex: 0 0 257px;
+  background-color: $layer-01;
+  border-inline-end: 1px solid $layer-accent-01;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+}
+
+.#{$block-class}
+  .#{$block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
+  padding: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__influencer-toggle {
+  padding: $spacing-06;
+  grid-column: 1 / -1;
+  grid-row: -1 / -1;
+}
+
+.#{$block-class} .#{$block-class}__buttons {
+  border-block-start: 1px solid $layer-accent-01;
+}

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

@@ -0,0 +1,9 @@
+//
+// 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-full-page';

package/scss/components/CreateFullPage/_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.
+//
+
+@use './create-full-page';

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

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// CreateInfluencer uses the following Carbon components:
+// ProgressIndicator
+@use '@carbon/styles/scss/components/progress-indicator';

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -0,0 +1,93 @@
+//
+// 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 '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+
+$influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer;
+$create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
+$influencerAnimationStart: calc(-1 * #{$spacing-05});
+@keyframes influencer-menu-entrance {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-use
+    transform: translateX($influencerAnimationStart);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes influencer-menu-exit {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-use
+    transform: translateX($influencerAnimationStart);
+  }
+}
+.#{$influencer-block-class} {
+  display: grid;
+  padding: $spacing-06 $spacing-07;
+  block-size: 100%;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+}
+
+.#{$influencer-block-class}__left-nav {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
+}
+
+.#{$influencer-block-class}__title {
+  @include type.type-style('heading-03');
+
+  margin-block-end: $spacing-06;
+}
+
+.#{$influencer-block-class}__view-all-toggle {
+  padding: $spacing-06;
+  grid-column: 1 / -1;
+  grid-row: -1 / -1;
+}
+
+.#{$influencer-block-class}__side-nav-opening,
+.#{$influencer-block-class}__progress-indicator-opening {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: influencer-menu-entrance $duration-moderate-02 1;
+  animation-fill-mode: forwards;
+  @include motion(entrance, productive);
+}
+
+.#{$influencer-block-class}__side-nav-closing,
+.#{$influencer-block-class}__progress-indicator-closing {
+  // stylelint-disable-next-line carbon/motion-easing-use
+  animation: influencer-menu-exit $duration-moderate-02 1;
+  animation-fill-mode: forwards;
+  @include motion(exit, productive);
+}
+
+@media (prefers-reduced-motion) {
+  .#{$influencer-block-class}__side-nav-opening,
+  .#{$influencer-block-class}__progress-indicator-opening,
+  .#{$influencer-block-class}__side-nav-closing,
+  .#{$influencer-block-class}__progress-indicator-closing {
+    animation: none;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// 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-influencer';

package/scss/components/CreateInfluencer/_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.
+//
+
+@use './create-influencer';

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// CreateModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/button';