feat(localization): DLT-2461 refactor components

packages/dialtone-vue2/common/mixins/index.js

@@ -25,3 +25,7 @@ export {
 export {
   default as DtSrOnlyCloseButtonMixin,
 } from './sr_only_close_button';
+
+export {
+  default as DtLocalizationMixin,
+} from './localization';

packages/dialtone-vue2/common/mixins/localization.js

@@ -0,0 +1,14 @@
+import { useI18N } from '@dialpad/i18n-vue2';
+const { $t, $ta, currentLocale, setI18N } = useI18N();
+
+export default {
+  methods: {
+    $t,
+    $ta,
+    setI18N,
+  },
+  //
+  computed: {
+    currentLocale: () => currentLocale,
+  },
+};

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

@@ -1,20 +1,66 @@
+import { action } from '@storybook/addon-actions';
 import DtBanner from './banner.vue';
-import { createRenderConfig } from '@/common/storybook_utils';
-
+import { NOTICE_KINDS } from '@/components/notice/index.js';
 import BannerDefault from './banner_default.story.vue';
-import { argsData as noticeArgsData, argTypesData as noticeArgTypesData } from '../notice/notice.stories.js';
-
 import backgroundImage from '@/common/assets/dialpad-gradient.png';
+import { createRenderConfig, getIconNames } from '@/common/storybook_utils';
+
+const iconsList = getIconNames();
 
 export const argsData = {
-  ...noticeArgsData,
+  onClose: action('close'),
+  onClick: action('click'),
+  show: undefined,
   backgroundImage: null,
-  visuallyHiddenCloseLabel: 'Close Banner',
 };
 
 export const argTypesData = {
-  ...noticeArgTypesData,
-  role: {
+  // Slots
+  titleOverride: {
+    table: {
+      type: { summary: 'VNode' },
+    },
+    control: {
+      type: 'text',
+    },
+  },
+  icon: {
+    options: iconsList,
+    table: {
+      type: { summary: 'component' },
+    },
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
+  },
+  default: {
+    table: {
+      type: { summary: 'VNode' },
+    },
+    control: {
+      type: 'text',
+    },
+  },
+  action: {
+    table: {
+      type: { summary: 'VNode' },
+    },
+    control: {
+      type: 'text',
+    },
+  },
+
+  // Props
+  kind: {
+    options: NOTICE_KINDS,
+    control: {
+      type: 'select',
+    },
+  },
+  show: {
     table: {
       disable: true,
     },
@@ -33,6 +79,11 @@ export const argTypesData = {
       },
     },
   },
+  hideClose: {
+    control: {
+      type: 'boolean',
+    },
+  },
   hideIcon: {
     control: {
       type: 'boolean',
@@ -43,6 +94,34 @@ export const argTypesData = {
       type: 'boolean',
     },
   },
+  important: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  pinned: {
+    control: {
+      type: 'boolean',
+    },
+  },
+
+  // Action Event Handlers
+  onClick: {
+    table: {
+      disable: true,
+    },
+  },
+  onClose: {
+    table: {
+      disable: true,
+    },
+  },
+  close: {
+    description: 'Close button click event',
+    table: {
+      type: { summary: 'event' },
+    },
+  },
 };
 
 export default {

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

@@ -37,7 +37,6 @@
       <dt-notice-action
         :hide-action="hideAction"
         :hide-close="hideClose"
-        :close-button-props="closeButtonProps"
         :visually-hidden-close="visuallyHiddenClose"
         :visually-hidden-close-label="visuallyHiddenCloseLabel"
         v-on="$listeners"
@@ -130,14 +129,6 @@ export default {
       },
     },
 
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({}),
-    },
-
     /**
      * Hides the close button from the notice
      * @values true, false

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

@@ -106,7 +106,6 @@ export default {
       return {
         ...this.$attrs.closeButtonProps,
         kind: this.buttonKind,
-        ariaLabel: 'Close',
       };
     },
   },

packages/dialtone-vue2/components/breadcrumbs/breadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    :aria-label="ariaLabel"
+    :aria-label="ariaLabel || $t('BREADCRUMB_ARIA_LABEL')"
     data-qa="dt-breadcrumbs"
     :class="[
       'd-breadcrumbs',
@@ -26,6 +26,7 @@
 import { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';
 import DtBreadcrumbItem from './breadcrumb_item.vue';
 import utils from '@/common/utils';
+import { DtLocalizationMixin } from '@/common/mixins';
 
 /**
  * Breadcrumbs are links used to provide context for the currently-viewed page
@@ -39,6 +40,8 @@ export default {
     DtBreadcrumbItem,
   },
 
+  mixins: [DtLocalizationMixin],
+
   props: {
     /**
      * A provided list of breadcrumbs. Overridden by default slot
@@ -67,7 +70,7 @@ export default {
      */
     ariaLabel: {
       type: String,
-      default: 'breadcrumb',
+      default: '',
     },
   },
 

packages/dialtone-vue2/components/button/button.vue

@@ -9,7 +9,7 @@
     :disabled="disabled"
     :style="{ width: width }"
     :aria-live="computedAriaLive"
