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]

@chetan21122004 Would you remove any updates of CHANGELOG.md from this pull request? It will get automatically updated after we merge.

It's best to not remove the changelog section from the pull request description and fill it in there. That's the source that will be used for the changelog updated. I've just prepared it.

[MisRob]

This is a nice way to reset a file git checkout develop -- CHANGELOG.md

https://stackoverflow.com/questions/38743912/remove-a-file-from-a-git-pull-request

[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.

[MisRob]

Can be removed

[MisRob]

Since we're not showing the border, can be removed too

[MisRob]

I'd suggest all these styles are removed in favor of using KIconButton as is. For consistency and simpler styles.

[MisRob]

This style doesn't take any effect - can be removed

[MisRob]

Could you use <KIconButton appearance='raised-button' ...> Then you can remove code-toggle class. Note this will also change the button background color to light gray, which is desired. The yellow is a bit too much. Code toggle is not as important element on the documentation page overall. You can see KIconButton docs.

[MisRob]

example-container is an unused class, can be removed

[MisRob]

I believe there's no need to import KIconButton for it to work since it's globally registered. Could you try remove please and see if it still works?

[MisRob]

Would you remove this import and instead register DocsExample in the load-common-components.js file? This will make DocsExample available in all documentation pages without the need to import it.

[MisRob]

@chetan21122004 let me push some changes here to help with this large diff - there are unrelated updates.

[MisRob]

Alright, done! It was simpler than explaining, there were a number of issues, some of them perhaps caused by our recent Node upgrade.

@chetan21122004 please see my latest commits and make sure to pull the branch to your local branch before you start resolving feedback. Would you double-check you don't have any local auto-formatting tools turned on before continuing work? Also before pushing, I'd ask you to always run yarn lint-fix and preview that you're pushing changes only directly relevant to updates you work on - that should prevent this from happening again. Last thing, I only preserved the first DocsExample usage as there were some issues and it was hard to review all places. Let's just keep this one place for the purpose of testing. We will introduce DocsExample more widely in the scope of upcoming issues.

[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.