Skip to content

Changed media container for media query #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
saagude merged 4 commits into from
May 15, 2025
Merged

Changed media container for media query #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3732167
Changed media container for media query
saagude May 13, 2025
403d261
Changed reference to cq to mq
saagude May 14, 2025
8035647
Added queryType as 'media' by default. Ignore queryType on docs
saagude May 14, 2025
8b48241
Updated snapshot
saagude May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/layout/styles/vars/CdrLayout.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,4 @@ $flows: row, column;
grid-auto-#{$flow}s: var(--cdr-#{$component}-flow-value);
}
}
}
}
7 changes: 4 additions & 3 deletions src/components/mediaObject/CdrMediaObject.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const props = withDefaults(defineProps<MediaObject>(), {
overlayRowAlign: 'start',
overlayColumnAlign: 'start',
contentPadding: 'zero',
queryType: "media",
});

const style = useCssModule();
Expand All @@ -48,7 +49,7 @@ const rootProps = computed(() => {
if (typeof contentPadding === 'string') {
inlineStyles['--cdr-media-object-content-padding'] = spacing[contentPadding];
} else {
classes.push(modifyClassName(baseClass, 'content-padding-cq'));
classes.push(modifyClassName(baseClass, 'content-padding-mq'));

breakpoints.forEach((breakpoint: Breakpoint) => {
// Add in padding styles for various breakpoints
Expand Down Expand Up @@ -82,13 +83,13 @@ const rootProps = computed(() => {

// Add in class for allowing dynamic content positioning
if (typeof mediaPosition !== 'string') {
classes.push(modifyClassName(baseClass, 'media-position-cq'));
classes.push(modifyClassName(baseClass, 'media-position-mq'));
}

// Add align class and inline styles for allowing dynamic align values
// or set the static value
if (typeof align !== 'string') {
classes.push(modifyClassName(baseClass, 'align-cq'));
classes.push(modifyClassName(baseClass, 'align-mq'));

breakpoints.forEach((breakpoint: Breakpoint) => {
// Add in media position styles for various breakpoints
Expand Down
10 changes: 5 additions & 5 deletions src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ exports[`CdrMediaObject > snapshot tests > content padding 1`] = `

exports[`CdrMediaObject > snapshot tests > content padding dynamic 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--content-padding-cq"
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--content-padding-mq"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-content-padding-xs: 16px; --cdr-media-object-content-padding-sm: 16px; --cdr-media-object-content-padding-md: 48px; --cdr-media-object-content-padding-lg: 48px; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
Expand Down Expand Up @@ -117,7 +117,7 @@ exports[`CdrMediaObject > snapshot tests > default: media position left, media w

exports[`CdrMediaObject > snapshot tests > dynamic align 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--align-cq"
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--align-mq"
style="--cdr-layout-rows: auto; --cdr-layout-columns: auto 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align-xs: center; --cdr-media-object-align-sm: center; --cdr-media-object-align-md: end; --cdr-media-object-align-lg: start;"
>
<!-- @slot Where all default content should be placed. -->
Expand Down Expand Up @@ -163,7 +163,7 @@ exports[`CdrMediaObject > snapshot tests > media bottom 1`] = `

exports[`CdrMediaObject > snapshot tests > media position dynamic 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--rows-cq cdr-layout--columns cdr-layout--columns-cq cdr-media-object cdr-media-object--media-position-cq"
class="cdr-layout cdr-layout--rows cdr-layout--rows-mq cdr-layout--columns cdr-layout--columns-mq cdr-media-object cdr-media-object--media-position-mq"
style="--cdr-layout-rows-xs: auto 1fr; --cdr-layout-rows-sm: 1fr auto; --cdr-layout-rows-md: auto; --cdr-layout-rows-lg: auto; --cdr-layout-columns-xs: 1fr; --cdr-layout-columns-sm: 1fr; --cdr-layout-columns-md: 1fr 1fr; --cdr-layout-columns-lg: 1fr 1fr; --cdr-media-object-media-position-xs: 'media' 'content'; --cdr-media-object-media-position-sm: 'content' 'media'; --cdr-media-object-media-position-md: 'media content'; --cdr-media-object-media-position-lg: 'content media'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
Expand All @@ -186,7 +186,7 @@ exports[`CdrMediaObject > snapshot tests > media position dynamic 1`] = `

exports[`CdrMediaObject > snapshot tests > media position dynamic, media height dynamic, media width dynamic 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--rows-cq cdr-layout--columns cdr-layout--columns-cq cdr-media-object cdr-media-object--media-position-cq cdr-media-object--cover"
class="cdr-layout cdr-layout--rows cdr-layout--rows-mq cdr-layout--columns cdr-layout--columns-mq cdr-media-object cdr-media-object--media-position-mq cdr-media-object--cover"
style="--cdr-layout-rows-xs: 100px 1fr; --cdr-layout-rows-sm: 200px 1fr; --cdr-layout-rows-md: auto; --cdr-layout-rows-lg: auto; --cdr-layout-columns-xs: 100%; --cdr-layout-columns-sm: 100%; --cdr-layout-columns-md: 50% 1fr; --cdr-layout-columns-lg: 75% 1fr; --cdr-media-object-media-position-xs: 'media' 'content'; --cdr-media-object-media-position-sm: 'media' 'content'; --cdr-media-object-media-position-md: 'media content'; --cdr-media-object-media-position-lg: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
Expand Down Expand Up @@ -278,7 +278,7 @@ exports[`CdrMediaObject > snapshot tests > media width 100px 1`] = `

exports[`CdrMediaObject > snapshot tests > media width dynamic 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-layout--columns-cq cdr-media-object"
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-layout--columns-mq cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns-xs: 100px 1fr; --cdr-layout-columns-sm: 100px 1fr; --cdr-layout-columns-md: 300px 1fr; --cdr-layout-columns-lg: 300px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
Expand Down
21 changes: 10 additions & 11 deletions src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
$media-object-component: 'media-object';

@mixin cdr-media-object-media-mixin() {
& > *:first-child {
&>*:first-child {
@content;
}
}

@mixin cdr-media-object-content-mixin() {
& > *:last-child {
&>*:last-child {
@content;
}
}
Expand All @@ -20,15 +20,14 @@ $media-object-component: 'media-object';
grid-area: media;
width: 100%;

& > img,
& > picture,
& > video {
&>img,
&>picture,
&>video {
display: block;
}
}

@include cdr-media-object-content-mixin {
grid-area: content;
container-type: inline-size;
width: 100%;
}
Expand All @@ -38,13 +37,13 @@ $media-object-component: 'media-object';
@mixin cdr-media-object-align-mixin($component) {
align-items: var(--cdr-#{$component}-align);
justify-items: var(--cdr-#{$component}-align);
@include cdr-cq-mixin($component, 'align');
@include cdr-mq-mixin($component, 'align');
}

// Allows for switching positions of media and content at breakpoints
@mixin cdr-media-object-media-position-mixin($component) {
grid-template-areas: var(--cdr-#{$component}-media-position);
@include cdr-cq-mixin($component, 'media-position');
@include cdr-mq-mixin($component, 'media-position');
}

// Allow for media to cover entire container
Expand All @@ -55,7 +54,7 @@ $media-object-component: 'media-object';
display: flex;
position: relative;

& > :first-child {
&> :first-child {
position: absolute;
left: 0;
right: 0;
Expand Down Expand Up @@ -85,9 +84,9 @@ $media-object-component: 'media-object';

// Padding for inner content
@mixin cdr-media-object-content-padding-mixin($component) {
@include cdr-cq-mixin($component, 'content-padding');
@include cdr-mq-mixin($component, 'content-padding');

@include cdr-media-object-content-mixin {
padding: var(--cdr-#{$component}-content-padding);
}
}
}
12 changes: 6 additions & 6 deletions src/styles/settings/query.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// Allows for easily adding dynamic values for a specific CSS variable
@mixin cdr-cq-mixin($component, $name) {
&--#{$name}-cq {
@mixin cdr-mq-mixin($component, $name) {
&--#{$name}-mq {
--cdr-#{$component}-#{$name}: var(--cdr-#{$component}-#{$name}-xs);

@include cdr-sm-cq-up {
@include cdr-sm-mq-up {
--cdr-#{$component}-#{$name}: var(--cdr-#{$component}-#{$name}-sm);
}

@include cdr-md-cq-up {
@include cdr-md-mq-up {
--cdr-#{$component}-#{$name}: var(--cdr-#{$component}-#{$name}-md);
}

@include cdr-lg-cq-up {
@include cdr-lg-mq-up {
--cdr-#{$component}-#{$name}: var(--cdr-#{$component}-#{$name}-lg);
}
}
}
}
4 changes: 4 additions & 0 deletions src/types/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,10 @@ export interface fulfillmentTileIcon {
}

export interface MediaObject extends Layout {
/**
* @ignore
*/
queryType?: QueryType;
/**
* The alignment of the media and content along the x or y axis, depending on the layout. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
* @values start, center, end
Expand Down