Fix/426 pictures are not shown in the right places

package.json

@@ -19,7 +19,7 @@
  "dev:debug": "node --inspect scripts/dev.js",
  "build": "node scripts/build.js",
  "postinstall": "node scripts/linkDependencies.js && lerna link",
- "lint": "prettier --write --parser typescript 'packages/**/*.ts'",
+ "lint": "prettier --write --parser typescript \"packages/**/*.ts\"",
  "test": "jest",
  "test:e2e": "jest --e2e=true --runInBand",
  "test:cypress": "cypress run",

packages/commons/interfaces/models/content/cms/CmsPage.ts

@@ -88,19 +88,31 @@ export interface CmsBlock {
  slots: CmsSlot[];
 }
 
+/**
+ * @alpha
+ */
 export enum SectionType {
  DEFAULT = "default",
 }
 
+/**
+ * @alpha
+ */
 export enum SizingMode {
  BOXED = "boxed",
 }
 
+/**
+ * @alpha
+ */
 export enum MobileBehavior {
  BOXED = "boxed",
  WRAP = "wrap",
 }
 
+/**
+ * @alpha
+ */
 export enum BackgroundMediaMode {
  COVER = "cover",
 }

packages/default-theme/cms/blocks/CmsBlockCategoryNavigation.vue

@@ -32,9 +32,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../settings.scss';
-
-.cms-block-category-navigation {
- @include desktop-size;
-}
 </style>

packages/default-theme/cms/blocks/CmsBlockCenterText.vue

@@ -0,0 +1,64 @@
+<template>
+ <article class="cms-block-center-text">
+ <CmsGenericElement :content="getLeftContent" class="cms-block-center-text__image"/>
+ <CmsGenericElement :content="getCenterContent" class="cms-block-center-text__text"/>
+ <CmsGenericElement :content="getRightContent" class="cms-block-center-text__image"/>
+ </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+ name: 'CmsBlockCenterText',
+ components: {
+ CmsGenericElement
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ getSlots() {
+ return this.content.slots || []
+ },
+ getLeftContent() {
+ return this.getSlots.find(({slot}) => slot === 'left')
+ },
+ getCenterContent() {
+ return this.getSlots.find(({slot}) => slot === 'center')
+ },
+ getRightContent() {
+ return this.getSlots.find(({slot}) => slot === 'right')
+ },
+ }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-center-text {
+ display: flex;
+ flex-direction: column;
+
+ &__image, &__text {
+ margin: var(--spacer-sm);
+ flex: 1;
+ & img {
+ height: 340px;
+ object-fit: cover;
+ width: 100%;
+ }
+ }
+
+ @include for-desktop {
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ }
+}
+
+</style>

packages/default-theme/cms/blocks/CmsBlockDefault.vue

@@ -35,6 +35,6 @@ export default {
 @import '../settings.scss';
 
 .cms-block-default {
- @include desktop-size;
+ @include sizing-mode-boxed;
 }
 </style>

packages/default-theme/cms/blocks/CmsBlockImageBubbleRow.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="cms-block-image-bubble-row">
+ <article class="cms-block-image-bubble-row">
  <CmsGenericElement
  :content="getLeftContent"
  class="cms-block-image-bubble-row__image"
@@ -12,17 +12,17 @@
  :content="getRightContent"
  class="cms-block-image-bubble-row__image"
  />
- </div>
+ </article>
 </template>
 
 <script>
 import CmsGenericElement from 'sw-cms/CmsGenericElement'
 
 export default {
+ name: 'CmsBlockImageBubbleRow',
  components: {
  CmsGenericElement,
  },
- name: 'CmsBlockImageBubbleRow',
  props: {
  content: {
  type: Object,
@@ -34,13 +34,13 @@ export default {
  return this.content.slots || []
  },
  getLeftContent() {
- return this.getSlots.find((element) => element.slot === 'left')
+ return this.getSlots.find(({slot}) => slot === 'left')
  },
  getCenterContent() {
- return this.getSlots.find((element) => element.slot === 'center')
+ return this.getSlots.find(({slot}) => slot === 'center')
  },
  getRightContent() {
- return this.getSlots.find((element) => element.slot === 'right')
+ return this.getSlots.find(({slot}) => slot === 'right')
  },
  },
 }

packages/default-theme/cms/blocks/CmsBlockImageCover.vue

@@ -1,7 +1,7 @@
 <template>
- <div class="cms-block-image-cover">
+ <article class="cms-block-image-cover">
  <CmsGenericElement v-if="getContent" :content="getContent" />
- </div>
+ </article>
 </template>
 
 <script>
@@ -30,7 +30,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../settings.scss';
-
 
 </style>

packages/default-theme/cms/blocks/CmsBlockImageFourColumn.vue

@@ -0,0 +1,68 @@
+<template>
+ <article class="cms-block-image-four-column">
+ <CmsGenericElement :content="getLeftContent" class="cms-block-image-four-column__image"/>
+ <CmsGenericElement :content="getCenterLeftContent" class="cms-block-image-four-column__image"/>
+ <CmsGenericElement :content="getCenterRightContent" class="cms-block-image-four-column__image"/>
+ <CmsGenericElement :content="getRightContent" class="cms-block-image-four-column__image"/>
+ </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+ name: 'CmsBlockImageFourColumn',
+ components: {
+ CmsGenericElement,
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ getSlots() {
+ return this.content.slots || []
+ },
+ getLeftContent() {
+ return this.getSlots.find(({slot}) => slot === 'left')
+ },
+ getCenterLeftContent() {
+ return this.getSlots.find(({slot}) => slot === 'center-left')
+ },
+ getCenterRightContent() {
+ return this.getSlots.find(({slot}) => slot === 'center-right')
+ },
+ getRightContent() {
+ return this.getSlots.find(({slot}) => slot === 'right')
+ },
+ }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-four-column {
+ display: flex;
+ flex-direction: column;
+
+ &__image {
+ margin: var(--spacer-sm);
+ flex: 1;
+ & img {
+ height: 340px;
+ object-fit: cover;
+ width: 100%;
+ }
+ }
+
+ @include for-desktop {
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ }
+}
+
+</style>

packages/default-theme/cms/blocks/CmsBlockImageHighlightRow.vue

@@ -0,0 +1,65 @@
+<template>
+ <article class="cms-block-image-highlight-row">
+ <CmsGenericElement :content="getLeftContent" class="cms-block-image-highlight-row__image"/>
+ <CmsGenericElement :content="getCenterContent" class="cms-block-image-highlight-row__image"/>
+ <CmsGenericElement :content="getRightContent" class="cms-block-image-highlight-row__image"/>
+ </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+ name: 'CmsBlockImageHighlightRow',
+ components: {
+ CmsGenericElement,
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ getSlots() {
+ return this.content.slots || []
+ },
+ getLeftContent() {
+ return this.getSlots.find(({slot}) => slot === 'left')
+ },
+ getCenterContent() {
+ return this.getSlots.find(({slot}) => slot === 'center')
+ },
+ getRightContent() {
+ return this.getSlots.find(({slot}) => slot === 'right')
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-highlight-row {
+ display: flex;
+ flex-direction: column;
+
+ &__image {
+ margin: var(--spacer-sm);
+ flex: 1;
+ border: 12px solid #fff;
+ & img {
+ height: 340px;
+ object-fit: cover;
+ width: 100%;
+ }
+ }
+
+ @include for-desktop {
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ }
+}
+
+</style>