Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add stackblitz button to component demos #751

Closed
DBD324 opened this issue Jan 11, 2024 · 3 comments
Closed

Add stackblitz button to component demos #751

DBD324 opened this issue Jan 11, 2024 · 3 comments

Comments

@DBD324
Copy link
Contributor

DBD324 commented Jan 11, 2024

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.

@DBD324 DBD324 added this to the PI 6 V.2 milestone Jan 11, 2024
@DBD324 DBD324 moved this from Design to-do to Design In progress in Intelligence Community Design System Jan 24, 2024
@DBD324 DBD324 self-assigned this Jan 24, 2024
@MI6-255
Copy link
Contributor

MI6-255 commented Jan 26, 2024

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

@DBD324 DBD324 moved this from Design In progress to In Refinement in Intelligence Community Design System Jan 29, 2024
GCHQ-Developer-112 added a commit that referenced this issue Jan 30, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Jan 30, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Jan 30, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Jan 30, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
@MI6-255
Copy link
Contributor

MI6-255 commented Feb 1, 2024

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.

@ASM995 ASM995 moved this from In Refinement to Ready for dev in Intelligence Community Design System Feb 1, 2024
GCHQ-Developer-112 added a commit that referenced this issue Feb 6, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
@ASM995 ASM995 assigned GCHQ-Developer-112 and unassigned DBD324 Feb 7, 2024
GCHQ-Developer-112 added a commit that referenced this issue Feb 7, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 7, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 7, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 7, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
@GCHQ-Developer-112 GCHQ-Developer-112 moved this from Ready for dev to In Review in Intelligence Community Design System Feb 8, 2024
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue Feb 8, 2024
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
GCHQ-Developer-112 added a commit that referenced this issue May 21, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 21, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 21, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 22, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 22, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 22, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 23, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 24, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 30, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-530 pushed a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-530 pushed a commit that referenced this issue May 31, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 4, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 4, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 4, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 4, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 5, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 12, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 13, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 13, 2024
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

. #773 #774 #751
@GCHQ-Developer-112 GCHQ-Developer-112 moved this from Dev In Progress to In Review in Intelligence Community Design System Jun 13, 2024
GCHQ-Developer-112 added a commit that referenced this issue Jun 13, 2024
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

. #773 #774 #751
GCHQ-Developer-112 added a commit that referenced this issue Jun 14, 2024
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

. #773 #774 #751
gd2910 pushed a commit that referenced this issue Jun 27, 2024
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

. #773 #774 #751
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

4 participants