-    :aria-label="loading ? 'loading' : $attrs['aria-label']"
+    :aria-label="loading ? $t('LOADING') : $attrs['aria-label']"
     v-on="buttonListeners"
   >
     <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->
@@ -54,6 +54,8 @@ import {
 
 import { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';
 
+import { DtLocalizationMixin } from '@/common/mixins';
+
 /**
  * A button is a UI element which allows users to take an action throughout the app.
  * It is important a button is identifiable, consistent, and communicates its actions clearly,
@@ -63,6 +65,8 @@ import { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';
 export default {
   name: 'DtButton',
 
+  mixins: [DtLocalizationMixin],
+
   props: {
     /**
      * Whether the button is a circle or not.

packages/dialtone-vue2/components/chip/chip.stories.js

@@ -12,7 +12,6 @@ export const argsData = {
   onClose: action('close'),
   onClick: action('click'),
   size: 'md',
-  closeButtonProps: { ariaLabel: 'close' },
   avatarSeed: '',
 };
 

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

@@ -3,17 +3,17 @@
     <component
       :is="interactive ? 'button' : 'span'"
       :id="id"
-      :type="interactive && 'button'"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabel ? undefined : `${id}-content`"
       :class="chipClasses()"
+      :type="interactive && 'button'"
       data-qa="dt-chip"
-      :aria-labelledby="ariaLabel ? undefined : `${id}-content`"
-      :aria-label="ariaLabel"
       v-on="chipListeners"
     >
       <span
         v-if="$slots.icon"
-        data-qa="dt-chip-icon"
         class="d-chip__icon"
+        data-qa="dt-chip-icon"
       >
         <!-- @slot slot for Chip icon -->
         <slot name="icon" />
@@ -28,19 +28,18 @@
       <span
         v-if="$slots.default"
         :id="`${id}-content`"
-        data-qa="dt-chip-label"
         :class="['d-chip__text', contentClass]"
+        data-qa="dt-chip-label"
       >
         <!-- @slot slot for Content within chip -->
         <slot />
       </span>
     </component>
     <dt-button
       v-if="!hideClose"
-      v-bind="closeButtonProps"
       :class="chipCloseButtonClasses()"
       data-qa="dt-chip-close"
-      :aria-label="closeButtonProps.ariaLabel"
+      v-bind="$ta('CLOSE_BUTTON')"
       @click="$emit('close')"
     >
       <template #icon>
@@ -61,6 +60,7 @@ import {
   CHIP_ICON_SIZES,
 } from './chip_constants';
 import { getUniqueString } from '@/common/utils';
+import { DtLocalizationMixin } from '@/common/mixins';
 
 /**
  * A chip is a compact UI element that provides brief, descriptive information about an element.
@@ -76,18 +76,9 @@ export default {
     DtIconClose,
   },
 
-  props: {
-    /**
-     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: function () { return { ariaLabel: 'close' }; },
-      validator: (props) => {
-        return !!props.ariaLabel;
-      },
-    },
+  mixins: [DtLocalizationMixin],
 
+  props: {
     /**
      * Hides the close button on the chip
      * @values true, false

packages/dialtone-vue2/components/chip/chip_default.story.vue

@@ -3,7 +3,6 @@
   <dt-chip
     :id="$attrs.id"
     :hide-close="$attrs.hideClose"
-    :close-button-props="$attrs.closeButtonProps"
     :interactive="$attrs.interactive"
     :size="$attrs.size"
     :aria-label="$attrs.ariaLabel"
@@ -38,9 +37,9 @@
 
 <script>
 import DtChip from './chip.vue';
+import { CHIP_ICON_SIZES } from './chip_constants.js';
 import { DtIcon } from '@/components/icon';
-import { CHIP_ICON_SIZES } from '@/components/chip/chip_constants';
-import DtAvatar from '@/components/avatar/avatar.vue';
+import { DtAvatar } from '@/components/avatar';
 
 export default {
   name: 'DtChipDefault',

packages/dialtone-vue2/components/chip/chip_variants.story.vue

@@ -3,7 +3,7 @@
   <div class="d-d-flex d-fd-column d-stack8">
     <div>
       <h4>With Icon</h4>
-      <dt-chip :close-button-props="$attrs.closeButtonProps">
+      <dt-chip>
         <template #icon>
           <dt-icon
             name="lock-filled"
@@ -17,7 +17,7 @@
     </div>
     <div>
       <h4>With Avatar</h4>
-      <dt-chip :close-button-props="$attrs.closeButtonProps">
+      <dt-chip>
         <template #avatar>
           <dt-avatar
             full-name="Jaqueline Nackos"
@@ -33,8 +33,7 @@
       <h4>Non interactive</h4>
       <dt-chip
         :interactive="false"
-        :hide-close="true"
-        :close-button-props="$attrs.closeButtonProps"
+        hide-close
       >
         <template #default>
           Chip
@@ -47,7 +46,7 @@
 <script>
 import DtChip from './chip.vue';
 import { DtIcon } from '@/components/icon';
-import DtAvatar from '@/components/avatar/avatar.vue';
+import { DtAvatar } from '@/components/avatar';
 
 export default {
   name: 'DtChipVariants',