@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.35

package/scss/components/ButtonMenu/_button-menu.scss

@@ -0,0 +1,29 @@
+//
+// 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/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// TODO: @use(s) of Carbon settings and component styles and other
+// related component styles used by ButtonMenu
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--button-menu;
+
+.#{$block-class} {
+  min-width: 160px;
+
+  .#{$block-class}__trigger {
+    width: 100%;
+    padding: 0 $spacing-05;
+  }
+}
+
+.#{$block-class}__options.#{c4p-settings.$carbon-prefix}--overflow-menu-options::after {
+  content: initial;
+}

package/scss/components/ButtonMenu/_carbon-imports.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/react/scss/components/button';
+@use '@carbon/react/scss/components/overflow-menu';

package/scss/components/ButtonMenu/_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 './button-menu';

package/scss/components/ButtonMenu/_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 './button-menu';

package/scss/components/ButtonMenu/_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/ButtonSetWithOverflow/_button-set-with-overflow.scss

@@ -0,0 +1,42 @@
+//
+// 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.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
+
+// ButtonSetWithOverflow uses the following IBM Products components:
+// ButtonMenu, ButtonMenuItem
+@use '../ButtonMenu/button-menu';
+
+$_block-class: #{c4p-settings.$pkg-prefix}--button-set-with-overflow;
+
+@include block-wrap($_block-class) {
+  &.#{$_block-class} {
+    display: flex;
+    width: 100%;
+  }
+
+  .#{$_block-class}__space {
+    position: relative;
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+  }
+
+  .#{$_block-class}__button-container {
+    display: inline-flex; // needed to register a width
+  }
+
+  .#{$_block-class}__button-container--hidden {
+    // This button-set container is used to measure the width of all displayable button-sets
+    @include measuring-container;
+  }
+
+  &.#{$_block-class}--right {
+    justify-content: flex-end;
+  }
+}

package/scss/components/ButtonSetWithOverflow/_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.
+//
+
+// ButtonSetWithOverflow uses the following Carbon components:
+// ButtonSet, Button
+@use '@carbon/react/scss/components/button';

package/scss/components/ButtonSetWithOverflow/_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 './button-set-with-overflow';

package/scss/components/ButtonSetWithOverflow/_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 './button-set-with-overflow';

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

@@ -0,0 +1,8 @@
+//
+// 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 '../../global/styles/display-box' as *;

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// Card uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/overflow-menu';

package/scss/components/Card/_card.scss

@@ -0,0 +1,123 @@
+//
+// Copyright IBM Corp. 2020, 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' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class} {
+  background-color: $layer-01;
+  color: $text-primary;
+}
+
+.#{$block-class}__clickable {
+  cursor: pointer;
+  // stylelint-disable-next-line carbon/motion-easing-use
+  transition: background-color $duration-fast-02;
+}
+
+.#{$block-class}__clickable:hover {
+  background-color: $layer-hover-01;
+}
+
+.#{$block-class}__media-left {
+  display: flex;
+  flex-direction: row;
+}
+
+.#{$block-class}__media-left .#{$block-class}__content-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.#{$block-class}__media-left .#{$block-class}__footer {
+  align-self: flex-end;
+  margin-top: auto;
+}
+
+.#{$block-class}__media > * {
+  display: block;
+  max-width: 100%;
+}
+
+.#{$block-class}__header {
+  padding: $spacing-05;
+}
+
+.#{$block-class}__header-label-only {
+  padding-bottom: $spacing-03;
+}
+
+.#{$block-class}__header-label-only .#{$block-class}__label {
+  margin-bottom: 0;
+}
+
+.#{$block-class}__header-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.#{$block-class}__label {
+  @include type-style('label-01');
+
+  margin-bottom: $spacing-01;
+}
+
+.#{$block-class}__description {
+  @include type-style('label-01');
+
+  margin-top: $spacing-01;
+}
+
+.#{$block-class}__body {
+  @include type-style('body-compact-01');
+
+  padding: $spacing-05;
+  padding-top: 0;
+}
+
+.#{$block-class}__footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.#{$block-class}__actions {
+  display: flex;
+  flex-direction: row;
+}
+
+.#{$block-class}__icon {
+  padding: $spacing-03;
+  color: inherit;
+  cursor: pointer;
+}
+
+.#{$block-class}__icon:hover {
+  background-color: $layer-hover-01;
+}
+
+#{$block-class}__icon:active {
+  color: $link-primary-hover;
+}
+
+.#{$block-class}__link {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.#{$block-class}__pictogram {
+  padding-top: $spacing-05;
+  padding-left: $spacing-05;
+}

