From a6200d1b3afeed6917042a61eb3e2eb41fcfa441 Mon Sep 17 00:00:00 2001 From: Philippe Ndiaye <philippe.ndiaye@upfluence.com> Date: Tue, 10 Dec 2024 12:27:58 +0100 Subject: [PATCH] chore(cleanup): remove legacy OSS::Modal components --- addon/components/o-s-s/modal.hbs | 21 --- addon/components/o-s-s/modal.js | 71 ---------- app/components/o-s-s/modal.js | 1 - .../components/o-s-s/modal-test.js | 127 ------------------ 4 files changed, 220 deletions(-) delete mode 100644 addon/components/o-s-s/modal.hbs delete mode 100644 addon/components/o-s-s/modal.js delete mode 100644 app/components/o-s-s/modal.js delete mode 100644 tests/integration/components/o-s-s/modal-test.js diff --git a/addon/components/o-s-s/modal.hbs b/addon/components/o-s-s/modal.hbs deleted file mode 100644 index 67c4e93f1..000000000 --- a/addon/components/o-s-s/modal.hbs +++ /dev/null @@ -1,21 +0,0 @@ -<div class="modal fade" tabindex={{this.options.tabindex}} {{did-insert this.setup}} {{will-destroy this.teardown}} ...attributes> - <div class="modal-dialog {{if this.options.centered 'modal-dialog--centered'}} {{this.options.modalClass}}" role="document"> - <div class="modal-content"> - {{#if this.options.header}} - <div class="modal-header {{if this.options.borderlessHeader 'modal-header__borderless'}}"> - {{#if @title}} - <div class="modal-title"> - {{@title}} - </div> - {{/if}} - - <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close-x" {{on "click" this.close}}> - <span aria-hidden="true">×</span> - </button> - </div> - {{/if}} - - {{yield}} - </div> - </div> -</div> diff --git a/addon/components/o-s-s/modal.js b/addon/components/o-s-s/modal.js deleted file mode 100644 index 166f09b00..000000000 --- a/addon/components/o-s-s/modal.js +++ /dev/null @@ -1,71 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import jQuery from 'jquery'; -import { isTesting } from '@embroider/macros'; -import { run } from '@ember/runloop'; - -const DEFAULT_OPTIONS = { - centered: false, - container: null, - modalClass: null, - header: true, - borderlessHeader: false, - tabindex: -1 -}; - -export default class OssModalComponent extends Component { - element = null; - - get options() { - return { ...DEFAULT_OPTIONS, ...(this.args.options || {}) }; - } - - get container() { - return isTesting() ? null : this.options.container; - } - - _handleEscapeKey(event) { - if (event.key === 'Escape') { - this.close(event); - } - } - - @action - setup(element) { - this.element = element; - - const modal = jQuery(this.element).modal({ backdrop: 'static' }); - - if (this.options.container) { - modal.appendTo(this.container); - } - - run(() => { - this.element.addEventListener('keydown', this._handleEscapeKey.bind(this)); - }); - } - - @action - teardown() { - jQuery(this.element).modal('hide'); - - if (this.isDestroying || this.isDestroyed) return; - - run(() => { - this.element.removeEventListener('keydown', this._handleEscapeKey.bind(this)); - }); - - this.element.remove(); - } - - @action - close(e) { - e?.preventDefault(); - - if (this.args.onClose) { - this.args.onClose(); - } - - jQuery(this.element).modal('hide'); - } -} diff --git a/app/components/o-s-s/modal.js b/app/components/o-s-s/modal.js deleted file mode 100644 index 985760bee..000000000 --- a/app/components/o-s-s/modal.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/o-s-s/modal'; diff --git a/tests/integration/components/o-s-s/modal-test.js b/tests/integration/components/o-s-s/modal-test.js deleted file mode 100644 index 62e7f64b5..000000000 --- a/tests/integration/components/o-s-s/modal-test.js +++ /dev/null @@ -1,127 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, triggerKeyEvent } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | o-s-s/modal', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs` - <OSS::Modal @title="Test Modal"> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - `); - - assert.equal(this.element.querySelector('.modal-title').textContent.trim(), 'Test Modal'); - }); - - module('available options', function () { - module('centered', function () { - test('it should set the centered class on the modal dialog', async function (assert) { - await render(hbs` - <OSS::Modal @title="Test Modal" @options={{hash centered=true}}> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - `); - - assert.dom('.modal-dialog').hasClass('modal-dialog--centered'); - }); - }); - - module('additional classes on the modal-dialog', function () { - test('it should add the passed class on the modal dialog', async function (assert) { - await render(hbs` - <OSS::Modal @title="Test Modal" @options={{hash modalClass="foobar"}}> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - `); - - assert.dom('.modal-dialog').hasClass('foobar'); - }); - }); - - module('borderless header', function () { - test('it should add the good class on the modal dialog', async function (assert) { - await render(hbs` - <OSS::Modal @title="Test Modal" @options={{hash borderlessHeader=true}}> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - `); - - assert.dom('.modal-dialog .modal-header').hasClass('modal-header__borderless'); - }); - }); - - module('no header', function () { - test('no header container is present', async function (assert) { - await render(hbs` - <OSS::Modal @options={{hash header=false}}> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - `); - - assert.dom('.modal-dialog .modal-header').doesNotExist(); - }); - }); - }); - - module('keyboard shortcut', function () { - test('it closes the modal on Escape key', async function (assert) { - this.display = true; - this.onClose = () => { - this.set('display', false); - }; - - await render(hbs` - {{#if this.display}} - <OSS::Modal @onClose={{this.onClose}}> - <div class="modal-body"> - Foo - </div> - - <div class="modal-footer"> - Bar - </div> - </OSS::Modal> - {{/if}} - `); - - assert.dom('.modal-dialog').exists(); - - await triggerKeyEvent('.modal', 'keydown', 'Escape'); - - assert.dom('.modal-dialog').doesNotExist(); - }); - }); -});