@odx/ui 3.9.1 → 3.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 3.9.2
+
+### Patch Changes
+
+- bb425b3: New image-card variant for card component
+
 ## 3.9.1
 
 ### Patch Changes

package/core-theme.css

@@ -3144,6 +3144,8 @@ html body .odx-fs-italic {
 }
 
 .odx-card {
+  --odx-card-main-padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  --odx-card-gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
   transition-property: box-shadow, outline-color, color;
@@ -3160,7 +3162,7 @@ html body .odx-fs-italic {
   behavior: button;
   border-radius: var(--odx-v-border-radius);
   display: block;
-  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding: var(--odx-card-main-padding);
   position: relative;
 }
 .odx-card:focus-visible {
@@ -3170,14 +3172,18 @@ html body .odx-fs-italic {
   outline-color: transparent;
   pointer-events: none;
 }
+.odx-card--image-card {
+  --odx-card-main-padding: calc(var(--odx-vertical-rythm-base-size) * 1);
+  overflow: clip;
+}
 .odx-card.is-disabled * {
   color: var(--odx-c-text-disabled);
 }
 .odx-card__container {
   display: flex;
-  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  gap: var(--odx-card-gap);
 }
-.odx-card--default .odx-card__container {
+.odx-card--default .odx-card__container, .odx-card--image-card .odx-card__container {
   flex-direction: column;
 }
 @media (min-width: 480px) {
@@ -3185,23 +3191,6 @@ html body .odx-fs-italic {
     flex-direction: column;
   }
 }
-.odx-card__content {
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
-}
-.odx-card--default .odx-card__title {
-  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1.5);
-  font-weight: var(--odx-typography-font-weight-medium);
-  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-}
-.odx-card:focus-visible, .odx-card:focus-within:has(:focus-visible) {
-  box-shadow: var(--odx-v-box-shadow-layer-1);
-}
-@media (hover: hover){
-.odx-card:hover {
-  box-shadow: var(--odx-v-box-shadow-layer-1);
-}
-}
 .odx-card--launch-tile .odx-card__container, .odx-card--launch-tile-centered .odx-card__container {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -3215,6 +3204,41 @@ html body .odx-fs-italic {
     gap: calc(var(--odx-vertical-rythm-base-size) * 1);
   }
 }
+.odx-card-image {
+  display: block;
+  margin: calc(var(--odx-card-main-padding) * -1) calc(var(--odx-card-main-padding) * -1) 0 calc(var(--odx-card-main-padding) * -1);
+  max-height: var(--odx-card-image-max-height);
+  max-width: -moz-max-content;
+  max-width: max-content;
+  overflow: clip;
+}
+.odx-card-image img {
+  aspect-ratio: var(--odx-card-image-aspect-ratio);
+  display: block;
+  height: auto;
+  max-width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.odx-card .odx-chip-list-row:has(.odx-chip) {
+  left: var(--odx-card-main-padding);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.25) 0;
+  position: absolute;
+  top: var(--odx-card-main-padding);
+  width: calc(100% - var(--odx-vertical-rythm-base-size) * 1.6667 - var(--odx-card-main-padding) - var(--odx-vertical-rythm-base-size) * 1.25);
+}
+.odx-card--default .odx-card__content {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
+}
+.odx-card--launch-tile .odx-card__content, .odx-card--launch-tile-centered .odx-card__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: var(--odx-card-content-vertical-alignment);
+}
+.odx-card--default .odx-card__title {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+}
 .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1.25);
@@ -3233,15 +3257,17 @@ html body .odx-fs-italic {
     font-size: calc(var(--odx-vertical-rythm-base-size) * 1.0417);
   }
 }
+.odx-card:focus-visible, .odx-card:focus-within:has(:focus-visible) {
+  box-shadow: var(--odx-v-box-shadow-layer-1);
+}
+@media (hover: hover){
+.odx-card:hover {
+  box-shadow: var(--odx-v-box-shadow-layer-1);
+}
+}
 .odx-card--launch-tile .odx-card__subtitle, .odx-card--launch-tile-centered .odx-card__subtitle {
   display: block;
 }
