@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
60 lines (59 loc) • 1.86 kB
JavaScript
import { COLOR_CODES as i } from "./top-banner-info-constants.js";
import { createElementBlock as t, openBlock as a, normalizeClass as s, createElementVNode as n, renderSlot as o } from "vue";
import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const d = {
compatConfig: { MODE: 3 },
name: "DtRecipeTopBannerInfo",
props: {
/**
* color of the banner background
*/
colorCode: {
type: String,
default: "green300",
validator: function(e) {
return i.includes(e);
}
}
},
computed: {
bannerInfoClass() {
return [{
// these are too specific, so for now I'm at least updating the resultant semantic value
// TODO: breaking change: update to be more abstract
green100: "d-recipe-top-banner-info--success",
green300: "d-recipe-top-banner-info--success",
red100: "d-recipe-top-banner-info--critical",
red200: "d-recipe-top-banner-info--critical",
gold100: "d-recipe-top-banner-info--warning",
gold200: "d-recipe-top-banner-info--warning",
black100: "d-recipe-top-banner-info--info",
white: "d-recipe-top-banner-info--primary"
}[this.colorCode]];
}
}
}, p = { class: "d-recipe-top-banner-info__left" }, l = {
class: "d-recipe-top-banner-info__middle",
"data-qa": "banner-info--middle"
}, f = { class: "d-recipe-top-banner-info__right" };
function _(e, b, m, g, u, r) {
return a(), t("div", {
class: s(["d-recipe-top-banner-info", r.bannerInfoClass]),
"data-qa": "banner-info"
}, [
n("div", p, [
o(e.$slots, "left")
]),
n("div", l, [
o(e.$slots, "default")
]),
n("div", f, [
o(e.$slots, "right")
])
], 2);
}
const v = /* @__PURE__ */ c(d, [["render", _]]);
export {
v as default
};
//# sourceMappingURL=top-banner-info.js.map