chore: sync dialtone vue packages (#34)

* WIP: syncing packages

* Sync recipes

* syncing components

* syncing constants

* add files

* fix issues

apps/dialtone-documentation/project.json

@@ -17,7 +17,7 @@
       "outputs": [],
       "options": {
         "script": "build",
-        "parallel": false
+        "parallel": true
       }
     },
     "start": {

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

@@ -166,8 +166,12 @@ export default ({
       this.focusActiveItemIfNeeded();
     },
 
-    isValidCharacter (key) {
-      return key.length === 1;
+    isValidLetter (key) {
+      if (key.length > 1) {
+        return false;
+      }
+
+      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');
     },
 
     jumpToBeginning () {

packages/dialtone-vue2/common/sr_only_close_button.vue

@@ -33,6 +33,8 @@ export default {
     },
   },
 
+  emits: ['close'],
+
   methods: {
     close () {
       this.$emit('close');

packages/dialtone-vue2/components/avatar/avatar.mdx

@@ -9,7 +9,7 @@ import * as AvatarStories from './avatar.stories.js';
   An avatar is a visual representation of a user or object.
 </Subtitle>
 
-## Default
+## Image
 
 The Avatar component is designed to prioritize different sources for content display.
 It will sequentially check for the availability of an image source `image-src` or an icon name `icon-name`.

packages/dialtone-vue2/components/badge/badge_variants.story.vue

@@ -5,16 +5,16 @@
       class="d-d-flex d-gg8 d-ai-center d-ff-row-wrap"
     >
       <dt-badge
-        v-for="t in types"
-        :key="t.value"
-        :text="t.display"
-        :type="t.value"
+        v-for="type in types"
+        :key="type.value"
+        :text="type.display"
+        :type="type.value"
       />
       <dt-badge
-        v-for="t in types.slice(0, types.length - 1)"
-        :key="`${t.value}-count`"
+        v-for="type in types.slice(0, types.length - 1)"
+        :key="`${type.value}-count`"
         text="1"
-        :type="t.value"
+        :type="type.value"
         kind="count"
       />
       <dt-badge

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

@@ -1,5 +1,5 @@
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
 <template>
-  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
   <aside
     :class="bannerClass"
     :style="bannerBackgroundImage"

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

@@ -17,7 +17,7 @@
       :pinned="$attrs.pinned"
       :hide-close="$attrs.hideClose"
       :close-button-props="buttonCloseProps"
-      :class="{ 'd-ps-sticky': show }"
+      :class="{ 'd-ps-sticky': $attrs.show }"
       :hide-icon="$attrs.hideIcon"
       :background-image="$attrs.backgroundImage"
       :background-size="$attrs.backgroundSize"
@@ -77,16 +77,9 @@ export default {
 
   components: { DtBanner, DtButton, DtIcon },
 
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
   data () {
     return {
-      displayBanner: this.show,
+      displayBanner: this.$attrs.show,
     };
   },
 
@@ -110,7 +103,7 @@ export default {
     buttonCloseProps () {
       return {
         ...this.$attrs.closeButtonProps,
-        kind: this.$attrs.buttonKind,
+        kind: this.buttonKind,
         ariaLabel: 'Close',
       };
     },

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

@@ -2,7 +2,7 @@
   <div
     :class="[
       {
-        'd-bgc-purple-600': inverted,
+        'd-bgc-purple-600': $attrs.inverted,
       },
     ]"
   >

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

@@ -57,22 +57,16 @@ export const argTypesData = {
     control: 'boolean',
   },
   importance: {
+    control: 'select',
     options: Object.keys(BUTTON_IMPORTANCE_MODIFIERS),
-    control: {
-      type: 'select',
-    },
   },
   size: {
+    control: 'select',
     options: Object.keys(BUTTON_SIZE_MODIFIERS),
-    control: {
-      type: 'select',
-    },
   },
   kind: {
+    control: 'select',
     options: Object.keys(BUTTON_KIND_MODIFIERS),
-    control: {
-      type: 'select',
-    },
   },
   link: {
     type: {
@@ -86,19 +80,15 @@ export const argTypesData = {
     control: 'boolean',
   },
   linkKind: {
+    control: 'select',
     options: Object.keys(LINK_KIND_MODIFIERS),
-    control: {
-      type: 'select',
-    },
   },
   loading: {
     control: 'boolean',
   },
   iconPosition: {
+    control: 'select',
     options: Object.keys(ICON_POSITION_MODIFIERS),
-    control: {
-      type: 'select',
-    },
   },
   labelClass: {
     description: 'Pass through classes. Used to customize the label container',

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

@@ -52,7 +52,7 @@ import {
   INVALID_COMBINATION,
 } from './button_constants';
 
-import { LINK_KIND_MODIFIERS } from '../link/link_constants';
+import { LINK_KIND_MODIFIERS } from '@/components/link';
 
 /**
  * A button is a UI element which allows users to take an action throughout the app.
@@ -322,7 +322,7 @@ export default {
     isInvalidPropCombination (circle, kind, importance) {
       for (const row of INVALID_COMBINATION) {
         if (circle === row.circle && kind === row.kind && importance === row.importance) {
-          console.error(row.message);
+          console.warn(row.message);
           return false;
         }
       }

packages/dialtone-vue2/components/button/index.js

@@ -1 +1,10 @@
 export { default as DtButton } from './button.vue';
+export {
+  BUTTON_SIZE_MODIFIERS,
+  BUTTON_KIND_MODIFIERS,
+  BUTTON_IMPORTANCE_MODIFIERS,
+  BUTTON_TYPES,
+  ICON_POSITION_MODIFIERS,
+  INVALID_COMBINATION,
+  BUTTON_ICON_SIZES,
+} from './button_constants.js';

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

@@ -22,10 +22,8 @@ export const argTypesData = {
   // Props
   alignment: {
     defaultValue: 'start',
+    control: 'select',
     options: Object.keys(BUTTON_GROUP_ALIGNMENT),
-    control: {
-      type: 'select',
-    },
   },
 };
 
@@ -38,8 +36,11 @@ export default {
 };
 
 // Templates
-const DefaultTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtButtonGroupDefaultTemplate);
+const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtButtonGroupDefaultTemplate,
+);
 
 export const Default = {
   render: DefaultTemplate,

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

@@ -63,8 +63,11 @@ export default {
 };
 
 // Templates
-const DefaultTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtCardDefaultTemplate);
+const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtCardDefaultTemplate,
+);
 
 export const Default = {
   render: DefaultTemplate,

packages/dialtone-vue2/components/card/card_default.story.vue

@@ -26,7 +26,7 @@
       </dt-button>
     </template>
     <template
-      v-else-if="header"
+      v-else-if="$attrs.header"
       #header
     >
       <span v-html="$attrs.header" />
@@ -60,7 +60,7 @@
       </dt-button>
     </template>
     <template
-      v-else-if="footer"
+      v-else-if="$attrs.footer"
       #footer
     >
       <span v-html="$attrs.footer" />

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

@@ -69,10 +69,8 @@ export const argTypesData = {
         summary: 'string',
       },
     },
+    control: 'select',
     options: ['', ...Object.values(VALIDATION_MESSAGE_TYPES)],
-    control: {
-      type: 'select',
-    },
   },
   labelChildProps: {
     control: null,

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

@@ -131,9 +131,9 @@ export default {
         */
         ...this.$listeners,
         /*
-         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
-         * element which will result in the hander being called twice (once on the input element and once by the emitted
-         * input event by the change listener).
+         * Override input listener to as no-op. Prevents parent input listeners from being passed through
+         * onto the input element which will result in the handler being called twice
+         * (once on the input element and once by the emitted input event by the change listener).
         */
         input: () => {},
         change: event => this.emitValue(event.target),

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

@@ -36,7 +36,7 @@ element.
 
 Default content text is aria-label unless overridden by passed in aria-label.
 
-```jsx
+```js
 import { DtChip } from '@dialpad/dialtone-vue';
 ```
 
@@ -70,11 +70,11 @@ import { DtAvatar } from '@dialpad/dialtone';
 </dt-chip>
 ```
 
-## Non Interactive
+## Non-interactive
 
 The chip is not focusable or clickable. If not interactive the chip will render as a `<span>` element.
 
-```jsx
+```html
 <dt-chip
   :interactive="false"
   :hide-close="true"

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

@@ -122,7 +122,6 @@ export default {
 // Templates
 const DefaultTemplate = (args, { argTypes }) =>
   createTemplateFromVueFile(args, argTypes, DtChipDefaultTemplate);
-
 const VariantsTemplate = (args, { argTypes }) =>
   createTemplateFromVueFile(args, argTypes, DtChipVariantsTemplate);
 

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

@@ -18,5 +18,6 @@ export const CHIP_ICON_SIZES = {
 
 export default {
   CHIP_SIZE_MODIFIERS,
+  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
   CHIP_ICON_SIZES,
 };

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

@@ -4,9 +4,9 @@
     :id="$attrs.id"
     :hide-close="$attrs.hideClose"
     :close-button-props="$attrs.closeButtonProps"
-    :aria-label="$attrs.ariaLabel"
     :interactive="$attrs.interactive"
     :size="$attrs.size"
+    :aria-label="$attrs.ariaLabel"
     :content-class="$attrs.contentClass"
     @click="$attrs.onClick"
     @close="$attrs.onClose"
@@ -47,7 +47,7 @@ export default {
   components: { DtAvatar, DtChip, DtIcon },
   computed: {
     iconSize () {
-      return CHIP_ICON_SIZES[this.size];
+      return CHIP_ICON_SIZES[this.$attrs.size];
     },
   },
 };

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

@@ -1,2 +1,2 @@
 export { default as DtChip } from './chip.vue';
-export { CHIP_SIZE_MODIFIERS } from './chip_constants';
+export { CHIP_SIZE_MODIFIERS, CHIP_CLOSE_BUTTON_SIZE_MODIFIERS, CHIP_ICON_SIZES } from './chip_constants';

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

@@ -23,8 +23,11 @@ export default {
 };
 
 // Templates
-const DefaultTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtCodeblockDefaultTemplate);
+const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtCodeblockDefaultTemplate,
+);
 
 export const Default = {
   render: DefaultTemplate,

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

@@ -68,8 +68,11 @@ export default {
 };
 
 // Templates
-const DefaultTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtCollapsibleDefaultStory);
+const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtCollapsibleDefaultStory,
+);
 
 export const Default = {
   render: DefaultTemplate,

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

@@ -56,6 +56,7 @@
         'max-height': maxHeight,
         'max-width': maxWidth,
       }"
+      data-qa="dt-collapsible--content"
       tabindex="-1"
       appear
       v-on="$listeners"

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

@@ -180,8 +180,11 @@ export default {
 };
 
 // Templates
-const DefaultTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtComboboxDefaultTemplate);
+const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtComboboxDefaultTemplate,
+);
 
 export const Default = {
   render: DefaultTemplate,