-
Notifications
You must be signed in to change notification settings - Fork 30
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
Comments
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 |
…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
…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
…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
…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
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. |
…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
…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
…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
…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
…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
…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
…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
…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
…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
…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
…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
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.
The text was updated successfully, but these errors were encountered: