v0.3.24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

src/components/Avatars/Avatar/Avatar.stories.tsx

@@ -8,7 +8,7 @@ import { styled } from '../../../foundation'
 import { getTitle } from '../../../utils/etcUtils'
 import { StatusType } from '../../Status'
 import Avatar from './Avatar'
-import { AvatarProps, AvatarSize } from './Avatar.types'
+import AvatarProps, { AvatarSize } from './Avatar.types'
 
 const MOCK_AVATAR_URL = 'https://cf.channel.io/thumb/200x200/pub-file/1/606d87d059a6093594c0/ch-symbol-filled-smiley-bg.png'
 
@@ -38,6 +38,15 @@ export default {
         ],
       },
     },
+    onClick: {
+      action: 'clicked',
+    },
+    onMouseEnter: {
+      action: 'mouseEnter',
+    },
+    onMouseLeave: {
+      action: 'mouseLeave',
+    },
   },
 } as Meta
 

src/components/Avatars/Avatar/Avatar.styled.ts

@@ -1,6 +1,6 @@
 /* Internal denpendencies */
 import { styled, css, smoothCorners } from '../../../foundation'
-import InjectedInterpolation from '../../../types/InjectedInterpolation'
+import { WithInterpolation } from '../../../types/InjectedInterpolation'
 import DisabledOpacity from '../../../constants/DisabledOpacity'
 import { AVATAR_STATUS_GAP, AVATAR_BORDER_WIDTH, AVATAR_BORDER_RADIUS_PERCENTAGE } from '../constants/AvatarStyle'
 import { enableSmoothCorners } from '../../../worklets/EnableCSSHoudini'
@@ -10,11 +10,10 @@ interface AvatarWrapperProps {
   disabled: boolean
 }
 
