Create 'pattern demo' that allows selection of React or Web Components and Typescript or Javascript

[DBD324]

Summary

To show pattern demos we need to allow the dispaly of the code snippet written in typescript or javascript. This control is in addition to the selection of React or Web Components.

💬 Description

Include a control on the component demo to allow selection of typescript or javascript.

💰 User value

This makes it easier for developers to copy and paste the code snippets regardless of their project set up.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user:
I need to select either JS or TS in pattern demos So that I can copy code relevant to my project set up.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given that a component demo is being set up When configuring its options Then an option exists to display the script selector And if selected, then the script selector toggle button group is displayed in the code display bar, And if not selected, then it is hidden.

Given that a pattern demo exists on a page When rendered Then an option exists to chose between TS and JS.

Given that a pattern demo exists on a page When the JS/TS option is changed Then the code snippet should update to show the relevant code.

Given that a comp demo exists with a script select toggle group, When the viewport width is changed to the Md, Sm, or Xs, breakpoint, Then the script select toggle group should be replaced with a toggle icon button group.

Given that a comp demo exists with a script select toggle icon button group, When the viewport width is changed to the Lg or Xl breakpoint, Then the script select toggle icon button group should be replaced with the script select toggle button group.

Given that a comp demo exists with a script select toggle group When navigated to using a SR Then each toggle button should be announced as follows:

• TypeScript = 'Show typescript code, toggle button, selected, code snippet language select, group'
• JavaScript = 'Show JavaScript code, toggle button, code snippet language select, group' [toggle button label], Toggle button, [toggle button group label], group

✏ Designs

Please see the 'Component Library - ICDS Guidance Site' Figma file for visual designs.

## 🧾 Guidance N/A