@carbon/ibm-products-web-components 0.24.0 → 0.25.0-rc.0

package/scss/components/checklist/checklist.scss

@@ -0,0 +1,65 @@
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Checklist/index' as checklist;
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+
+$baseClass: #{$prefix}--checklist;
+
+:host(#{$prefix}-checklist) {
+  .#{$baseClass}__toggle {
+    margin-block-start: calc(-1 * spacing.$spacing-03);
+    margin-inline: auto calc(-1 * spacing.$spacing-03);
+  }
+}
+
+:host(#{$prefix}-checklist-item) {
+  display: flex;
+  margin-block-end: spacing.$spacing-03;
+}
+
+:host(#{$prefix}-checklist-item:last-of-type) {
+  margin-block-end: 0;
+}
+
+:host(#{$prefix}-checklist-group) {
+  display: block;
+  padding: spacing.$spacing-05;
+  border-block-start: 1px solid theme.$border-subtle-01;
+}
+
+:host(#{$prefix}-checklist-group:first-of-type) {
+  border-block-start: none;
+}
+
+.#{$baseClass}__label--clickable {
+  color: theme.$link-primary;
+  cursor: pointer;
+}
+
+.#{$baseClass}__label--clickable:hover {
+  color: theme.$link-primary-hover;
+  text-decoration: underline;
+}
+
+.#{$baseClass}__chart {
+  border-radius: 50%;
+  background-image: conic-gradient(
+    colors.$purple-50 var(--#{$prefix}-num-degrees),
+    tag.$tag-background-gray var(--#{$prefix}-num-degrees) 360deg
+  );
+}

package/telemetry.yml

@@ -28,6 +28,7 @@ collect:
         - title
         - type
         - value
+        - view-all-label
         - within-grid
         # c4p-about-modal
         - additionalInfo
@@ -38,6 +39,19 @@ collect:
         - onc4p-about-modal-beingclosed
         - onc4p-about-modal-closed
         - version
+        # c4p-checklist
+        - chart-label
+        - chart-value
+        - disable-toggle
+        - onc4p-checklist-toggle
+        - onc4p-checklist-view-all
+        - toggle-aria-label
+        - toggle-label
+        - toggle-label-align
+        # c4p-checklist-item
+        - clickable
+        - onc4p-checklist-item-clicked
+        - status
         # c4p-interstitial-screen
         - fullscreen
         - onc4p-interstitial-beingclosed
@@ -65,7 +79,6 @@ collect:
         # c4p-notification-footer
         - onc4p-notification-settings
         - onc4p-notification-view-all
-        - view-all-label
         # c4p-notification-panel
         - date-time-locale
         - dismiss-all-label
@@ -134,12 +147,17 @@ collect:
         - tags-data
       allowedAttributeStringValues:
         # General - boolean attributes
-        - 'true'
-        - 'false'
+        - "true"
+        - "false"
         # General - kind
-        - '403'
-        - '404'
+        - "403"
+        - "404"
+        - checked
         - custom
+        - disabled
+        - error
+        - indeterminate
+        - unchecked
         # General - size
         - 2xl
         - lg
@@ -171,3 +189,6 @@ collect:
   js:
     functions: {}
     tokens: null
+  js:
+    functions: {}
+    tokens: null