@odx/ui 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/ui
 
+## 3.3.0
+
+### Minor Changes
+
+- 4375380: Add notification component and service
+
+## 3.2.2
+
+### Patch Changes
+
+- 3eb8c54: Large variant for button component
+- b3993a0: New condensed variant to rich-list component to set vrtical padding to 0 for list items
+
 ## 3.2.1
 
 ### Patch Changes

package/core-theme.css

@@ -2635,6 +2635,24 @@ html body .odx-fs-italic {
 .odx-button--small > .odx-icon[alignRight] {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
 }
+.odx-button--large {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  height: calc(var(--odx-vertical-rythm-base-size) * 2);
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)));
+}
+.odx-button--large > .odx-icon {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
+}
+.odx-button--large > .odx-icon[alignLeft] {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
+.odx-button--large > .odx-icon[alignRight] {
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
 
 .odx-action-group {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
@@ -5056,6 +5074,107 @@ html body .odx-fs-italic {
   border: none;
 }
 
+.odx-notification-center-overlay {
+  --odx-cdk-connected-overlay-min-height: calc(var(--odx-vertical-rythm-base-size) * 9);
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), calc(var(--odx-vertical-rythm-base-size) * 18));
+}
+.odx-notification-center-overlay .odx-dropdown {
+  --odx-cdk-connected-overlay-max-height: var(--odx-cdk-connected-overlay-max-height-modified);
+}
+
+.odx-notification-center {
+  --odx-notification-center-padding-x: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  --odx-notification-center-padding-y: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  --odx-notification-center-header-height: calc(var(--odx-vertical-rythm-base-size) * 2);
+  --odx-notification-center-footer-height: calc(var(--odx-vertical-rythm-base-size) * 2.5);
+  background-color: var(--odx-c-background-content);
+  max-height: min(var(--odx-cdk-connected-overlay-max-height), calc(var(--odx-vertical-rythm-base-size) * 15));
+}
+.odx-notification-center__header, .odx-notification-center__footer {
+  background-color: inherit;
+  border-radius: var(--odx-v-border-radius);
+  left: 0;
+  margin-right: var(--odx-notification-center-padding-x);
+  padding-left: var(--odx-notification-center-padding-x);
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+.odx-notification-center__header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  height: var(--odx-notification-center-header-height);
+  line-height: var(--odx-notification-center-header-height);
+  top: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-size: calc(var(--odx-typography-base-size) * 1);
+  font-weight: var(--odx-typography-font-weight-bold);
+  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+}
+.odx-notification-center__content {
+  display: grid;
+  padding-bottom: calc(var(--odx-notification-center-footer-height) - var(--odx-notification-center-padding-y));
+  padding-top: calc(var(--odx-notification-center-header-height) - var(--odx-notification-center-padding-y));
+}
+.odx-notification-center__content > .odx-list-item {
+  border-radius: 0;
+}
+.odx-notification-center__content > .odx-list-item:first-child {
+  border-top-left-radius: var(--odx-v-border-radius-controls);
+  border-top-right-radius: var(--odx-v-border-radius-controls);
+}
+.odx-notification-center__content > .odx-list-item:last-child {
+  border-bottom-left-radius: var(--odx-v-border-radius-controls);
+  border-bottom-right-radius: var(--odx-v-border-radius-controls);
+}
+.odx-notification-center__footer {
+  align-items: center;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  bottom: 0;
+  display: flex;
+  height: var(--odx-notification-center-footer-height);
+  justify-content: flex-end;
+}
+.odx-notification-center__footer > .odx-button {
+  margin: 0;
+}
+
+.odx-notification-item {
+  -moz-column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+       column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+  display: grid;
+  grid-template-areas: "avatar title actions" ". description .";
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+  min-width: calc(var(--odx-vertical-rythm-base-size) * 10);
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+}
+@media (min-width: 480px) {
+  .odx-notification-item {
+    max-width: calc(var(--odx-vertical-rythm-base-size) * 16);
+  }
+}
+.odx-notification-item__title, .odx-notification-item__description {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
+}
+.odx-notification-item__title {
+  align-self: center;
+  grid-area: title;
+}
+.odx-notification-item__description {
+  grid-area: description;
+  font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)*1/var(--odx-typography-negative-font-scaling-factor)));
+}
+.odx-notification-item__actions {
+  grid-area: actions;
+}
+
 .odx-option {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
@@ -5475,13 +5594,15 @@ html body .odx-fs-italic {
 }
 
 .odx-rich-list-item {
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 }
+.odx-rich-list:not(.odx-rich-list--condensed) > .odx-rich-list-item {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
 .odx-rich-list-item.is-disabled .odx-rich-list-item-header__title,
 .odx-rich-list-item.is-disabled .odx-rich-list-item-header .odx-avatar {
   color: var(--odx-c-text-disabled);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/button.component.scss

@@ -147,4 +147,24 @@
       @include dimensions.margin($icon-margin, left);
     }
   }
+
+  &--large {
+    $icon-margin: 0.5;
+
+    @include dimensions.height(2, 2);
+    @include dimensions.padding-x(2 * $icon-margin);
+    @include typography.font-size(1);
+
+    > .odx-icon {
+      @include dimensions.margin-x(-$icon-margin * math.div(2, 3));
+    }
+
+    > .odx-icon[alignLeft] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), right);
+    }
+
+    > .odx-icon[alignRight] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), left);
+    }
+  }
 }

