Merge branch 'main' into feat/local-proxy

blocks/agent-about/agent-about.css

@@ -0,0 +1,101 @@
+.agent-about.block {
+  display: flex;
+  flex-direction: column;
+  margin-top: 3rem;
+  line-height: var(--line-height-m);
+  font-size: var(--body-font-size-xs);
+  letter-spacing: normal;
+}
+
+.agent-about.block a {
+  cursor: pointer;
+}
+
+.agent-about.block .hide {
+  display: none;
+}
+
+.agent-about.block a.view-more::after,
+.agent-about.block a.view-less::after {
+  display: inline-block;
+  margin-top: 1rem;
+  text-decoration: underline;
+}
+
+.agent-about.block a.view-more::after {
+  content: "View More";
+}
+
+.agent-about.block a.view-less::after {
+  content: "View Less";
+}
+
+.agent-about.block>div.cols-1,
+.agent-about.block>div.cols-2,
+.agent-about.block>div.cols-3 {
+  padding-bottom: 1rem;
+}
+
+.agent-about.block>div>div:first-of-type {
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: 0.5rem;
+  text-transform: capitalize;
+}
+
+.agent-about.block ul {
+  list-style: unset;
+  margin: 0 0 0 1.25rem;
+}
+
+@media (min-width: 600px) {
+  .agent-about.block {
+    flex-direction: row;
+  }
+
+  .agent-about.block>div.cols-1 {
+    flex: 0 0 41.6667%;
+    max-width: 41.6667%;
+    padding-right: 1rem;
+  }
+
+  .agent-about.block>div.cols-2 {
+    flex: 0 0 33.33%;
+    max-width: 33.33%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .agent-about.block>div.cols-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (min-width: 900px) {
+  .agent-about.block>div.cols-1 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .agent-about.block>div.cols-2,
+  .agent-about.block>div.cols-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .agent-about.block {
+    font-size: var(--body-font-size-s);
+  }
+
+  .agent-about.block>div>div:first-of-type {
+    font-size: var(--body-font-size-m);
+  }
+
+  .agent-about.block a.view-more::after,
+  .agent-about.block a.view-less::after {
+    font-size: var(--body-font-size-s);
+  }
+}

blocks/agent-about/agent-about.js

@@ -0,0 +1,34 @@
+import { a, div } from '../../scripts/dom-helpers.js';
+
+const viewMoreOnClick = (anchor, block) => {
+  anchor.addEventListener('click', () => {
+    if (anchor.classList.contains('view-more')) {
+      anchor.classList.remove('view-more');
+      anchor.classList.add('view-less');
+      block.querySelector('.about-text').classList.remove('hide');
+      block.querySelector('.about-text-truncate').classList.add('hide');
+    } else {
+      anchor.classList.remove('view-less');
+      anchor.classList.add('view-more');
+      block.querySelector('.about-text').classList.add('hide');
+      block.querySelector('.about-text-truncate').classList.remove('hide');
+    }
+  });
+};
+
+export default function decorate(block) {
+  const children = [...block.children];
+  if (children?.length) {
+    children.forEach((child, index) => {
+      child.classList.add(`cols-${index + 1}`);
+      if (index === 0) {
+        child.children[1].classList.add('about-text', 'hide');
+        child.append(div({ class: 'about-text-truncate' },
+          `${child.children[1].textContent.substring(0, 245)}...`));
+        const anchor = a({ class: 'view-more' });
+        child.append(anchor);
+        viewMoreOnClick(anchor, block);
+      }
+    });
+  }
+}