@odx/ui 3.5.8 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @odx/ui
 
+## 3.7.0
+
+### Minor Changes
+
+- 8d72579: Added headline classes styling
+
+## 3.6.0
+
+### Minor Changes
+
+- 8993495: Added possibility to display a subtitle for radio button component
+
+### Patch Changes
+
+- 4b50b62: Fixed behavior for disabled options in the selection component
+
 ## 3.5.8
 
 ### Patch Changes

package/core-theme.css

@@ -663,7 +663,7 @@ html body {
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
 }
-.odx-text--small, .odx-checkbox__subtitle {
+.odx-text--small, .odx-radio-button__subtitle, .odx-checkbox__subtitle {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
@@ -676,6 +676,69 @@ html body {
   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-headline,
+[class*=odx-headline-] {
+  color: var(--odx-c-headline);
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+}
+
+.odx-headline-sm {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
+  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)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-sm {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
+  }
+}
+
+.odx-headline-md {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.75);
+  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)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-md {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 3.3334);
+  }
+}
+
+.odx-headline-lg {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.9167);
+  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)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-lg {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 4.0834);
+  }
+}
+
+.odx-headline-xl {
+  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) * 2);
+  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)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-xl {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 4.0834);
+  }
+}
+
 .odx-text-list, .odx-content ol,
 .odx-content ul,
 .odx-text-list ol,
@@ -4178,6 +4241,7 @@ html body .odx-fs-italic {
 }
 .odx-form-field__control > textarea {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   height: calc(var(--odx-vertical-rythm-base-size) * 3);
   resize: vertical;
 }
@@ -5418,11 +5482,13 @@ html body .odx-fs-italic {
   font-weight: var(--odx-typography-font-weight-normal);
   letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
   border-radius: var(--odx-v-border-radius-controls);
-  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
+.odx-option:not(.is-disabled) {
+  cursor: pointer;
+}
 .odx-option:last-child {
   margin-bottom: 0;
 }
@@ -5430,7 +5496,7 @@ html body .odx-fs-italic {
   background-color: var(--gray-50);
 }
 @media (hover: hover){
-.odx-option:hover {
+.odx-option:hover:not(.is-disabled) {
   background-color: var(--gray-50);
 }
 }
@@ -5439,7 +5505,6 @@ html body .odx-fs-italic {
 }
 .odx-option.is-disabled {
   color: var(--odx-control-color-disabled);
-  pointer-events: none;
 }
 .odx-option > .odx-checkbox {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -5626,6 +5691,8 @@ html body .odx-fs-italic {
 }
 .odx-radio-button__content {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  display: flex;
+  flex-direction: column;
   padding-left: 2px;
 }
 .odx-radio-button__content:empty {

package/package.json

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

package/scss/components/form-field.component.scss

@@ -137,7 +137,7 @@ $form-field-inner-padding: math.div(8, 24);
     }
 
     > textarea {
-      @include dimensions.padding(0.25, top);
+      @include dimensions.padding-y(0.25);
 
       height: dimensions.get-size(3);
       resize: vertical;

package/scss/components/option.component.scss

@@ -11,15 +11,18 @@
   @include typography.font-weight(normal);
 
   border-radius: var(--odx-v-border-radius-controls);
-  cursor: pointer;
   user-select: none;
 
+  &:not(.is-disabled) {
+    cursor: pointer;
+  }
+
   &:last-child {
     margin-bottom: 0;
   }
 
   &.is-active,
-  &:hover {
+  &:hover:not(.is-disabled) {
     background-color: var(--gray-50);
   }
 
@@ -29,7 +32,6 @@
 
   &.is-disabled {
     color: var(--odx-control-color-disabled);
-    pointer-events: none;
   }
 
   > .odx-checkbox {

package/scss/components/radio-button.component.scss

@@ -3,6 +3,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use '../abstract/motion';
+@use '../layout/typography' as *;
 
 .odx-radio-button {
   $root: &;
@@ -42,6 +43,10 @@
     }
   }
 
+  &__subtitle {
+    @extend .odx-text--small;
+  }
+
   &__input {
     @include utils.visually-hidden();
   }
@@ -110,6 +115,8 @@
   &__content {
     @include dimensions.margin(0.5, left);
 
+    display: flex;
+    flex-direction: column;
     padding-left: 2px;
 
     &:empty {

package/scss/layout/_typography.scss

@@ -112,3 +112,46 @@ html body {
     @include typography.font-size(-2);
   }
 }
+
+.odx-headline,
+[class*='odx-headline-'] {
+  color: var(--odx-c-headline);
+
+  @include typography.font-weight(normal);
+}
+
+.odx-headline-sm {
+  @include dimensions.line-height(2, math.div(40, 24));
+  @include typography.font-size(5);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(3, math.div(64, 24));
+  }
+}
+
+.odx-headline-md {
+  @include dimensions.line-height(2, math.div(42, 24));
+  @include typography.font-size(6);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(4, math.div(80, 24));
+  }
+}
+
+.odx-headline-lg {
+  @include dimensions.line-height(2, math.div(46, 24));
+  @include typography.font-size(7);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(5, math.div(98, 24));
+  }
+}
+
+.odx-headline-xl {
+  @include dimensions.line-height(2);
+  @include typography.font-size(8);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(5, math.div(98, 24));
+  }
+}