diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 2c80fa5e..78e9b7fd 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -1,6 +1,6 @@ /* eslint-disable node/no-unpublished-import */ -import 'elix/define/MenuButton.js'; import 'elix/define/MenuItem.js'; +import './sePlainMenuButton.js'; const template = document.createElement('template'); template.innerHTML = ` diff --git a/src/editor/components/sePlainBorderButton.js b/src/editor/components/sePlainBorderButton.js new file mode 100644 index 00000000..6fd53c75 --- /dev/null +++ b/src/editor/components/sePlainBorderButton.js @@ -0,0 +1,34 @@ +/* eslint-disable node/no-unpublished-import */ +import {template} from 'elix/src/base/internal.js'; +import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import PlainButton from 'elix/src/plain/PlainButton.js'; + +/** + * @class SePlainBorderButton + * Button with a border in the Plain reference design system + * + * @inherits PlainButton + */ +class SePlainBorderButton extends PlainButton { + /** + * @function get + * @returns {PlainObject} + */ + get [template] () { + const result = super[template]; + result.content.append( + fragmentFrom.html` + + ` + ); + return result; + } +} + +export default SePlainBorderButton; diff --git a/src/editor/components/sePlainMenuButton.js b/src/editor/components/sePlainMenuButton.js new file mode 100644 index 00000000..85c29c21 --- /dev/null +++ b/src/editor/components/sePlainMenuButton.js @@ -0,0 +1,21 @@ +/* eslint-disable node/no-unpublished-import */ +import PlainMenuButton from 'elix/src/plain/PlainMenuButton.js'; +import {defaultState} from 'elix/src/base/internal.js'; +import sePlainBorderButton from './sePlainBorderButton.js'; + +/** + * @class ElixMenuButton + */ +export default class ElixMenuButton extends PlainMenuButton { + /** + * @function get + * @returns {PlainObject} + */ + get [defaultState] () { + return Object.assign(super[defaultState], { + sourcePartType: sePlainBorderButton + }); + } +} + +customElements.define('elix-menu-button', ElixMenuButton);