@odx/ui 2.12.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 ## 2.9.9
 
+## 2.13.0
+
+### Minor Changes
+
+- 909ed1a: new error page component
+
+## 2.12.1
+
+### Patch Changes
+
+- 9b0e638: Warning and Confirmation Variants to chip
+
 ## 2.12.0
 
 ### Minor Changes

package/core-theme.css

@@ -563,7 +563,7 @@ html body {
   font-family: var(--odx-typography-font-family);
 }
 
-.odx-title, .odx-header__title, .odx-area-header__title, .odx-error-page__title, .odx-content h1, .odx-content h2, .odx-content h3, .odx-content h4, .odx-content h5, .odx-content h6, .odx-subtitle, .odx-area-header__subtitle, .odx-error-page__description,
+.odx-title, .odx-header__title, .odx-area-header__title, .odx-content h1, .odx-content h2, .odx-content h3, .odx-content h4, .odx-content h5, .odx-content h6, .odx-subtitle, .odx-area-header__subtitle,
 [class*=odx-subtitle-],
 [class*=odx-title-] {
   font-weight: var(--odx-typography-font-weight-bold);
@@ -571,7 +571,7 @@ html body {
   color: var(--odx-c-headline);
 }
 
-.odx-subtitle, .odx-area-header__subtitle, .odx-error-page__description,
+.odx-subtitle, .odx-area-header__subtitle,
 [class*=odx-subtitle-] {
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
@@ -609,7 +609,7 @@ html body {
   }
 }
 
-.odx-title-3, .odx-error-page__title, .odx-content h3,
+.odx-title-3, .odx-content h3,
 .odx-subtitle-3 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -617,7 +617,7 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
 }
 @media (min-width: 768px) {
-  .odx-title-3, .odx-error-page__title, .odx-content h3,
+  .odx-title-3, .odx-content h3,
   .odx-subtitle-3 {
     padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.125);
     padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.125);
@@ -625,7 +625,7 @@ html body {
   }
 }
 
-.odx-title-4, .odx-area-header--large .odx-area-header__title, .odx-content h4,
+.odx-title-4, .odx-error-page__title, .odx-area-header--large .odx-area-header__title, .odx-content h4,
 .odx-subtitle-4 {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.375);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.375);
@@ -635,8 +635,7 @@ html body {
 
 .odx-title-5, .odx-area-header--medium .odx-area-header__title, .odx-content h5,
 .odx-subtitle-5,
-.odx-area-header--xlarge .odx-area-header__subtitle,
-.odx-error-page__description {
+.odx-area-header--xlarge .odx-area-header__subtitle {
   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);
@@ -1957,7 +1956,7 @@ html body .odx-fs-italic {
 .odx-icon--large {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 1.3334);
 }
-.odx-icon--xlarge, .odx-error-page__icon {
+.odx-icon--xlarge {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 2);
 }
 .odx-icon--inline {
@@ -2022,11 +2021,6 @@ html body .odx-fs-italic {
   margin-left: 0;
 }
 
-.odx-error-page {
-  align-self: center;
-  text-align: center;
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 2);
-}
 /*
   CDK
 */
@@ -2568,6 +2562,22 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-confirmation-disabled);
   color: var(--odx-c-confirmation-text-disabled);
 }
+.odx-button--warning {
+  background-color: var(--odx-c-warning);
+  color: var(--odx-c-warning-text);
+}
+@media (hover: hover){
+.odx-button--warning:hover {
+  background-color: var(--odx-c-warning-hover);
+}
+}
+.odx-button--warning.odx-dropdown-host[aria-expanded=true], .odx-button--warning.is-active, .odx-button--warning:active {
+  background-color: var(--odx-c-warning-active);
+}
+.odx-button--warning:disabled, .odx-button--warning.is-disabled {
+  background-color: var(--odx-c-warning-disabled);
+  color: var(--odx-c-warning-text-disabled);
+}
 .odx-button--ghost, .odx-main-menu__close, .odx-main-menu-button, .odx-action-group > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
@@ -3544,6 +3554,14 @@ body {
   background-color: var(--odx-c-danger);
   color: var(--odx-c-danger-text);
 }
+.odx-chip--warning {
+  background-color: var(--odx-c-warning);
+  color: var(--odx-c-warning-text);
+}
+.odx-chip--confirmation {
+  background-color: var(--odx-c-confirmation);
+  color: var(--odx-c-confirmation-text);
+}
 
 .odx-chip-list {
   display: flex;
@@ -3698,6 +3716,37 @@ body {
   max-height: 359px;
 }
 
+.odx-error-page {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.odx-error-page__container {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+.odx-error-page__icon-container {
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 2);
+}
+.odx-error-page__actions {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--odx-grid-gutter);
+  justify-content: center;
+  width: 100%;
+}
+.odx-error-page__footer {
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 2);
+  text-align: center;
+}
+
 .odx-expandable-list-item__header {
   display: block;
   position: relative;

package/package.json

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

package/scss/components/button.component.scss

@@ -10,7 +10,7 @@
 @use 'icon.component';
 
 .odx-button {
-  $variants: secondary, primary, highlight, success, danger, confirmation;
+  $variants: secondary, primary, highlight, success, danger, confirmation, warning;
   $icon-margin: 0.25;
 
   @extend .odx-button--secondary;

package/scss/components/chip.component.scss

@@ -4,8 +4,8 @@
 @use '../abstract/motion';
 @use '../abstract/typography';
 
-$sizes: 'small' 1 -1, 'medium' 1.5 0;
-$variants: 'secondary', 'highlight', 'success', 'danger';
+$sizes: small 1 -1, medium 1.5 0;
+$variants: secondary, highlight, success, danger, warning, confirmation;
 
 .odx-chip {
   $root: &;

package/scss/components/error-page.component.scss

@@ -0,0 +1,46 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+@use '../layout/typography';
+
+.odx-error-page {
+  @include dimensions.margin-x(1);
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  &__title {
+    @extend .odx-title-4;
+  }
+
+  &__container {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__icon-container {
+    @include dimensions.margin(2, bottom);
+  }
+
+  &__actions {
+    @include dimensions.margin(2, top);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--odx-grid-gutter);
+    justify-content: center;
+    width: 100%;
+  }
+
+  &__footer {
+    @include dimensions.padding(2, bottom);
+
+    text-align: center;
+  }
+}

package/scss/core.scss

@@ -49,6 +49,7 @@ Layout
 @use 'components/content-box.component';
 @use 'components/datepicker.component';
 @use 'components/dropdown.component';
+@use 'components/error-page.component';
 @use 'components/expandable-list-item.component';
 @use 'components/form-field.component';
 @use 'components/header.component';

package/scss/layout/_application.scss

@@ -57,24 +57,3 @@
     margin-left: 0;
   }
 }
-
-.odx-error-page {
-  align-self: center;
-  text-align: center;
-
-  @include dimensions.padding(2, top);
-
-  &__icon {
-    @extend .odx-icon--xlarge;
-  }
-
-  &__title {
-    @extend .odx-title;
-    @extend .odx-title-3;
-  }
-
-  &__description {
-    @extend .odx-subtitle;
-    @extend .odx-subtitle-5;
-  }
-}