England Football

Efl Content Warning 

<div class="efl-content-warning hidden" data-behavior="efl-content-warning">
    <h3>Welfare content warning</h3>
    <p>
        Some of the content in the welfare hub covers sensitive topics like domestic abuse, knife crime, etc.
    </p>
    <p>
        We are aware that not all of our users are looking for this kind of content, so you can choose whether or not
        you would like to see it on your welfare hub.
    </p>
    <p>
        You can always change your decision at a later date.
    </p>
    <button class="cta cta--primary show-sensitive-content">Show sensitive content</button>
    <button class="cta cta--primary cancel-sensitive-content">No, Take me back to the last page</button>
</div

No notes defined.

/* No context defined. */
  • Content: 
    import { Dialog } from '../lightbox-overlay/lightbox-overlay';

export default parentElement => {
  const DIALOG_ID = 'sensitive-contnet-warning-modal';

  const generateLightBox = labelId => {
    let html = parentElement.outerHTML;

    html = html.replace(`efl-content-warning hidden`, `efl-content-warning`);

    return `
    <div role="alertdialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay sensitive-contnet-warning-modal">
      ${html}
    </div>`;
  };

  const removeLightBox = () => {
    if (document.getElementById(DIALOG_ID)) {
      document.getElementById(DIALOG_ID).remove();
    }
  };

  const openLightbox = () => {
    // Create the lightbox
    const lightboxContainer = document.createElement('div');

    lightboxContainer.innerHTML = generateLightBox({
      labelId: 'sensitive-contnet-warning-label',
    });
    document.body.appendChild(lightboxContainer);
    const firstFocus = lightboxContainer.querySelector(
      '.show-sensitive-content'
    );

    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: null,
      focusFirst: firstFocus,
      closeCallBack: () => removeLightBox(),
    });

    const showContentCta = lightboxContainer.querySelector(
      '.show-sensitive-content'
    );
    const cancelContentCta = lightboxContainer.querySelector(
      '.cancel-sensitive-content'
    );

    if (showContentCta) {
      showContentCta.addEventListener('click', e => {
        e.preventDefault();

        localStorage.setItem(
          'sensitive-content-warning',
          `{"expire": "${new Date()}"}`
        );
        removeLightBox();
      });
    }

    if (cancelContentCta) {
      cancelContentCta.addEventListener('click', e => {
        e.preventDefault();
        removeLightBox();

        if (window.history.pushState) {
          window.history.go(-1);
        } else {
          // eslint-disable-next-line no-restricted-globals
          location.href = window.location.origin;
        }
      });
    }
  };

  if (!localStorage.getItem('sensitive-content-warning')) {
    openLightbox();
  } else {
    const warning = JSON.parse(
      localStorage.getItem('sensitive-content-warning')
    );
    const expireCheck = new Date(warning.expire);
    const today = new Date();

    today.setDate(today.getDate() - 30);

    if (today > expireCheck) {
      openLightbox();
    } else {
      localStorage.setItem(
        'sensitive-content-warning',
        `{"expire": "${new Date()}"}`
      );
    }
  }
};
  • URL: /components/raw/efl-content-warning/efl-content-warning.js
  • Filesystem Path: src/library/components/efl-content-warning/efl-content-warning.js
  • Size: 2.6 KB
  • Content: 
    .efl-content-warning {
  background-color: $white;
  border-radius: 0.8rem;
  padding: 2.4rem;
  max-width: 77.6rem;
  width: calc(100% - 3.2rem);
  margin: 0 auto;
  position: relative;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  flex-direction: column;

  h3 {
    @extend .efl-heading-1-hp;

    color: $blue;
    margin-bottom: 1.6rem;
  }
  p {
    @extend .efl-p-medium;

    color: $color-interface-light;
    margin-bottom: 1.6rem;
    text-align: center;
  }
  .show-sensitive-content {
    background-color: $red;
    border-color: transparent;
    color: $white;
    text-decoration: none;
    margin-top: 0.8rem;
    max-width: 38.1rem;
    min-width: 100%;
    margin-bottom: 1.6rem;
    &:hover {
      border-color: $red;
      color: $red;
      background-color: $white;
    }
  }
  .cancel-sensitive-content {
    min-width: 100%;
    max-width: 38.1rem;
    color: $blue;
    text-decoration: none;
    border-color: $light-blue;
    background-color: $white;
    border-width: 2px;

    &:hover {
      border: none;
      color: $blue;
      background-color: $light-blue;
    }
  }

  @media screen and (min-width: $mq-medium) {
    padding: 4rem 5.2rem;

    .show-sensitive-content,
    .cancel-sensitive-content {
      min-width: 38.1rem;
      max-width: 38.1rem;
    }

    h3 {
      font-size: 2.8rem;
      line-height: 3rem;
    }
  }
}

.sensitive-contnet-warning-modal {
  background: rgba(28, 28, 28, 0.8);
  backdrop-filter: blur(10px);
}
  • URL: /components/raw/efl-content-warning/efl-content-warning.scss
  • Filesystem Path: src/library/components/efl-content-warning/efl-content-warning.scss
  • Size: 1.5 KB 
<div class="efl-content-warning hidden" data-behavior="efl-content-warning">
    <h3>Welfare content warning</h3>
    <p>
        Some of the content in the welfare hub covers sensitive topics like domestic abuse, knife crime, etc.
    </p>
    <p>
        We are aware that not all of our users are looking for this kind of content, so you can choose whether or not
        you would like to see it on your welfare hub.
    </p>
    <p>
        You can always change your decision at a later date.
    </p>
    <button class="cta cta--primary show-sensitive-content">Show sensitive content</button>
    <button class="cta cta--primary cancel-sensitive-content">No, Take me back to the last page</button>
</div