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/nft-item/nft-item.stories.js
vthomas13 4f8c4820d2
Multichain NFT network badges (#19029)
* adding badges for nfts

* fixing default nft styling issue

* adding multichain flag, making borderRadius inline

* Apply suggestions from code review

Co-authored-by: George Marshall <george.marshall@consensys.net>

* fixing imports

* removing nullcheck for guaranteed fields

* moving badgewrapper UI into multichain component

* using Box for button, removing inline style, border-radius for NFT default image

* adding nft badges to NFT Details page

* nits, snap update

* fixing/refactoring nftdefaultimage display, adding clickable, removing handleimageclick, refactor NFTItem, required props

* editing nft-default-image story, test, and snap

* Updating to fix positioning, use Box props to reduce CSS and BEM naming conventions

* moving minor styling to Box props, adding comment

* display block typo

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-06-02 11:01:51 -04:00

42 lines
950 B
JavaScript

import React from 'react';
import { NftItem } from './nft-item';
export default {
title: 'Components/Multichain/NftItem',
argTypes: {
alt: {
control: 'text',
},
name: {
control: 'text',
},
src: {
control: 'text',
},
networkName: {
control: 'text',
},
networkSrc: {
control: 'text',
},
tokenId: {
control: 'text',
},
onClick: {
action: 'onClick',
},
},
args: {
alt: 'Join Archer and his 6,969 frens as they take a trip further down the rabbit hole in search of a world with vibrant art, great vibes, and psychedelic tales.',
name: 'Monkey Trip #2422',
src: 'https://i.seadn.io/gcs/files/878e670c38e0f02e58bf730c51c30d0c.jpg',
networkName: 'Ethereum Mainnet',
networkSrc: './images/eth_logo.png',
tokenId: '2422',
},
};
export const DefaultStory = (args) => <NftItem {...args} />;
DefaultStory.storyName = 'Default';