refactor(components): dlt-3196 components to pascal case (#1255)

Author: iropolo

packages/dialtone-css/postcss/dialtone-docs.cjs

@@ -164,7 +164,7 @@ function generateUtilityClassDocumentation (docs, rule) {
 
   if (classNames.length === 0) return;
 
-  const values = rule.nodes.map(node => {
+  const values = rule.nodes.filter(node => node.type === 'decl').map(node => {
     const _value = node.value;
     const _important = node.important ? ' !important' : '';
 

packages/dialtone-vue/.storybook/preview.js

@@ -41,7 +41,7 @@ import { setup } from '@storybook/vue3-vite';
 import React, { useState, useEffect } from 'react';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
-import fixDefaultSlot from '../components/plugins/fixDefaultSlot';
+import fixDefaultSlot from '../components/Plugins/FixDefaultSlot';
 import { setEmojiAssetUrlSmall, setEmojiAssetUrlLarge, setCustomEmojiUrl, setCustomEmojiJson } from '@/common/emoji';
 import customEmojiJson from '@/common/custom-emoji.json';
 import { dialtoneDarkTheme, dialtoneLightTheme } from './dialtone-themes.js';
@@ -51,7 +51,7 @@ import { DtScrollbarDirective } from '@/directives/scrollbar_directive';
 import { DtModeDirective } from '@/directives/mode_directive';
 import { DtFocusgroupDirective } from '@/directives/focusgroup_directive';
 import { DtFocustrapDirective } from '@/directives/focustrap_directive';
-import { DtStack } from '@/components/stack';
+import { DtStack } from '@/components/Stack';
 import { faker } from '@faker-js/faker';
 
 let currentContrast = 'default';

packages/dialtone-vue/common/mixins/input_group.js

@@ -1,5 +1,5 @@
 import { warn } from 'vue';
-import { DtValidationMessages } from '@/components/validation_messages';
+import { DtValidationMessages } from '@/components/ValidationMessages';
 import { validationMessageValidator } from '@/common/validators';
 import {
   getUniqueString,

packages/dialtone-vue/common/mixins/mode.js

@@ -3,7 +3,7 @@ import {
   getOppositeMode,
   getRootContrast,
   findParentMode,
-} from '@/components/mode_island/utils';
+} from '@/components/ModeIsland/Utils';
 
 /**
  * Mixin that adds a `contentMode` prop and computes `modeAttrs` for binding

packages/dialtone-vue/common/mixins/skeleton.js

@@ -1,4 +1,4 @@
-import { SKELETON_RIPPLE_DURATION } from '@/components/skeleton/skeleton_constants';
+import { SKELETON_RIPPLE_DURATION } from '@/components/Skeleton/SkeletonConstants';
 
 /**
  * @displayName Skeleton Animation Mixin

packages/dialtone-vue/common/sr_only_close_button.vue

@@ -14,7 +14,7 @@
 
 <script>
 import { DtIconClose } from '@dialpad/dialtone-icons/vue';
-import { DtButton } from '@/components/button';
+import { DtButton } from '@/components/Button';
 import { DialtoneLocalization } from '@/localization';
 
 export default {

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

@@ -0,0 +1,136 @@
+import { createTemplateFromVueFile, getIconNames } from '@/common/storybook_utils';
+import DtAvatar from './Avatar.vue';
+import { AVATAR_SIZE_MODIFIERS, AVATAR_PRESENCE_STATES } from './AvatarConstants';
+import DtAvatarDefaultTemplate from './AvatarDefault.story.vue';
+import DtAvatarVariantsTemplate from './AvatarVariants.story.vue';
+import { action } from 'storybook/actions';
+
+import defaultImage from '@/common/assets/avatar2.png';
+
+const ICONS_LIST = getIconNames();
+
+export const argsData = {
+  onClick: action('click'),
+  size: 300,
+  presence: null,
+  fullName: 'Jaqueline Nackos',
+  imageAlt: 'profile image',
+  imageSrc: defaultImage,
+  seed: '',
+  iconName: 'accessibility',
+  iconSize: '500',
+};
+
+export const argTypesData = {
+  // Props
+  avatarClass: {
+    description: 'Pass through classes. Used to customize the avatar container',
+  },
+  color: {
+    control: {
+      type: 'text',
+    },
+    description: 'Legacy color prop. Use seed instead for auto-generated colors.',
+  },
+  iconName: {
+    options: ICONS_LIST,
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
+  },
+  iconSize: {
+    defaultValue: null,
+  },
+  id: {
+    table: {
+      defaultValue: {
+        summary: 'generated unique ID',
+      },
+    },
+  },
+  overlayClass: {
+    description: 'Pass through classes. Used to customize the avatar overlay',
+  },
+  overlayIcon: {
+    options: ICONS_LIST,
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
+  },
+  overlayText: {
+    description: 'The text that overlays the avatar',
+  },
+  presence: {
+    defaultValue: null,
+    control: {
+      type: 'select',
+    },
+    options: Object.values(AVATAR_PRESENCE_STATES),
+    table: {
+      defaultValue: {
+        summary: 'null',
+      },
+    },
+  },
+  presenceProps: {
+    description: 'Pass through props. Used to customize the presence component',
+  },
+  size: {
+    control: {
+      type: 'select',
+    },
+    options: Object.keys(AVATAR_SIZE_MODIFIERS),
+  },
+
+  // Action Event Handlers
+  onClick: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+// Story Collection
+export default {
+  title: 'Components/Avatar',
+  component: DtAvatar,
+  args: argsData,
+  argTypes: argTypesData,
+  excludeStories: /.*Data$/,
+};
+
+// Templates
+const DefaultTemplate = (args, { argTypes }) =>
+  createTemplateFromVueFile(args, argTypes, DtAvatarDefaultTemplate);
+
+const VariantsTemplate = (args, { argTypes }) =>
+  createTemplateFromVueFile(args, argTypes, DtAvatarVariantsTemplate);
+
+// Stories
+export const Default = {
+  render: DefaultTemplate,
+  decorators: [
+    () => ({
+      template: `<dt-stack direction="row"><story /></dt-stack>`,
+    }),
+  ],
+};
+
+export const Variants = {
+  render: VariantsTemplate,
+  parameters: {
+    percy: {
+      args: {
+        seed: 'seed',
+      },
+    },
+    options: { showPanel: false },
+    controls: { disable: true },
+  },
+};