wbu-design-system/dist/services/promoTypePlaceholderService.js

WhereBy.Design is the nascent design system for WhereBy.Us

import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

class PromoTypePlaceholderBlot extends BlockEmbed {
  static create({ adTypeId, adTypeTitle }) {
    const divNode = document.createElement('div');
    divNode.classList.add('composer__promo_type_placeholder__wrapper');
    divNode.classList.add('d-flex');
    divNode.setAttribute('data-ad-type-id', adTypeId);
    divNode.setAttribute('data-ad-type-title', adTypeTitle);
    divNode.contentEditable = 'false';

    const textNode = document.createElement('p');
    textNode.classList.add('composer__promo_type_placeholder__title');
    textNode.innerHTML = `<strong>${adTypeTitle}</strong> promotion placeholder`;
    divNode.appendChild(textNode);

    const footerNode = document.createElement('small');
    footerNode.classList.add('form__hint');
    footerNode.classList.add('text-family--labels');
    footerNode.classList.add('composer__promo_type_placeholder__footer');
    footerNode.innerHTML = 'See actual promotion in preview mode.';
    divNode.appendChild(footerNode);

    const closeButtonNode = document.createElement('button');
    closeButtonNode.classList.add('composer__promo_type_placeholder__close-button');
    divNode.appendChild(closeButtonNode);

    // eslint-disable-next-line func-names
    closeButtonNode.onclick = function () {
      divNode.remove();
    };

    return divNode;
  }

  static value(node) {
    return {
      adTypeId: node.getAttribute('data-ad-type-id'),
      adTypeTitle: node.getAttribute('data-ad-type-title'),
    };
  }
}
PromoTypePlaceholderBlot.blotName = 'promoTypePlaceholderBlot';
PromoTypePlaceholderBlot.className = 'composer__promo_type_placeholder';

export {
  PromoTypePlaceholderBlot, // eslint-disable-line import/prefer-default-export
};