package/scss/components/Card/_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 './card';

package/scss/components/Card/_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.
+//
+
+@use './card';

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+#root {
+  width: 100%;
+}

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

@@ -0,0 +1,6 @@
+//
+// 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/Cascade/_cascade.scss

@@ -0,0 +1,47 @@
+//
+// 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/react/scss/grid' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--cascade;
+$animationProps: $duration-moderate-02 motion(standard, productive) 0s 1;
+$fadeStart: translateY(3rem);
+$fadeEnd: translateY(0);
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+    transform: $fadeStart;
+  }
+
+  100% {
+    opacity: 1;
+    transform: $fadeEnd;
+  }
+}
+
+.#{$block-class}__element,
+.#{$block-class}__col {
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: no-preference) {
+    /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
+    animation: $animationProps fade;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
+}
+
+//adds cascading delay
+@for $i from 1 through 8 {
+  .#{$block-class}__element:nth-child(n + #{$i}),
+  .#{$block-class}__col-#{$i} {
+    animation-delay: #{$i * 60}ms;
+  }
+}

package/scss/components/Cascade/_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 './cascade';

package/scss/components/Cascade/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 20201, 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './cascade';

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

@@ -0,0 +1,33 @@
+//
+// Copyright IBM Corp. 20201, 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+#root {
+  width: 100%;
+}
+
+.box {
+  display: inline-block;
+  width: 400px;
+  height: 300px;
+  margin: $spacing-04;
+  background-color: $layer-selected-inverse;
+  color: $text-on-color;
+}
+
+.grid-box {
+  display: flex;
+  width: 100%;
+  height: 300px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: $spacing-03;
+  background-color: $layer-selected-inverse;
+  color: $text-on-color;
+}

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// ComboButton uses the following Carbon components:
+// Button, OverflowMenu
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/ComboButton/_combo-button.scss

@@ -0,0 +1,76 @@
+//
+// Copyright IBM Corp. 2020, 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/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$security--prefix: security;
+
+.#{$security--prefix}--combo-button {
+  position: relative;
+  display: inline-flex;
+}
+
+.#{$security--prefix}--combo-button__action {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu {
+  width: $spacing-09;
+  height: auto;
+  border-left: $spacing-01 solid $border-subtle-01;
+  background-color: $background-brand;
+}
+
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:hover,
+.#{$security--prefix}--combo-button
+  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open,
+.#{$security--prefix}--combo-button
+  .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open:hover,
+.#{$security--prefix}--combo-button
+  .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+  background-color: $button-primary-hover;
+}
+
+.#{$security--prefix}--combo-button
+  .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  width: 0;
+  height: 0;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
+  background-color: $button-primary-active;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu__icon {
+  fill: $icon-on-color;
+  pointer-events: none;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
+  left: 0;
+  width: 100%;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu__list:after {
+  display: none;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
+  max-width: 100%;
+}
+
+.#{$security--prefix}--combo-button__overflow-menu__item__icon {
+  margin-left: auto;
+}

package/scss/components/ComboButton/_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 './combo-button';

package/scss/components/ComboButton/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './combo-button';

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/react/scss/grid';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/progress-indicator';
+@use '@carbon/react/scss/components/toggle';
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/button';