@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
64 lines (63 loc) • 2.19 kB
JavaScript
import { COLOR_CODES } from "./top_banner_info_constants.js";
import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeTopBannerInfo",
props: {
/**
* color of the banner background
*/
colorCode: {
type: String,
default: "green300",
validator: function(kind) {
return COLOR_CODES.includes(kind);
}
}
},
computed: {
bannerInfoClass() {
const bgColors = {
// 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"
};
return [bgColors[this.colorCode]];
}
}
};
const _hoisted_1 = { class: "d-recipe-top-banner-info__left" };
const _hoisted_2 = {
class: "d-recipe-top-banner-info__middle",
"data-qa": "banner-info--middle"
};
const _hoisted_3 = { class: "d-recipe-top-banner-info__right" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["d-recipe-top-banner-info", $options.bannerInfoClass]),
"data-qa": "banner-info"
}, [
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "left")
]),
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "default")
]),
createElementVNode("div", _hoisted_3, [
renderSlot(_ctx.$slots, "right")
])
], 2);
}
const top_banner_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
top_banner_info as default
};
//# sourceMappingURL=top_banner_info.vue.js.map