ic-design-system icon indicating copy to clipboard operation
ic-design-system copied to clipboard

Feat/stackblitz component code examples

Open GCHQ-Developer-112 opened this issue 1 year ago • 1 comments

Summary of the changes

  • update code examples to work with the new Stackblitz functionality
  • add toggle button to switch between typescript and javascript
  • add show more/less button to component code examples

Related issue

#751

Checklist

GCHQ-Developer-112 avatar Apr 12 '24 14:04 GCHQ-Developer-112

View your branch deployment here: https://mi6.github.io/ic-design-system-githubpages/branches/feat/stackblitz-component-code-examples

github-actions[bot] avatar Apr 12 '24 14:04 github-actions[bot]

This is awesome work! 🌟

My only concern is the work for this issue

As you can see below... Screenshot 2024-06-05 at 11 57 10

The code tabs are displayed inside the “code-actions” alongside the StackBlitz Button and Copy Code button. This would revert some of the changes, if not complicate this work.

Happy to discuss internally more about this in detail @GCHQ-Developer-112, so that we can collaborate as these issues link together.

GCHQ-Developer-465 avatar Jun 05 '24 11:06 GCHQ-Developer-465

Also when clicking on either TypeScript or JavaScript again it deselects this and the toggle button is no longer 'filled', thus does not confirm to the user what language they are viewing.

Please see my screenshots of this bug below: Screenshot 2024-06-05 at 12 14 07 Screenshot 2024-06-05 at 12 14 16 Screenshot 2024-06-05 at 12 14 24

I don't think this should be the case as the Toggle Button should always be either selected in the group, so that it is clear to the user.

Not too sure if the TypeScript / JavaScript buttons are actually working as well...?

Happy to discuss further if needed 😊

GCHQ-Developer-465 avatar Jun 05 '24 11:06 GCHQ-Developer-465