package/scss/components/notification-center.component.scss

@@ -0,0 +1,79 @@
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-notification-center-overlay {
+  --odx-cdk-connected-overlay-min-height: #{dimensions.get-size(9)};
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(18)});
+
+  .odx-dropdown {
+    --odx-cdk-connected-overlay-max-height: var(--odx-cdk-connected-overlay-max-height-modified);
+  }
+}
+
+.odx-notification-center {
+  --odx-notification-center-padding-x: #{dimensions.get-size(0.5)};
+  --odx-notification-center-padding-y: #{dimensions.get-size(0.5)};
+  --odx-notification-center-header-height: #{dimensions.get-size(2)};
+  --odx-notification-center-footer-height: #{dimensions.get-size(2.5)};
+
+  background-color: var(--odx-c-background-content);
+  max-height: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(15)});
+
+  &__header,
+  &__footer {
+    background-color: inherit;
+    border-radius: var(--odx-v-border-radius);
+    left: 0;
+    margin-right: var(--odx-notification-center-padding-x);
+    padding-left: var(--odx-notification-center-padding-x);
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  &__header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    height: var(--odx-notification-center-header-height);
+    line-height: var(--odx-notification-center-header-height);
+    top: 0;
+    user-select: none;
+
+    @include typography.font-size(0);
+    @include typography.font-weight(bold);
+  }
+
+  &__content {
+    display: grid;
+    padding-bottom: calc(var(--odx-notification-center-footer-height) - var(--odx-notification-center-padding-y));
+    padding-top: calc(var(--odx-notification-center-header-height) - var(--odx-notification-center-padding-y));
+
+    > .odx-list-item {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-left-radius: var(--odx-v-border-radius-controls);
+        border-top-right-radius: var(--odx-v-border-radius-controls);
+      }
+
+      &:last-child {
+        border-bottom-left-radius: var(--odx-v-border-radius-controls);
+        border-bottom-right-radius: var(--odx-v-border-radius-controls);
+      }
+    }
+  }
+
+  &__footer {
+    align-items: center;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    bottom: 0;
+    display: flex;
+    height: var(--odx-notification-center-footer-height);
+    justify-content: flex-end;
+
+    > .odx-button {
+      margin: 0;
+    }
+  }
+}

package/scss/components/notification-item.component.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-notification-item {
+  $root: &;
+
+  column-gap: dimensions.get-size(math.div(16, 24));
+  display: grid;
+  grid-template-areas: 'avatar title actions' '. description .';
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+  min-width: dimensions.get-size(10);
+
+  @include dimensions.padding-x(0.25);
+
+  @include breakpoints.up(phone) {
+    max-width: dimensions.get-size(16);
+  }
+
+  &__title,
+  &__description {
+    @include dimensions.line-height(1);
+  }
+
+  &__title {
+    align-self: center;
+    grid-area: title;
+  }
+
+  &__description {
+    grid-area: description;
+
+    @include typography.font-size(-2);
+  }
+
+  &__actions {
+    grid-area: actions;
+  }
+}

package/scss/components/rich-list-item.component.scss

@@ -6,8 +6,13 @@
 
 .odx-rich-list-item {
   $root: &;
+  $parent: odx-rich-list;
 
-  @include dimensions.padding(math.div(8, 24));
+  @include dimensions.padding-x(math.div(8, 24));
+
+  .#{$parent}:not(.#{$parent}--condensed) > & {
+    @include dimensions.padding-y(math.div(8, 24));
+  }
 
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;

package/scss/core.scss

@@ -66,6 +66,8 @@ Layout
 @use 'components/menu.component';
 @use 'components/modal.component';
 @use 'components/navigation-back.component';
+@use 'components/notification-center.component';
+@use 'components/notification-item.component';
 @use 'components/option.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';