1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.stories.js
Nidhi Kumari 0bbfd38cc6
UX Multichain: Menu for Site connections and permissions (#18167)
* added site connection menu component

* reverted change for unlock page

* updated snapshot

* updated state with useSelector

* updated state for connected

* updated icons

* updated test

* updated snapshot

* moved component to multichain folder

* updated color

* added multichain connection to menu bar

* updated default color

* updated css

* updated multichain site with connected site info

* updated ui for not connected state

* removed scripts

* updated lint errors

* updated lint errors

* updated stories

* updated story for not connected to current state

* updated story for not connected to current state

* updated badge to 16px

* updated badge position

* updated snapshot

* fixed lint errors

* updated not connected state icon

* updated constants for status and added new locale string
2023-03-31 22:53:27 +05:30

52 lines
1.2 KiB
JavaScript

import React from 'react';
import {
STATUS_CONNECTED,
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites';
import {
BackgroundColor,
Color,
} from '../../../helpers/constants/design-system';
import { MultichainConnectedSiteMenu } from './multichain-connected-site-menu';
export default {
title: 'Components/Multichain/MultichainConnectedSiteMenu',
component: MultichainConnectedSiteMenu,
argTypes: {
globalMenuColor: {
control: 'text',
},
text: {
control: 'text',
},
status: {
control: 'text',
},
},
args: {
globalMenuColor: Color.iconAlternative,
status: STATUS_NOT_CONNECTED,
},
};
const Template = (args) => {
return <MultichainConnectedSiteMenu {...args} />;
};
export const DefaultStory = Template.bind({});
export const ConnectedStory = Template.bind({});
ConnectedStory.args = {
globalMenuColor: Color.successDefault,
text: 'connected',
status: STATUS_CONNECTED,
};
export const ConnectedtoAnotherAccountStory = Template.bind({});
ConnectedtoAnotherAccountStory.args = {
globalMenuColor: BackgroundColor.backgroundDefault,
text: 'not connected',
status: STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
};