Merge pull request #10 from LoomingEcho/develop

Develop

.github/pull_request_template.md

@@ -2,14 +2,14 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a
 
 Fix #<gh-issue-id>
 
-**Branch Name:** <!-- ${{ github.head_ref }} -->
 
 **Test URLs:**
-- Before: https://develop--eds-dev--loomingecho.hlx.live/
-- After: https://${{ github.head_ref }}--eds-dev--loomingecho.hlx.live/
+- Before: https://develop--eds-dev--loomingecho.hlx.page/ <!-- On dev to main its main -->
+- After: https://<branch>--eds-dev--loomingecho.hlx.page/ <!-- change <branch> to the branch name  -->
 
 **Checklist:**
-- [ ] Tests added/passed
-- [ ] Documentation updated
-- [ ] Code reviewed
-- [ ] Ready for merge
+- [ ] Tests added/passed ?
+- [ ] Documentation updated ?
+- [ ] PSi Checks passed ?
+- [ ] Code reviewed ?
+- [ ] Ready for merge ?

.github/workflows/continuous-integration.yaml

@@ -1,5 +1,9 @@
 name: Continuous Integration
-on: [push]
+
+on:
+  push:
+    branches-ignore:
+      - main
 
 jobs:
   install-and-cache-deps:

src/blocks/test-block/test-block.scss

@@ -0,0 +1,66 @@
+#banner {
+  @include vendor('display', 'flex');
+
+  h1 {
+    margin-top: -0.125em;
+  }
+
+  .content {
+    @include vendor('flex-grow', '1');
+    @include vendor('flex-shrink', '1');
+    width: 50%;
+  }
+
+  .image {
+    @include vendor('flex-grow', '0');
+    @include vendor('flex-shrink', '0');
+    display: block;
+    margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
+    width: 50%;
+
+    img {
+      height: 100%;
+      -moz-object-fit: cover;
+      -webkit-object-fit: cover;
+      -ms-object-fit: cover;
+      object-fit: cover;
+      -moz-object-position: center;
+      -webkit-object-position: center;
+      -ms-object-position: center;
+      object-position: center;
+      width: 100%;
+    }
+  }
+
+  @include orientation(portrait) {
+    @include vendor('flex-direction', 'column-reverse');
+
+    h1 {
+      br {
+        display: none;
+      }
+    }
+
+    .content {
+      @include vendor('flex-grow', '0');
+      @include vendor('flex-shrink', '0');
+      width: 100%;
+    }
+
+    .image {
+      @include vendor('flex-grow', '0');
+      @include vendor('flex-shrink', '0');
+      margin: 0 0 (_size(element-margin) * 2) 0;
+      height: 25em;
+      max-height: 50vh;
+      min-height: 18em;
+      width: 100%;
+    }
+
+    @include breakpoint('<=xsmall') {
+      .image {
+        max-height: 35vh;
+      }
+    }
+  }
+}

src/blocks/test-block/test-block.ts

@@ -0,0 +1,57 @@
+import { html, render } from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import './test-block.scss';
+import { extractSidekickLibraryId, SidekickElement } from 'Helpers/sidekick/extractSidekickLibraryId';
+import { getSidekickLibraryId } from 'Directives/sidekickLibraryId.ts';
+
+interface TemplateArgs {
+  headline: SidekickElement;
+  subline: SidekickElement;
+  picture?: HTMLPictureElement;
+  texts: SidekickElement[];
+  buttons: SidekickElement[];
+}
+
+const template = (args: TemplateArgs) => {
+  const { headline, subline, texts, buttons, picture } = args;
+  return html`
+    <div id="banner">
+      <div class="content">
+        <header>
+          <h1 ${getSidekickLibraryId(headline)}>${headline.innerHTML}</h1>
+          <p ${getSidekickLibraryId(subline)}>${subline.innerHTML}</p>
+        </header>
+        ${texts?.map((text) => html`<p ${getSidekickLibraryId(text)}>${text.innerHTML}</p>`)}
+        <ul class="actions">
+          ${buttons?.map(
+            (button) =>
+              html` <li>
+                <a href="${button.href}" class="button big" ${getSidekickLibraryId(button)}>${button.innerHTML}</a>
+              </li>`
+          )}
+        </ul>
+      </div>
+      <span class="image object"> ${picture ?? unsafeHTML(picture)} </span>
+    </div>
+  `;
+};
+
+export default function (block: HTMLElement) {
+  const image = block.querySelector('img');
+  if (image) {
+    image.setAttribute('loading', 'eager');
+  }
+  const firstRow = block.querySelector('div');
+  const secondRow = block.children[1];
+  const headline = extractSidekickLibraryId(firstRow?.querySelector('h1'));
+  const subline = extractSidekickLibraryId(firstRow?.querySelector('h3'));
+  const texts = firstRow ? [...firstRow.querySelectorAll('p')].map((item) => extractSidekickLibraryId(item)) : [];
+  const buttons = secondRow ? [...secondRow.querySelectorAll('a')].map((item) => extractSidekickLibraryId(item)) : [];
+  const picture = firstRow?.querySelector('picture') || undefined;
+  const img = picture?.querySelector('img');
+  img?.setAttribute('loading', 'eager');
+
+  block.innerHTML = '';
+  block.style.removeProperty('display');
+  render(template({ headline, subline, texts, buttons, picture }), block);
+}