-.odx-card--launch-tile .odx-card__content, .odx-card--launch-tile-centered .odx-card__content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: var(--odx-card-content-vertical-alignment);
-}
 @media (min-width: 480px) {
   .odx-card__content {
     padding-right: unset;
@@ -3281,7 +3307,10 @@ html body .odx-fs-italic {
 }
 .odx-card--default .odx-card__footer {
   display: block;
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  margin-top: var(--odx-card-main-padding);
+}
+.odx-card--image-card .odx-card__footer {
+  display: none;
 }
 @media (min-width: 480px) {
   .odx-card__footer {
@@ -3297,8 +3326,8 @@ html body .odx-fs-italic {
 .odx-card > .odx-action-group {
   margin: 0;
   position: absolute;
-  right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  top: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  right: var(--odx-card-main-padding);
+  top: var(--odx-card-main-padding);
 }
 .odx-card.is-disabled .odx-avatar {
   color: var(--odx-c-text-disabled);

package/package.json

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

package/scss/components/card.component.scss

@@ -4,6 +4,7 @@
 @use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
+@use '../layout/typography' as *;
 
 :root {
   --odx-card-avatar-size: 64px;
@@ -17,12 +18,22 @@
 
 .odx-card {
   $root: &;
-  $main-padding: dimensions.get-size(math.div(12, 24));
+
+  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
+  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
+
+  $main-padding: var(--odx-card-main-padding);
 
   @include motion.transition(box-shadow outline-color color);
   @include utils.interactive(false);
   @include utils.with-outline-bold();
 
+  &--image-card {
+    --odx-card-main-padding: #{dimensions.get-size(1)};
+
+    overflow: clip;
+  }
+
   background-color: var(--odx-c-background-content);
   behavior: button;
   border-radius: var(--odx-v-border-radius);
@@ -36,9 +47,10 @@
 
   &__container {
     display: flex;
-    gap: $main-padding;
+    gap: var(--odx-card-gap);
 
-    #{$root}--default & {
+    #{$root}--default &,
+    #{$root}--image-card & {
       flex-direction: column;
     }
 
@@ -47,30 +59,9 @@
         flex-direction: column;
       }
     }
-  }
-
-  &__content {
-    padding-right: dimensions.get-size(math.div(40, 24));
-  }
-
-  &--default {
-    #{$root}__title {
-      line-height: dimensions.get-size(math.div(36, 24));
-      padding-right: dimensions.get-size(math.div(36, 24));
-
-      @include typography.font-weight(medium);
-    }
-  }
-
-  &:focus-visible,
-  &:hover,
-  &:focus-within:has(:focus-visible) {
-    box-shadow: var(--odx-v-box-shadow-layer-1);
-  }
 
-  &--launch-tile,
-  &--launch-tile-centered {
-    #{$root}__container {
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
       @include dimensions.padding-y(0.5);
       @include dimensions.padding-x(math.div(8, 24));
 
@@ -82,8 +73,55 @@
         gap: dimensions.get-size(1);
       }
     }
+  }
+
+  &-image {
+    $img-margin: calc(#{$main-padding} * -1);
 
-    #{$root}__title {
+    display: block;
+    margin: $img-margin $img-margin 0 $img-margin;
+    max-height: var(--odx-card-image-max-height);
+    max-width: max-content;
+    overflow: clip;
+
+    img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      height: auto;
+      max-width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .odx-chip-list-row:has(.odx-chip) {
+    left: $main-padding;
+    padding: dimensions.get-size(math.div(6, 24)) 0;
+    position: absolute;
+    top: $main-padding;
+    width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
+  }
+
+  &__content {
+    #{$root}--default & {
+      padding-right: dimensions.get-size(math.div(40, 24));
+    }
+
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: var(--odx-card-content-vertical-alignment);
+    }
+  }
+
+  &__title {
+    #{$root}--default & {
+      padding-right: dimensions.get-size(math.div(36, 24));
+    }
+
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
       font-size: dimensions.get-size(math.div(20, 24));
       line-height: dimensions.get-size(math.div(30, 24));
       overflow-wrap: anywhere;
@@ -97,17 +135,19 @@
         font-size: dimensions.get-size(math.div(25, 24));
       }
     }
+  }
 
+  &:focus-visible,
+  &:hover,
+  &:focus-within:has(:focus-visible) {
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+  }
+
+  &--launch-tile,
+  &--launch-tile-centered {
     #{$root}__subtitle {
       display: block;
     }
-
-    #{$root}__content {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      justify-content: var(--odx-card-content-vertical-alignment);
-    }
   }
 
   @include breakpoints.up(phone) {
@@ -159,6 +199,10 @@
       margin-top: $main-padding;
     }
 
+    #{$root}--image-card & {
+      display: none;
+    }
+
     @include breakpoints.up(phone) {
       #{$root}--launch-tile-centered & {
         justify-content: center;