OFRAG Frontend Components Library v0.0.0

Modal: Size: Medium, only visible in specific viewport 

<script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
    <aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal data-media-query="(max-width: 767px)">
        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
            <div class="modal__container--medium" 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">Test Modal</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--with-footer" id="test-modal-content">

                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                    </main>
                    <footer class="modal__footer">
                        Footer
                    </footer>
                </div>
            </div>
        </div>
    </aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
    <button class="button--primary-small" type="submit">Open</button>
</div>
 
{% include '@SharedComponents/modules/shared/components/modal/modal.twig' %}
 
{
  "id": "test-modal",
  "title": "Test Modal",
  "footer": "Footer",
  "closeLabel": "Close modal",
  "headingLevel": "3",
  "demo": true,
  "size": "medium",
  "mediaQuery": "(max-width: 767px)",
  "body": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est"
}
  • 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

Only visible in viewports < 768px