@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
155 lines (154 loc) • 4.73 kB
JavaScript
import DtNoticeIcon from "./notice_icon.vue.js";
import DtNoticeContent from "./notice_content.vue.js";
import DtNoticeAction from "./notice_action.vue.js";
import { NOTICE_ROLES, NOTICE_KINDS } from "./notice_constants.js";
import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtNotice",
components: {
DtNoticeIcon,
DtNoticeContent,
DtNoticeAction
},
mixins: [SrOnlyCloseButtonMixin],
props: {
/**
* Sets an ID on the title element of the component. Useful for aria-describedby
* or aria-labelledby or any other reason you may need an id to refer to the title.
*/
titleId: {
type: String,
default: void 0
},
/**
* Sets an ID on the content element of the component. Useful for aria-describedby
* or aria-labelledby or any other reason you may need an id to refer to the content.
*/
contentId: {
type: String,
default: void 0
},
/**
* Title header of the notice. This can be left blank to remove the title from the notice entirely.
*/
title: {
type: String,
default: ""
},
/**
* Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
* important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
* important message that does contain interactive elements.
* @values alert, alertdialog, status
*/
role: {
type: String,
default: "status",
validate(role) {
return NOTICE_ROLES.includes(role);
}
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* This will also change the aria role from status to alert.
* @values true, false
*/
important: {
type: Boolean,
default: false
},
/**
* Severity level of the notice, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validate(kind) {
return NOTICE_KINDS.includes(kind);
}
},
/**
* Props for the notice close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the notice
* @values true, false
*/
hideClose: {
type: Boolean,
default: false
},
/**
* Hides the icon from the notice
* @values true, false
*/
hideIcon: {
type: Boolean,
default: false
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: false
},
/**
* Truncates the content instead of wrapping.
* Used when the notice needs to have a fixed height.
* @values true, false
*/
truncateText: {
type: Boolean,
default: false
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close"
],
computed: {
noticeClass() {
const noticeKinds = {
error: "d-notice--error",
info: "d-notice--info",
success: "d-notice--success",
warning: "d-notice--warning",
base: "d-notice--base"
};
return [
"d-notice",
noticeKinds[this.kind],
{ "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
];
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("aside", { class: _vm.noticeClass, attrs: { "data-qa": "notice" } }, [!_vm.hideIcon ? _c("dt-notice-icon", { attrs: { "kind": _vm.kind } }, [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title, "role": _vm.role }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
return [_vm._t("titleOverride")];
}, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default")], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.$listeners), [_vm._t("action")], 2)], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const notice = __component__.exports;
export {
notice as default
};
//# sourceMappingURL=notice.vue.js.map