refactor(components): DLT-3284 refactor props to not have native html attributes names (#1204)

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

Author: iropolo

packages/combinator/src/components/renderer/renderer_target.vue

@@ -136,7 +136,7 @@ function renderError (exception, container) {
   render(h(DtNotice, {
     kind: 'critical',
     showClose: false,
-    title: ERROR_MESSAGE,
+    headerText: ERROR_MESSAGE,
   }, {
     default: () => exception.toString(),
   }), container);

packages/combinator/src/variants/variants_banner.js

@@ -1,5 +1,5 @@
-/* eslint-disable max-len */
 
+
 export default {
   default: {
     slots: {
@@ -8,7 +8,7 @@ export default {
       },
     },
     props: {
-      title: {
+      headerText: {
         initialValue: 'Example banner',
       },
       kind: {

packages/combinator/src/variants/variants_modal.js

@@ -1,9 +1,9 @@
 /* eslint-disable max-len */
- 
+
 export default {
   default: {
     props: {
-      title: {
+      headerText: {
         initialValue: 'Example title',
       },
       copy: {
@@ -18,7 +18,7 @@ export default {
   },
   danger: {
     props: {
-      title: {
+      headerText: {
         initialValue: 'Example title',
       },
       copy: {

packages/combinator/src/variants/variants_notice.js

@@ -17,15 +17,15 @@ export default {
       },
     },
     props: {
-      title: {
+      headerText: {
         initialValue: 'Base title',
       },
     },
   },
 
   'info with action and hide close': {
     props: {
-      title: { initialValue: 'Info title' },
+      headerText: { initialValue: 'Info title' },
       kind: { initialValue: 'info' },
       showClose: { initialValue: false },
     },
@@ -37,7 +37,7 @@ export default {
 
   'important warning with no message': {
     props: {
-      title: { initialValue: 'Warning title' },
+      headerText: { initialValue: 'Warning title' },
       kind: { initialValue: 'warning' },
       important: { initialValue: true },
     },

packages/combinator/src/variants/variants_toast.js

@@ -1,4 +1,4 @@
- 
+
 
 export default {
   defaults: {
@@ -14,7 +14,7 @@ export default {
       },
     },
     props: {
-      title: {
+      headerText: {
         initialValue: 'Base title (optional)',
       },
       show: {
@@ -25,7 +25,7 @@ export default {
 
   'info with action and hide close': {
     props: {
-      title: { initialValue: 'Info title' },
+      headerText: { initialValue: 'Info title' },
       kind: { initialValue: 'info' },
       showClose: { initialValue: false },
       show: { initialValue: true },
@@ -38,7 +38,7 @@ export default {
 
   'important warning with no message': {
     props: {
-      title: { initialValue: 'Warning title' },
+      headerText: { initialValue: 'Warning title' },
       kind: { initialValue: 'warning' },
       important: { initialValue: true },
       show: { initialValue: true },

packages/dialtone-vue/components/banner/banner.stories.js

@@ -46,6 +46,11 @@ export const argTypesData = {
   },
 
   // Props
+  headerText: {
+    control: {
+      type: 'text',
+    },
+  },
   kind: {
     options: NOTICE_KINDS,
     control: {
@@ -57,7 +62,7 @@ export const argTypesData = {
       disable: true,
     },
   },
-  titleId: {
+  headerId: {
     table: {
       defaultValue: {
         summary: 'generated unique ID',
@@ -130,7 +135,7 @@ export const Default = {
   render: Template,
 
   args: {
-    title: 'Optional title',
+    headerText: 'Optional title',
     action: 'Action',
     kind: 'base',
   },
@@ -181,7 +186,7 @@ export const CustomBackground = {
     ...Default.args,
     backgroundImage,
     backgroundSize: 'contain',
-    title: '',
+    headerText: '',
     action: '',
     showIcon: false,
     dialogClass: 'd-fc-neutral-white',

packages/dialtone-vue/components/banner/banner.vue

@@ -9,25 +9,25 @@
       class="d-banner__dialog"
       :class="dialogClass"
       :role="role"
-      :aria-labelledby="titleId"
+      :aria-labelledby="headerId"
       :aria-describedby="contentId"
     >
       <dt-notice-icon
         v-if="showIcon"
         :kind="kind"
-        :class="{ 'd-notice__icon--has-title': title || $slots.title }"
+        :class="{ 'd-notice__icon--has-title': headerText || $slots.header }"
       >
         <!-- @slot Slot for custom icon -->
         <slot name="icon" />
       </dt-notice-icon>
       <dt-notice-content
-        :title-id="titleId"
+        :header-id="headerId"
         :content-id="contentId"
-        :title="title"
+        :header-text="headerText"
       >
-        <template #title>
-          <!-- @slot Slot for the title -->
-          <slot name="title" />
+        <template #header>
+          <!-- @slot Slot for the header -->
+          <slot name="header" />
         </template>
         <!-- @slot the main textual content of the banner -->
         <slot />
@@ -68,10 +68,10 @@ export default {
 
   props: {
     /**
-     * Sets an ID on the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     * Sets an ID on the header element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the header.
      */
-    titleId: {
+    headerId: {
       type: String,
       default () { return utils.getUniqueString(); },
     },
@@ -86,11 +86,11 @@ export default {
     },
 
     /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     * Header text of the banner. This can be left blank to remove the header from the banner entirely.
      */
-    title: {
+    headerText: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     /**

packages/dialtone-vue/components/banner/banner_default.story.vue

@@ -10,8 +10,8 @@
     <dt-banner
       v-show="displayBanner"
       :kind="$attrs.kind"
-      :title="$attrs.title"
-      :title-id="$attrs.titleId"
+      :header-text="$attrs.headerText"
+      :header-id="$attrs.headerId"
       :content-id="$attrs.contentId"
       :important="$attrs.important"
       :pinned="$attrs.pinned"

packages/dialtone-vue/components/modal/modal.stories.js

@@ -17,7 +17,7 @@ viverra iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. V
 maximus ipsum ex. Curabitur elementum luctus augue, quis eleifend tortor feugiat vel. \
 Maecenas maximus, ipsum et laoreet congue, diam massa aliquam libero, at pellentesque \
 orci ipsum et velit.`,
-  title: 'Example Title',
+  headerText: 'Example Title',
   onClose: action('update:open'),
 };
 
@@ -57,6 +57,16 @@ export const argTypesData = {
   },
 
   // Props
+  headerText: {
+    control: {
+      type: 'text',
+    },
+  },
+  bannerHeaderText: {
+    control: {
+      type: 'text',
+    },
+  },
   contentMode: CONTENT_MODE_ARG_TYPE,
   size: {
     options: Object.keys(MODAL_SIZE_MODIFIERS),
@@ -183,7 +193,7 @@ export const WithBanner = {
   render: DefaultTemplate,
 
   args: {
-    bannerTitle: 'Example banner',
+    bannerHeaderText: 'Example banner',
   },
 
   parameters: { ...Default.parameters },

packages/dialtone-vue/components/modal/modal.test.js

@@ -4,16 +4,16 @@ import { mount } from '@vue/test-utils';
 const SYNC_EVENT_NAME = 'update:open';
 
 const MOCK_MODAL_COPY = 'test modal copy';
-const MOCK_MODAL_TITLE = 'test modal title';
+const MOCK_MODAL_HEADER_TEXT = 'test modal header text';
 const MOCK_MODAL_BANNER = 'test modal banner';
 const MOCK_MODAL_DEFAULT_SLOT = 'test content';
 const MOCK_MODAL_HEADER_SLOT = 'test header';
 const MOCK_MODAL_BANNER_SLOT = 'title';
 
 const baseProps = {
-  title: MOCK_MODAL_TITLE,
+  headerText: MOCK_MODAL_HEADER_TEXT,
   copy: MOCK_MODAL_COPY,
-  bannerTitle: MOCK_MODAL_BANNER,
+  bannerHeaderText: MOCK_MODAL_BANNER,
   open: true,
 };
 
@@ -81,9 +81,9 @@ describe('DtModal Tests', () => {
       expect(overlay.element.tagName).toBe('DIALOG');
     });
 
-    it('should render the title content', () => {
+    it('should render the header text content', () => {
       expect(title.exists()).toBe(true);
-      expect(title.text()).toEqual(MOCK_MODAL_TITLE);
+      expect(title.text()).toEqual(MOCK_MODAL_HEADER_TEXT);
     });
 
     it('should render the banner content', () => {
@@ -129,7 +129,7 @@ describe('DtModal Tests', () => {
     });
 
     describe('When slots are provided', () => {
-      it('Should display slotted header instead of title', () => {
+      it('Should display slotted header instead of headerText', () => {
         mockSlots = {
           header: MOCK_MODAL_HEADER_SLOT,
         };
@@ -139,7 +139,7 @@ describe('DtModal Tests', () => {
         expect(title.text()).toEqual(MOCK_MODAL_HEADER_SLOT);
       });
 
-      it('Should display slotted banner instead of bannerTitle', () => {
+      it('Should display slotted banner instead of bannerHeaderText', () => {
         mockSlots = {
           banner: MOCK_MODAL_BANNER_SLOT,
         };
@@ -219,11 +219,11 @@ describe('DtModal Tests', () => {
 
     it('Should apply banner class', async () => {
       const bannerClass = 'banner-class';
-      const bannerTitle = 'title';
+      const bannerHeaderText = 'title';
 
       await wrapper.setProps({
         open: true,
-        bannerTitle,
+        bannerHeaderText,
         bannerClass,
       });
 
@@ -236,7 +236,7 @@ describe('DtModal Tests', () => {
       await wrapper.setProps({
         open: true,
         bannerKind: 'info',
-        bannerTitle: 'title',
+        bannerHeaderText: 'title',
       });
 
       banner = wrapper.find('[data-qa="dt-modal-banner"]');
@@ -248,7 +248,7 @@ describe('DtModal Tests', () => {
       await wrapper.setProps({
         show: true,
         bannerKind: 'critical',
-        bannerTitle: 'title',
+        bannerHeaderText: 'title',
       });
 
       banner = wrapper.find('[data-qa="dt-modal-banner"]');