Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add tooltip to activity library card #9236

Merged
merged 20 commits into from
Dec 4, 2023
Merged

feat: add tooltip to activity library card #9236

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
40ce8ff
show title and type below activity card
nickoferrall Nov 7, 2023
9e6b112
make activity library card dynamic
nickoferrall Nov 7, 2023
5bb30a5
add retro background swirls
nickoferrall Nov 10, 2023
8799073
add background images for all meeting types
nickoferrall Nov 10, 2023
040fc96
fix custom card size
nickoferrall Nov 10, 2023
a490939
truncate text if there is no space
nickoferrall Nov 10, 2023
a324d07
clean up
nickoferrall Nov 10, 2023
b5ebf09
use grape 100
nickoferrall Nov 13, 2023
dad04a9
add premortem and postmortem imgs
nickoferrall Nov 14, 2023
0d4b81c
remove bg from categories themes
nickoferrall Nov 16, 2023
572679a
move background img to div
nickoferrall Nov 16, 2023
97a60a6
add dummy tooltip
nickoferrall Nov 20, 2023
b6aa4d8
fix tailwind bg colours
nickoferrall Nov 22, 2023
adf62f2
show tooltip after delay
nickoferrall Nov 22, 2023
3109faf
show descriptions in tooltip
nickoferrall Nov 27, 2023
34fe0c3
clean up
nickoferrall Nov 27, 2023
5bc2a46
update tooltip position
nickoferrall Nov 30, 2023
8905854
update CATEGORY_THEMES colours
nickoferrall Dec 1, 2023
36598e0
remove tailwind config safelist
nickoferrall Dec 1, 2023
b8b5af7
fix merge conflicts
nickoferrall Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 91 additions & 34 deletions packages/client/components/ActivityLibrary/ActivityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,125 @@
import clsx from 'clsx'
import React, {ComponentPropsWithoutRef, PropsWithChildren} from 'react'
import React, {PropsWithChildren, useState} from 'react'
import {upperFirst} from '../../utils/upperFirst'
import {MeetingTypeEnum} from '../../__generated__/NewMeetingQuery.graphql'
import {ActivityCard_template$key} from '../../__generated__/ActivityCard_template.graphql'
import {backgroundImgMap, CategoryID, MEETING_TYPE_TO_CATEGORY} from './Categories'
import {twMerge} from 'tailwind-merge'
import {Tooltip} from '../../ui/Tooltip/Tooltip'
import {TooltipTrigger} from '../../ui/Tooltip/TooltipTrigger'
import {TooltipContent} from '../../ui/Tooltip/TooltipContent'
import {useFragment} from 'react-relay'
import graphql from 'babel-plugin-relay/macro'
import {ActivityLibraryCardDescription} from './ActivityLibraryCardDescription'

export interface CardTheme {
primary: string
secondary: string
}

export const ActivityCardImage = (
props: PropsWithChildren<React.ImgHTMLAttributes<HTMLImageElement>>
) => {
const {className, src} = props

return (
<div
className={clsx(
'my-1 flex flex-1 items-center justify-center overflow-hidden px-4',
className
)}
>
<img className={'h-full w-full object-contain'} src={src} />
</div>
)
type ActivityCardImageProps = {
className?: string
src: string
category: CategoryID
}

const ActivityCardTitle = (props: ComponentPropsWithoutRef<'div'>) => {
const {children, className, ...rest} = props
export const ActivityCardImage = (props: PropsWithChildren<ActivityCardImageProps>) => {
const {className, src, category} = props
const backgroundSrc = backgroundImgMap[category]

return (
<div
className={clsx(
'px-2 py-1 text-sm font-semibold leading-5 text-slate-800 sm:text-base',
className={twMerge(
'relative flex h-full w-full items-center justify-center overflow-hidden',
className
)}
{...rest}
style={{backgroundImage: `url(${backgroundSrc})`, backgroundSize: 'cover'}}
>
{children}
<img
className='absolute top-0 left-0 z-10 h-full w-full object-contain p-10'
src={src}
alt='Card Illustration'
/>
</div>
)
}

export interface ActivityCardProps {
className?: string
theme: CardTheme
titleAs?: React.ElementType
title?: string
badge?: React.ReactNode
children?: React.ReactNode
type?: MeetingTypeEnum
templateRef?: ActivityCard_template$key
}

export const ActivityCard = (props: ActivityCardProps) => {
const {className, theme, title, titleAs, badge, children} = props
const Title = titleAs ?? ActivityCardTitle
const {className, theme, title, children, type, badge, templateRef} = props
const category = type && MEETING_TYPE_TO_CATEGORY[type]
const [showTooltip, setShowTooltip] = useState(false)
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null)
nickoferrall marked this conversation as resolved.
Show resolved Hide resolved

const template = useFragment(
graphql`
fragment ActivityCard_template on MeetingTemplate {
...ActivityLibraryCardDescription_template
}
`,
templateRef ?? null
)

const handleMouseEnter = () => {
const timeoutId = setTimeout(() => {
setShowTooltip(true)
}, 750)
nickoferrall marked this conversation as resolved.
Show resolved Hide resolved
setHoverTimeout(timeoutId)
}

const handleMouseLeave = () => {
if (hoverTimeout) {
clearTimeout(hoverTimeout)
}
setShowTooltip(false)
}

return (
<div className={clsx('flex flex-col overflow-hidden rounded-lg', theme.secondary, className)}>
<div className='flex flex-shrink-0'>
<Title>{title}</Title>
<div className={clsx('ml-auto h-8 w-8 flex-shrink-0 rounded-bl-full', theme.primary)} />
</div>
{children}
<div className='flex flex-shrink-0 group-hover/card:hidden'>
<div className={clsx('mt-auto h-8 w-8 flex-shrink-0 rounded-tr-full', theme.primary)} />
<div className='ml-auto'>{badge}</div>
<div
className='flex w-full flex-col'
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div
className={twMerge(
'relative flex h-full min-w-0 flex-col overflow-hidden rounded-lg',
`bg-${theme.secondary}`,
className
)}
>
<div className='flex-1'>
{children}
<div className='absolute bottom-0 right-0'>{badge}</div>
</div>
</div>
{title && category && (
<div className='mt-2 px-2 pb-2'>
<div className='truncate pb-1 text-lg leading-5 text-slate-800'>{title}</div>
<div className={clsx('font-semibold italic', `text-${theme.primary}`)}>
{upperFirst(category)}
</div>
</div>
)}
{template && (
<Tooltip open={showTooltip}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sometime position is a bit weird, this might be a separate issue with tooltip component itself or we may need to specify some radix props regarding position

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we had some debate about where the tooltip should go. Maybe in a fast-follow PR I move it below the card at least?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially we thought the tooltip could hang from and the mouse pointer:
Captura de pantalla 2023-11-28 a la(s) 3 30 42 p m

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the tooltip position to hang below the card. Here's a Loom: https://www.loom.com/share/cf5af5bf4dca44148e414e2430519188

<TooltipTrigger asChild>
<div className='h-50 w-50 text-sky-500 hover:text-sky-700' />
</TooltipTrigger>
<TooltipContent className='max-w-md whitespace-normal rounded-lg bg-white p-4 text-left text-slate-700 shadow-lg hover:cursor-pointer sm:max-w-sm'>
nickoferrall marked this conversation as resolved.
Show resolved Hide resolved
<div className='mb-2 text-left text-lg font-semibold'>{title}</div>
<ActivityLibraryCardDescription templateRef={template} />
</TooltipContent>
</Tooltip>
)}
</div>
)
}
7 changes: 4 additions & 3 deletions packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const ActivityDetails = (props: Props) => {
if (!activity) {
return <Redirect to='/activity-library' />
}
const {category, illustrationUrl, viewerLowestScope} = activity
const {category, illustrationUrl, viewerLowestScope, type} = activity
const prevCategory = history.location.state?.prevCategory
const categoryLink = `/activity-library/category/${
prevCategory ?? category ?? QUICK_START_CATEGORY_ID
Expand Down Expand Up @@ -99,11 +99,12 @@ const ActivityDetails = (props: Props) => {
)}
>
<ActivityCard
className='ml-14 mb-8 h-[200px] w-80 xl:ml-0 xl:mb-0'
className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
theme={CATEGORY_THEMES[category as CategoryID]}
badge={null}
type={type}
>
<ActivityCardImage src={illustrationUrl} />
<ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
</ActivityCard>
<div className='pb-20'>
<div className='mb-10 space-y-2 pl-14'>
Expand Down
7 changes: 5 additions & 2 deletions packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsCategoryBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ActivityDetailsCategoryBadge = (props: Props) => {
<DropdownMenu.Trigger asChild disabled={!isEditing}>
<PlainButton className={clsx(!isEditing && 'cursor-default', 'flex')} disabled={false}>
<ActivityDetailsBadge
className={clsx(CATEGORY_THEMES[category].primary, 'select-none text-white')}
className={clsx(`bg-${CATEGORY_THEMES[category].primary}`, 'select-none text-white')}
>
{CATEGORY_ID_TO_NAME[category]}
</ActivityDetailsBadge>
Expand All @@ -59,7 +59,10 @@ const ActivityDetailsCategoryBadge = (props: Props) => {
value={categoryId}
>
<span
className={clsx(CATEGORY_THEMES[categoryId].primary, 'h-5 w-5 rounded-full')}
className={clsx(
`bg-${CATEGORY_THEMES[categoryId].primary}`,
'h-5 w-5 rounded-full'
)}
></span>
<span className='pl-5 pr-10 text-xs font-semibold'>
{CATEGORY_ID_TO_NAME[categoryId]}
Expand Down
13 changes: 6 additions & 7 deletions packages/client/components/ActivityLibrary/ActivityLibrary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import IconLabel from '../IconLabel'
import {ActivityBadge} from './ActivityBadge'
import {ActivityCardImage} from './ActivityCard'
import {ActivityLibraryCard} from './ActivityLibraryCard'
import {ActivityLibraryCardDescription} from './ActivityLibraryCardDescription'
import {
CategoryID,
CATEGORY_ID_TO_NAME,
Expand Down Expand Up @@ -67,6 +66,7 @@ graphql`
isRecommended
isFree
...ActivityLibrary_templateSearchDocument @relay(mask: false)
...ActivityCard_template
...ActivityLibraryCardDescription_template
}
`
Expand Down Expand Up @@ -122,7 +122,7 @@ const getTemplateDocumentValue = (
.join('-')

const CategoryIDToColorClass = {
[QUICK_START_CATEGORY_ID]: 'bg-grape-700',
[QUICK_START_CATEGORY_ID]: 'grape-700',
...Object.fromEntries(
Object.entries(CATEGORY_THEMES).map(([key, value]) => {
return [key, value.primary]
Expand Down Expand Up @@ -164,6 +164,8 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
key={template.id}
theme={CATEGORY_THEMES[template.category as CategoryID]}
title={template.name}
type={template.type}
templateRef={template}
badge={
!template.isFree ? (
<ActivityBadge className='m-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>
Expand All @@ -173,10 +175,7 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
<ActivityCardImage
className='group-hover/card:hidden'
src={template.illustrationUrl}
/>
<ActivityLibraryCardDescription
className='hidden group-hover/card:flex'
templateRef={template}
category={template.category as CategoryID}
/>
</ActivityLibraryCard>
</Link>
Expand Down Expand Up @@ -304,7 +303,7 @@ export const ActivityLibrary = (props: Props) => {
'flex-shrink-0 cursor-pointer rounded-full py-2 px-4 text-sm text-slate-800',
category === selectedCategory && searchQuery.length === 0
? [
CategoryIDToColorClass[category],
`bg-${CategoryIDToColorClass[category]}`,
'font-semibold text-white focus:text-white'
]
: 'border border-slate-300 bg-white'
Expand Down
5 changes: 1 addition & 4 deletions packages/client/components/ActivityLibrary/ActivityLibraryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ export const ActivityLibraryCard = (props: ActivityCardProps) => {

return (
<ActivityCard
className={clsx(
'group/card transition-shadow focus-within:ring-2 focus-within:ring-primary hover:shadow-md motion-reduce:transition-none',
className
)}
className={clsx('focus-within:ring-2 focus-within:ring-primary hover:shadow-md', className)}
{...rest}
/>
)
Expand Down
45 changes: 27 additions & 18 deletions packages/client/components/ActivityLibrary/ActivityLibraryCardDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,20 @@ interface RetroDescriptionProps {
prompts: ActivityLibraryCardDescription_template$data['prompts']
}

const RetroDescription = (props: RetroDescriptionProps) => {
export const RetroDescription = (props: RetroDescriptionProps) => {
const {prompts} = props

return (
<>
{prompts!.map((prompt, index) => (
<div key={index} className='flex items-center gap-x-2'>
{prompts!.map((prompt) => (
<div key={prompt.id} className='mb-1 flex flex-col items-start py-1 sm:flex-row'>
<div
className='mt-1 h-3 w-3 shrink-0 self-start rounded-full'
className='mt-1 mr-4 h-3 w-3 shrink-0 self-start rounded-full'
style={{backgroundColor: prompt.groupColor}}
/>
<div className='text-sm font-medium'>{prompt.question}</div>
<div className='flex min-w-0 flex-grow flex-col'>
<div className='text-sm font-semibold'>{prompt.question}</div>
<div className='text-sm font-normal'>{prompt.description}</div>
</div>
</div>
))}
</>
Expand All @@ -38,16 +40,16 @@ interface PokerDescriptionProps {

const PokerDescription = (props: PokerDescriptionProps) => {
const {dimensions} = props

return (
<>
{dimensions!.map((dimension, index) => (
<div key={index} className='flex items-center gap-x-2'>
<div className='mt-1 shrink-0 self-start'>
{dimensions!.map((dimension) => (
<div key={dimension.id} className='mb-1 flex items-center py-1 sm:flex-row'>
<div className='mr-4 shrink-0 self-start'>
<LinearScale className='h-4 w-4' />
</div>
<div className='text-sm font-medium'>
{dimension.name}: <span className='font-semibold'>{dimension.selectedScale.name}</span>
<div className='flex min-w-0 flex-grow flex-col'>
<div className='text-sm font-semibold'>{dimension.name}</div>
<div className='text-sm font-normal'>{dimension.selectedScale.name}</div>
</div>
</div>
))}
Expand All @@ -70,9 +72,11 @@ const ActionDescription = () => {
return (
<>
{items.map((item, index) => (
<div key={index} className='flex items-center gap-x-2'>
<div className='mt-1 shrink-0 self-start'>{item.icon}</div>
<div className='text-sm font-medium'>{item.description}</div>
<div key={index} className='mb-1 flex items-start py-1 sm:flex-row'>
<div className='mr-4 flex shrink-0 items-center self-start'>{item.icon}</div>
<div className='flex min-w-0 flex-grow flex-col'>
<div className='text-sm font-normal'>{item.description}</div>
</div>
</div>
))}
</>
Expand All @@ -90,9 +94,11 @@ const TeamPromptDescription = () => {
return (
<>
{items.map((item, index) => (
<div key={index} className='flex items-center gap-x-2'>
<div className='mt-1 shrink-0 self-start'>{item.icon}</div>
<div className='text-sm font-medium'>{item.description}</div>
<div key={index} className='mb-1 flex items-start py-1 sm:flex-row'>
<div className='mr-4 flex shrink-0 items-center self-start'>{item.icon}</div>
<div className='flex min-w-0 flex-grow flex-col'>
<div className='text-sm font-normal'>{item.description}</div>
</div>
</div>
))}
</>
Expand All @@ -113,6 +119,7 @@ export const ActivityLibraryCardDescription = (props: Props) => {
type
... on PokerTemplate {
dimensions {
id
name
description
selectedScale {
Expand All @@ -122,8 +129,10 @@ export const ActivityLibraryCardDescription = (props: Props) => {
}
... on ReflectTemplate {
prompts {
id
question
groupColor
description
}
}
}
Expand Down
Loading
Loading