mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
429847a686
Our Storybook dependencies have been updated to v6.1.9, from v5. This was done to address a security vulnerability in a transitive dependency of these packages (`highlight.js`). The primary changes required by this Storybook update were the change in import path for the `withKnobs` hook, the change in background config format, and the webpack configuration. Storybook seems to work correctly. The migration was guided by the Storybook changelog[1] and the Storybook v6 migration guide[2]. There is one Storybook error remaining; it fails to load the Euclid font. This is a pre-existing error though, so we can fix it in a later PR. The `yarn.lock` file was deduplicated in this PR as well, as it was required to fix various install warnings that were introduced with this update. [1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md [2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import { action } from '@storybook/addon-actions'
|
|
import { text } from '@storybook/addon-knobs'
|
|
import ActionableMessage from '.'
|
|
|
|
export default {
|
|
title: 'ActionableMessage',
|
|
}
|
|
|
|
export const NoAction = () => (
|
|
<div style={{ height: '200px', width: '200px' }}>
|
|
<ActionableMessage
|
|
message={text(
|
|
'Message',
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
)}
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
export const OneAction = () => (
|
|
<div style={{ height: '200px', width: '250px' }}>
|
|
<ActionableMessage
|
|
message={text(
|
|
'Message',
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
)}
|
|
primaryAction={{
|
|
label: text('ActionLabel', 'Dismiss'),
|
|
onClick: action('OneAction Click'),
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
export const TwoActions = () => (
|
|
<div style={{ height: '200px', width: '300px' }}>
|
|
<ActionableMessage
|
|
message={text(
|
|
'Message',
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
)}
|
|
primaryAction={{
|
|
label: text('First ActionLabel', 'Dismiss'),
|
|
onClick: action('TwoActionsWithClassNames Click 1'),
|
|
}}
|
|
secondaryAction={{
|
|
label: text('Second ActionLabel', 'Okay'),
|
|
onClick: action('TwoActionsWithClassNames Click 2'),
|
|
}}
|
|
className="actionable-message--warning"
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
export const LeftAligned = () => (
|
|
<div style={{ height: '200px', width: '300px' }}>
|
|
<ActionableMessage
|
|
message={text(
|
|
'Message',
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
)}
|
|
primaryAction={{
|
|
label: text('LeftAligned Label', 'Dismiss'),
|
|
onClick: action('LeftAligned Click 1'),
|
|
}}
|
|
className="actionable-message--left-aligned"
|
|
/>
|
|
</div>
|
|
)
|