chore: update dialtone-vue3 package with dialtone-vue repo

Author: juliodialpad

packages/dialtone-vue3/.eslintrc.cjs

@@ -1,3 +1,7 @@
+const componentsList = require('./common/components_list.cjs');
+componentsList.push('btn', 'select', 'validation-message', 'label', 'description');
+const componentsNames = componentsList.map(name => name.replace('_', '-').replace('.vue', ''));
+
 module.exports = {
   extends: [
     'standard',
@@ -146,6 +150,7 @@ module.exports = {
       nonwords: false,
     }],
     'vue/template-curly-spacing': ['error', 'never'],
+    'vue/no-restricted-class': ['error', `/^d-(?!(${componentsNames.join('|')})).*/`],
   },
   overrides: [
     {
@@ -174,6 +179,19 @@ module.exports = {
         'vue/no-bare-strings-in-template': [
           'off',
         ],
+        'vue/no-restricted-class': [
+          'off',
+        ],
+      },
+    },
+    {
+      files: [
+        'common/**',
+      ],
+      rules: {
+        'vue/no-restricted-class': [
+          'off',
+        ],
       },
     },
   ],

packages/dialtone-vue3/common/components_list.cjs

@@ -0,0 +1,49 @@
+module.exports = [
+  'datepicker.vue',
+  'avatar.vue',
+  'badge.vue',
+  'banner.vue',
+  'breadcrumbs.vue',
+  'button.vue',
+  'button_group.vue',
+  'card.vue',
+  'checkbox.vue',
+  'checkbox_group.vue',
+  'chip.vue',
+  'codeblock.vue',
+  'collapsible.vue',
+  'combobox.vue',
+  'description_list.vue',
+  'dropdown.vue',
+  'emoji.vue',
+  'emoji_picker.vue',
+  'emoji_text_wrapper.vue',
+  'icon.vue',
+  'image_viewer.vue',
+  'input.vue',
+  'input_group.vue',
+  'item_layout.vue',
+  'keyboard_shortcut.vue',
+  'lazy_show.vue',
+  'link.vue',
+  'list_item.vue',
+  'modal.vue',
+  'notice.vue',
+  'pagination.vue',
+  'popover.vue',
+  'presence.vue',
+  'radio.vue',
+  'radio_group.vue',
+  'root_layout.vue',
+  'scroller.vue',
+  'select_menu.vue',
+  'skeleton.vue',
+  'stack.vue',
+  'tab.vue',
+  'tab_group.vue',
+  'tab_panel.vue',
+  'toast.vue',
+  'toggle.vue',
+  'tooltip.vue',
+  'validation_messages.vue',
+];

packages/dialtone-vue3/components/avatar/avatar.vue

@@ -32,7 +32,7 @@
       />
       <span
         v-else
-        :class="[AVATAR_KIND_MODIFIERS.initials, 'd-ps-absolute d-zi-base d-us-none']"
+        :class="[AVATAR_KIND_MODIFIERS.initials]"
       >
         {{ formattedInitials }}
       </span>

packages/dialtone-vue3/components/chip/chip.vue

@@ -29,7 +29,7 @@
         v-if="hasSlotContent($slots.default)"
         :id="`${id}-content`"
         data-qa="dt-chip-label"
-        :class="['d-truncate', 'd-chip__text', contentClass]"
+        :class="['d-chip__text', contentClass]"
       >
         <!-- @slot slot for Content within chip -->
         <slot />

packages/dialtone-vue3/components/codeblock/codeblock.vue

@@ -1,8 +1,7 @@
 <template>
   <pre>
     <code
-      class="d-d-block d-bgc-secondary d-ws-pre-wrap d-p8 d-ba
-      d-bc-subtle d-bar8 d-fs-200 d-ff-mono d-lh-400 d-fc-secondary"
+      class="d-codeblock"
     >{{ text }}</code>
   </pre>
 </template>

packages/dialtone-vue3/components/collapsible/collapsible.test.js

@@ -28,7 +28,7 @@ describe('DtCollapsible Tests', () => {
 
     anchorElement = wrapper.find('[data-qa="dt-button"]');
     contentElement = wrapper.find('[data-qa="content-element"]');
-    contentWrapperElement = wrapper.getComponent('.d-dt-collapsible__content');
+    contentWrapperElement = wrapper.getComponent('[data-qa="dt-collapsible--content"]');
   };
 
   beforeAll(() => {

packages/dialtone-vue3/components/collapsible/collapsible.vue

@@ -8,10 +8,7 @@
     <div
       :id="!ariaLabelledBy && labelledBy"
       ref="anchor"
-      :class="[
-        'd-dt-collapsibe__anchor',
-        anchorClass,
-      ]"
+      :class="anchorClass"
     >
       <!-- @slot Slot for the anchor element that toggles the collapsible content -->
       <slot
@@ -34,10 +31,11 @@
         >
           <dt-icon
             :name=" isOpen ? 'chevron-down' : 'chevron-right'"
-            class="d-icon d-icon--size-300 d-mr8 d-fl-shrink0"
+            class="d-collapsible__icon"
+            size="300"
           />
           <span
-            class="d-mr-auto d-truncate"
+            class="d-collapsible__anchor-text"
             :title="anchorText"
           >
             {{ anchorText }}
@@ -53,14 +51,12 @@
       :aria-label="ariaLabel"
       :show="isOpen"
       :element-type="contentElementType"
-      :class="[
-        'd-dt-collapsible__content',
-        contentClass,
-      ]"
+      :class="contentClass"
       :style="{
         'max-height': maxHeight,
         'max-width': maxWidth,
       }"
+      data-qa="dt-collapsible--content"
       tabindex="-1"
       appear
       v-on="collapsibleListeners"

packages/dialtone-vue3/components/combobox/combobox_empty-list.vue

@@ -1,6 +1,6 @@
 <template>
   <ol
-    class="d-p0"
+    class="d-combobox__empty-list"
     data-qa="dt-combobox-empty-list"
   >
     <slot>

packages/dialtone-vue3/components/combobox/combobox_loading-list.vue

@@ -1,6 +1,6 @@
 <template>
   <ol
-    class="d-p0 d-mt8 d-hmx332 d-of-y-auto"
+    class="d-combobox__loading-list"
     aria-busy="true"
   >
     <dt-list-item

packages/dialtone-vue3/components/datepicker/datepicker.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { createTemplateFromVueFile } from '@/common/storybook_utils';
-import DtDatepicker from './DtDatepicker.vue';
+import DtDatepicker from './datepicker.vue';
 import DtDatepickerDefaultTemplate from './datepicker_default.story.vue';
 import DtDatepickerWithPopoverTemplate from './datepicker_popover.story.vue';
 

