@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
50 lines (49 loc) • 1.92 kB
JavaScript
import { COLOR_CODES } from "./top_banner_info_constants.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
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]];
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-recipe-top-banner-info", class: _vm.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [_c("div", { staticClass: "d-recipe-top-banner-info__left" }, [_vm._t("left")], 2), _c("div", { staticClass: "d-recipe-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [_vm._t("default")], 2), _c("div", { staticClass: "d-recipe-top-banner-info__right" }, [_vm._t("right")], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const top_banner_info = __component__.exports;
export {
top_banner_info as default
};
//# sourceMappingURL=top_banner_info.vue.js.map