From 61f8ff918eab166bc6df411e5d971bd7f4313109 Mon Sep 17 00:00:00 2001
From: saulprl <phasecross@hotmail.com>
Date: Fri, 21 Jul 2023 13:01:24 -0700
Subject: [PATCH] Migrate molecules from CSF 2 to CSF 3

---
 .../molecules/perk-info/perk-info.stories.tsx | 36 ++++----
 .../promotion-card/promotion-card.stories.tsx | 52 +++++++----
 .../social-media-button.stories.tsx           | 88 +++++++++++++------
 .../molecules/subtitle/subtitle.stories.tsx   | 46 +++++-----
 4 files changed, 136 insertions(+), 86 deletions(-)

diff --git a/app/components/molecules/perk-info/perk-info.stories.tsx b/app/components/molecules/perk-info/perk-info.stories.tsx
index 08f0342..451c264 100644
--- a/app/components/molecules/perk-info/perk-info.stories.tsx
+++ b/app/components/molecules/perk-info/perk-info.stories.tsx
@@ -1,36 +1,30 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {PerkInfo} from './perk-info.component';
 
 export default {
   title: 'Molecules/PerkInfo',
   component: PerkInfo,
-} as ComponentMeta<typeof PerkInfo>;
+} as Meta<typeof PerkInfo>;
 
-const Template: ComponentStory<typeof PerkInfo> = (args) => (
-  <PerkInfo {...args} />
-);
+type Story = StoryObj<typeof PerkInfo>;
 
