feat(cms): add picture blocks and elements (#573)

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>