@carbon/ibm-products-web-components 0.18.0-rc.0 → 0.19.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.18.0-rc.0",
+  "version": "0.19.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -54,17 +54,18 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.65.0-rc.0",
-    "@carbon/styles": "1.82.0",
-    "@carbon/web-components": "2.30.0",
+    "@carbon/ibm-products-styles": "^2.66.0-rc.0",
+    "@carbon/styles": "1.83.0",
+    "@carbon/web-components": "2.32.0",
     "@ibm/telemetry-js": "^1.9.1",
+    "@lit/context": "^1.1.5",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
-    "@carbon/icon-helpers": "^10.59.0",
-    "@carbon/icons": "^11.60.0",
-    "@carbon/motion": "^11.28.0",
+    "@carbon/icon-helpers": "^10.60.0",
+    "@carbon/icons": "^11.61.0",
+    "@carbon/motion": "^11.29.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-alias": "^5.1.1",
@@ -72,9 +73,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
     "@storybook/addon-toolbars": "^8.6.12",
     "@storybook/blocks": "^8.6.12",
     "@storybook/theming": "^8.6.12",
@@ -87,9 +88,9 @@
     "c8": "^10.1.3",
     "cssnano": "^7.0.6",
     "eslint": "^9.14.0",
-    "eslint-config-carbon": "^3.22.0",
+    "eslint-config-carbon": "^3.23.0",
     "globby": "^14.0.2",
-    "happy-dom": "^17.0.0",
+    "happy-dom": "^18.0.0",
     "playwright": "^1.51.1",
     "postcss": "^8.4.47",
     "remark-gfm": "^4.0.0",
@@ -106,5 +107,5 @@
     "vitest": "^3.0.1",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "8ca7903de81096548714d1a4c9b6a03cc598b5c3"
+  "gitHead": "a0df8e9f8fd3416467f69d3798933a850e9e0fad"
 }

package/scss/components/notification-panel/notification-footer.scss

@@ -0,0 +1,65 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+
+$block-class: #{$prefix}--notifications-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-notification-footer) {
+  display: flex;
+}
+.#{$block-class}__view-all-button {
+  display: flex;
+  align-items: center;
+  border-inline-end: 1px solid $border-subtle-01;
+  color: $text-primary;
+  inline-size: 100%;
+  max-inline-size: calc(100% - 2.5rem);
+  min-block-size: 2.5rem;
+  --cds-link-primary: $text-primary;
+  --cds-link-primary-hover: $text-primary;
+  --cds-layout-size-height-min: 2.5rem;
+  --cds-layout-size-height-sm: 2.5rem;
+  --cds-layout-size-height: 2.5rem;
+  --cds-layout-size-height-lg: 2.5rem;
+  --cds-layout-size-height-max: 2.5rem;
+  --cds-layout-size-height-2xl: 2.5rem;
+}
+.#{$block-class}__settings-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  --cds-link-primary: $text-primary;
+  --cds-link-primary-hover: $text-primary;
+  --cds-layout-size-height-min: 2.5rem;
+  --cds-layout-size-height-sm: 2.5rem;
+  --cds-layout-size-height: 2.5rem;
+  --cds-layout-size-height-lg: 2.5rem;
+  --cds-layout-size-height-max: 2.5rem;
+  --cds-layout-size-height-2xl: 2.5rem;
+}
+.#{$block-class}__settings-button .#{$carbon-prefix}--btn__icon {
+  margin: 0;
+}

package/scss/components/notification-panel/notification-panel.scss

@@ -0,0 +1,59 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+
+$block-class: #{$prefix}--notifications-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-notification-panel) {
+  .c4p--notifications-panel__do-not-disturb-toggle {
+    display: block;
+    margin-block-start: -$spacing-05;
+  }
+}
+:host(#{$prefix}-notification-panel)
+  ::slotted(.c4p--notifications-panel__bottom-actions) {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__header-container {
+  --#{$carbon-prefix}-heading-06-font-size: --#{$carbon-prefix}-heading-compact-01-font-size;
+  --#{$carbon-prefix}-heading-06-font-weight: --#{$carbon-prefix}-heading-compact-01-font-weight;
+  --#{$carbon-prefix}-heading-06-line-height: --#{$carbon-prefix}-heading-compact-01-line-height;
+  --#{$carbon-prefix}-heading-06-letter-spacing: --#{$carbon-prefix}-heading-compact-01-letter-spacing;
+}
+.#{$block-class}__dismiss-button {
+  --#{$carbon-prefix}-link-primary: --#{$carbon-prefix}-text-primary;
+  --#{$carbon-prefix}-link-primary-hover: --#{$carbon-prefix}-text-primary;
+}
+.#{$block-class}__bottom-actions-container {
+  position: sticky;
+  z-index: 2;
+  background-color: $layer-01;
+  block-size: $spacing-08;
+  border-block-start: 1px solid $border-subtle-01;
+  inset-block-end: 0;
+  min-block-size: $spacing-08;
+}

