@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
47 lines (46 loc) • 1.69 kB
JavaScript
import { COLOR_CODES as o } from "./top-banner-info-constants.js";
import { n as t } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const i = {
name: "DtRecipeTopBannerInfo",
props: {
/**
* color of the banner background
*/
colorCode: {
type: String,
default: "green300",
validator: function(r) {
return o.includes(r);
}
}
},
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]];
}
}
};
var a = function() {
var n = this, e = n._self._c;
return e("div", { staticClass: "d-recipe-top-banner-info", class: n.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [e("div", { staticClass: "d-recipe-top-banner-info__left" }, [n._t("left")], 2), e("div", { staticClass: "d-recipe-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [n._t("default")], 2), e("div", { staticClass: "d-recipe-top-banner-info__right" }, [n._t("right")], 2)]);
}, s = [], c = /* @__PURE__ */ t(
i,
a,
s
);
const f = c.exports;
export {
f as default
};
//# sourceMappingURL=top-banner-info.js.map