@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/global/js/package-settings.js

@@ -26,6 +26,7 @@ var defaults = {
     AboutModal: true,
     APIKeyModal: true,
     Cascade: true,
+    Checklist: true,
     CreateModal: true,
     CreateFullPage: true,
     CreateFullPageStep: true,
@@ -98,6 +99,7 @@ var defaults = {
     FilterPanelLabel: false,
     FilterPanelSearch: false,
     ConditionBuilder: false,
+    GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
@@ -121,7 +123,6 @@ var defaults = {
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
-    Checklist: false,
     EmptyStateV2: false,
     Guidebanner: false,
     GuidebannerElement: false,

package/lib/index.js

@@ -136,6 +136,7 @@ var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/Filter
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
 var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
 var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
+var GetStartedCard = require('./components/GetStartedCard/GetStartedCard.js');
 
 
 
@@ -576,3 +577,7 @@ Object.defineProperty(exports, 'ConditionBuilder', {
 	enumerable: true,
 	get: function () { return ConditionBuilder.ConditionBuilder; }
 });
+Object.defineProperty(exports, 'GetStartedCard', {
+	enumerable: true,
+	get: function () { return GetStartedCard.GetStartedCard; }
+});

package/lib/node_modules/@carbon/colors/es/index.js

@@ -9,8 +9,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var purple50 = '#a56eff';
 var purple70 = '#6929c4';
 var blue90 = '#001d6c';
+var gray20 = '#e0e0e0';
+var gray70 = '#525252';
 
 exports.blue90 = blue90;
+exports.gray20 = gray20;
+exports.gray70 = gray70;
+exports.purple50 = purple50;
 exports.purple70 = purple70;

package/lib/settings.d.ts

@@ -10,6 +10,7 @@ export const pkg: {
         AboutModal: boolean;
         APIKeyModal: boolean;
         Cascade: boolean;
+        Checklist: boolean;
         CreateModal: boolean;
         CreateFullPage: boolean;
         CreateFullPageStep: boolean;
@@ -81,6 +82,7 @@ export const pkg: {
         FilterPanelLabel: boolean;
         FilterPanelSearch: boolean;
         ConditionBuilder: boolean;
+        GetStartedCard: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;
@@ -98,7 +100,6 @@ export const pkg: {
         DescriptionListRow: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;
-        Checklist: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.38.0-alpha.5+70e9c92e4",
+  "version": "2.39.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.35.0",
+    "@carbon/ibm-products-styles": "^2.37.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "70e9c92e41968c9840e77d15e721193d085d50a1"
+  "gitHead": "90e3441d8fdfc65023988bd734089c72fba0799b"
 }

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

@@ -1,11 +1,11 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
 //
 
-// AboutModal uses the following Carbon components:
+// Checklist uses the following Carbon components:
 // Button, IconButton
 
 @use '@carbon/react/scss/components/button';

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,135 @@
+/* stylelint-disable carbon/layout-token-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/react/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-top: $spacing-05;
+    padding-left: $spacing-05;
+  }
+
+  .#{$block-class}__status {
+    position: absolute;
+    z-index: 2;
+    top: $spacing-05;
+    right: $spacing-05;
+  }
+
+  .#{$block-class}__header-body-container {
+    display: flex;
+  }
+
+  .#{$block-class}__header {
+    padding-right: $spacing-09;
+
+    @include breakpoint-down(lg) {
+      padding-bottom: 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-top: to-rem(-50px);
+      margin-bottom: -$spacing-09;
+    }
+  }
+
+  .#{$block-class}__sequence ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-top: to-rem(-56px);
+      margin-bottom: -$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-right: 0;
+    }
+
+    .#{$block-class}__icon svg {
+      margin-right: $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-right: $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/TagOverflow/_tag-overflow.scss

@@ -9,6 +9,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -20,15 +23,26 @@
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
+$block-class-overflow: #{$block-class}-popover;
+$block-class-modal: #{$block-class}-modal;
 
 .#{$block-class} {
   display: flex;
   width: 100%;
   min-width: $spacing-12;
   align-items: center;
+  justify-content: flex-start;
   white-space: nowrap;
 }
 
+.#{$block-class}--align-end {
+  justify-content: flex-end;
+}
+
+.#{$block-class}--align-center {
+  justify-content: center;
+}
+
 .#{$block-class}--multiline {
   flex-wrap: wrap;
 }
@@ -53,3 +67,146 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
   display: inline-block;
   max-width: $spacing-09;
 }
+
+.#{$block-class-overflow} {
+  display: inline-block;
+  vertical-align: bottom;
+  .#{c4p-settings.$carbon-prefix}--tag.#{c4p-settings.$carbon-prefix}--tag--interactive {
+    border: 0;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--popover
+    .#{c4p-settings.$carbon-prefix}--popover-content {
+    padding: $spacing-05;
+  }
+}
+
+.#{$block-class-overflow}--hidden {
+  overflow: hidden;
+  max-width: 0;
+  visibility: hidden;
+}
+
+@include mixins.block-wrap('#{$block-class-overflow}__el') {
+  &.#{$block-class-overflow}__el {
+    // removes the min width in Carbon
+    min-width: initial;
+    text-align: left;
+  }
+
+  .#{$block-class-overflow}__trigger {
+    font-family: inherit;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link.#{c4p-settings.$carbon-prefix}--link:visited {
+    display: inline-block;
+    margin: $spacing-03 0 $spacing-02; // to match the tags
+    color: $link-inverse;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--link:active,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited:hover {
+    color: $text-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link {
+    margin-top: $spacing-03;
+    color: $link-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{c4p-settings.$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{c4p-settings.$carbon-prefix}--tag {
+    @include type.type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    min-width: initial;
+    min-height: initial;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon {
+    // undo override by .#{c4p-settings.$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 $spacing-01 $focus;
+  }
+}
+
+@include mixins.block-wrap('#{$block-class-modal}') {
+  &.#{$block-class-modal} {
+    // not to be overridden by use in tag set
+    text-align: initial;
+    white-space: initial;
+  }
+
+  .#{$block-class-modal}__container {
+    @include breakpoint(md) {
+      height: 90%;
+      max-height: 450px;
+    }
+  }
+
+  .#{$block-class-modal}__search {
+    margin-top: $spacing-05;
+    margin-bottom: 0;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade {
+    position: relative;
+    margin-right: $spacing-05;
+    margin-left: $spacing-05;
+  }
+
+  .#{$block-class-modal}__body {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class-modal}__header {
+    padding-right: 0;
+    margin-right: $spacing-05;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
+    position: absolute;
+    top: calc(-1 * #{$spacing-11});
+    left: 0;
+    width: 100%;
+    height: $spacing-07;
+    background: linear-gradient(to bottom, transparent, $layer-01);
+    content: '';
+  }
+}

package/scss/components/_index-released-only-with-carbon.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 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.
@@ -12,6 +12,7 @@
 @use './APIKeyModal/index-with-carbon' as *;
 @use './ActionSet/index-with-carbon' as *;
 @use './Cascade/index-with-carbon' as *;
+@use './Checklist/index-with-carbon' as *;
 @use './CreateModal/index-with-carbon' as *;
 @use './CreateFullPage/index-with-carbon' as *;
 @use './CreateSidePanel/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 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.
@@ -12,6 +12,7 @@
 @use './APIKeyModal';
 @use './ActionSet';
 @use './Cascade';
+@use './Checklist';
 @use './CreateModal';
 @use './CreateFullPage';
 @use './CreateSidePanel';

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

@@ -14,6 +14,7 @@
 @use './ActionSet/index-with-carbon' as *;
 @use './ButtonMenu/index-with-carbon' as *;
 @use './Cascade/index-with-carbon' as *;
+@use './Checklist/index-with-carbon' as *;
 @use './ComboButton/index-with-carbon' as *;
 @use './CreateFullPage/index-with-carbon' as *;
 @use './CreateModal/index-with-carbon' as *;
@@ -75,3 +76,4 @@
 @use './TagOverflow/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;
 @use './ConditionBuilder/index-with-carbon' as *;
+@use './GetStartedCard/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -83,3 +83,4 @@
 @use './TagOverflow';
 @use './FilterPanel';
 @use './ConditionBuilder';
+@use './GetStartedCard';