From e206cd7f70a2c012d451b26d842a2cc33b494dd4 Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Thu, 9 Jun 2022 17:37:08 +0300
Subject: [PATCH] markdown and network name stories

---
 .../@shared/Markdown/index.stories.tsx        | 21 +++++++++++++++
 src/components/@shared/Markdown/index.tsx     |  9 +++----
 .../NetworkName/NetworkIcon/index.stories.tsx | 21 +++++++++++++++
 .../index.tsx}                                |  8 ++++--
 .../@shared/NetworkName/index.stories.tsx     | 27 +++++++++++++++++++
 5 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 src/components/@shared/Markdown/index.stories.tsx
 create mode 100644 src/components/@shared/NetworkName/NetworkIcon/index.stories.tsx
 rename src/components/@shared/NetworkName/{NetworkIcon.tsx => NetworkIcon/index.tsx} (79%)
 create mode 100644 src/components/@shared/NetworkName/index.stories.tsx

diff --git a/src/components/@shared/Markdown/index.stories.tsx b/src/components/@shared/Markdown/index.stories.tsx
new file mode 100644
index 000000000..c1af85afb
--- /dev/null
+++ b/src/components/@shared/Markdown/index.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Markdown, { MarkdownProps } from '@shared/Markdown'
+
+export default {
+  title: 'Component/@shared/Markdown',
+  component: Markdown
+} as ComponentMeta<typeof Markdown>
+
+const Template: ComponentStory<typeof Markdown> = (args: MarkdownProps) => (
+  <Markdown {...args} />
+)
+
+interface Props {
+  args: MarkdownProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+}
diff --git a/src/components/@shared/Markdown/index.tsx b/src/components/@shared/Markdown/index.tsx
index d7e192fdb..32915cf10 100644
--- a/src/components/@shared/Markdown/index.tsx
+++ b/src/components/@shared/Markdown/index.tsx
@@ -2,13 +2,12 @@ import { markdownToHtml } from '@utils/markdown'
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
 
-const Markdown = ({
-  text,
-  className
-}: {
+export interface MarkdownProps {
   text: string
   className?: string
-}): ReactElement => {
+}
+
+const Markdown = ({ text, className }: MarkdownProps): ReactElement => {
   const content = markdownToHtml(text)
 
   return (
diff --git a/src/components/@shared/NetworkName/NetworkIcon/index.stories.tsx b/src/components/@shared/NetworkName/NetworkIcon/index.stories.tsx
new file mode 100644
index 000000000..0de8d08bf
--- /dev/null
+++ b/src/components/@shared/NetworkName/NetworkIcon/index.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { NetworkIcon, NetworkIconProps } from '@shared/NetworkName/NetworkIcon'
+
+export default {
+  title: 'Component/@shared/NetworkIcon',
+  component: NetworkIcon
+} as ComponentMeta<typeof NetworkIcon>
+
+const Template: ComponentStory<typeof NetworkIcon> = (
+  args: NetworkIconProps
+) => <NetworkIcon {...args} />
+
+interface Props {
+  args: NetworkIconProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  name: 'Polygon'
+}
diff --git a/src/components/@shared/NetworkName/NetworkIcon.tsx b/src/components/@shared/NetworkName/NetworkIcon/index.tsx
similarity index 79%
rename from src/components/@shared/NetworkName/NetworkIcon.tsx
rename to src/components/@shared/NetworkName/NetworkIcon/index.tsx
index 5af785ca9..8b6335b93 100644
--- a/src/components/@shared/NetworkName/NetworkIcon.tsx
+++ b/src/components/@shared/NetworkName/NetworkIcon/index.tsx
@@ -4,9 +4,13 @@ import PolygonIcon from '@images/polygon.svg'
 import MoonbeamIcon from '@images/moonbeam.svg'
 import BscIcon from '@images/bsc.svg'
 import EnergywebIcon from '@images/energyweb.svg'
-import styles from './index.module.css'
+import styles from '../index.module.css'
 
-export function NetworkIcon({ name }: { name: string }): ReactElement {
+export interface NetworkIconProps {
+  name: string
+}
+
+export function NetworkIcon({ name }: NetworkIconProps): ReactElement {
   const IconMapped = name.includes('ETH')
     ? EthIcon
     : name.includes('Polygon')
diff --git a/src/components/@shared/NetworkName/index.stories.tsx b/src/components/@shared/NetworkName/index.stories.tsx
new file mode 100644
index 000000000..96f2c7add
--- /dev/null
+++ b/src/components/@shared/NetworkName/index.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import NetworkName, { NetworkNameProps } from '@shared/NetworkName'
+
+export default {
+  title: 'Component/@shared/NetworkName',
+  component: NetworkName
+} as ComponentMeta<typeof NetworkName>
+
+const Template: ComponentStory<typeof NetworkName> = (
+  args: NetworkNameProps
+) => <NetworkName {...args} />
+
+interface Props {
+  args: NetworkNameProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  networkId: 1287
+}
+
+export const Minimal: Props = Template.bind({})
+Minimal.args = {
+  networkId: 1287,
+  minimal: true
+}