@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 8.39 kB
Source Map (JSON)
{"version":3,"file":"banner.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n <aside\n :class=\"bannerClass\"\n :style=\"bannerBackgroundImage\"\n @keydown.tab=\"trapFocus\"\n >\n <div\n class=\"d-banner__dialog\"\n :class=\"dialogClass\"\n :role=\"role\"\n :aria-labelledby=\"titleId\"\n :aria-describedby=\"contentId\"\n >\n <dt-notice-icon\n v-if=\"!hideIcon\"\n :kind=\"kind\"\n >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal],\n\n props: {\n /**\n * Sets an ID on the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n */\n titleId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /**\n * Sets an ID on the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n */\n contentId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /**\n * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alertdialog.\n * and will modally trap the keyboard focus in the dialog as soon as it displays.\n * @values true, false\n */\n important: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Pins the banner to the top of the window and pushes all app content down.\n * @values true, false\n */\n pinned: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Severity level of the notice, sets the icon and background\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /**\n * Hides the close button from the notice\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Hides the icon from the notice\n * @values true, false\n */\n hideIcon: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Hides the action from the notice\n * @values true, false\n */\n hideAction: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Inner dialog class\n */\n dialogClass: {\n type: String,\n default: '',\n },\n\n /**\n * Banner background image\n */\n backgroundImage: {\n type: String,\n default: '',\n },\n\n /**\n * Background image size, follows the background-size CSS property values\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n * CSS background-sizes\n * </a>\n */\n backgroundSize: {\n type: String,\n default: 'cover',\n },\n },\n\n emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n ],\n\n computed: {\n role () {\n return this.important ? 'alertdialog' : 'status';\n },\n\n bannerClass () {\n const kindClasses = {\n error: 'd-banner--error',\n info: 'd-banner--info',\n success: 'd-banner--success',\n warning: 'd-banner--warning',\n base: 'd-banner--base',\n };\n\n return [\n 'd-banner',\n kindClasses[this.kind],\n {\n 'd-banner--important': this.important,\n 'd-banner--pinned': this.pinned,\n },\n ];\n },\n\n bannerBackgroundImage () {\n if (this.backgroundImage === '') return null;\n\n return `background-image: url(${this.backgroundImage});\n background-size: ${this.backgroundSize};`;\n },\n },\n\n mounted () {\n if (this.important) {\n this.focusFirstElement();\n }\n },\n\n methods: {\n trapFocus (e) {\n if (this.important) {\n this.focusTrappedTabPress(e);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"wbAwDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,OAAQ,CAACC,EAAAA,OAAK,EAEd,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAO/C,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAOA,EAAAA,QAAM,gBAAe,CAAI,GAM/C,MAAO,CACL,KAAM,OACN,QAAS,IASX,UAAW,CACT,KAAM,QACN,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,gBAAiB,CACf,KAAM,OACN,QAAS,IASX,eAAgB,CACd,KAAM,OACN,QAAS,UAIb,MAAO,CAML,SAGF,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,QAC1C,EAEA,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAKM,KAAK,IAAI,EACrB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,QAG/B,EAEA,uBAAyB,CACvB,OAAI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc,GAChD,GAGF,SAAW,CACL,KAAK,WACP,KAAK,kBAAiB,CAE1B,EAEA,QAAS,CACP,UAAWE,EAAG,CACR,KAAK,WACP,KAAK,qBAAqBA,CAAC,CAE/B,EAEJ,EA5OAC,EAAA,CAAA,OAAA,kBAAA,kBAAA,+KAEEC,EAAAA,mBAyCQ,QAAA,CAxCL,MAHLC,EAAAA,eAGYC,EAAA,WAAW,EAClB,MAJLC,EAAAA,eAIYD,EAAA,qBAAqB,EAC5B,UAAOE,EAAA,CAAA,IAAAA,EAAA,CAAA,EALZC,EAAAA,iBAKkBH,EAAA,WAAAA,EAAA,UAAA,GAAAI,CAAA,EAAS,CAAA,KAAA,CAAA,KAEvBC,EAAAA,mBAmCM,MAAA,CAlCJ,MARNN,EAAAA,eAAA,CAQY,mBACEO,EAAA,WAAW,CAAA,EAClB,KAAMN,EAAA,KACN,kBAAiBM,EAAA,QACjB,mBAAkBA,EAAA,YAGVA,EAAA,SAffC,EAAAA,mBAAA,GAAA,EAAA,iBAcMC,EAAAA,YAMiBC,EAAA,CApBvB,IAAA,EAgBS,KAAMH,EAAA,OAhBf,QAAAI,EAAAA,QAmBQ,IAAoB,CAApBC,aAAoBC,EAAA,OAAA,MAAA,IAnB5B,EAAA,gBAqBMC,EAAAA,YAYoBC,EAAA,CAXjB,WAAUR,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,QAEG,wBAGT,IAA6B,CAA7BK,aAA6BC,EAAA,OAAA,eAAA,IA7BvC,QAAAF,EAAAA,QAgCQ,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAhChB,EAAA,wCAkCMC,EAAAA,YAOmBE,EAAA,CANhB,cAAaT,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOM,EAAA,MAAK,OAAA,KArCrB,QAAAF,EAAAA,QAwCQ,IAAsB,CAAtBC,aAAsBC,EAAA,OAAA,QAAA,IAxC9B,EAAA,kCAAA,EAAA,GAAAf,CAAA"}