Merge branch 'main' of https://github.com/Netcentric/edge-delivery-ub…

…s-faweb-demo into 4-style-buttons

.stylelintrc.json

@@ -1,6 +1,12 @@
 {
   "extends": ["stylelint-config-standard"],
   "rules": {
+    "selector-class-pattern": [
+      "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-|_]?[a-z0-9]+)*)?$",
+      {
+        "message": "Expected class \"%s\" to be in kebab-case or BEM-style naming."
+      }
+    ],
     "media-feature-range-notation": "prefix"
   }
 }

blocks/text-image/text-image.css

@@ -0,0 +1,46 @@
+.text-image__container {
+  --image-width: 50%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+
+  .text-image--h-center & {
+    text-align: center;
+  }
+
+  .text-image--v-center & {
+    align-items: center;
+  }
+
+  > div:not(.text-image__image-container) {
+    order: 1;
+    flex-grow: 1;
+
+    @media (min-width: 768px) {
+      order: initial;
+      width: calc(100% - var(--image-width));
+    }
+  }
+}
+
+.text-image__image-container {
+  order: 0;
+
+  @media (min-width: 768px) {
+    order: initial;
+    width: var(--image-width);
+
+    .text-image--bigimage & {
+      --image-width: 70%;
+    }
+
+    .text-image--smallimage & {
+      --image-width: 30%;
+    }
+  }
+}

blocks/text-image/text-image.js

@@ -0,0 +1,13 @@
+import { variantsClassesToBEM } from '../../scripts/common.js';
+
+const variantClasses = ['bigimage', 'smallimage', 'v-center', 'h-center'];
+
+export default function decorate(block) {
+  const blockName = 'text-image';
+  // add variant classnames
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
+  block.firstElementChild.classList.add(`${blockName}__container`);
+  const pictureParent = block.querySelector('picture').parentElement;
+  pictureParent?.classList.add(`${blockName}__image-container`);
+}