Modal: Size: Small with scanner failure

Ready

HTML
View
Context
Assets
Notes


        
        <script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
    <aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal>
        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
            <div class="modal__container--small" role="dialog" aria-modal="true" aria-labelledby="test-modal-title">
                <div class="modal__container-inner">
                    <header class="modal__header">
                        <h3 class="modal__title" id="test-modal-title">Artikel nicht gefunden</h3>
                        <div class="modal__close">
                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                <span class="visually-hidden">Close modal</span>
                            </button>
                        </div>
                    </header>
                    <main class="modal__content" id="test-modal-content">

                        <div class="message--info has-no-space">
                            <div class="message__container--disabled">
                                <span class="visually-hidden"></span>
                                <div class="message__content">
                                    <p class="message__text">Der Artikel mit dem Code 8027312994380 wurde in unserem Katalog nicht gefunden. Bitte versuchen Sie es gegebenenfalls erneut.</p>
                                </div>
                            </div>
                        </div>
                        <div class="scanner-buttons">
                            <button class="button--tertiary-light is-full-width" type="submit">Ein weiteres Produkt scannen</button>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
    <a href="#" class="button-scanner">
        <span class="visually-hidden">Barcode Scanner</span>
    </a>
</div>


        {% include '@SharedComponents/modules/shared/components/modal/modal.twig' %}


        
            
            {
  "id": "test-modal",
  "title": "Artikel nicht gefunden",
  "footer": null,
  "closeLabel": "Close modal",
  "headingLevel": "3",
  "demo": true,
  "size": "small",
  "content": {
    "path": "modules/scanner/templates/failure/failure",
    "data": {
      "include": "...failure--default"
    }
  },
  "buttonScanner": {
    "include": "...button-scanner--default"
  }
}

File:

Content:


                                import ModalDemo, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-demo';

export default ModalDemo;
export const selector = sel;

URL: /components/raw/modal/modal-demo.js
Filesystem Path: src/components/modules/shared/components/modal/modal-demo.js
Size: 181 Bytes

Content:


                                import ModalMediator, {name as title} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-mediator';

export default ModalMediator;
export const name = title;

URL: /components/raw/modal/modal-mediator.js
Filesystem Path: src/components/modules/shared/components/modal/modal-mediator.js
Size: 189 Bytes

Content:
import './modal.scss';
URL: /components/raw/modal/modal.js
Filesystem Path: src/components/modules/shared/components/modal/modal.js
Size: 22 Bytes

Content:


                                @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/modal/modal";

URL: /components/raw/modal/modal.scss
Filesystem Path: src/components/modules/shared/components/modal/modal.scss
Size: 112 Bytes

No notes defined.