Migrate developer documentation to make use of DocsExample

[EshaanAgg]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Introduction

We have recently introduced a new DocsExample component that allows developers to create the documentation examples for various components with greater ease.

On a high level, you can use this component to either directly load in a Vue SFC component as an example, or can provide it with the html, javascript and scss slots to show code examples to the user. The component then renders the same in a nice collapsible and togglable component to keep the documentation concise.

You can check the component in action on the following pages:

• KTable: Whole page
• KCardGrid: First example on the page
• KTransition: Last example on the page

You can also read in-depth about all the supported APIs of this component and examples of how to use the same in the developer documentation.

Task

We would like to migrate some of the current documentation pages to use this new component to improve the documentation quality. The same would require the contributor to study the documentation page in detail and either use the slots to inline the code example or the loadExample prop to load the same from a separate file.

The current pages that are included in the scope of this refactoring are:

• KCard
• KCardGrid
• KImg
• KTabsList

Guidance

Most of the time, we would like to move the examples to a separate file in the docs/examples/<KComponent>/ directory, as it would help us to ensure that the documentation example itself is functioning correctly in its entirety. However, some of the documentation snippets have been constructed specifically to convey a particular feature (like the usage of a prop), so in such cases, we should use the slots to show the concise code sample.

Acceptance Criteria

• There should be no regressions in the documentation content: all the examples before and after the migration should be correct and functional.
• The flow of content in the documentation remains the same.
• The intent behind the code samples should be conveyed to the user correctly (for example, customized concise snippets shouldn't be replaced unintentionally by full examples). We realize that this might be subjective to the reviewer, and thus, we would be happy to discuss it during the review. Still, we would like to strongly advise AGAINST indiscriminate AI-assisted refactoring.
• All the code associated with the examples moved to the examples directory is removed from the main documentation page.