feat: standardise all events links in component docs section (#1265)

* feat: standardise all events links in component docs section
EMP-1796

* fix: fix eslint rules
EMP-1796

* docs: add links and explanation to events main file
EMP-1796

* fix: reformat events links for readability
EMP-1796

* fix: adjust ignorePatters regex
EMP-1796

packages/x-components/.eslintrc.js

@@ -11,6 +11,19 @@ module.exports = {
     'vue/require-default-prop': 'off'
   },
   overrides: [
+    {
+      files: 'src/**/*.vue',
+      rules: {
+        'max-len': [
+          'error',
+          {
+            code: 100,
+            ignoreComments: false,
+            ignorePattern: '|class=".*"$ |https://github'
+          }
+        ]
+      }
+    },
     {
       files: 'src/components/icons/*.vue',
       rules: {

packages/x-components/src/components/auto-progress-bar.vue

@@ -78,6 +78,15 @@
 </style>
 
 <docs lang="mdx">
+## Events
+
+This component emits the following events:
+
+- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
+  after the user clicks the redirection button.
+- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
+  after the user clicks the abort redirection button.
+
 ## See it in action
 
 Here you have a basic example of how the auto progress bar is rendered.
@@ -124,11 +133,4 @@ to cancel the animation by sending the isLoading prop to false.
   };
 </script>
 ```
-
-## Events
-
-This component emits the following events:
-
-- `UserClickedARedirection` after the user clicks the redirection button.
-- `UserClickedAbortARedirection` after the user clicks the abort redirection button.
 </docs>

packages/x-components/src/components/base-keyboard-navigation.vue

@@ -145,6 +145,14 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+An event that the component will emit:
+
+- [`UserReachedEmpathizeTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event emitted by default when the container reaches its top navigation, but more events can be
+  emitted for each direction using the `eventsForDirectionLimit` prop.
+
 ## Examples
 
 This component has a slot to inject other components inside it. The component expects a required
@@ -200,12 +208,4 @@ reaching the navigation limit in any direction.
   <QuerySuggestions/>
 </KeyboardNavigation>
 ```
-
-## Events
-
-An event that the component will emit:
-
-- `UserReachedEmpathizeTop`: the event emitted by default when the container reaches its top
-  navigation, but more events can be emitted for each direction using the `eventsForDirectionLimit`
-  prop.
 </docs>

packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue

@@ -74,6 +74,17 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+An event that the component will emit:
+
+- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks an item in the dropdown. The event payload is the
+  number of columns that the clicked item represents.
+- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted on component mount, and whenever the value changes. The event payload is the
+  current `selectedColumns` value.
+
 ## Example
 
 Column picker dropdown component renders a dropdown component which options are the different
@@ -174,13 +185,4 @@ with other column pickers.
   };
 </script>
 ```
-
-## Events
-
-An event that the component will emit:
-
-- `UserClickedColumnPicker`: the event is emitted after the user clicks an item in the dropdown. The
-  event payload is the number of columns that the clicked item represents.
-- `ColumnsNumberProvided`: the event is emitted on component mount, and whenever the value changes.
-  The event payload is the current `selectedColumns` value.
 </docs>

packages/x-components/src/components/column-picker/base-column-picker-list.vue

@@ -220,8 +220,9 @@ The `buttonClass` prop can be used to add classes to the buttons.
 
 A list of events that the component will emit:
 
-- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload
-  is the number of columns that the clicked item represents.
-- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current
-  `selectedColumns` value.
+- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks an item. The event payload is the number of columns
+  that the clicked item represents.
+- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted on component mount. The event payload is the current `selectedColumns` value.
 </docs>

packages/x-components/src/components/modals/base-events-modal-close.vue

@@ -48,6 +48,13 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button.
+
 ## Examples
 
 The `BaseEventsModalClose` component can be used to close the `BaseEventsModal` component.
@@ -98,10 +105,4 @@ This event can be changed using the `closingEvent` prop.
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedCloseEventsModal`: the event is emitted after the user clicks the button.
 </docs>

packages/x-components/src/components/modals/base-events-modal-open.vue

@@ -49,6 +49,13 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedOpenEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button.
+
 ## Examples
 
 This component serves to open the `BaseEventsModal`.
@@ -103,10 +110,4 @@ This event can be changed using the `openingEvent` prop, but remember to change
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedOpenEventsModal`: the event is emitted after the user clicks the button.
 </docs>

packages/x-components/src/components/modals/base-events-modal.vue

@@ -115,6 +115,16 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after clicking outside the content rendered in the default slot.
+- [`UserClickedOutOfEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after clicking outside the modal.
+- Custom events to open or close the modal.
+
 ## Examples
 
 The `BaseEventsModal` component handles the modal open/close state via the events passed via props.
@@ -220,13 +230,4 @@ The `contentClass` prop can be used to add classes to the modal content.
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedCloseEventsModal`: the event is emitted after clicking outside the content rendered in
-  the default slot.
-- `UserClickedOutOfEventsModal`: the event is emitted after clicking outside the modal.
-- Custom events to open or close the modal.
 </docs>

packages/x-components/src/components/modals/base-id-modal-close.vue

@@ -71,8 +71,9 @@
 
 A list of events that the component will emit:
 
-- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload
-  is the id of the modal that is going to be closed.
+- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button. The event payload is the id of the modal
+  that is going to be closed.
 
 ## Examples
 

packages/x-components/src/components/modals/base-id-modal-open.vue

@@ -68,8 +68,9 @@
 
 A list of events that the component will emit:
 
-- `UserClickedOpenModal`: the event is emitted after the user clicks the button. The event payload
-  is the id of the modal that is going to be opened.
+- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button. The event payload is the id of the modal
+  that is going to be opened.
 
 ## Examples
 

packages/x-components/src/components/modals/base-id-modal.vue

@@ -94,6 +94,14 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks outside the modal. The event payload is the id of the
+  modal and a metadata with the target element that emitted it.
+
 ## Examples
 
 The `BaseIdModal` component reacts to the `UserClickedOpenModal`, `UserClickedCloseModal` and
@@ -160,11 +168,4 @@ The `contentClass` prop can be used to add classes to the modal content.
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedOutOfModal`: the event is emitted after the user clicks outside the modal. The event
-  payload is the id of the modal and a metadata with the target element that emitted it.
 </docs>

packages/x-components/src/components/modals/close-main-modal.vue

@@ -43,7 +43,7 @@
 
 This component emits the following events:
 
-- [`UserClickedCloseX`](./../../api/x-components.xeventstypes.md)
+- [`UserClickedCloseX`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
 
 ## See it in action
 

packages/x-components/src/components/modals/main-modal.vue

@@ -82,7 +82,7 @@
 
 This component emits the following events:
 
-- [`UserClickedOutOfMainModal`](./../../api/x-components.xeventstypes.md)
+- [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
 
 ## See it in action
 

packages/x-components/src/components/modals/open-main-modal.vue

@@ -43,7 +43,7 @@
 
 This component emits the following events:
 
-- [`UserClickedOpenX`](./../../api/x-components.xeventstypes.md)
+- [`UserClickedOpenX`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
 
 ## See it in action
 

packages/x-components/src/components/panels/base-header-toggle-panel.vue

@@ -87,6 +87,13 @@
 </style>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- `open`: the event is emitted after the user clicks the element and opens it.
+- `close`: the event is emitted after the user clicks the element and closes it.
+
 ## Examples
 
 Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of
@@ -136,14 +143,5 @@ The `headerClass` prop can be used to add classes to the header of the toggle pa
     <p>Default content</p>
   </template>
 </BaseHeaderTogglePanel>
-```
-
-## Events A list of events that the component will emit: - `open`: the event is emitted after the
-
-user clicks the element and opens it. - `close`: the event is emitted after the user clicks the
-element and closes it.
-
-```
-
 ```
 </docs>

packages/x-components/src/components/panels/base-id-toggle-panel-button.vue

@@ -69,6 +69,14 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button. The event payload is the id of the panelId
+  that is going to be toggled.
+
 ## Examples
 
 ### Basic example
@@ -116,11 +124,4 @@ The component rendering content passed to the default slot and opening the panel
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedPanelToggleButton`: the event is emitted after the user clicks the button. The event
-  payload is the id of the panelId that is going to be toggled.
 </docs>

packages/x-components/src/components/panels/base-id-toggle-panel.vue

@@ -89,6 +89,14 @@
 </script>
 
 <docs lang="mdx">
+## Events
+
+A list of events that the component will watch:
+
+- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
+  the event is emitted after the user clicks the button. The event payload is the id of the panelId
+  that is going to be toggled.
+
 ## Examples
 
 ### Basic usage
@@ -129,11 +137,4 @@ Using default slot:
   };
 </script>
 ```
-
-## Events
-
-A list of events that the component will watch:
-
-- `UserClickedPanelToggleButton`: the event is emitted after the user clicks the button. The event
-  payload is the id of the panelId that is going to be toggled.
 </docs>

packages/x-components/src/components/panels/base-tabs-panel.vue

@@ -169,6 +169,10 @@
 </style>
 
 <docs lang="mdx">
+## Events
+
+This component emits no events.
+
 ## Examples
 
 This component renders a list of tabs based on the name of the slots passed on its template. By
@@ -469,8 +473,4 @@ The displayed tab name and a method to select a tab are exposed to the tab panel
   };
 </script>
 ```
-
-## Events
-
-This component emits no events.
 </docs>