Skip to content

feat(#2500): Added Stackblitz links to Bug Report form #342

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.

Sign up for GitHub

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

Merged
chrisolsen merged 1 commit into from
Apr 29, 2025
Merged

feat(#2500): Added Stackblitz links to Bug Report form #342

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/routes/get-started/ReportBug.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,18 +262,29 @@ export default function ReportBugPage() {
<GoabFormItem label="Replication steps" mb="xl" helpText="Detailed steps to reproduce your issue." error={ replicationError }>
<GoabTextarea name="replication" value={ formValues.replication } onChange={(event: GoabTextAreaOnChangeDetail) => handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } />
</GoabFormItem>
<GoabFormItem label="StackBlitz URL" mb="s" helpText="Share your code with us in an isolated environment." requirement="optional" error={ stackblitzError }>
<GoabFormItem label="StackBlitz URL" mb="s"
Copy link
Copy Markdown
Collaborator

@twjeffery twjeffery Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this again, I think this would be better dropped down to a new line, and spaced out accordingly, both from the previous line and both links from each other.

image

Here's updated code to use, using a goa-block to bring the links to a new line and space them out:

    <GoabFormItem label="StackBlitz URL" mb="s"
                  helpText={
                    <>Share your code with us in an isolated environment.
                      <GoabBlock mt={"xs"} gap={"m"}>
                        <a
                          href="https://stackblitz.com/~/github.com/GovAlta/ui-components-react-sandbox">React
                          Stackblitz</a>
                        <a
                          href="https://stackblitz.com/~/github.com/GovAlta/ui-components-angular-sandbox">Angular
                          Stackblitz</a>
                      </GoabBlock>
                    </>
                  }
                  requirement="optional"
                  error={stackblitzError}
    >

Copy link
Copy Markdown
Collaborator Author

@ArakTaiRoth ArakTaiRoth Apr 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@twjeffery This has been done

helpText={
<>Share your code with us in an isolated environment.
<GoabBlock mt="xs" gap="m">
<a href="https://stackblitz.com/~/github.com/GovAlta/ui-components-react-sandbox" target="_blank">React Stackblitz</a>
<a href="https://stackblitz.com/~/github.com/GovAlta/ui-components-angular-sandbox" target="_blank">Angular Stackblitz</a>
</GoabBlock>
</>
}
requirement="optional"
error={ stackblitzError }
>
<GoabInput name="stackblitz" value={ formValues.stackblitz } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="90%" error={ !!stackblitzError } />
</GoabFormItem>
<GoabDetails heading="Why stackblitz?" maxWidth="90%" mb="s">
<GoabDetails heading="Why stackblitz?" maxWidth="90%" mb="xl">
The design system team uses <a href="https://stackblitz.com/" target="_blank">StackBlitz</a> to create and share live code
examples. It allows us to easily see your code in an environment that is unaffected by the rest of your project. Create a free
account and share your work directly with the team.
</GoabDetails>
<GoabFormItem label="Jam.dev URL" mb="s" helpText="Show us the bug." requirement="optional" error={ jamError }>
<GoabInput name="jam" value={ formValues.jam } onChange={(event: GoabInputOnChangeDetail) => handleChange(event.name, event.value) } width="90%" error={ !!jamError } />
</GoabFormItem>
<GoabDetails heading="Why jam.dev" maxWidth="90%" mb="s">
<GoabDetails heading="Why jam.dev?" maxWidth="90%" mb="xl">
The design system team uses <a href="https://jam.dev/" target="_blank">jam.dev</a> to share and report bugs. This gives us
a lot of the information we need to understand what's happening and how to fix it. Create a free account and record and share
the issue.
Expand Down