2020-08-18 14:18:56 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { action } from '@storybook/addon-actions'
|
2020-11-30 21:10:46 +01:00
|
|
|
import { text } from '@storybook/addon-knobs'
|
2020-08-18 14:18:56 +02:00
|
|
|
import ActionableMessage from '.'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: 'ActionableMessage',
|
|
|
|
}
|
|
|
|
|
|
|
|
export const NoAction = () => (
|
|
|
|
<div style={{ height: '200px', width: '200px' }}>
|
|
|
|
<ActionableMessage
|
2020-11-03 00:41:28 +01:00
|
|
|
message={text(
|
|
|
|
'Message',
|
|
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
|
|
)}
|
2020-08-18 14:18:56 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
export const OneAction = () => (
|
|
|
|
<div style={{ height: '200px', width: '250px' }}>
|
|
|
|
<ActionableMessage
|
2020-11-03 00:41:28 +01:00
|
|
|
message={text(
|
|
|
|
'Message',
|
|
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
|
|
)}
|
2020-08-18 20:13:36 +02:00
|
|
|
primaryAction={{
|
|
|
|
label: text('ActionLabel', 'Dismiss'),
|
|
|
|
onClick: action('OneAction Click'),
|
|
|
|
}}
|
2020-08-18 14:18:56 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
2020-08-18 20:13:36 +02:00
|
|
|
export const TwoActions = () => (
|
2020-08-18 14:18:56 +02:00
|
|
|
<div style={{ height: '200px', width: '300px' }}>
|
|
|
|
<ActionableMessage
|
2020-11-03 00:41:28 +01:00
|
|
|
message={text(
|
|
|
|
'Message',
|
|
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
|
|
)}
|
2020-08-18 20:13:36 +02:00
|
|
|
primaryAction={{
|
|
|
|
label: text('First ActionLabel', 'Dismiss'),
|
|
|
|
onClick: action('TwoActionsWithClassNames Click 1'),
|
|
|
|
}}
|
|
|
|
secondaryAction={{
|
|
|
|
label: text('Second ActionLabel', 'Okay'),
|
|
|
|
onClick: action('TwoActionsWithClassNames Click 2'),
|
|
|
|
}}
|
2020-08-18 14:18:56 +02:00
|
|
|
className="actionable-message--warning"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
2020-08-18 21:51:00 +02:00
|
|
|
|
|
|
|
export const LeftAligned = () => (
|
|
|
|
<div style={{ height: '200px', width: '300px' }}>
|
|
|
|
<ActionableMessage
|
2020-11-03 00:41:28 +01:00
|
|
|
message={text(
|
|
|
|
'Message',
|
|
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
|
|
)}
|
2020-08-18 21:51:00 +02:00
|
|
|
primaryAction={{
|
|
|
|
label: text('LeftAligned Label', 'Dismiss'),
|
|
|
|
onClick: action('LeftAligned Click 1'),
|
|
|
|
}}
|
|
|
|
className="actionable-message--left-aligned"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|