-interface AvatarProps {
+export interface AvatarProps extends WithInterpolation {
   avatarUrl: string
   size: AvatarSize
   showBorder: boolean
-  interpolation?: InjectedInterpolation
 }
 
 function calcStatusGap(showBorder: boolean) {

src/components/Avatars/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ import { noop, isEmpty } from 'lodash-es'
 import useProgressiveImage from '../../../hooks/useProgressiveImage'
 import defaultAvatarUrl from '../assets/defaultAvatar.svg'
 import { Status } from '../../Status'
-import { AvatarSize, AvatarProps } from './Avatar.types'
+import AvatarProps, { AvatarSize } from './Avatar.types'
 import { StyledAvatar, AvatarWrapper, StatusWrapper } from './Avatar.styled'
 
 export const AVATAR_WRAPPER_TEST_ID = 'ch-design-system-avatar-wrapper'

src/components/Avatars/Avatar/Avatar.types.ts

@@ -1,6 +1,5 @@
 /* Internal dependencies */
 import { StylableComponentProps, ChildrenComponentProps } from '../../../types/ComponentProps'
-import InjectedInterpolation from '../../../types/InjectedInterpolation'
 import { StatusType } from '../../Status'
 
 export enum AvatarSize {
@@ -14,7 +13,7 @@ export enum AvatarSize {
   Size120 = 120,
 }
 
-export interface AvatarProps extends StylableComponentProps, ChildrenComponentProps {
+export default interface AvatarProps extends StylableComponentProps, ChildrenComponentProps {
   avatarUrl: string
   fallbackUrl?: string
   name: string
@@ -26,5 +25,4 @@ export interface AvatarProps extends StylableComponentProps, ChildrenComponentPr
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
   onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void
   onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void
-  interpolation?: InjectedInterpolation
 }

src/components/Avatars/Avatar/index.ts

@@ -1,6 +1,6 @@
 import Avatar from './Avatar'
+import type AvatarProps from './Avatar.types'
 import { AvatarSize } from './Avatar.types'
-import type { AvatarProps } from './Avatar.types'
 
 export type {
   AvatarProps,

src/components/Avatars/AvatarGroup/AvatarGroup.stories.tsx

@@ -2,40 +2,46 @@
 import React from 'react'
 import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
-import { v4 as uuid } from 'uuid'
 
 /* Internal dependencies */
 import { getTitle } from '../../../utils/etcUtils'
 import { Avatar, AvatarSize } from '../Avatar'
-import { AvatarGroupEllipsisType, AvatarGroupProps } from './AvatarGroup.types'
+import AvatarGroupProps, { AvatarGroupEllipsisType } from './AvatarGroup.types'
 import AvatarGroup from './AvatarGroup'
 
 const MOCK_AVATAR_LIST = [
   {
+    id: 1,
     avatarUrl: 'https://bit.ly/code-beast',
     name: 'Christian Nwamba',
   },
   {
+    id: 2,
     avatarUrl: 'https://bit.ly/tioluwani-kolawole',
     name: 'Kola Tioluwani',
   },
   {
+    id: 3,
     avatarUrl: 'https://bit.ly/kent-c-dodds',
     name: 'Kent Dodds',
   },
   {
+    id: 4,
     avatarUrl: 'https://bit.ly/ryan-florence',
     name: 'Ryan Florence',
   },
   {
+    id: 5,
     avatarUrl: 'https://bit.ly/dan-abramov',
     name: 'Dan Abrahmov',
   },
   {
+    id: 6,
     avatarUrl: 'https://bit.ly/prosper-baba',
     name: 'Prosper Otemuyiwa',
   },
   {
+    id: 7,
     avatarUrl: 'https://bit.ly/sage-adebayo',
     name: 'Segun Adebayo',
   },
@@ -77,14 +83,20 @@ export default {
         step: 1,
       },
     },
+    onMouseEnterEllipsis: {
+      action: 'mouseEnter',
+    },
+    onMouseLeaveEllipsis: {
+      action: 'mouseLeave',
+    },
   },
 } as Meta
 
 const Template: Story<AvatarGroupProps> = (args) => (
   <AvatarGroup {...args}>
-    { MOCK_AVATAR_LIST.map(({ avatarUrl, name }) => (
+    { MOCK_AVATAR_LIST.map(({ id, avatarUrl, name }) => (
       <Avatar
-        key={uuid()}
+        key={id}
         avatarUrl={avatarUrl}
         name={name}
       />

src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts

@@ -1,6 +1,6 @@
 /* Internal denpendencies */
 import { styled, smoothCorners } from '../../../foundation'
-import InjectedInterpolation from '../../../types/InjectedInterpolation'
+import { WithInterpolation } from '../../../types/InjectedInterpolation'
 import { AVATAR_BORDER_RADIUS_PERCENTAGE, AVATAR_GROUP_DEFAULT_SPACING } from '../constants/AvatarStyle'
 import { Text, TextProps } from '../../Text'
 import { AvatarSize } from '../Avatar/Avatar.types'
@@ -9,9 +9,8 @@ interface AvatarGroupProps {
   spacing: number
 }
 
-interface AvatarEllipsisCountProps extends TextProps{
+interface AvatarEllipsisCountProps extends TextProps, WithInterpolation {
   size: AvatarSize
-  interpolation?: InjectedInterpolation
 }
 
 export const AvatarEllipsisCount = styled(Text)<AvatarEllipsisCountProps>`
@@ -37,7 +36,7 @@ export const StyledAvatarGroup = styled.div<AvatarGroupProps>`
   }
 `
 
-export const AvatarEllipsisIconWrapper = styled.div<Pick<AvatarEllipsisCountProps, 'interpolation'>>`
+export const AvatarEllipsisWrapper = styled.div<Pick<AvatarEllipsisCountProps, 'interpolation'>>`
   position: relative;
 
   ${({ interpolation }) => interpolation}
@@ -57,6 +56,6 @@ export const AvatarEllipsisIcon = styled.div`
 
   ${({ foundation }) => smoothCorners({
     borderRadius: `${AVATAR_BORDER_RADIUS_PERCENTAGE}%`,
-    backgroundColor: foundation?.theme?.['dim-dark'],
+    backgroundColor: foundation?.theme?.['bg-black-darkest'],
   })}
 `

src/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal denpendencies */
@@ -8,8 +8,8 @@ import { Icon, IconSize } from '../../Icon'
 import { AvatarProps, AvatarSize } from '../Avatar'
 import { isLastIndex } from '../../../utils/arrayUtils'
 import { AVATAR_GROUP_DEFAULT_SPACING } from '../constants/AvatarStyle'
-import { AvatarGroupProps, AvatarGroupEllipsisType } from './AvatarGroup.types'
-import { StyledAvatarGroup, AvatarEllipsisIconWrapper, AvatarEllipsisIcon, AvatarEllipsisCount } from './AvatarGroup.styled'
+import AvatarGroupProps, { AvatarGroupEllipsisType } from './AvatarGroup.types'
+import { StyledAvatarGroup, AvatarEllipsisWrapper, AvatarEllipsisIcon, AvatarEllipsisCount } from './AvatarGroup.styled'
 
 export const AVATAR_GROUP_TEST_ID = 'ch-design-system-avatar-group'
 
@@ -57,7 +57,9 @@ function AvatarGroup({
   onMouseLeaveEllipsis = noop,
   ellipsisInterpolation,
   children,
-}: AvatarGroupProps) {
+}: AvatarGroupProps,
+forwardedRef: React.Ref<HTMLDivElement>,
+) {
   const renderAvatarElement = useCallback((avatar: React.ReactElement<AvatarProps>) => (
     React.cloneElement(avatar, {
       key: `${avatar.props.name}-${avatar.props.avatarUrl}`,
@@ -90,7 +92,7 @@ function AvatarGroup({
 
       if (ellipsisType === AvatarGroupEllipsisType.Icon) {
         return (
-          <AvatarEllipsisIconWrapper
+          <AvatarEllipsisWrapper
             key="ellipsis"
             interpolation={ellipsisInterpolation}
             onMouseEnter={onMouseEnterEllipsis}
@@ -104,7 +106,7 @@ function AvatarGroup({
               />
             </AvatarEllipsisIcon>
             { renderAvatarElement(avatar) }
-          </AvatarEllipsisIconWrapper>
+          </AvatarEllipsisWrapper>
         )
       }
 
@@ -114,16 +116,19 @@ function AvatarGroup({
             key="ellipsis"
           >
             { renderAvatarElement(avatar) }
-            <AvatarEllipsisCount
-              interpolation={ellipsisInterpolation}
-              forwardedAs="span"
-              size={size}
-              typo={getProperTypoSize(size)}
+            <AvatarEllipsisWrapper
               onMouseEnter={onMouseEnterEllipsis}
               onMouseLeave={onMouseLeaveEllipsis}
             >
-              { getRestAvatarListCountText(avatarListCount, max) }
-            </AvatarEllipsisCount>
+              <AvatarEllipsisCount
+                forwardedAs="span"
+                interpolation={ellipsisInterpolation}
+                size={size}
+                typo={getProperTypoSize(size)}
+              >
+                { getRestAvatarListCountText(avatarListCount, max) }
+              </AvatarEllipsisCount>
+            </AvatarEllipsisWrapper>
           </React.Fragment>
         )
       }
@@ -145,11 +150,12 @@ function AvatarGroup({
   return (
     <StyledAvatarGroup
       data-testid={AVATAR_GROUP_TEST_ID}
+      ref={forwardedRef}
       spacing={spacing}
     >
       { AvatarListComponent }
     </StyledAvatarGroup>
   )
 }
 
-export default AvatarGroup
+export default forwardRef(AvatarGroup)

src/components/Avatars/AvatarGroup/AvatarGroup.types.ts

@@ -8,7 +8,7 @@ export enum AvatarGroupEllipsisType {
   Count = 'Count',
 }
 
-export interface AvatarGroupProps extends ChildrenComponentProps {
+export default interface AvatarGroupProps extends ChildrenComponentProps {
   max: number
   size?: AvatarSize
   spacing?: number

src/components/Avatars/AvatarGroup/index.ts

@@ -1,10 +1,12 @@
 import AvatarGroup from './AvatarGroup'
-import type { AvatarGroupProps } from './AvatarGroup.types'
+import type AvatarGroupProps from './AvatarGroup.types'
+import { AvatarGroupEllipsisType } from './AvatarGroup.types'
 
 export type {
   AvatarGroupProps,
 }
 
 export {
   AvatarGroup,
+  AvatarGroupEllipsisType,
 }