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/account-picker/account-picker.stories.js
David Walsh ba307d7258
UX: Multichain: Account Picker (#18177)
* UX: Multichain: Account Picker

* Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/account-picker/index.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Cleanup

* Move file names to DS standard

* Add index for export

* Add MULTICHAIN flag

* Fix hover color

* Fix lint

* Use BackgroundColor instead of Color

* Add comments for propTypes

* Provide args properly

* Implement onClick arg

* Fix alignment

* Update ui/components/multichain/account-picker/account-picker.js

* Update ui/components/multichain/account-picker/account-picker.js

* Update ui/components/multichain/account-picker/account-picker.js

* Update ui/components/multichain/account-picker/account-picker.js

* Update ui/components/multichain/account-picker/account-picker.js

* Only use account name and address, account for blockies or jazzicons

* Add test

* Fix jest change

* Fix CSS locations

* Update ui/components/multichain/account-picker/account-picker.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/account-picker/account-picker.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update ui/components/multichain/account-picker/account-picker.js

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

* Update snapshot

* Update border radius

* Fix jest

* Switch to using Button

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-03-30 13:11:13 -05:00

42 lines
966 B
JavaScript

import React from 'react';
import { AccountPicker } from '.';
const CHAOS_ACCOUNT = {
address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"',
name: 'Account That Has A Really Really Really Really Really Long Name',
};
export default {
title: 'Components/Multichain/AccountPicker',
component: AccountPicker,
argTypes: {
name: {
control: 'string',
},
address: {
control: 'string',
},
onClick: {
action: 'onClick',
},
},
args: {
address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"',
name: 'Account 1',
onClick: () => undefined,
},
};
export const DefaultStory = (args) => <AccountPicker {...args} />;
DefaultStory.storyName = 'Default';
export const ChaosStory = (args) => (
<div
style={{ maxWidth: '300px', border: '1px solid var(--color-border-muted)' }}
>
<AccountPicker {...args} />
</div>
);
ChaosStory.storyName = 'Chaos';
ChaosStory.args = { name: CHAOS_ACCOUNT.name };