Contrib.social

[1.1.0] Notice pattern evolution

Open on Drupal.org →
Created on 16 April 2024, 2 months ago
Updated 21 May 2024, about 1 month ago

Our functional team requests that upon clicking the notice close button, it should save to prevent it from reappearing when changing pages.

Steps to reproduce

When i place my notice block, upon clicking, the notice closes, but upon changing the page, it reappears.

Proposed resolution

I propose modifications to the twig as follows :

{% set variant = variant|default('info') %}

{% if isBlock %}
  {% set block_id = 'fr-notice--block-id' %}
{% else %}
  {% set block_id = 'fr-notice--' ~ random() %}
{% endif %}

<div{{ attributes.addClass('fr-notice').addClass('fr-notice--' ~ variant)}} id= {{ block_id }}>
  <div class="fr-container">
    <div class="fr-notice__body">
    {% if title %}
    <div class="fr-notice__title">
      {{ title }}
    </div>
    {% endif %}
    {% if dismissible %}
      {% set close_title = close_title|default('Close'|t) %}
      {% set event = "const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice); sessionStorage.setItem('is>
      <button onclick="{{ event }}" class="fr-btn fr-btn--close" title="{{ close_title }}">
        {{ close_title }}
      </button>
    {% endif %}
    </div>
  </div>
</div>

OR

{% set variant = variant|default('info') %}

<div{{ attributes.addClass('fr-notice').addClass('fr-notice--' ~ variant)}} {% if isBlock %} id= 'fr-notice--block-id' {% endif %}>
  <div class="fr-container">
    <div class="fr-notice__body">
    {% if title %}
    <div class="fr-notice__title">
      {{ title }}
    </div>
    {% endif %}
    {% if dismissible %}
      {% set close_title = close_title|default('Close'|t) %}
      {% set event = "const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice); sessionStorage.setItem('is>
      <button onclick="{{ event }}" class="fr-btn fr-btn--close" title="{{ close_title }}">
        {{ close_title }}
      </button>
    {% endif %}
    </div>
  </div>
</div>

and the .yml like this :

notice:
  label: Notice
  description: Draws the user's attention to information without interrupting his current task. https://www.systeme-de-design.gouv.fr/element>
  variants:
    info:
      label: Information
  settings:
    block_id:
      type: token
      label: ID
      description: "Must start with a letter. Randomly generated if empty."
    dismissible:
      type: boolean
      label: Dismissible?
      description: It’s possible to dismiss any notice inline.
      preview: true
    isBlock:
      type: boolean
      label: Block?
      description: If true, the notice will be assigned a predefined, hard-coded ID attribute.
      preview: false
    close_title:
      type: token
      label: Close button text
      description: Optional. Will be used only if notice is dismissible.
      preview: Hide message
  fields:
    title:
      type: text
      label: Title
      preview: "Notice: Title of an notice" 

<strong>OR</strong>

notice:
  label: Notice
  description: Draws the user's attention to information without interrupting his current task. https://www.systeme-de-design.gouv.fr/element>
  variants:
    info:
      label: Information
  settings:
    dismissible:
      type: boolean
      label: Dismissible?
      description: It’s possible to dismiss any notice inline.
      preview: true
    isBlock:
      type: boolean
      label: Block?
      description: If true, the notice will be assigned a predefined, hard-coded ID attribute.
      preview: false
    close_title:
      type: token
      label: Close button text
      description: Optional. Will be used only if notice is dismissible.
      preview: Hide message
  fields:
    title:
      type: text
      label: Title
      preview: "Notice: Title of an notice"

AND add a JasavaScript script:

document.addEventListener ('DOMContentLoaded', function() {

let noticeContainer = document.getElementById ('fr-notice--block-id');

if (noticeContainer) {
  let isClose = sessionStorage.getItem('isOpen') === 'false';
  if(isClose) {
  noticeContainer.remove()
  }
}

});

Thank you.

✨ Feature request
Status

Needs work

Version

1.0

Component

Code

Created by

yassrzg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @yassrzg
  • Comment 2 months ago →
    🇫🇷France pdureau Paris
  • Comment 2 months ago →
    🇫🇷France pdureau Paris
  • Status changed to Postponed: needs info 2 months ago
  • Comment 2 months ago →
    🇫🇷France pdureau Paris

    Hi Yassine,

    That's a good idea, but:

    • let's avoid a constant value in an HTML ID attribute: {% set block_id = 'fr-notice--block-id' %}
    • let's avoid using random() function outside a default() filter: {% set block_id = 'fr-notice--' ~ random() %}
    • the name of the new prop must not be isBlock but something like permanent_state, because of the expected feature

    So, a proposal:

        permanent_state:
      type: boolean
      label: Permanent state?
      description:  If true, the notice will remember its state in between page reloads. Expect a non random block_id value.
      preview: false

    The wording proposal may change.

    With:

    {% set block_id = block_id|default('fr-notice--' ~ random()) %}
{% set attributes =attributes.setAttribute("id", block_id)  %}
{% set attributes = permanent_state ? attributes.setAtttibute("data-permanent-state", "true") : attributes %}
<div{{ attributes.addClass('fr-notice').addClass('fr-notice--' ~ variant)}}>

    So:

    • Can you rebuild your script around this proposal?
    • Do you think upstream DSFR will accept such a proposal?
    • I will need to ask other people to validate such a proposal because we are at the limit between application state and design system.
  • Merge request !70by yassrzg Notice pattern evolution → (Open) created by yassrzg
  • Status changed to Needs work 2 months ago
  • Comment 2 months ago →
    yassrzg
  • Status changed to Needs review 2 months ago
  • Comment 2 months ago →
    yassrzg

    I have adapted the JavaScript script and added a new CSS file 'notice.css'.
    I initialized .fr-notice[data-permanent-state="true"] { display: none; }, to prevent the notice from flickering every time the page changes.
    I added the JavaScript and CSS files to the .libraries.yml file.

  • Comment 2 months ago →
    🇫🇷France just_like_good_vibes PARIS

    Hello,
    I have a comment about the Javascript code added.
    why a vanilla JS code instead of a proper drupal JS behavior?
    The JS file is added to the global theme library, therefore in my understanding it should follow best practices → .
    what do you think?
    i can help in writing the code if needed.
    thank you

  • Comment 2 months ago →
    🇫🇷France pdureau Paris

    Let's not enforce JS Behaviour here.

  • Status changed to Needs work about 1 month ago
  • Comment about 1 month ago →
    🇫🇷France pdureau Paris

    There are interesting talks in the Drupal community about using WebComponent (with the is attributes instead of the "custom element" syntax) to leverage WebComponents as a standard JS behaviours container where the lifecycle is managed by the browser.

    Do you want to try?

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024