👨 CRT header widget (Joystream#4693)

* Component * Story * Correct styling * CR fixes * Conflict fixes * Replace useRef
Joystream · Apr 22, 2024 · 064ef3d · 064ef3d
1 parent 758c4b6
commit 064ef3d
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 47 deletions.
diff --git 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<ButtonProps, 'children'>
   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
@@ -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
         <LeftPlaceholder />
         <CrtBasicInfoWidget
           name={watchedForm.name}
-          creatorReward={watchedForm.creatorReward}
-          revenueShare={watchedForm.revenueShare}
+          titleColor="colorText"
+          details={[
+            {
+              caption: 'REVENUE SHARE',
+              content: `${watchedForm.revenueShare}%`,
+              tooltipText: 'Lorem ipsum',
+            },
+            {
+              caption: 'CREATOR REWARD',
+              content: `${watchedForm.creatorReward}%`,
+              tooltipText: 'Lorem ipsum',
+            },
+          ]}
         />
         <BottomPlaceholder>
           <svg xmlns="http://www.w3.org/2000/svg" width="371" height="163" viewBox="0 0 371 163" fill="none">

diff --git a/packages/atlas/src/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget.stories.tsx 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) => (
+      <JoystreamProvider>
+        <Story />
+      </JoystreamProvider>
+    ),
+  ],
+} as Meta<CrtBasicInfoWidgetProps>
+
+const Template: StoryFn<CrtBasicInfoWidgetProps> = (args) => <CrtBasicInfoWidget {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'CRT',
+  details: [
+    {
+      caption: 'TOTAL REV.',
+      content: 65656,
+      icon: <JoyTokenIcon size={16} variant="silver" />,
+      tooltipText: 'Lorem ipsum',
+    },
+    {
+      caption: 'REV. SHARE',
+      content: '80%',
+      tooltipText: 'Lorem ipsum',
+    },
+    {
+      caption: 'AN. REWARD',
+      content: '20%',
+      icon: <JoyTokenIcon size={16} variant="silver" />,
+      tooltipText: 'Lorem ipsum',
+    },
+  ],
+}
diff --git 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<HTMLSpanElement | null>(null)
   const smMatch = useMediaMatch('sm')
-
   return (
     <WidgetTile
-      title={`$${name || 'ABC'}`}
+      title={<span ref={setTitleRef}>${name ?? 'ABC'}</span>}
       titleVariant="h700"
+      titleColor={titleColor ?? 'colorTextStrong'}
       customNode={
-        <DetailsBox>
-          {totalRevenue && (
-            <DetailsContent
-              avoidIconStyling
-              tileSize={smMatch ? 'big' : 'bigSmall'}
-              caption="TOTAL REVENUE"
-              content={totalRevenue}
-              icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
-              withDenomination
-            />
-          )}
-          {revenueShare && (
+        <FlexBox gap={5}>
+          <Tooltip reference={titleRef} text="Token name" placement="top-start" />
+          {details.map((detail, idx) => (
             <DetailsContent
+              {...detail}
+              key={idx}
               avoidIconStyling
               tileSize={smMatch ? 'big' : 'bigSmall'}
-              caption="REVENUE SHARE"
-              content={`${revenueShare}%`}
-              icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
               withDenomination
             />
-          )}
-          {creatorReward && (
-            <DetailsContent
-              avoidIconStyling
-              tileSize={smMatch ? 'big' : 'bigSmall'}
-              caption="CREATOR REWARD"
-              content={`${creatorReward}%`}
-              icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
-              withDenomination
-            />
-          )}
-        </DetailsBox>
+          ))}
+        </FlexBox>
       }
     />
   )
 }
-
-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
@@ -0,0 +1 @@
+export * from './CrtBasicInfoWidget'