Barmer Fractal

Modal: Session Expiry 

<div class="m-modal modal--session-expiry" role="dialog" aria-modal="true" id="bm-session-expired" aria-labelledby="" aria-describedby="">
    <div class="modal__body">
        <button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>

        <i class="a-icon icon--timer modal__icon" aria-hidden="true"></i>

        <div class="modal__text">Ihre Login-Zeit ist abgelaufen und Sie wurden automatisch ausgeloggt</div>

        <div class="modal__actions">

            <button class="a-btn btn--primary js-close-modal js-modal-primary" type="button">OK</button>

        </div>
    </div>
    <div class="modal__background" aria-hidden="true"></div>
</div>
 
<div class="m-modal {{viewtypes.specifier}}" role="dialog" aria-modal="true" id="{{content.id}}" {{# content.ariaLabelledby}}aria-labelledby="{{this}}"{{/content.ariaLabelledby}} {{#content.ariaDescribedby}}aria-describedby="{{this}}"{{/content.ariaDescribedby}} {{#switches.hidden}}hidden{{/switches.hidden}}>
  <div class="modal__body">
    {{#switches.closeButton}}{{ render '@button--close' partials.closeIconButton merge=true}}{{/switches.closeButton}}

    {{ render '@icon' partials.dialogIcon merge=true}}

    <div class="modal__text">{{{ content.text }}}</div>

    <div class="modal__actions">
      {{#switches.secondaryButton}}{{ render '@button--secondary' partials.secondaryButton merge=true }}{{/switches.secondaryButton}}
      {{#switches.primaryButton}}{{ render '@button--primary' partials.primaryButton merge=true }}{{/switches.primaryButton}}
    </div>
  </div>
  <div class="modal__background" aria-hidden="true"></div>
</div>
 
{
  "switches": {
    "hidden": false,
    "dialogIcon": false,
    "closeButton": true,
    "primaryButton": true,
    "secondaryButton": false
  },
  "content": {
    "id": "bm-session-expired",
    "ariaLabelledby": "",
    "ariaDescribedby": "",
    "text": "Ihre Login-Zeit ist abgelaufen und Sie wurden automatisch ausgeloggt",
    "modalEndText": "Sie verlassen das Video"
  },
  "partials": {
    "dialogIcon": {
      "viewtypes": {
        "specifier": "icon--timer modal__icon"
      }
    },
    "closeIconButton": {
      "viewtypes": {
        "specifier": "btn--close modal__close-button js-close-modal"
      },
      "content": {
        "ariaLabel": "Schließt das Pop-up"
      }
    },
    "primaryButton": {
      "viewtypes": {
        "specifier": "btn--primary js-close-modal js-modal-primary"
      },
      "content": {
        "label": "OK"
      }
    },
    "secondaryButton": {
      "viewtypes": {
        "specifier": "btn--secondary js-close-modal js-modal-secondary"
      }
    }
  },
  "viewtypes": {
    "specifier": "modal--session-expiry"
  }
}

No notes defined.