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

package/scss/components/FilterPanel/_filter-panel-group.scss

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-group;
+
+.#{$block-class} {
+  border-block-start: to-rem(1px) solid $border-subtle;
+  margin-block: $spacing-04;
+  padding-block-start: $spacing-04;
+}
+
+.#{$block-class}__title {
+  @include type.type-style('label-01');
+  @include type.font-weight('semibold');
+
+  margin-block: 0 $spacing-04;
+}

package/scss/components/FilterPanel/_filter-panel-label.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+
+.#{$block-class} {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__text {
+  overflow: hidden;
+  flex: 1 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__count {
+  color: $text-secondary;
+  margin-inline-start: $spacing-04;
+}

package/scss/components/FilterPanel/_filter-panel-search.scss

@@ -0,0 +1,40 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-search;
+
+.#{$block-class} {
+  position: relative;
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class}__results {
+  position: absolute;
+  z-index: utilities.z('dropdown');
+  padding: $spacing-03;
+  background-color: $layer;
+  inset-block-start: 100%;
+  inset-inline: 0;
+  /* stylelint-disable-next-line function-no-unknown */
+  max-block-size: to-rem(320px);
+  overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
+}

package/scss/components/FilterPanel/_filter-panel.scss

@@ -0,0 +1,30 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+@use '../TruncatedList';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class}__title {
+  @include type.type-style('body-compact-01');
+
+  margin-block: $spacing-04;
+}

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

@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2024, 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 './carbon-imports';
+@use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
+@use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
+@use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/FilterPanel/_index.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2024, 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 './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
+@use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
+@use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/FilterSummary/_filter-summary.scss

@@ -0,0 +1,55 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+
+$block-class: #{$pkg-prefix}--filter-summary;
+
+@property --panel-transform {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+.#{$block-class} {
+  display: flex;
+  align-items: center;
+  padding: $spacing-03;
+  background: $layer-01;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(48px);
+  border-block-start: 1px solid $border-subtle-01;
+  inline-size: 100%;
+  &.#{$block-class}__expanded {
+    block-size: fit-content;
+  }
+}
+
+.#{$block-class}
+  .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
+  inline-size: auto;
+}
+
+.#{$block-class}__view-all--wrapper {
+  position: absolute;
+  inset-block-start: $spacing-03;
+  inset-inline-end: 0;
+}
+
+.#{$block-class}__expanded
+  .#{$block-class}__clear-all-button.#{$carbon-prefix}--btn {
+  margin-inline-end: $spacing-07;
+}
+
+.#{$block-class}__view-all--wrapper
+  .#{$block-class}__view-all--chevron-multiline {
+  transform: rotate(180deg);
+  transition: transform $duration-fast-01 motion(standard);
+}

package/scss/components/FilterSummary/_index.scss

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

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from FullPageError in this file.
+// FullPageError uses the following Carbon components:

package/scss/components/FullPageError/_full-page-error.scss

@@ -0,0 +1,87 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+@use '@carbon/type' as *;
+@use '@carbon/themes' as *;
+@use '@carbon/layout' as *;
+@use '@carbon/grid' as *;
+
+// FullPageError uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FullPageError
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
+
+.#{$block-class} {
+  block-size: inherit;
+}
+.#{$block-class}__container {
+  margin: 0 $spacing-06;
+  block-size: 100%;
+
+  @include breakpoint-down(md) {
+    margin: 0 $spacing-03;
+  }
+}
+.#{$block-class}__grid {
+  block-size: 100%;
+  padding-block: $spacing-07;
+}
+.#{$block-class}__column {
+  padding: 0;
+  @include breakpoint(lg) {
+    padding: 0 $spacing-07 0 0;
+  }
+}
+
+.#{$block-class}__svg-container {
+  display: flex;
+  padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
+  block-size: 100%;
+  @include breakpoint(md) {
+    padding: auto $spacing-03 $spacing-11;
+  }
+}
+
+.#{$block-class}__label,
+.#{$block-class}__title {
+  @include type-style('fluid-heading-05', true);
+}
+
+.#{$block-class}__label {
+  display: block;
+  color: $text-error;
+}
+.#{$block-class}__title {
+  margin-block-end: $spacing-09;
+}
+
+.#{$block-class}__description {
+  @include type-style('body-02');
+
+  margin-block-end: $spacing-07;
+}
+
+.#{$block-class}__body {
+  @include type-style('body-02');
+}
+
+// safari rendering fix
+.#{$block-class}__svg-container svg.#{$block-class}__svg {
+  inline-size: 100%;
+}
+
+// svg theme styles
+.#{$block-class}__svg-container svg.#{$block-class}__svg path {
+  fill: $background;
+  stroke: $border-inverse;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 './carbon-imports';
+@use './full-page-error';

package/scss/components/FullPageError/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './full-page-error';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from GetStartedCard in this file.
+// GetStartedCard uses the following Carbon components:

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -0,0 +1,133 @@
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class}__get-started {
+  border-width: 1px;
+  border-style: solid;
+  background: linear-gradient(to bottom, $purple-80 40%, $purple-70);
+  border-image: linear-gradient(to bottom, $purple-60, $purple-50) 1;
+  color: $text-on-color;
+
+  &:hover {
+    background: linear-gradient($purple-70-hover, $purple-70-hover);
+  }
+
+  &:focus {
+    border: 2px solid $focus;
+    outline: 1px solid $focus-inset;
+    outline-offset: -3px;
+  }
+
+  .#{$block-class}__sequence {
+    @include type-style('heading-05');
+
+    padding-block-start: $spacing-05;
+    padding-inline-start: $spacing-05;
+  }
+
+  .#{$block-class}__status {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$block-class}__header-body-container {
+    display: flex;
+  }
+
+  .#{$block-class}__header {
+    padding-inline-end: $spacing-09;
+
+    @include breakpoint-down(lg) {
+      padding-block-end: 0;
+    }
+  }
+
+  .#{$block-class}__body {
+    @include breakpoint-down(lg) {
+      padding: 0;
+    }
+  }
+  .#{$block-class}__media {
+    align-content: center;
+
+    @include breakpoint-down(lg) {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-block: to-rem(-50px) - $spacing-09;
+    }
+  }
+
+  .#{$block-class}__sequence ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-block: to-rem(-56px) - $spacing-09;
+    }
+  }
+
+  //meta-data
+  .#{$block-class}__actions {
+    padding: $spacing-05;
+    gap: $spacing-04;
+    @include type-style('label-01');
+
+    .#{$block-class}__icon {
+      display: flex;
+      padding: 0;
+      margin-inline-end: 0;
+    }
+
+    .#{$block-class}__icon svg {
+      margin-inline-end: $spacing-02;
+    }
+
+    .#{$block-class}__icon:hover {
+      background: none;
+    }
+  }
+
+  .#{$block-class}__footer {
+    position: relative;
+    z-index: 1;
+    justify-content: space-between;
+    border: none;
+
+    .#{$block-class}__action-icon {
+      display: flex;
+      align-self: center;
+      padding-inline-end: $spacing-05;
+    }
+  }
+}
+.#{$block-class}__disabled:focus,
+.#{$block-class}__disabled:hover,
+.#{$block-class}__disabled {
+  border: 1px solid $border-disabled;
+  background: $layer-02;
+  color: $text-disabled;
+  cursor: default;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 './carbon-imports';
+@use './get-started-card';

package/scss/components/GetStartedCard/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './get-started-card';

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

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