@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 2.08 kB
Source Map (JSON)
{"version":3,"file":"top-banner-info.cjs","sources":["../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n <div\n class=\"d-recipe-top-banner-info\"\n :class=\"bannerInfoClass\"\n data-qa=\"banner-info\"\n >\n <div class=\"d-recipe-top-banner-info__left\">\n <slot name=\"left\" />\n </div>\n\n <div\n class=\"d-recipe-top-banner-info__middle\"\n data-qa=\"banner-info--middle\"\n >\n <slot />\n </div>\n\n <div class=\"d-recipe-top-banner-info__right\">\n <slot name=\"right\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n name: 'DtRecipeTopBannerInfo',\n\n props: {\n /**\n * color of the banner background\n */\n colorCode: {\n type: String,\n default: 'green300',\n validator: function (kind) {\n return COLOR_CODES.includes(kind);\n },\n },\n },\n\n computed: {\n bannerInfoClass () {\n const bgColors = {\n // these are too specific, so for now I'm at least updating the resultant semantic value\n // TODO: breaking change: update to be more abstract\n green100: 'd-recipe-top-banner-info--success',\n green300: 'd-recipe-top-banner-info--success',\n red100: 'd-recipe-top-banner-info--critical',\n red200: 'd-recipe-top-banner-info--critical',\n gold100: 'd-recipe-top-banner-info--warning',\n gold200: 'd-recipe-top-banner-info--warning',\n black100: 'd-recipe-top-banner-info--info',\n white: 'd-recipe-top-banner-info--primary',\n };\n return [bgColors[this.colorCode]];\n },\n },\n};\n</script>\n"],"names":["_sfc_main","kind","COLOR_CODES"],"mappings":"uNA0BAA,EAAA,CACA,KAAA,wBAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,QAAA,WACA,UAAA,SAAAC,EAAA,CACA,OAAAC,EAAA,YAAA,SAAAD,CAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,iBAAA,CAaA,MAAA,CAZA,CAGA,SAAA,oCACA,SAAA,oCACA,OAAA,qCACA,OAAA,qCACA,QAAA,oCACA,QAAA,oCACA,SAAA,iCACA,MAAA,mCACA,EACA,KAAA,SAAA,CAAA,CACA,CACA,CACA"}