docs: fix not working stories (#1303)

dialpad · Nov 15, 2023 · 149d658 · 149d658
1 parent 82cd466
commit 149d658
Show file tree

Hide file tree

Showing 50 changed files with 156 additions and 151 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,13 +1,8 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 const config = {
   stories: [
-    '../components/**/*.stories.@(js|jsx|ts|tsx)',
-    '../components/**/*.mdx',
-    '../recipes/**/*.stories.@(js|jsx|ts|tsx)',
-    '../recipes/**/*.mdx', '../docs/**/*.mdx',
-    '../directives/**/*.stories.@(js|jsx|ts|tsx)',
-    '../directives/**/*.mdx',
-    '../functions/**/*.mdx'
+    '../@(components|directives|recipes)/**/*.stories.@(js|jsx|ts|tsx)',
+    '../@(components|directives|functions|recipes)/**/*.mdx',
   ],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y", 'storybook-dark-mode'],
   framework: {

diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { DocsContainer } from '@storybook/addon-docs';
 import { useDarkMode } from "storybook-dark-mode";
 import fixDefaultSlot from '../components/plugins/fixDefaultSlot';
-import { setEmojiAssetUrlSmall, setEmojiAssetUrlLarge, setCustomEmojiUrl, setCustomEmojiJson } from '../common/emoji.js';
+import { setEmojiAssetUrlSmall, setEmojiAssetUrlLarge, setCustomEmojiUrl, setCustomEmojiJson } from '@/common/emoji.js';
 import customEmojiJson from '@/common/custom-emoji.json';
 import { dialtoneDarkTheme, dialtoneLightTheme } from './dialtone-themes.js';
 import { DtTooltipDirective } from "@/directives/tooltip";

diff --git a/components/banner/banner.vue b/components/banner/banner.vue
@@ -47,13 +47,10 @@
 </template>
 
 <script>
-import DtNoticeIcon from '../notice/notice_icon.vue';
-import DtNoticeContent from '../notice/notice_content.vue';
-import DtNoticeAction from '../notice/notice_action.vue';
-import { NOTICE_KINDS } from '../notice/notice_constants';
-import Modal from '../../common/mixins/modal';
-import util from '@/common/utils';
-import SrOnlyCloseButtonMixin from '../../common/mixins/sr_only_close_button';
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';
+import Modal from '@/common/mixins/modal';
+import utils from '@/common/utils';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
 
 /**
  * Banners are a type of notice, delivering system and engagement messaging.
@@ -78,7 +75,7 @@ export default {
      */
     titleId: {
       type: String,
-      default () { return util.getUniqueString(); },
+      default () { return utils.getUniqueString(); },
     },
 
     /**
@@ -87,7 +84,7 @@ export default {
      */
     contentId: {
       type: String,
-      default () { return util.getUniqueString(); },
+      default () { return utils.getUniqueString(); },
     },
 
     /**

diff --git a/components/banner/banner_default.story.vue b/components/banner/banner_default.story.vue
@@ -68,8 +68,8 @@
 </template>
 
 <script>
-import DtBanner from '../banner/banner.vue';
-import DtButton from '../button/button.vue';
+import { DtBanner } from '@/components/banner';
+import { DtButton } from '@/components/button';
 import { DtIcon } from '@/components/icon';
 
 export default {

diff --git a/components/breadcrumbs/breadcrumbs.vue b/components/breadcrumbs/breadcrumbs.vue
@@ -24,7 +24,7 @@
 <script>
 import { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';
 import DtBreadcrumbItem from './breadcrumb_item.vue';
-import util from '@/common/utils';
+import utils from '@/common/utils';
 
 /**
  * Breadcrumbs are links used to provide context for the currently-viewed page
@@ -78,7 +78,7 @@ export default {
 
   methods: {
     getBreadcrumbItemKey (index) {
-      return `breadcrumbs-item-${index}-${util.getUniqueString()}`;
+      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;
     },
   },
 };

diff --git a/components/button/button.test.js b/components/button/button.test.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import DtButton from './button.vue';
-import EmptyComponentFixture from '../../tests/fixtures/component.vue';
+import EmptyComponentFixture from '@/tests/fixtures/component.vue';
 
 const MOCK_BUTTON_STUB = vi.fn();
 

diff --git a/components/chip/chip.test.js b/components/chip/chip.test.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import EmptyComponentFixture from '../../tests/fixtures/component.vue';
-import DtChip from './chip.vue';
+import EmptyComponentFixture from '@/tests/fixtures/component.vue';
+import { DtChip } from '@/components/chip';
 
 const MOCK_DEFAULT_TEXT = 'TEXT';
 

diff --git a/components/chip/chip.vue b/components/chip/chip.vue
@@ -54,8 +54,8 @@
 </template>
 
 <script>
-import { DtButton } from '../button';
-import { DtIcon } from '../icon';
+import { DtButton } from '@/components/button';
+import { DtIcon } from '@/components/icon';
 import {
   CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
   CHIP_SIZE_MODIFIERS,

diff --git a/components/combobox/combobox_default.story.vue b/components/combobox/combobox_default.story.vue
@@ -58,10 +58,10 @@
 </template>
 
 <script>
-import DtAvatar from '../avatar/avatar.vue';
-import DtCombobox from './combobox.vue';
-import DtInput from '../input/input.vue';
-import DtListItem from '../list_item/list_item.vue';
+import { DtAvatar } from '@/components/avatar';
+import { DtCombobox } from '@/components/combobox';
+import { DtInput } from '@/components/input';
+import { DtListItem } from '@/components/list_item';
 
 export default {
   name: 'DtComboboxDefault',

diff --git a/components/dropdown/dropdown_variants.story.vue b/components/dropdown/dropdown_variants.story.vue
@@ -203,11 +203,10 @@
 </template>
 
 <script>
-import DtDropdown from './dropdown.vue';
-import DtListItemGroup from '../list_item_group/list_item_group.vue';
-import DtDropdownSeparator from './dropdown_separator.vue';
-import { DtListItem } from '../list_item';
-import { DtButton } from '../button';
+import { DtDropdown, DtDropdownSeparator } from '@/components/dropdown';
+import { DtListItemGroup } from '@/components/list_item_group';
+import { DtListItem } from '@/components/list_item';
+import { DtButton } from '@/components/button';
 import { DROPDOWN_STORY_ITEMS } from './dropdown_story_constants';
 
 export default {

diff --git a/components/input/input.mdx b/components/input/input.mdx
@@ -306,13 +306,25 @@ export default {
 
 ## Sizes
 
-|name           |prop value                     |size|Example                                |
-|---            |---                            |--- |---                                    |
-|**Extra Small**|INPUT_SIZES.EXTRA_SMALL   |12px|<Story of={InputStories.ExtraSmall} />|
-|**Small**      |INPUT_SIZES.SMALL         |14px|<Story of={InputStories.Small} />     |
-|**Default**    |-                              |16px|<Story of={InputStories.Default} />    |
-|**Large**      |INPUT_SIZES.LARGE         |20px|<Story of={InputStories.Large} />      |
-|**Extra Large**|INPUT_SIZES.EXTRA_LARGE   |24px|<Story of={InputStories.ExtraLarge} />|
+### Extra small (12px)
+
+<Story of={InputStories.ExtraSmall} />
+
+### Small (14px)
+
+<Story of={InputStories.Small} />
+
+### Default (16px)
+
+<Story of={InputStories.Default} />
+
+### Large (20px)
+
+<Story of={InputStories.Large} />
+
+### Extra large (24px)
+
+<Story of={InputStories.ExtraLarge} />
 
 ### Usage
 

diff --git a/components/item_layout/item_layout.mdx b/components/item_layout/item_layout.mdx
@@ -3,7 +3,7 @@ import * as DtItemLayoutStories from './item_layout.stories.js';
 
 <Meta of={DtItemLayoutStories}/>
 
-# DtItemLayout
+# Item Layout
 
 <Subtitle>
   Custom layout to enable developer to use list-item like stack.

diff --git a/components/lazy_show/lazy_show.mdx b/components/lazy_show/lazy_show.mdx
@@ -7,7 +7,7 @@ import * as LazyShowStories from './lazy_show.stories';
 # Lazy Show
 
 <Subtitle>
-  Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.
+  Lazy Show is an utility component that prevents its children from being rendered until the first time it is shown.
 </Subtitle>
 
 ## Basic Usage
@@ -26,7 +26,7 @@ so you can pass any valid Vue `transition` class to control the enter/leave tran
 import { DtLazyShow } from '@dialpad/dialtone-vue';
 ```
 
-```jsx
+```html
 <dt-lazy-show
   :transition="transition"
   :show="open"
@@ -36,7 +36,7 @@ import { DtLazyShow } from '@dialpad/dialtone-vue';
 ```
 
 <Canvas>
-  <Story of={ShowStories.Default} />
+  <Story of={LazyShowStories.Default} />
 </Canvas>
 
 ## Slots, Props & Events

diff --git a/components/link/link.mdx b/components/link/link.mdx
@@ -4,7 +4,7 @@ import * as LinkStories from './link.stories';
 
 <Meta of={LinkStories}/>
 
-# Links
+# Link
 
 <Subtitle>
   A link is a navigational element that can be found on its own, within other text, or directly following content.

diff --git a/components/list_item_group/list_item_group_default.story.vue b/components/list_item_group/list_item_group_default.story.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script>
-import DtListItemGroup from './list_item_group.vue';
-import DtListItem from '../list_item/list_item.vue';
+import { DtListItemGroup } from '@/components/list_item_group';
+import { DtListItem } from '@/components/list_item';
 
 export default {
   name: 'DtListItemGroupDefault',

diff --git a/components/modal/modal.mdx b/components/modal/modal.mdx
@@ -4,7 +4,7 @@ import * as ModalStories from './modal.stories';
 
 <Meta of={ModalStories}/>
 
-# Modals
+# Modal
 
 <Subtitle>
   Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the

diff --git a/components/modal/modal.test.js b/components/modal/modal.test.js
@@ -1,7 +1,6 @@
-import DtButton from '../button/button.vue';
-import DtModal from './modal.vue';
+import { DtButton } from '@/components/button';
+import { DtModal, MODAL_BANNER_KINDS } from '@/components/modal';
 import { mount } from '@vue/test-utils';
-import { MODAL_BANNER_KINDS } from './modal_constants';
 import SrOnlyCloseButton from '@/common/sr_only_close_button.vue';
 
 let MOCK_CONSOLE_ERROR_SPY;
@@ -143,6 +142,7 @@ describe('DtModal Tests', () => {
     expect(closeBtn.attributes(labelProp)).toEqual(newAriaLabel);
   });
 
+  // eslint-disable-next-line max-len
   it('Should emit a sync-able update event when overlay / close-icon are clicked, or escape key is pressed', async () => {
     const syncEvent = 'update:show';
     expect(wrapper.emitted()).toEqual({});

diff --git a/components/notice/index.js b/components/notice/index.js
@@ -1,2 +1,5 @@
 export { default as DtNotice } from './notice.vue';
+export { default as DtNoticeAction } from './notice_action.vue';
+export { default as DtNoticeIcon } from './notice_icon.vue';
+export { default as DtNoticeContent } from './notice_content.vue';
 export { NOTICE_KINDS } from './notice_constants';
diff --git a/components/notice/notice_action.test.js b/components/notice/notice_action.test.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 
-import DtNoticeAction from './notice_action.vue';
-import DtButton from '../button/button.vue';
-import SrOnlyCloseButton from '../../common/sr_only_close_button.vue';
+import { DtNoticeAction } from '@/components/notice';
+import { DtButton } from '@/components/button';
+import SrOnlyCloseButtonComponent from '@/common/sr_only_close_button.vue';
 import { cleanSpy, initializeSpy } from '@/tests/shared_examples/validation';
 import { itBehavesLikeVisuallyHiddenCloseLabelIsNull } from '@/tests/shared_examples/sr_only_close_button';
 
@@ -36,7 +36,7 @@ describe('DtNoticeAction tests', () => {
 
   const _setChildWrappers = () => {
     closeButton = wrapper.findComponent(DtButton);
-    srOnlyCloseButton = wrapper.findComponent(SrOnlyCloseButton);
+    srOnlyCloseButton = wrapper.findComponent(SrOnlyCloseButtonComponent);
   };
 
   beforeEach(() => {

diff --git a/components/popover/popover.mdx b/components/popover/popover.mdx
@@ -4,7 +4,7 @@ import * as PopoverStories from './popover.stories';
 
 <Meta of={PopoverStories}/>
 
-# Popovers
+# Popover
 
 <Subtitle>
   A Popover displays a content overlay when its anchor element is activated.

diff --git a/components/popover/popover.test.js b/components/popover/popover.test.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import DtPopover from './popover.vue';
-import SrOnlyCloseButton from '../../common/sr_only_close_button.vue';
+import { DtPopover } from '@/components/popover';
+import SrOnlyCloseButtonComponent from '@/common/sr_only_close_button.vue';
 
 const defaultSrOnlyCloseButtonLabel = 'Close popover';
 const MOCK_DEFAULT_SLOT_MESSAGE = 'Message';
@@ -115,28 +115,12 @@ describe.skip('DtPopover Tests', () => {
       });
 
       it('should not render the visually hidden close button', () => {
-        const buttonExists = wrapper.findComponent(SrOnlyCloseButton).exists();
+        const buttonExists = wrapper.findComponent(SrOnlyCloseButtonComponent).exists();
 
         expect(!buttonExists).toBe(true);
       });
     });
 
-    // describe('When initialFocusElement is none', () => {
-    //   it('should output error message', async () => {
-    //     let consoleErrorSpy;
-    //
-    //     consoleErrorSpy = vi.spyOn(console, 'error').mockClear();
-    //
-    //     await wrapper.setProps({ initialFocusElement: 'none' });
-    //
-    //     expect(consoleErrorSpy).toBeCalledWith('If the popover is modal you must set the ' +
-    //     'initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
-    //
-    //     consoleErrorSpy = null;
-    //     console.error.mockRestore();
-    //   });
-    // });
-
     describe('When visuallyHiddenClose is true', () => {
       beforeEach(async () => {
         await wrapper.setProps({ visuallyHiddenClose: true });
@@ -145,7 +129,7 @@ describe.skip('DtPopover Tests', () => {
       });
 
       it('should contain a visually hidden close button', () => {
-        const buttonExists = wrapper.findComponent(SrOnlyCloseButton).exists();
+        const buttonExists = wrapper.findComponent(SrOnlyCloseButtonComponent).exists();
 
         expect(buttonExists).toBe(true);
       });
@@ -291,7 +275,7 @@ describe.skip('DtPopover Tests', () => {
         describe('When sr-only close button is enabled and activated', () => {
           it('should close the popover', async () => {
             await wrapper.setProps({ visuallyHiddenClose: true });
-            await wrapper.findComponent(SrOnlyCloseButton).trigger('click');
+            await wrapper.findComponent(SrOnlyCloseButtonComponent).trigger('click');
 
             expect(popoverWindow.isVisible()).toBe(false);
           });

diff --git a/components/popover/popover.vue b/components/popover/popover.vue
@@ -131,11 +131,11 @@ import {
   POPOVER_STICKY_VALUES,
 } from './popover_constants';
 import { getUniqueString, hasSlotContent, isOutOfViewPort } from '@/common/utils';
-import DtLazyShow from '../lazy_show/lazy_show.vue';
-import ModalMixin from '../../common/mixins/modal.js';
+import { DtLazyShow } from '@/components/lazy_show';
+import ModalMixin from '@/common/mixins/modal.js';
 import { createTippy, getPopperOptions } from './tippy_utils';
 import PopoverHeaderFooter from './popover_header_footer.vue';
-import SrOnlyCloseButtonMixin from '../../common/mixins/sr_only_close_button';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
 import SrOnlyCloseButton from '@/common/sr_only_close_button.vue';
 
 /**

diff --git a/components/radio/radio.mdx b/components/radio/radio.mdx
@@ -4,7 +4,7 @@ import * as RadioStories from './radio.stories';
 
 <Meta of={RadioStories}/>
 
-# Radios
+# Radio
 
 <Subtitle>
   Radios are control elements that allow the user to make a single selection. They are typically used in a Radio Group

diff --git a/components/radio_group/radio_group.mdx b/components/radio_group/radio_group.mdx
@@ -4,7 +4,7 @@ import * as RadioGroupStories from './radio_group.stories';
 
 <Meta of={RadioGroupStories}/>
 
-# Radio Groups
+# Radio Group
 
 <Subtitle>
   Radio Groups are control elements that allow the user to make a single selection from a list of options.