Merge pull request #163 from ynput/develop

EntityCard fixes
ynput · Aug 5, 2024 · 0464c0c · 0464c0c
2 parents d7be710 + 522a0df
commit 0464c0c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/src/EntityCard/EntityCard.stories.tsx b/src/EntityCard/EntityCard.stories.tsx
@@ -24,11 +24,13 @@ const initData: DataProps = {
   subTitle: 'sc0120sh0130',
   description: 'demo_Big_Episodic/episodes/ep103/ep103sq002',
   imageUrl: getRandomImage(),
+  isPlayable: Math.random() > 0.5,
   icon: 'visibility',
   iconColor: '#FF982E',
   assignees: [
     { fullName: 'John Doe', name: 'john', avatarUrl: getRandomImage() },
     { fullName: 'John Doe', name: 'john' },
+    { fullName: 'John Doe', name: 'john' },
   ],
   isFullHighlight: false,
   isActiveAnimate: false,

diff --git a/src/EntityCard/EntityCard.styled.ts b/src/EntityCard/EntityCard.styled.ts
@@ -377,8 +377,10 @@ export const Title = styled.span`
     font-size: 20px;
   }
 
-  &.subtitle {
-    padding: 4px 6px;
+  &.subTitle {
+    .inner-text {
+      direction: rtl;
+    }
   }
 `
 

diff --git a/src/EntityCard/EntityCard.tsx b/src/EntityCard/EntityCard.tsx
@@ -30,6 +30,8 @@ export interface EntityCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string
   titleIcon?: IconType
   subTitle?: string
+  subTitleIcon?: IconType
+  isPlayable?: boolean // shows subtitle icon
   description?: string
   imageUrl?: string
   imageAlt?: string
@@ -57,6 +59,8 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
     {
       title = '',
       titleIcon,
+      subTitleIcon,
+      isPlayable,
       subTitle,
       description,
       imageUrl,
@@ -184,7 +188,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
             {!hideTitles && (
               <Styled.Title className="inner-card title">
                 {titleIcon && <Icon icon={titleIcon} />}
-                {title && <span className="title">{title}</span>}
+                {title && <span className="inner-text">{title}</span>}
               </Styled.Title>
             )}
             {/* top right icon */}
@@ -198,7 +202,8 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
             {/* bottom left */}
             {!hideTitles && (
               <Styled.Title className="inner-card subTitle">
-                <span>{subTitle}</span>
+                <span className="inner-text">{subTitle}</span>
+                {(subTitleIcon || isPlayable) && <Icon icon={subTitleIcon || 'play_circle'} />}
               </Styled.Title>
             )}
             {/* bottom right icon */}
@@ -210,7 +215,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
             {/* bottom right assignees */}
             {!!assignees?.length && (
               <Styled.Title className="inner-card assignees">
-                <UserImagesStacked users={assignees} size={26} gap={-0.5} />
+                <UserImagesStacked users={assignees} size={26} gap={-0.5} max={2} />
               </Styled.Title>
             )}
           </Styled.Row>

diff --git a/src/User/UserImage/UserImage.tsx b/src/User/UserImage/UserImage.tsx
@@ -1,6 +1,18 @@
 import { forwardRef } from 'react'
 import * as Styled from './UserImage.styled'
 
+const createInitials = (nameData: string) => {
+  if (!nameData) return 'N/A'
+  if (nameData === '++') return '++'
+  // regex handles different type of whitespaces
+  const words = nameData.trim().split(/\s+/)
+  const mappedInitials = words
+    .slice(0, 2)
+    .map((word) => word[0].toUpperCase())
+    .join('')
+  return mappedInitials
+}
+
 export interface UserImageProps extends React.HTMLAttributes<HTMLSpanElement> {
   src?: string
   fullName?: string
@@ -11,17 +23,11 @@ export interface UserImageProps extends React.HTMLAttributes<HTMLSpanElement> {
 
 export const UserImage = forwardRef<HTMLSpanElement, UserImageProps>(
   ({ src, name, fullName, size = 30, highlight, className, ...props }, ref) => {
-    const fontSize = Math.round((13 / 30) * size)  
+    const fontSize = Math.round((13 / 30) * size)
     const nameData = fullName || name
     const hasNameData = !!nameData
 
-    const createInitials = (nameData: string) => {
-      // regex handles different type of whitespaces 
-      const words = nameData.trim().split(/\s+/)
-      const mappedInitials = words.slice(0, 2).map(word => word[0].toUpperCase()).join('')
-      return mappedInitials;
-    }
-    const initials = hasNameData ? createInitials(nameData) : 'N/A'
+    const initials = createInitials(nameData)
 
     return (
       <Styled.CircleImage

diff --git a/src/User/UserImagesStacked/UserImagesStacked.tsx b/src/User/UserImagesStacked/UserImagesStacked.tsx
@@ -30,19 +30,24 @@ export const UserImagesStacked = forwardRef<HTMLDivElement, UserImagesStackedPro
   ({ users = [], size = 30, gap = -1, max = 5, userStyle, ...props }, ref) => {
     const length = users.length
     // limit to 5 users
-    users = users.slice(0, max)
+    const usersToShow = [...users].slice(0, max)
 
     // show extras
     if (length > max) {
-      users.push({
-        fullName: `+ ${length - max > 9 ? '+' : length - max}`,
-        name: `+ ${length - max > 9 ? '+' : length - max}`
+      // remove last user
+      usersToShow.pop()
+      // add a +1 user
+      const extraCount = length - max + 1 // +1 for the user we just removed
+      const extraString = extraCount > 9 ? '++' : '+ ' + extraCount
+      usersToShow.push({
+        fullName: extraString,
+        name: extraString,
       })
     }
 
     return (
       <StackedStyled $gap={(gap * 30) / 2} {...props} ref={ref}>
-        {users.map(({ avatarUrl, name, fullName, self }, i) => (
+        {usersToShow.map(({ avatarUrl, name, fullName, self }, i) => (
           <UserImage
             src={avatarUrl}
             key={i}