packages/dialtone-vue3/components/datepicker/datepicker.test.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { formatMonth } from '@/components/datepicker/utils.js';
-import DtDatepicker from './DtDatepicker.vue';
+import DtDatepicker from './datepicker.vue';
 import { MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';
 
 const MOCK_DAY = 21;

packages/dialtone-vue3/components/datepicker/DtDatepicker.vue renamed to packages/dialtone-vue3/components/datepicker/datepicker.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="d-datepicker">
     <div class="d-datepicker--header">

packages/dialtone-vue3/components/datepicker/datepicker_default.story.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script setup>
-import DtDatepicker from './DtDatepicker.vue';
+import DtDatepicker from './datepicker.vue';
 import { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } from './formatUtils.js';
 import { ref } from 'vue';
 

packages/dialtone-vue3/components/datepicker/datepicker_popover.story.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import DtDatepicker from './DtDatepicker.vue';
+import DtDatepicker from './datepicker.vue';
 import DtPopover from '@/components/popover/popover.vue';
 import DtButton from '@/components/button/button.vue';
 import DtIcon from '@/components/icon/icon.vue';

packages/dialtone-vue3/components/datepicker/index.js

@@ -1,2 +1,2 @@
-export { default as DtDatepicker } from './DtDatepicker.vue';
+export { default as DtDatepicker } from './datepicker.vue';
 export * from './formatUtils.js';

packages/dialtone-vue3/components/dropdown/dropdown.vue

@@ -390,10 +390,7 @@ export default {
 
     listClasses () {
       return [
-        'd-ps-relative',
-        'd-stack2',
-        'd-m4',
-        'd-px0',
+        'd-dropdown-list',
         DROPDOWN_PADDING_CLASSES[this.padding],
         this.listClass,
         { 'd-context-menu-list': this.openOnContext },
@@ -510,4 +507,13 @@ export default {
 .d-context-menu-list {
   width: var(--dt-size-850);
 }
+.d-dropdown-list {
+  position: relative;
+  margin: var(--dt-space-300);
+  padding-left: var(--dt-space-0);
+  padding-right: var(--dt-space-0);
+  >.dt-list-item {
+    margin-top: var(--dt-space-200);
+  }
+}
 </style>

packages/dialtone-vue3/components/dropdown/dropdown_list.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-restricted-class -->
 <template>
   <li>
     <div

packages/dialtone-vue3/components/dropdown/dropdown_separator.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     aria-hidden="true"
-    class="dt-list-separator d-my4 d-mxn4"
+    class="dt-list-separator"
   />
 </template>
 
@@ -18,5 +18,9 @@ export default {
 .dt-list-separator {
   border-top: var(--dt-size-100) solid var(--dt-color-border-default);
   list-style: none;
+  margin-top: var(--dt-space-300);
+  margin-bottom: var(--dt-space-300);
+  margin-left: var(--dt-space-300-negative);
+  margin-right: var(--dt-space-300-negative);
 }
 </style>

packages/dialtone-vue3/components/image_viewer/image_viewer.vue

@@ -2,7 +2,7 @@
   <div>
     <dt-button
       data-qa="dt-image-viewer-preview"
-      class="d-p0 d-c-zoom-in"
+      class="d-image-viewer__preview-button"
       :aria-label="ariaLabel"
       importance="clear"
       @click="openModal"
@@ -29,12 +29,12 @@
       >
         <div
           data-qa="dt-image-viewer-full"
-          class="d-p0 d-bar0 d-wmx80p d-hmx80p"
+          class="d-image-viewer__full"
           role="dialog"
           aria-modal="true"
         >
           <img
-            class="d-wmx100p d-hmx100p"
+            class="d-image-viewer__full__image"
             :src="imageSrc"
             :alt="imageAlt"
           >
@@ -54,7 +54,7 @@
           >
             <template #icon>
               <dt-icon
-                class="d-fc-neutral-white"
+                class="d-image-viewer__close-button"
                 name="close"
                 size="400"
               />

packages/dialtone-vue3/components/input/input.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-restricted-class -->
 <template>
   <div
     ref="container"
@@ -31,7 +32,6 @@
         :class="[
           'base-input__description',
           'd-description',
-          'd-fd-column',
           descriptionSizeClasses[size],
         ]"
         data-qa="dt-input-description"
@@ -45,9 +45,7 @@
         <div
           v-if="shouldValidateLength"
           data-qa="dt-input-length-description"
-          :class="[
-            'd-mb2',
-          ]"
+          class="d-input__length-description"
         >
           {{ validationProps.length.description }}
         </div>

packages/dialtone-vue3/components/item_layout/item_layout.vue

@@ -26,7 +26,7 @@
       <div
         v-if="$slots.subtitle"
         data-qa="dt-item-layout-subtitle-wrapper"
-        :class="['dt-item-layout--subtitle', { 'd-mtn2': $slots.default }]"
+        :class="['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': $slots.default }]"
       >
         <!-- @slot Slot for content below main content -->
         <slot name="subtitle" />
@@ -88,6 +88,11 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    .dt-item-layout--subtitle {
+      &--with-title {
+        margin-top: var(--dt-space-200-negative);
+      }
+    }
   }
 
   &--selected {

packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue

@@ -2,16 +2,8 @@
 <template>
   <kbd
     :class="[
-      'd-d-inline-flex',
-      'd-ff-custom',
-      'd-ai-center',
-      'd-jc-center',
-      'd-box-border',
-      'd-px4',
-      'd-ba',
-      'd-bar4',
-      'd-fs-100',
-      inverted ? 'd-bc-moderate-inverted' : 'd-bc-default',
+      'd-keyboard-shortcut',
+      { 'd-keyboard-shortcut--inverted': inverted },
     ]"
   >
     <span
@@ -30,17 +22,17 @@
         size="100"
         aria-hidden="true"
         :class="[
-          inverted ? 'd-fc-secondary-inverted' : 'd-fc-tertiary',
-          'd-mr2',
+          'd-keyboard-shortcut__icon',
+          { 'd-keyboard-shortcut__icon--inverted': inverted },
         ]"
       />
       <span
         v-else
         :key="`${i}-${item}`"
         aria-hidden="true"
         :class="[
-          inverted ? 'd-fc-secondary-inverted' : 'd-fc-tertiary',
-          'd-mr2',
+          'd-keyboard-shortcut__item',
+          { 'd-keyboard-shortcut__item--inverted': inverted },
         ]"
         v-html="item"
       />