Migrate KTabList examples to DocsExample

[mukulpythondev]

Description

This PR migrates the KTabsList documentation to use the DocsExample component for better structure and maintainability. The change ensures that examples are properly organized while keeping the documentation concise and functional.

Issue addressed

Addresses #953

Before/after screenshots

Before:

After:

Changelog

• Description: Migrated KTabsList documentation to use DocsExample.
• Products impact: Documentation update (no API impact).
• Addresses: https://github.com/learningequality/kolibri-design-system/issues/953
• Components: KTabsList documentation.
• Breaking: No
• Impacts a11y: No
• Guidance: No changes needed for consumers.

Steps to test

1. Open the KTabsList documentation page.
2. Verify that all examples load correctly using DocsExample.
3. Ensure the collapsible/toggle functionality works as expected.
4. Check that no examples are missing and the formatting remains intact.

(Optional) Implementation notes

At a high level, how did you implement this?

• Moved example code to docs/examples/KTabsList/ directory.
• Replaced inline examples with the DocsExample component.
• Ensured documentation structure remained unchanged.

Does this introduce any tech-debt items?

No.

Testing checklist

• [x] Contributor has fully tested the PR manually.
• [x] If there are any front-end changes, before/after screenshots are included.
• [x] Documentation content remains functional and correctly formatted.

Reviewer guidance

• [ ] Is the documentation correctly structured with DocsExample?
• [ ] Are all previous examples accounted for and functional?
• [ ] Is the example styling consistent with other components?

Comments

(Any additional notes for the reviewer.)

[MisRob]

Welcome and thanks @mukulpythondev, we will review.

[MisRob]

Hi @mukulpythondev, just checking in, is all feedback resolved or would you need more time?

[mukulpythondev]

@MisRob All fix and working fine only 1 UI difference one background color because first i do with directly with the css but it is not aligning with our previous code and i can not find any method to do that. Rate my Approach to fix this give one more prop for the docsexample component. if any help from mentor (@EshaanAgg ) or contributors.

Current on Website :

My PR :

[EshaanAgg]

Ahh. I got it. It's because earlier we were making use of the DocsShow component to render the example, which itself supports a 'dark' prop which sets it's background to a dark colour. Currently, DocsExample uses DocsShow internally to render the example but does not support the 'dark' attribute.

If you would be open to it, would you like to address the same in this PR itself? The outline of the same should be rather simple. You would need to introduce a new prop to the DocsExample component called 'dark' which is set to 'false' by default, and thus forward the same to the DocsShow used in the template. Then you can update the documentation page's DocsExample in question to have the 'dark' attribute. This would restore the same UI as before.

It would be completely alright if you do not want to address the same! Please let us know and I would be open to separate PR, that you could rebase on top of and make the minor edit to fix the same.

Thanks again for all your patience and great work here. We really appreciate the same!

[mukulpythondev]

@EshaanAgg I think now merge this PR for migration of the KTabslist and i wanna do work on this dark prop and the update the docs of the DocsExample in new issue because it help in segregating the each Feature/Issue resolved in respective PR. Thanks for believing in me, i really learn a lot and in future also ready to serve open source as my passion and contribute to society developement.

[EshaanAgg]

Sure! Sounds good @mukulpythondev. You can open a new issue for the same, and tag me there to assign you. Meanwhile I'll complete the final review from my end.

[mukulpythondev]

Sure i will fix the linting error and also create the new issue for the Docsexample Prop

[MisRob]

Hi @mukulpythondev, are you planning to resolve last feedback?

[mukulpythondev]

@MisRob Sorry for delay , it just slipped by mind , i am start fixing this today and push the updated commit.

[MisRob]

@mukulpythondev Thanks! I previewed and noticed one last little regression. Here, the button background color was originally primary. Without it, we won't see darker hover.

Then we can merge.

[mukulpythondev]

Sure, so i wil fix that too then commit the changes now .

[github-actions[bot]]

Percy Visual Test Results

Percy Dashboard: View Detailed Report

Environment:

• Node.js Version: 18.x
• OS: Ubuntu-latest

Instructions for Reviewers:

• Click on the Percy Dashboard link to view detailed visual diffs.
• Review the visual changes highlighted in the report.
• Approve or request changes based on the visual differences.