-export const GamesPerk = Template.bind({});
-GamesPerk.args = {
-  icon: 'games',
-  children: 'Juegos de mesa',
+export const GamesPerk: Story = {
+  render: (args) => <PerkInfo {...args} />,
+  args: {icon: 'games', children: 'Juegos de mesa'},
 };
 
-export const EventsPerk = Template.bind({});
-EventsPerk.args = {
-  icon: 'events',
-  children: 'Hosteo de eventos',
+export const EventsPerk: Story = {
+  render: (args) => <PerkInfo {...args} />,
+  args: {icon: 'events', children: 'Hosteo de eventos'},
 };
 
-export const IngredientsPerk = Template.bind({});
-IngredientsPerk.args = {
-  icon: 'ingredients',
-  children: 'Ingredientes 100% naturales',
+export const IngredientsPerk: Story = {
+  render: (args) => <PerkInfo {...args} />,
+  args: {icon: 'ingredients', children: 'Ingredientes 100% naturales'},
 };
 
-export const InternetPerk = Template.bind({});
-InternetPerk.args = {
-  icon: 'internet',
-  children: 'Internet Rápido',
+export const InternetPerk: Story = {
+  render: (args) => <PerkInfo {...args} />,
+  args: {icon: 'internet', children: 'Internet Rápido'},
 };
diff --git a/app/components/molecules/promotion-card/promotion-card.stories.tsx b/app/components/molecules/promotion-card/promotion-card.stories.tsx
index 169c2a8..6a103e2 100644
--- a/app/components/molecules/promotion-card/promotion-card.stories.tsx
+++ b/app/components/molecules/promotion-card/promotion-card.stories.tsx
@@ -1,30 +1,48 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {PromotionCard} from './promotion-card.component';
+import {CustomLink} from '../../atoms/link';
 
 export default {
   title: 'Molecules/PromotionCard',
   component: PromotionCard,
-} as ComponentMeta<typeof PromotionCard>;
+} as Meta<typeof PromotionCard>;
 
-const Template: ComponentStory<typeof PromotionCard> = (args) => (
-  <PromotionCard {...args} />
-);
+type Story = StoryObj<typeof PromotionCard>;
 
-export const Default = Template.bind({});
-Default.args = {
-  image: 'https://placehold.co/600x800.png',
-  label: 'Latte pilonsillo',
+export const Default: Story = {
+  render: (args) => (
+    <div style={{width: '280px'}}>
+      <PromotionCard {...args} />
+    </div>
+  ),
+  args: {
+    image: 'https://placehold.co/600x800.png',
+    label: 'Latte pilonsillo',
+    linkRender: (props) => <CustomLink {...props} />,
+  },
 };
 
-export const IsRecommended = Template.bind({});
-IsRecommended.args = {
-  ...Default.args,
-  isRecommended: true,
+export const IsRecommended: Story = {
+  render: (args) => (
+    <div style={{width: '280px'}}>
+      <PromotionCard {...args} />
+    </div>
+  ),
+  args: {
+    ...Default.args,
+    isRecommended: true,
+  },
 };
 
-export const IsSeasonal = Template.bind({});
-IsSeasonal.args = {
-  ...Default.args,
-  isSeasonal: true,
+export const IsSeasonal: Story = {
+  render: (args) => (
+    <div style={{width: '280px'}}>
+      <PromotionCard {...args} />
+    </div>
+  ),
+  args: {
+    ...Default.args,
+    isSeasonal: true,
+  },
 };
diff --git a/app/components/molecules/social-media-buttons/social-media-button.stories.tsx b/app/components/molecules/social-media-buttons/social-media-button.stories.tsx
index c391b6e..f566f88 100644
--- a/app/components/molecules/social-media-buttons/social-media-button.stories.tsx
+++ b/app/components/molecules/social-media-buttons/social-media-button.stories.tsx
@@ -1,4 +1,4 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {
   FacebookButton,
@@ -8,33 +8,65 @@ import {
 
 export default {
   title: 'Molecules/SocialMediaButton',
-} as ComponentMeta<typeof FacebookButton>;
-
-const Template: ComponentStory<typeof FacebookButton> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      gap: '1em',
-      backgroundColor: '#9f7d7d',
-      padding: '1em',
-    }}
-  >
-    <FacebookButton {...args} />
-    <InstagramButton {...args} />
-    <TwitterButton {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 36,
-  href: '#',
-  inverted: false,
+} as Meta<typeof FacebookButton>;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '1em',
+        backgroundColor: '#9f7d7d',
+        padding: '1em',
+      }}
+    >
+      <FacebookButton href="#" {...args} />
+      <InstagramButton href="#" {...args} />
+      <TwitterButton href="#" {...args} />
+    </div>
+  ),
+
+  args: {
+    size: 36,
+    href: '#',
+    inverted: false,
+  },
 };
 
-export const Inverted = Template.bind({});
-Inverted.args = {
-  size: 36,
-  href: '#',
-  inverted: true,
+export const Inverted: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '1em',
+        backgroundColor: '#9f7d7d',
+        padding: '1em',
+      }}
+    >
+      <FacebookButton href="#" {...args} />
+      <InstagramButton href="#" {...args} />
+      <TwitterButton href="#" {...args} />
+    </div>
+  ),
+
+  args: {
+    ...Default.args,
+    inverted: true,
+  },
 };
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   size: 36,
+//   href: '#',
+//   inverted: false,
+// };
+
+// export const Inverted = Template.bind({});
+// Inverted.args = {
+//   size: 36,
+//   href: '#',
+//   inverted: true,
+// };
diff --git a/app/components/molecules/subtitle/subtitle.stories.tsx b/app/components/molecules/subtitle/subtitle.stories.tsx
index fae7b01..bcff1e3 100644
--- a/app/components/molecules/subtitle/subtitle.stories.tsx
+++ b/app/components/molecules/subtitle/subtitle.stories.tsx
@@ -1,11 +1,13 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {Subtitle} from './subtitle.component';
 import {TitleSectionProps} from './subtitle.styles';
 
 export default {
   title: 'Molecules/Subtitle',
-} as ComponentMeta<typeof Subtitle>;
+} as Meta<typeof Subtitle>;
+
+type Story = StoryObj<typeof Subtitle>;
 
 const sampleSubtitles: Array<{title: string; icon: TitleSectionProps['icon']}> =
   [
@@ -22,22 +24,26 @@ const sampleNumerals: Array<{title: string; numeral: string}> = [
   {title: 'Lorem Ipsum', numeral: '4.'},
 ];
 
-export const Default: ComponentStory<typeof Subtitle> = () => (
-  <div style={{display: 'flex', flexDirection: 'column', gap: '2em'}}>
-    {sampleSubtitles.map(({title, icon}) => (
-      <Subtitle key={title} icon={icon}>
-        {title}
-      </Subtitle>
-    ))}
-  </div>
-);
+export const Default: Story = {
+  render: () => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '2em'}}>
+      {sampleSubtitles.map(({title, icon}) => (
+        <Subtitle key={title} icon={icon}>
+          {title}
+        </Subtitle>
+      ))}
+    </div>
+  ),
+};
 
-export const Numerals: ComponentStory<typeof Subtitle> = () => (
-  <div style={{display: 'flex', flexDirection: 'column', gap: '2em'}}>
-    {sampleNumerals.map(({title, numeral}) => (
-      <Subtitle key={title} numeral={numeral}>
-        {title}
-      </Subtitle>
-    ))}
-  </div>
-);
+export const Numerals: Story = {
+  render: () => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '2em'}}>
+      {sampleNumerals.map(({title, numeral}) => (
+        <Subtitle key={title} numeral={numeral}>
+          {title}
+        </Subtitle>
+      ))}
+    </div>
+  ),
+};