media-object-refinement

src/components/layout/CdrLayout.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<Layout>(), {
   queryType: 'container',
   flow: undefined,
   flowValue: 'auto',
+  containerName: undefined,
 });
 
 const style = useCssModule();
@@ -29,6 +30,10 @@ const rootProps = computed(() => {
   const classes = [baseClass];
   const inlineStyles: NameValuePair = {};
 
+  if (props.containerName) {
+    inlineStyles['container-name'] = props.containerName;
+  }
+
   // Add gap for entire grid
   if (props.gap !== 'zero') {
     classes.push(modifyClassName(baseClass, `gap-${props.gap}`));

src/components/layout/styles/vars/CdrLayout.vars.scss

@@ -6,6 +6,7 @@ $flows: row, column;
 
 @mixin cdr-layout-base-mixin() {
   display: grid;
+  container-type: inline-size;
 }
 
 // Adds in media and container queries for layouts that change at various breakpoints

src/components/mediaObject/CdrMediaObject.vue

@@ -66,13 +66,12 @@ const rootProps = computed(() => {
     inlineStyles['--cdr-media-object-row-align'] = overlayRowAlign;
     inlineStyles['--cdr-media-object-column-align'] = overlayColumnAlign;
 
-    // Use mediaHeight to generate row height
-    if (mediaHeight === 'string') {
-      additionalProps.rows = mediaHeight;
-    } else if (mediaHeight) {
-      additionalProps.rows = mediaHeight;
+    // Use mediaHeight to generate row height. Using 'auto' results in 0px height.
+    if (mediaHeight === 'auto') {
+      // Defaults to 9/16 ratio of container
+      additionalProps.rows = '56cqw';
     } else {
-      additionalProps.rows = 'auto';
+      additionalProps.rows = mediaHeight;
     }
   } else {
     // Get layout related props and inline styles based on media measurements and

src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap

@@ -302,7 +302,7 @@ exports[`CdrMediaObject > snapshot tests > media width dynamic 1`] = `
 exports[`CdrMediaObject > snapshot tests > overlay, row align, column align, content configured independently to 50% width 1`] = `
 <div
   class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--overlay"
-  style="--cdr-layout-rows: auto; --cdr-layout-columns: auto; --cdr-media-object-row-align: center; --cdr-media-object-column-align: end;"
+  style="--cdr-layout-rows: 56cqw; --cdr-layout-columns: auto; --cdr-media-object-row-align: center; --cdr-media-object-column-align: end;"
 >
   <!-- @slot Where all default content should be placed. -->
   

src/components/mediaObject/examples/MediaObject.vue

@@ -4,6 +4,8 @@ import CdrLayout from '../../layout/CdrLayout.vue';
 import CdrMediaObject from '../CdrMediaObject.vue';
 import CdrSurface from '../../surface/CdrSurface.vue';
 import CdrText from '../../text/CdrText.vue';
+import CdrBody from '../../text/presets/CdrBody.vue';
+import CdrTitle from '../../title/CdrTitle.vue';
 import type { MediaObject, HtmlAttributes } from '../../../types/interfaces';
 import cedarImage from '../../../dev/static/cedar-1920x1080.jpg';
 import cedarSmallImage from '../../../dev/static/cedar-50x50.jpg';
@@ -29,7 +31,7 @@ const examples: MediaObjectExample[] = [
   {
     label: 'content padding',
     props: { contentPadding: 'two-x' },
-    flags: [],
+    flags: ['content-title'],
   },
   {
     label: 'content padding dynamic',
@@ -132,23 +134,15 @@ const examples: MediaObjectExample[] = [
       overlayColumnAlign: 'end',
       overlayRowAlign: 'center',
     },
-    flags: ['color-inverse', 'image-1/1', 'content-narrow'],
-  },
-  {
-    label: 'overlay, media height static',
-    props: {
-      overlay: true,
-      mediaHeight: '200px',
-    },
-    flags: ['color-inverse', 'image-1/1', 'content-narrow'],
+    flags: ['image-cover', 'color-inverse', 'content-narrow'],
   },
   {
     label: 'overlay, media height responsive',
     props: {
       overlay: true,
-      mediaHeight: { xs: '200px', sm: '200px', md: '400px', lg: '400px' },
+      mediaHeight: { xs: '200px', sm: '200px', md: '400px', lg: '600px' },
     },
-    flags: ['color-inverse', 'image-1/1', 'content-narrow'],
+    flags: ['image-cover', 'color-inverse', 'content-narrow'],
   },
   {
     label: 'pass down props to Layout and Surface',
@@ -199,7 +193,10 @@ const columnExamples = [
     <h2>Media Object</h2>
 
     <hr class="example__hr" />
-    <div class="example__container">
+    <CdrLayout
+      class="example__container"
+      gap="two-x"
+    >
       <template v-for="({ props, label, flags }, index) in examples">
         <div>
           <CdrText>
@@ -216,15 +213,18 @@ const columnExamples = [
             v-bind="props"
           >
             <template #content>
-              <div
+              <CdrTitle v-if="flags && flags.includes('content-title')">
+                A CdrTitle example
+              </CdrTitle>
+              <CdrBody
                 :class="{
                   example__content: true,
                   'example__content--color-inverse': flags && flags.includes('color-inverse'),
                   'example__content--narrow': flags && flags.includes('content-narrow'),
                 }"
               >
                 {{ flags && flags.includes('content-long') ? contentLong : contentShort }}
-              </div>
+              </CdrBody>
             </template>
             <template #media>
               <div
@@ -322,7 +322,7 @@ const columnExamples = [
           </CdrLayout>
         </div>
       </template>
-    </div>
+    </CdrLayout>
   </div>
 </template>
 
@@ -335,12 +335,7 @@ const columnExamples = [
   }
 
   &__container {
-    max-width: 850px;
-    width: 100%;
-
-    & > *:not(:first-child) {
-      margin-top: $cdr-space-two-x;
-    }
+    max-width: 1300px;
   }
 
   &__content {

src/components/mediaObject/styles/CdrMediaObject.module.scss

@@ -4,7 +4,13 @@
   @include cdr-media-object-base-mixin($media-object-component);
   @include cdr-media-object-align-mixin($media-object-component);
   @include cdr-media-object-media-position-mixin($media-object-component);
-  @include cdr-media-object-cover-mixin($media-object-component);
-  @include cdr-media-object-overlay-mixin($media-object-component);
   @include cdr-media-object-content-padding-mixin($media-object-component);
+
+  &--cover {
+    @include cdr-media-object-cover-mixin($media-object-component);
+  }
+
+  &--overlay {
+    @include cdr-media-object-overlay-mixin($media-object-component);
+  }
 }

src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss

@@ -48,40 +48,37 @@ $media-object-component: 'media-object';
 
 // Allow for media to cover entire container
 @mixin cdr-media-object-cover-mixin($component) {
-  &--cover {
-    @include media {
+  @include media {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+
+    & > :first-child {
+      position: absolute;
+      left: 0;
+      right: 0;
       width: 100%;
       height: 100%;
-      display: flex;
-      position: relative;
-
-      & > :first-child {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-      }
     }
   }
 }
 
 // Allow for content to overlay media
 @mixin cdr-media-object-overlay-mixin($component) {
-  &--overlay {
-    grid-template-areas: 'media';
-    position: relative;
+  @include cdr-media-object-cover-mixin($component);
+  grid-template-areas: 'media';
+  position: relative;
 
-    @include content {
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: var(--cdr-#{$component}-column-align);
-      justify-content: var(--cdr-#{$component}-row-align);
-    }
+  @include content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: var(--cdr-#{$component}-column-align);
+    justify-content: var(--cdr-#{$component}-row-align);
   }
 }
 

src/types/interfaces.ts

@@ -215,6 +215,10 @@ export interface Layout extends NameValuePair {
    * The component or HTML tag to render at the root level
    */
   as?: Component | string;
+  /**
+   * The container query name that will be applied, if needed
+   */
+  containerName?: string;
 }
 
 /**
@@ -345,20 +349,20 @@ export interface MediaObject extends Layout {
   mediaPosition?: Position;
   /**
    * The width of the column that media is placed within. This can be any CSS value. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
-   * @values 1fr, auto, 25%, 50%, 75%, 200px
+   * @values 1fr, auto, 25%, 50%, 75%, 200px, 50cqh
    */
   mediaWidth?: MediaMeasurement;
   /**
    * The height of the column that media is placed within. This can be any CSS value. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
-   * @values 1fr, auto, 25%, 50%, 75%, 200px
+   * @values 1fr, auto, 25%, 50%, 75%, 200px, 50cqw
    */
   mediaHeight?: MediaMeasurement;
   /**
    * This property forces media to take up the full height and width of the media container and positions media to be absolute. Images and videos will still need to be configured with object-fit and object-position.
    */
   mediaCover?: boolean;
   /**
-   * Determines if content will overlay the media. When true, only overlay related props are used, no others.
+   * Determines if content will overlay the media. A default media height is set, but it is suggested to apply your own using container width units (cqw) or pixels (px).
    */
   overlay?: boolean;
   /**