From 923729f5be6953b13369d7dd270029b6c7c1cb53 Mon Sep 17 00:00:00 2001 From: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com> Date: Thu, 14 Sep 2023 10:07:17 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A8=20CRT=20header=20widget=20(#4693)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Component * Story * Correct styling * CR fixes * Conflict fixes * Replace useRef --- .../src/components/WidgetTile/WidgetTile.tsx | 2 +- .../steps/SetupTokenStep.tsx | 18 +++-- .../CrtBasicInfoWidget.stories.tsx | 43 ++++++++++++ .../CrtBasicInfoWidget/CrtBasicInfoWidget.tsx | 65 +++++++------------ .../_crt/CrtBasicInfoWidget/index.ts | 1 + 5 files changed, 82 insertions(+), 47 deletions(-) create mode 100644 packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.stories.tsx create mode 100644 packages/atlas/src/components/_crt/CrtBasicInfoWidget/index.ts diff --git a/packages/atlas/src/components/WidgetTile/WidgetTile.tsx b/packages/atlas/src/components/WidgetTile/WidgetTile.tsx index b06cff5b11..df4dc494e4 100644 --- a/packages/atlas/src/components/WidgetTile/WidgetTile.tsx +++ b/packages/atlas/src/components/WidgetTile/WidgetTile.tsx @@ -14,7 +14,7 @@ import { Information } from '../Information' export type WidgetTileProps = { loading?: boolean - title: string | number + title: string | number | JSX.Element button?: { text: string } & Omit text?: string | number customNode?: ReactNode diff --git a/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx b/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx index c0cc165737..10abecdb0d 100644 --- a/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx +++ b/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx @@ -9,6 +9,7 @@ import { LeftPlaceholder, WidgetPreviewContainer, } from '@/components/_crt/CreateTokenDrawer/steps/styles' +import { CrtBasicInfoWidget } from '@/components/_crt/CrtBasicInfoWidget' import { CrtFormWrapper } from '@/components/_crt/CrtFormWrapper' import { FormField } from '@/components/_inputs/FormField' import { Input } from '@/components/_inputs/Input' @@ -18,8 +19,6 @@ import { useMountEffect } from '@/hooks/useMountEffect' import { CommonStepProps } from './types' -import { CrtBasicInfoWidget } from '../../CrtBasicInfoWidget/CrtBasicInfoWidget' - const accessOptions = [ { label: 'Anyone', @@ -65,8 +64,19 @@ export const SetupTokenStep = ({ setPrimaryButtonProps, onSubmit, form, setPrevi diff --git a/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.stories.tsx b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.stories.tsx new file mode 100644 index 0000000000..478e4feee4 --- /dev/null +++ b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.stories.tsx @@ -0,0 +1,43 @@ +import { Meta, StoryFn } from '@storybook/react' + +import { JoyTokenIcon } from '@/components/JoyTokenIcon' +import { CrtBasicInfoWidget, CrtBasicInfoWidgetProps } from '@/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget' +import { JoystreamProvider } from '@/providers/joystream/joystream.provider' + +export default { + title: 'crt/CrtBasicInfoWidget', + component: CrtBasicInfoWidget, + decorators: [ + (Story) => ( + + + + ), + ], +} as Meta + +const Template: StoryFn = (args) => + +export const Default = Template.bind({}) +Default.args = { + name: 'CRT', + details: [ + { + caption: 'TOTAL REV.', + content: 65656, + icon: , + tooltipText: 'Lorem ipsum', + }, + { + caption: 'REV. SHARE', + content: '80%', + tooltipText: 'Lorem ipsum', + }, + { + caption: 'AN. REWARD', + content: '20%', + icon: , + tooltipText: 'Lorem ipsum', + }, + ], +} diff --git a/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.tsx b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.tsx index c45d6fa366..00a5513687 100644 --- a/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.tsx +++ b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.tsx @@ -1,64 +1,45 @@ -import styled from '@emotion/styled' +import { ReactElement, ReactNode, useState } from 'react' -import { JoyTokenIcon } from '@/components/JoyTokenIcon' +import { FlexBox } from '@/components/FlexBox' +import { Color } from '@/components/Text/Text.styles' +import { Tooltip } from '@/components/Tooltip' import { WidgetTile } from '@/components/WidgetTile' import { DetailsContent } from '@/components/_nft/NftTile' import { useMediaMatch } from '@/hooks/useMediaMatch' -import { sizes } from '@/styles' -type CrtBasicInfoWidgetProps = { +export type CrtBasicInfoWidgetProps = { name?: string - totalRevenue?: string - revenueShare?: number - creatorReward?: number + titleColor?: Color + details: { + caption: string + content: number | string | ReactElement | ReactElement[] + icon?: ReactNode + tooltipText?: string + }[] } -export const CrtBasicInfoWidget = ({ creatorReward, revenueShare, totalRevenue, name }: CrtBasicInfoWidgetProps) => { +export const CrtBasicInfoWidget = ({ name, details, titleColor }: CrtBasicInfoWidgetProps) => { + const [titleRef, setTitleRef] = useState(null) const smMatch = useMediaMatch('sm') - return ( ${name ?? 'ABC'}} titleVariant="h700" + titleColor={titleColor ?? 'colorTextStrong'} customNode={ - - {totalRevenue && ( - } - withDenomination - /> - )} - {revenueShare && ( + + + {details.map((detail, idx) => ( } withDenomination /> - )} - {creatorReward && ( - } - withDenomination - /> - )} - + ))} + } /> ) } - -const DetailsBox = styled.div` - display: flex; - gap: ${sizes(4)}; -` diff --git a/packages/atlas/src/components/_crt/CrtBasicInfoWidget/index.ts b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/index.ts new file mode 100644 index 0000000000..9640e651ad --- /dev/null +++ b/packages/atlas/src/components/_crt/CrtBasicInfoWidget/index.ts @@ -0,0 +1 @@ +export * from './CrtBasicInfoWidget'