Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
100e7eb9
Unverified
Commit
100e7eb9
authored
Feb 12, 2021
by
Uchechukwu Obasi
Committed by
GitHub
Feb 12, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Alert: update story to use controls (#31145)
* Alert: updated story to use Controls * updated some changes
parent
7f1f5599
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
21 additions
and
7 deletions
+21
-7
packages/grafana-ui/src/components/Alert/Alert.story.tsx
+21
-7
No files found.
packages/grafana-ui/src/components/Alert/Alert.story.tsx
View file @
100e7eb9
import
React
from
'react'
;
import
{
Story
}
from
'@storybook/react'
;
import
{
action
}
from
'@storybook/addon-actions'
;
import
{
Alert
,
AlertVariant
,
VerticalGroup
}
from
'@grafana/ui'
;
import
{
Props
}
from
'./Alert'
;
import
{
withCenteredStory
,
withHorizontallyCenteredStory
}
from
'../../utils/storybook/withCenteredStory'
;
import
mdx
from
'../Alert/Alert.mdx'
;
import
{
StoryExample
}
from
'../../utils/storybook/StoryExample'
;
const
severities
:
AlertVariant
[]
=
[
'error'
,
'warning'
,
'info'
,
'success'
];
export
default
{
title
:
'Overlays/Alert'
,
component
:
Alert
,
...
...
@@ -13,26 +17,30 @@ export default {
docs
:
{
page
:
mdx
,
},
knobs
:
{
disabled
:
true
,
},
},
argTypes
:
{
severity
:
{
control
:
{
type
:
'select'
,
options
:
severities
}
},
},
};
const
severities
:
AlertVariant
[]
=
[
'error'
,
'warning'
,
'info'
,
'success'
];
export
const
Examples
=
()
=>
{
export
const
Examples
:
Story
<
Props
>
=
({
severity
,
title
,
buttonContent
})
=>
{
return
(
<
VerticalGroup
>
<
StoryExample
name=
"With buttonContent and children"
>
<
Alert
title=
"Some very important message"
severity=
"error"
buttonContent=
{
<
span
>
Close
</
span
>
}
title=
{
title
}
severity=
{
severity
}
buttonContent=
{
<
span
>
{
buttonContent
}
</
span
>
}
onRemove=
{
action
(
'Remove button clicked'
)
}
>
Child content that includes some alert details, like maybe what actually happened.
</
Alert
>
</
StoryExample
>
<
StoryExample
name=
"No dismiss"
>
<
Alert
title=
"Some very important message"
severity=
"info"
/>
<
Alert
title=
{
title
}
severity=
{
severity
}
/>
</
StoryExample
>
<
StoryExample
name=
"Severities"
>
<
VerticalGroup
>
...
...
@@ -49,3 +57,9 @@ export const Examples = () => {
</
VerticalGroup
>
);
};
Examples
.
args
=
{
severity
:
'error'
,
title
:
'Some very important message'
,
buttonContent
:
'Close'
,
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment