-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
docs: Create some stories for PageBanner #56519
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
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import {Fragment, useState} from 'react'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import replaysDeadRageBackground from 'sentry-images/spot/replay-dead-rage-changelog.svg'; | ||
|
|
||
| import {Button, LinkButton} from 'sentry/components/button'; | ||
| import ExternalLink from 'sentry/components/links/externalLink'; | ||
| import PageBanner from 'sentry/components/replays/pageBanner'; | ||
| import SizingWindow from 'sentry/components/stories/sizingWindow'; | ||
| import {IconBroadcast} from 'sentry/icons'; | ||
| import storyBook from 'sentry/stories/storyBook'; | ||
|
|
||
| export default storyBook('PageBanner', story => { | ||
| const storiesButton = ( | ||
| <LinkButton | ||
| external | ||
| href="https://sentry.io/orgredirect/organizations/:orgslug/stories" | ||
| priority="primary" | ||
| > | ||
| View Stories | ||
| </LinkButton> | ||
| ); | ||
|
|
||
| story('Example', () => ( | ||
| <Fragment> | ||
| <p>Here's an example Banner announcing this UI Component Library:</p> | ||
| <PageBanner | ||
| button={storiesButton} | ||
| description="Build new products faster by exploring reusable the UI components available inside Sentry." | ||
| heading="Introducing the UI Component Library" | ||
| icon={<IconBroadcast size="sm" />} | ||
| image={replaysDeadRageBackground} | ||
| title="UI Library Available" | ||
| /> | ||
| </Fragment> | ||
| )); | ||
|
|
||
| story('Example with dismiss', () => { | ||
| const [isDismissed, setIsDismissed] = useState(false); | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <p> | ||
| This example renders an X in the top-right corner. You can wire it up with | ||
| something like <kbd>useDismissAlert()</kbd>. | ||
| </p> | ||
| <p> | ||
| Is Dismissed? <var>{String(isDismissed)}</var> | ||
| </p> | ||
| {isDismissed ? ( | ||
| <Button size="sm" onClick={() => setIsDismissed(false)}> | ||
| Show banner | ||
| </Button> | ||
| ) : ( | ||
| <PageBanner | ||
| button={storiesButton} | ||
| description="Build new products faster by exploring reusable the UI components available inside Sentry." | ||
| heading="Introducing the UI Component Library" | ||
| icon={<IconBroadcast size="sm" />} | ||
| image={replaysDeadRageBackground} | ||
| title="UI Library Available" | ||
| onDismiss={() => setIsDismissed(true)} | ||
| /> | ||
| )} | ||
| </Fragment> | ||
| ); | ||
| }); | ||
|
|
||
| story('Resizable', () => { | ||
| const [flexGrow, setFlexGrow] = useState(false); | ||
| return ( | ||
| <Fragment> | ||
| <p> | ||
| The banner will resize if it's shrunk really narrow. To make it expand inside a | ||
| flex parent set <kbd>flex-grow:1</kbd>. | ||
| </p> | ||
| <p> | ||
| <Button size="sm" onClick={() => setFlexGrow(!flexGrow)}> | ||
| flexGrow: <var>{flexGrow ? 1 : 0}</var> | ||
| </Button> | ||
| </p> | ||
| <SizingWindow> | ||
| <PageBanner | ||
| style={{flexGrow: flexGrow ? 1 : 0}} | ||
| button={storiesButton} | ||
| description="Build new products faster by exploring reusable the UI components available inside Sentry." | ||
| heading="Introducing the UI Component Library" | ||
| icon={<IconBroadcast size="sm" />} | ||
| image={replaysDeadRageBackground} | ||
| title="UI Library Available" | ||
| /> | ||
| </SizingWindow> | ||
| </Fragment> | ||
| ); | ||
| }); | ||
|
|
||
| story('More variations', () => ( | ||
| <Fragment> | ||
| <p>There are some examples where we change out the colors and mix things up:</p> | ||
| <PageBanner | ||
| button={storiesButton} | ||
| description={ | ||
| <Fragment> | ||
| Build new products faster by exploring reusable the UI components available | ||
| inside Sentry.{' '} | ||
| <ExternalLink href="https://sentry.io/orgredirect/organizations/:orgslug/stories"> | ||
| See stories | ||
| </ExternalLink> | ||
| </Fragment> | ||
| } | ||
| heading="Introducing the UI Component Library" | ||
| icon={<IconBroadcast size="sm" />} | ||
| image={replaysDeadRageBackground} | ||
| title={ | ||
| <Fragment> | ||
| UI Library Available at <Green>https://sentry.io/stories</Green> | ||
| </Fragment> | ||
| } | ||
| /> | ||
| </Fragment> | ||
| )); | ||
| }); | ||
|
|
||
| const Green = styled('span')` | ||
| color: ${p => p.theme.green400}; | ||
| font-weight: bold; | ||
| `; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How does this affect bundling (if at all)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know specifically, didn't look at webpack output. But I don't think it's something we should worry about, webpack as an abstraction should be doing the right thing. Over time as more stories appear there will be lots of story files (async loaded btw) which will import random things.
In the case of
import Button, it's used in basically every file, and webpack should be noticing that and splitting it out. With this I would think that webpack will notice the image is used with PageBanner and Button andt()and a few things, and then put it into a nice spot.Related: There is a PR to split the
/storiesroute into it's own build: #56511. There's some inartistic "oh the bundles" justification there, but I'm a bit worried we're cargo-culting something here.