MWPW-129922 - Action Blocks & Expanded Section Ups Capabilities

libs/blocks/action-item/action-item.css

@@ -0,0 +1,145 @@
+.action-item img {
+  display: block;
+  max-height: 240px;
+}
+
+.action-item.inline {
+  display: inline-block;
+  width: auto;
+}
+
+.action-item.float-button .main-image picture::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: linear-gradient(180deg, rgba(0 0 0 / 0%) 40%, rgba(0 0 0 / 100%) 100%);
+}
+
+.action-item.rounded img,
+.action-item.rounded .main-image picture:not(.floated-icon),
+.action-item.rounded.float-button .main-image picture::after {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.action-item.rounded-l img,
+.action-item.rounded-l .main-image picture:not(.floated-icon),
+.action-item.rounded-l.float-button .main-image picture::after {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.action-item.center {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.action-item.center img {
+  margin: 0 auto;
+}
+
+.action-item.small {
+  font-size: var(--type-body-xs-size);
+}
+
+.action-item.small img {
+  min-height: var(--spacing-xl);
+}
+
+.action-item.medium {
+  font-size: var(--type-body-s-size);
+}
+
+.action-item.medium img {
+  min-height: var(--spacing-xxl);
+}
+
+.action-item.large {
+  font-size: var(--type-body-m-size);
+}
+
+.action-item.large img {
+  min-height: var(--spacing-xxxl);
+}
+
+.action-item.image-size-small img {
+  max-height: var(--spacing-xl);
+}
+
+.action-item.image-size-medium img {
+  max-height: var(--spacing-xxl);
+}
+
+.action-item.image-size-large img {
+  max-height: var(--spacing-xxxl);
+}
+
+.action-item.float-icon .floated-icon img {
+  width: 24px;
+  height: 24px;
+  align-self: center;
+}
+
+.action-item.zoom {
+  display: flex;
+}
+
+.action-item.zoom .main-image {
+  flex-grow: 1;
+  position: relative;
+}
+
+.action-item.zoom .main-image picture:not(.floated-icon) {
+  display: block;
+}
+
+.action-item.float-button .main-image picture img {
+  min-width: 100%;
+}
+
+.action-item.zoom .main-image picture:not(.floated-icon) img {
+  object-fit: cover;
+  will-change: transform;
+  transition: transform .2s ease;
+}
+
+.action-item:not(.zoom) a:focus-visible picture:not(.floated-icon) img,
+.action-item.zoom a:focus-visible picture:not(.floated-icon) {
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+}
+
+.action-item a:not(.con-button):focus-visible {
+  outline: none;
+  text-decoration: underline;
+}
+
+.action-item.zoom .main-image picture:not(.floated-icon) img:hover {
+  transform: scale(1.05);
+}
+
+.action-item.float-icon .floated-icon {
+  display: flex;
+  position: absolute;
+  bottom: -9px;
+  right: -19px;
+  background-color: black;
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
+
+.action-item.float-button .main-image {
+  position: relative;
+}
+
+.action-item.float-button .con-button {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, -50%);
+}

libs/blocks/action-item/action-item.js

@@ -0,0 +1,56 @@
+import { decorateButtons } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
+
+function getLayout(elems) {
+  const link = elems.length > 1 ? elems[elems.length - 1] : null;
+  return { foreground: elems[0], link };
+}
+
+function handleFloatIcon(picture, icon) {
+  if (!picture || !icon) return;
+  icon.classList.add('floated-icon');
+  picture.appendChild(icon);
+}
+
+function handleFloatBtn(picture, content) {
+  if (!picture || !content) return;
+  decorateButtons(content);
+  const btn = content.querySelector('.con-button');
+  if (!btn) return;
+  picture.classList.add('dark');
+  picture.appendChild(btn);
+}
+
+function decorateLink(link) {
+  const anchor = link.querySelector('a');
+  let attrs = { href: anchor.href };
+  if (attrs.href.includes('#_blank') || anchor.target === '_blank') {
+    attrs.href = anchor.href.replace('#_blank', '');
+    attrs = { ...attrs, target: '_blank' };
+  }
+  return attrs;
+}
+
+function getContent(el, variants, link) {
+  const pictures = el.querySelectorAll('picture');
+  const text = el.querySelector('h1, h2, h3, h4, h5, h6, p')?.closest('div');
+  const mainPic = pictures[0];
+  const picture = mainPic?.parentElement;
+  picture?.classList.add('main-image');
+  const wrapLink = link && !variants.contains('float-button');
+  const tag = wrapLink ? 'a' : 'div';
+  let attrs = wrapLink ? decorateLink(link) : {};
+  if (variants.contains('float-icon')) handleFloatIcon(picture, pictures[1]);
+  if (variants.contains('float-button')) handleFloatBtn(picture, link);
+  if (variants.contains('static-links')) attrs = { ...attrs, class: 'static' };
+  const content = createTag(tag, { ...attrs }, text ?? picture);
+  return content;
+}
+
+export default function init(el) {
+  const elems = el.querySelectorAll(':scope > div');
+  if (!elems.length) return;
+  const { foreground, link } = getLayout(elems);
+  const content = getContent(foreground, el.classList, link);
+  el.replaceChildren(content);
+}

libs/blocks/action-scroller/action-scroller.css

@@ -0,0 +1,147 @@
+.action-scroller {
+  --action-scroller-mobile-padding: 50px;
+  --action-scroller-button-color: white;
+  --action-scroller-button-size: 32px;
+  --action-scroller-button-border-color: #646364;
+  --action-scroller-button-border-color-hover: #333;
+  --action-scroller-column-width: calc(var(--action-scroller-item-width) * 1px);
+
+  display: block;
+  position: relative;
+}
+
+.action-scroller .section.scrolling {
+  display: grid;
+  grid-template-columns: repeat(var(--action-scroller-columns), 1fr);
+  grid-auto-columns: minmax(var(--action-scroller-column-width), 1fr);
+  grid-auto-flow: column;
+  padding: 0 var(--action-scroller-mobile-padding);
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+
+  --mask-width: 60px;
+  --mask-image-content: linear-gradient(to right,
+      transparent,
+      black var(--mask-width),
+      black calc(100% - var(--mask-width)),
+      transparent);
+  --mask-size-content: 100% 100%;
+  --mask-image-scrollbar: linear-gradient(black, black);
+  --mask-size-scrollbar: 0 100%;
+
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
+  -webkit-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
+  -webkit-mask-position: 0 0, 100% 0;
+  -webkit-mask-repeat: no-repeat, no-repeat;
+  -moz-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
+  -moz-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
+  -moz-mask-position: 0 0, 100% 0;
+  -moz-mask-repeat: no-repeat, no-repeat;
+  /* stylelint-enable property-no-vendor-prefix */
+
+  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
+  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
+  mask-position: 0 0, 100% 0;
+  mask-repeat: no-repeat, no-repeat;
+}
+
+
+.action-scroller .section.scrolling::-webkit-scrollbar {
+  display: none;
+}
+
+.action-scroller .section.scrolling .action-item {
+  width: var(--action-scroller-column-width);
+}
+
+.action-scroller .nav-grad {
+  position: absolute;
+  height: 100%;
+  width: 54px;
+  top: 0;
+}
+
+.action-scroller .nav-grad.next {
+  right: 0;
+}
+
+.action-scroller .nav-grad.previous {
+  left: 0;
+}
+
+.action-scroller .nav-grad[hide-btn='true'] {
+  display: none;
+}
+
+.action-scroller .previous-button,
+.action-scroller .next-button {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: 100%;
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--action-scroller-button-color);
+  border-color: var(--action-scroller-button-border-color);
+  height: var(--action-scroller-button-size);
+  width: var(--action-scroller-button-size);
+  top: calc(50% - var(--action-scroller-button-size) / 2);
+  z-index: 2;
+}
+
+.action-scroller .next-button {
+  right: 10px;
+}
+
+.action-scroller .previous-button {
+  left: 10px;
+}
+
+.action-scroller.grid-align-end .previous-button,
+.action-scroller.grid-align-end .next-button {
+  top: calc(55% - var(--action-scroller-button-size) / 2);
+}
+
+.action-scroller .nav-grad .next-button:focus,
+.action-scroller .nav-grad .previous-button:focus {
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+}
+
+.action-scroller .nav-button:hover,
+.action-scroller .nav-button:focus,
+.action-scroller .nav-button:active {
+  background-color: var(--action-scroller-button-color);
+  border-color: var(--action-scroller-button-border-color-hover);
+  outline: none;
+}
+
+.action-scroller .nav-button img {
+  height: 16px;
+  width: 10px;
+  margin-left: 2px;
+}
+
+.action-scroller .previous-button img {
+  margin-right: 3px;
+  transform: rotate(180deg);
+}
+
+.action-scroller .nav-button:hover img,
+.action-scroller .nav-button:focus img,
+.action-scroller .nav-button:active img {
+  filter: brightness(0) saturate(100%);
+}
+
+@media screen and (min-width: 1200px) {
+  .action-scroller {
+    width: var(--grid-container-width);
+    margin: 0 auto;
+  }
+}