package/scss/components/notification-panel/notification.scss

@@ -0,0 +1,147 @@
+/*
+* Copyright IBM Corp. 2023, 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/NotificationsPanel/index' as *;
+$block-notification-class: #{$prefix}--notifications-panel__notification;
+
+:host(#{$prefix}-notification) {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding: $spacing-05;
+  border: 0;
+  background-color: $layer-01;
+  cursor: pointer;
+  inline-size: 100%;
+  min-block-size: 6.25rem;
+  text-align: start;
+  transition: background-color $duration-moderate-02 motion(standard);
+  @media screen and (prefers-reduced-motion: reduce) {
+    &::before {
+      position: absolute;
+      margin: 0 auto;
+      background-color: $border-subtle-01;
+      block-size: 1px;
+      content: '';
+      inline-size: calc(100% - (2 * #{$spacing-05}));
+      inset-block-start: 0;
+      transition: none;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    margin: 0 auto;
+    background-color: $border-subtle-01;
+    block-size: 1px;
+    content: '';
+    inline-size: calc(100% - (2 * #{$spacing-05}));
+    inset-block-start: 0;
+    transition: background-color $duration-moderate-02 motion(standard);
+  }
+
+  &:hover::before {
+    background-color: transparent;
+  }
+  .#{$block-notification-class}-status-icon {
+    margin-inline-end: $spacing-03;
+    min-inline-size: 1rem;
+    &.#{$block-notification-class}-status-icon-error {
+      fill: $support-error;
+    }
+    &.#{$block-notification-class}-status-icon-success {
+      fill: $support-success;
+    }
+    &.#{$block-notification-class}-status-icon-warning {
+      fill: $support-warning;
+    }
+    &.#{$block-notification-class}-status-icon-informational {
+      fill: $support-info;
+    }
+  }
+  .#{$block-notification-class}-time-label {
+    margin-block-end: $spacing-03;
+  }
+  .#{$block-notification-class}__dismiss-single-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: $text-primary;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    min-inline-size: 2rem;
+    opacity: 0;
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+    --cds-link-primary: --cds-text-primary;
+    --cds-link-primary-hover: --cds-text-primary;
+  }
+  .#{$block-notification-class}-time-label,
+  .#{$block-notification-class}-description {
+    @include type.type-style('label-01');
+
+    color: $text-secondary;
+  }
+  .#{$block-notification-class}-description {
+    display: block;
+  }
+}
+::slotted(.#{$block-notification-class}-title) {
+  @include type.type-style('heading-01');
+
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('regular');
+}
+::slotted(.#{$block-notification-class}-title-unread) {
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('semibold');
+}
+
+:host(.first-notification)::before {
+  content: none;
+}
+
+:host(:hover),
+:host(:focus) {
+  background-color: $layer-accent-01;
+  .#{$block-notification-class}__dismiss-single-button {
+    opacity: 1;
+  }
+
+  &::before {
+    background-color: transparent;
+  }
+}
+
+:host(.#{$block-notification-class}--next) {
+  &::before {
+    background-color: transparent;
+  }
+}

package/scss/components/notification-panel/story-styles.scss

@@ -0,0 +1,116 @@
+/*
+* Copyright IBM Corp. 2023, 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/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/type/scss/font-family' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+$story-prefix: #{$prefix}--notifications-panel__story;
+$block-class: #{$prefix}--notifications-panel;
+
+.#{$story-prefix}__story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+.#{$story-prefix}body-content {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-05;
+  gap: $spacing-05;
+}
+
+.#{$story-prefix}text-inputs {
+  display: flex;
+  gap: $spacing-05;
+
+  > * {
+    flex-basis: 50%;
+  }
+}
+
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-header {
+  background: $background-inverse;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$story-prefix}__header-panel {
+  padding: $spacing-10 $spacing-05 0;
+  font-weight: bold;
+  line-height: 1.4;
+  text-align: center;
+}
+.#{$block-class}__notification-description {
+  @include type.type-style('label-01');
+
+  color: $text-secondary;
+}
+
+.#{$block-class}__notification-read-more-button,
+.#{$block-class}__notification-read-less-button {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  padding: 0;
+  min-inline-size: 5.5rem;
+
+  .#{carbon-prefix}--btn__icon {
+    // stylelint-disable-next-line carbon/motion-easing-use
+    transition: transform $duration-moderate-02 ease;
+    /* stylelint-disable-next-line max-nesting-depth */
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+  &.#{$block-class}__notification-read-more-button {
+    .#{$carbon-prefix}--btn__icon {
+      transform: rotate(0deg);
+    }
+  }
+  &.#{$block-class}__notification-read-less-button {
+    .#{$carbon-prefix}--btn__icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+.#{$block-class}__notification-title {
+  @include type.type-style('heading-01');
+
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('regular');
+}
+
+.#{$block-class}__notification-title-unread {
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+  @include font-weight('semibold');
+}