Skip to content

Commit

Permalink
media-object-refinement
Browse files Browse the repository at this point in the history
  • Loading branch information
@sikhote
sikhote committed Dec 27, 2024
1 parent 173d72b commit cead354
Showing 1 changed file with 350 additions and 0 deletions.
350 changes: 350 additions & 0 deletions src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`CdrMediaObject > snapshot tests > align center 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns: auto 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: center;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > content padding 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-content-padding: 32px; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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"
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. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > cover 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--cover"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 125px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > default: media position left, media width 1fr, media height auto, align start 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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"
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. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > media bottom 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: 1fr auto; --cdr-layout-columns: 1fr; --cdr-media-object-media-position: 'content' 'media'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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"
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. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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"
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. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > media position right 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'content media'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > media top, align center 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto 1fr; --cdr-layout-columns: 1fr; --cdr-media-object-media-position: 'media' 'content'; --cdr-media-object-align: center;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > media width 100px 1`] = `
<div
class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 100px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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"
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. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

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;"
>
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

exports[`CdrMediaObject > snapshot tests > pass down props to Layout and Surface 1`] = `
<div
class="cdr-surface cdr-surface--modifier-default cdr-surface--background-brand-spruce cdr-surface--radius-sharp cdr-surface--shadow-flat cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
data-palette="default"
style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
>
<!-- @slot Where all default content should be placed. -->
<!-- @slot Where all default content should be placed. -->
<div>
<!-- @slot Where the media should be placed. Should be a single node. -->
Some media
</div>
<div>
<!-- @slot Where all content should be placed. Can be multiple nodes. -->
Some content
</div>
</div>
`;

0 comments on commit cead354

Please sign in to comment.