add quick-action-hub

express/blocks/quick-action-hub/quick-action-hub.css

@@ -0,0 +1,148 @@
+main .section:has(div.quick-action-hub-wrapper) {
+  text-align: center;
+}
+
+main .section > div.quick-action-hub-wrapper {
+  padding: 88px 16px;
+  margin: auto;
+  max-width: 375px;
+}
+
+main .quick-action-hub {
+  display: inline-flex;
+  border: 1px #DBDBDB solid;
+  border-radius: 16px;
+}
+
+main .section > .quick-action-hub-wrapper:not(:first-child) {
+  margin-top: 60px;
+}
+
+main .quick-action-hub .quick-action-hub-container {
+  background-color: #FBFBFB;
+  padding: 40px 24px 18px 24px;
+  border-radius: 16px;
+}
+
+main .quick-action-hub .quick-action-hub-content-container {
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+main .quick-action-hub .quick-action-hub-header h2 {
+  font-size: var(--heading-font-size-m);
+  text-align: left;
+}
+
+main .quick-action-hub .quick-action-hub-header p {
+  font-size: var(--body-font-size-m);
+  margin: 16px 0 32px 0;
+  text-align: left;
+}
+
+main .quick-action-hub .quick-action-hub-list-container {
+  display: flex;
+  flex-direction: column;
+}
+
+main .quick-action-hub .quick-action-hub-column {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 28px;
+}
+
+main .quick-action-hub .quick-action-hub-list-container h3 {
+  font-size: var(--body-font-size-xl);
+  font-weight: var(--body-font-weight);
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+main .quick-action-hub .quick-action-hub-list-container h3:not(:first-child) {
+  margin-top: 28px;
+}
+
+main .quick-action-hub .quick-action-hub-list-container img,
+main .quick-action-hub .quick-action-hub-list-container svg {
+  min-width: 18px;
+  min-height: 18px;
+  width: 18px;
+  height: 18px;
+  padding: 0 12px;
+}
+
+main .quick-action-hub .quick-action-hub-list-container a {
+  display: flex;
+  align-items: center;
+  color: var(--body-color);
+  font-weight: var(--body-font-weight);
+  font-size: var(--body-font-size-m);
+  margin: 8px 0;
+  user-select: none;
+  text-align: left;
+}
+
+@media (min-width: 900px) {
+  main .section > div.quick-action-hub-wrapper {
+    max-width: 830px;
+    padding: 0;
+  }
+
+  main .quick-action-hub .quick-action-hub-container {
+    padding: 40px 54px;
+
+  }
+
+  main .quick-action-hub .quick-action-hub-header p {
+    max-width: 640px;
+  }
+
+  main .quick-action-hub .quick-action-hub-list-container {
+    flex-direction: row;
+    gap: 24px;
+  }
+
+  main .quick-action-hub .quick-action-hub-column {
+    align-items: flex-start;
+  }
+
+  main .quick-action-hub .quick-action-hub-list-container a {
+    width: 200px;
+    padding: 8px 12px;
+    border-radius: 8px;
+  }
+
+  main .quick-action-hub .quick-action-hub-list-container a:hover {
+    background-color: var(--color-gray-200);
+  }
+
+  main .quick-action-hub .quick-action-hub-list-container img,
+  main .quick-action-hub .quick-action-hub-list-container svg {
+    padding: 0 12px 0 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  main .section > div.quick-action-hub-wrapper {
+    max-width: unset;
+  }
+
+  main .quick-action-hub .quick-action-hub-container {
+    border-radius: 16px 0 0 16px;
+  }
+
+  main .quick-action-hub .quick-action-hub-content-container {
+    display: flex;
+    padding: 60px;
+    max-width: 380px;
+  }
+
+  main .quick-action-hub .quick-action-hub-list-container a {
+    margin: 0;
+  }
+
+  main .quick-action-hub .quick-action-hub-content-container svg {
+    max-width: none;
+  }
+}

express/blocks/quick-action-hub/quick-action-hub.js

@@ -0,0 +1,60 @@
+import { getLibs } from '../../scripts/utils.js';
+import { transformLinkToAnimation } from '../../scripts/utils/media.js';
+import { addTempWrapperDeprecated } from '../../scripts/utils/decorate.js';
+import { fixIcons } from '../../scripts/utils/icons.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+export default async function decorate($block) {
+  addTempWrapperDeprecated($block, 'quick-action-hub');
+  await fixIcons($block);
+
+  const $rows = Array.from($block.children);
+  const $header = $rows[0].firstElementChild;
+  const $container = createTag('div', { class: 'quick-action-hub-container' });
+  const $listContainer = createTag('div', { class: 'quick-action-hub-list-container' });
+  const $contentContainer = createTag('div', { class: 'quick-action-hub-content-container' });
+  const $columns = Array.from($rows[2].children);
+
+  $header.classList.add('quick-action-hub-header');
+  $contentContainer.innerHTML = $rows[1].innerHTML;
+
+  const $animations = $contentContainer.querySelectorAll('a');
+
+  if ($animations) {
+    $animations.forEach(($animation) => {
+      if ($animation && $animation.href && $animation.href.includes('.mp4')) {
+        transformLinkToAnimation($animation);
+      }
+    });
+  }
+
+  $columns.forEach(($column) => {
+    const $columnRows = Array.from($column.children);
+
+    $columnRows.forEach(($row) => {
+      if ($row.tagName === 'P') {
+        let $image = $row.querySelector('img');
+        if (!$image) {
+          $image = $row.querySelector('svg');
+        }
+        const $link = $row.querySelector('a');
+        $column.append($link);
+        $link.prepend($image);
+        $row.remove();
+      } else {
+        $column.append($row);
+      }
+    });
+
+    $column.classList.add('quick-action-hub-column');
+    $listContainer.append($column);
+  });
+
+  $block.innerHTML = '';
+
+  $block.append($container);
+  $block.append($contentContainer);
+  $container.append($header);
+  $container.append($listContainer);
+}

test/blocks/quick-action-hub/quick-action-hub.test.js

@@ -0,0 +1,7 @@
+/* eslint-env mocha */
+/* eslint-disable no-unused-vars */
+
+const [, { default: decorate }] = await Promise.all([
+  import('../../../express/scripts/scripts.js'),
+  import('../../../express/blocks/quick-action-hub/quick-action-hub.js'),
+]);