From dfa3c5d6cccfa491fbc1d15a19b11a833db3ff9d Mon Sep 17 00:00:00 2001 From: ClaudiaHolhos Date: Fri, 10 Jun 2022 12:23:20 +0300 Subject: [PATCH] page stories --- .../FormFields/Datatoken/index.stories.tsx | 3 +- src/components/@shared/NetworkName/index.tsx | 12 ++++--- .../index.module.css} | 0 .../@shared/Page/PageHeader/index.stories.tsx | 35 +++++++++++++++++++ .../{PageHeader.tsx => PageHeader/index.tsx} | 14 ++++---- .../@shared/Page/Seo/index.stories.tsx | 34 ++++++++++++++++++ .../@shared/Page/{Seo.tsx => Seo/index.tsx} | 12 ++++--- src/components/@shared/Page/index.stories.tsx | 26 ++++++++++++++ 8 files changed, 118 insertions(+), 18 deletions(-) rename src/components/@shared/Page/{PageHeader.module.css => PageHeader/index.module.css} (100%) create mode 100644 src/components/@shared/Page/PageHeader/index.stories.tsx rename src/components/@shared/Page/{PageHeader.tsx => PageHeader/index.tsx} (83%) create mode 100644 src/components/@shared/Page/Seo/index.stories.tsx rename src/components/@shared/Page/{Seo.tsx => Seo/index.tsx} (97%) create mode 100644 src/components/@shared/Page/index.stories.tsx diff --git a/src/components/@shared/FormFields/Datatoken/index.stories.tsx b/src/components/@shared/FormFields/Datatoken/index.stories.tsx index be6e2567a..fc8f18f6e 100644 --- a/src/components/@shared/FormFields/Datatoken/index.stories.tsx +++ b/src/components/@shared/FormFields/Datatoken/index.stories.tsx @@ -44,6 +44,5 @@ interface Props { export const Default: Props = Template.bind({}) Default.args = { - name: 'PARCOUR-73', - symbol: 'PARCOUR-73' + name: 'PARCOUR-73' } diff --git a/src/components/@shared/NetworkName/index.tsx b/src/components/@shared/NetworkName/index.tsx index 6a12a93ce..70d6ab213 100644 --- a/src/components/@shared/NetworkName/index.tsx +++ b/src/components/@shared/NetworkName/index.tsx @@ -6,15 +6,17 @@ import useNetworkMetadata, { } from '@hooks/useNetworkMetadata' import { NetworkIcon } from './NetworkIcon' +export interface NetworkNameProps { + networkId: number + minimal?: boolean + className?: string +} + export default function NetworkName({ networkId, minimal, className -}: { - networkId: number - minimal?: boolean - className?: string -}): ReactElement { +}: NetworkNameProps): ReactElement { const { networksList } = useNetworkMetadata() const networkData = getNetworkDataById(networksList, networkId) const networkName = getNetworkDisplayName(networkData, networkId) diff --git a/src/components/@shared/Page/PageHeader.module.css b/src/components/@shared/Page/PageHeader/index.module.css similarity index 100% rename from src/components/@shared/Page/PageHeader.module.css rename to src/components/@shared/Page/PageHeader/index.module.css diff --git a/src/components/@shared/Page/PageHeader/index.stories.tsx b/src/components/@shared/Page/PageHeader/index.stories.tsx new file mode 100644 index 000000000..7cda09072 --- /dev/null +++ b/src/components/@shared/Page/PageHeader/index.stories.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import PageHeader, { PageHeaderProps } from '@shared/Page/PageHeader' + +export default { + title: 'Component/@shared/PageHeader', + component: PageHeader +} as ComponentMeta + +const Template: ComponentStory = (args: PageHeaderProps) => ( + +) + +interface Props { + args: PageHeaderProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + title: Ocean Protocol Market +} + +export const Centered: Props = Template.bind({}) +Centered.args = { + title: Ocean Protocol Market, + center: true +} + +export const WithDescription: Props = Template.bind({}) +WithDescription.args = { + title: Ocean Protocol Market, + center: true, + description: + 'A marketplace to find, publish and trade data sets in the Ocean Network.' +} diff --git a/src/components/@shared/Page/PageHeader.tsx b/src/components/@shared/Page/PageHeader/index.tsx similarity index 83% rename from src/components/@shared/Page/PageHeader.tsx rename to src/components/@shared/Page/PageHeader/index.tsx index e20f27f0d..23398c7fe 100644 --- a/src/components/@shared/Page/PageHeader.tsx +++ b/src/components/@shared/Page/PageHeader/index.tsx @@ -1,19 +1,21 @@ import React, { ReactElement } from 'react' import classNames from 'classnames/bind' -import styles from './PageHeader.module.css' +import styles from './index.module.css' import Markdown from '@shared/Markdown' const cx = classNames.bind(styles) +export interface PageHeaderProps { + title: ReactElement + description?: string + center?: boolean +} + export default function PageHeader({ title, description, center -}: { - title: ReactElement - description?: string - center?: boolean -}): ReactElement { +}: PageHeaderProps): ReactElement { const styleClasses = cx({ header: true, center diff --git a/src/components/@shared/Page/Seo/index.stories.tsx b/src/components/@shared/Page/Seo/index.stories.tsx new file mode 100644 index 000000000..f875d9466 --- /dev/null +++ b/src/components/@shared/Page/Seo/index.stories.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import Seo, { SeoProps } from '@shared/Page/Seo' + +export default { + title: 'Component/@shared/Seo', + component: Seo +} as ComponentMeta + +const Template: ComponentStory = (args: SeoProps) => ( + +) + +interface Props { + args: SeoProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + uri: 'https://www.market.oceanprotocol.com' +} + +export const WithTitle: Props = Template.bind({}) +WithTitle.args = { + uri: 'https://www.market.oceanprotocol.com', + title: 'Ocean Market' +} + +export const WithDescription: Props = Template.bind({}) +WithDescription.args = { + ...WithTitle.args, + description: + 'A marketplace to find, publish and trade data sets in the Ocean Network.' +} diff --git a/src/components/@shared/Page/Seo.tsx b/src/components/@shared/Page/Seo/index.tsx similarity index 97% rename from src/components/@shared/Page/Seo.tsx rename to src/components/@shared/Page/Seo/index.tsx index 316893d9c..84095a71b 100644 --- a/src/components/@shared/Page/Seo.tsx +++ b/src/components/@shared/Page/Seo/index.tsx @@ -4,15 +4,17 @@ import Head from 'next/head' import { isBrowser } from '@utils/index' import { useMarketMetadata } from '@context/MarketMetadata' +export interface SeoProps { + title?: string + description?: string + uri: string +} + export default function Seo({ title, description, uri -}: { - title?: string - description?: string - uri: string -}): ReactElement { +}: SeoProps): ReactElement { const { siteContent } = useMarketMetadata() // Remove trailing slash from all URLs diff --git a/src/components/@shared/Page/index.stories.tsx b/src/components/@shared/Page/index.stories.tsx new file mode 100644 index 000000000..045c32a65 --- /dev/null +++ b/src/components/@shared/Page/index.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import Page, { PageProps } from '@shared/Page' + +export default { + title: 'Component/@shared/Page', + component: Page +} as ComponentMeta + +const Template: ComponentStory = (args: PageProps) => ( + +) + +interface Props { + args: PageProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + uri: 'https://www.market.oceanprotocol.com', + children: ( + + A marketplace to find, publish and trade data sets in the Ocean Network. + + ) +}