Add stackblitz button to component demos

[DBD324]

Summary

A new button should be added to the component demos that can be used to launch stackblitz demos of component demos.

💬 Description

Component demos should be edited to allow a stackblitz button to be included and launch a stackblitz of the component demo.

Explore whether an icon button would suffice, or if a labelled button is required.

Button should be configurable so that different icons can be used to launch different types of code demos if stackblitz needs to be changed.

Clicking the button should always open the demo in a new tab instead of in the existing window.

The button should use stackblitz's iconography, but styled within an ICDS button.

💰 User value

Allows developers to open a customisable code demo to experiement with component.

📚 User Stories

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

As an ICDS user:
I need a way to open a stackblitz link from a component demo So that I can view the full code example in stackblitz.

📝 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 configured, When setting it up Then an option exists to include a stackblitz link, and if selected a stackblitz button is rendered in the bottom bar next to the copy code button.

Given that a comp demo exists with a stackblitz button, When the viewport width is changed to the Md, Sm, or Xs, breakpoint, Then the stackblitz labelled button should be replaced with the stackblitz icon button, And the copy code button should follow the same behaviour.

Given that a comp demo exists with a stackblitz button, When the viewport width is changed to the Lg or Xl breakpoint, Then the stackblitz icon button should be replaced with the stackblitz labelled button, And the copy code button should follow the same behaviour.

Given that a comp demo exists with a stackblitz button, When the button is clicked, or otherwise actioned, Then it should open the stackBlitz link in a new tab.

Given that a comp demo exists with a stackblitz button, When navigated to using a SR, Then it should be announced as a button with accessible label "Open code example in StackBlitz"

✏ Designs

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

## 🧾 Guidance N/A

Additional info

Tell us anything else useful to help us understand your suggestion.

[MI6-255]

Consider if the platform choice is appropriate (the SDK may help), but would a website embedded version work better? Failing that, if there is not the SDK token, display the code on a plain screen

[MI6-255]

This is to be published once all components have been moved over to the SDK. This issue includes both the adding of the button, and working through each code example to get it to a good state. This work has been started as part of the patterns work.

[GCHQ-Developer-112]

Components

These are a list of all of our components to be reviewed to ensure they are formatted correctly and work in StackBlitz

• [x] Accordion
• [x] Alert
• [x] Back to top
• [x] Badge
• [x] Breadcrumb
• [x] Button
• [x] Card
• [x] Checkbox
• [x] Chip
• [x] Classification banner
• [x] Data entity
• [x] Dialog
• [x] Empty state
• [x] Footer
• [x] Hero
• [x] Link
• [x] Loading indicator
• [x] Page header
• [x] Pagination
• [x] Popover menu
• [x] Radio button
• [x] Search bar
• [x] Section container
• [x] Select
• [x] Side navigation
• [x] Skeleton
• [x] Status tag
• [x] Stepper
• [x] Switch
• [x] Tabs
• [x] Text field
• [ ] Toast
• [x] Toggle button
• [x] Tooltip
• [x] Top Navigation
• [x] Typography

Things to check for when reviewing these components:

• Does the code example need a parent container / fragment?
• Has any styling been moved into the long code?
• Has any script tags been moved into the long code and placed at the bottom of the code?
• All tags in web components code should have a closing tags - there are some exceptions e.g. <img />, <meta />