From 35c5ea8bd3978a0f569b987ce5e956521ecf9ee1 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Mon, 8 Apr 2024 11:53:29 -0300
Subject: [PATCH] fix: Make catalog card controllable (#531)

---
 .../CatalogCard/CatalogCard.stories.tsx       | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/CatalogCard/CatalogCard.stories.tsx b/src/components/CatalogCard/CatalogCard.stories.tsx
index 11e88c97..351ef090 100644
--- a/src/components/CatalogCard/CatalogCard.stories.tsx
+++ b/src/components/CatalogCard/CatalogCard.stories.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { storiesOf } from '@storybook/react'
-import { Container } from '../Container/Container'
-import { Header } from '../Header/Header'
-import { HeaderMenu } from '../HeaderMenu/HeaderMenu'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { CatalogCard, CatalogCardProps } from './CatalogCard'
 import { Rarity, Network } from '@dcl/schemas'
+export default {
+  title: 'CatalogCard',
+  component: CatalogCard
+} as ComponentMeta<typeof CatalogCard>
 
 const i18n = {
   rarities: Rarity.getRarities().reduce((acc, rarity) => {
@@ -37,15 +38,9 @@ const props: CatalogCardProps = {
   i18n
 }
 
-storiesOf('CatalogCard', module).add('Catalog', () => (
-  <Container>
-    <HeaderMenu>
-      <HeaderMenu.Left>
-        <Header>Asset Cards for Catalog Items</Header>
-      </HeaderMenu.Left>
-    </HeaderMenu>
-    <div>
-      <CatalogCard {...props} />
-    </div>
-  </Container>
-))
+const Template: ComponentStory<typeof CatalogCard> = (args) => (
+  <CatalogCard {...args} />
+)
+
+export const Wearable = Template.bind({})
+Wearable.args = props