Add DocsExample

[chetan21122004]

Description:
I’ve added the DocsExample component that allows toggling between an example and its code.

Issue Addressed:
Fixes #826. Also references #836 for additional context on previous discussions related to the component.

Guidance:
The new component enhances the documentation UI by toggling code visibility.

Steps to Test:

1. Navigate to the KCardGrid documentation page.
2. Verify that the example and code toggle correctly with a slide-up/slide-down animation.

Implementation Notes:

• The DocsExample component uses a #code slot to accept code snippets in multiple languages.
• Slide toggle animation is applied when showing/hiding the code.

Changelog

• Description: Implemented DocsExample component with toggle functionality for switching between an example and its code snippet in the KDS documentation.
• Products impact: none
• Addresses: Create a new documentation component DocsExample that allows to toggle between an example and its code #826
• Components: -
• Breaking: no
• Impacts a11y: no
• Guidance: -

[MisRob]

Thanks @chetan21122004 and @ozer550, wonderful work so far. Posting few in-code comments, mostly last touches. Then I think we could be ready for merge.

[chetan21122004]

Hi @MisRob, Thank you for your detailed feedback. As a beginner, I found this task challenging and apologize for any inconvenience caused, including the unwanted changes I made as I didn’t use a formatter. I truly appreciate your patience and guidance. I will review your commits and make sure my setup avoids unrelated updates. I’m working on improving my coding practices and will run yarn lint-fix to ensure clean contributions. Your support means a lot, and I look forward to learning more from you. Thank you again!

[MisRob]

No problem @chetan21122004, I think lots of it was actually caused by the Node version transition. Let's see how it goes, now we have a clean state. Let us know if something unexpected would happen with linting.

[ozer550]

Hi @chetan21122004! Regarding the change log, yes it should not be present in the PR. Rather we need to fill in the changelog in the pull request template. For example here.

[MisRob]

Hi @chetan21122004, just checking in - would you need anything from us here?

[chetan21122004]

Hi @MisRob , Thanks for asking but now I didn't need anything , I will let you know if I have any issues, Thanks for your support, And few days I can't able to be active because my mid term examination is going on sorry for this..!

[MisRob]

Great @chetan21122004, no pressure, I'm just checking in on PRs occasionally. This task has no deadline, please take all the time you need. Good luck with exams :)!

[MisRob]

Hi @chetan21122004, we have some new dependencies on this pull request in #905 so I will go ahead and push the remaining cleanup here so we can merge. Also in #905, we discussed some changes to the DocsExample interface proposed in #845 that will be done in the course of #905, so I will have to unassign you from #845.

You're very welcome to keep an eye on 'help wanted' issues - over time there will be new ones regarding this component. I'm sorry for not waiting longer, this was the best solution I could think of to make work in those other areas manageable. Thanks a lot for this work, it has laid down very nice foundation!

resolved

[MisRob]

Thanks @chetan21122004 and @ozer550! I will merge now so we can proceed with work that depends on this component mentioned earlier.