From f99f486df43043be48c341fd9a3310f1c24ae98e Mon Sep 17 00:00:00 2001 From: David Sinclair Date: Thu, 2 Jan 2025 12:05:47 -0800 Subject: [PATCH] media-object-refinement --- src/components/layout/CdrLayout.vue | 5 ++ .../layout/styles/vars/CdrLayout.vars.scss | 1 + src/components/mediaObject/CdrMediaObject.vue | 11 ++--- .../__snapshots__/CdrMediaObject.spec.js.snap | 2 +- .../mediaObject/examples/MediaObject.vue | 39 +++++++-------- .../styles/CdrMediaObject.module.scss | 10 +++- .../styles/vars/CdrMediaObject.vars.scss | 47 +++++++++---------- src/types/interfaces.ts | 10 ++-- 8 files changed, 66 insertions(+), 59 deletions(-) diff --git a/src/components/layout/CdrLayout.vue b/src/components/layout/CdrLayout.vue index 2d8453a02..9c083a32a 100644 --- a/src/components/layout/CdrLayout.vue +++ b/src/components/layout/CdrLayout.vue @@ -20,6 +20,7 @@ const props = withDefaults(defineProps(), { 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}`)); diff --git a/src/components/layout/styles/vars/CdrLayout.vars.scss b/src/components/layout/styles/vars/CdrLayout.vars.scss index 996b9455b..5c7e442d6 100644 --- a/src/components/layout/styles/vars/CdrLayout.vars.scss +++ b/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 diff --git a/src/components/mediaObject/CdrMediaObject.vue b/src/components/mediaObject/CdrMediaObject.vue index f07bc79e2..6c9edbc17 100644 --- a/src/components/mediaObject/CdrMediaObject.vue +++ b/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 diff --git a/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap b/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap index af9afea65..d3ae60668 100644 --- a/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap +++ b/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`] = `
diff --git a/src/components/mediaObject/examples/MediaObject.vue b/src/components/mediaObject/examples/MediaObject.vue index d21166710..902343842 100644 --- a/src/components/mediaObject/examples/MediaObject.vue +++ b/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 = [

Media Object

-
+ @@ -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 { diff --git a/src/components/mediaObject/styles/CdrMediaObject.module.scss b/src/components/mediaObject/styles/CdrMediaObject.module.scss index 17df00ecd..37cd904a9 100644 --- a/src/components/mediaObject/styles/CdrMediaObject.module.scss +++ b/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); + } } diff --git a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss b/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss index 655a0fd10..c727966d5 100644 --- a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss +++ b/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); } } diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts index 4c41d9fe0..d15075edd 100644 --- a/src/types/interfaces.ts +++ b/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,12 +349,12 @@ 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; /** @@ -358,7 +362,7 @@ export interface MediaObject extends Layout { */ 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; /**