From a64c5128b4666f821588b9b3260f919be77b542b Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Fri, 6 Dec 2024 00:22:40 +0400 Subject: [PATCH 01/10] feat(statusHint): update color for default appearance --- css/src/components/statusHints.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/src/components/statusHints.css b/css/src/components/statusHints.css index 7e6632b04c..a4599263f5 100644 --- a/css/src/components/statusHints.css +++ b/css/src/components/statusHints.css @@ -30,5 +30,5 @@ } .StatusHint--default { - background: var(--secondary); + background: var(--secondary-light); } From 9c8a41ecb0ce45dbb5d89049ec65fbaa75ef6977 Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Sun, 24 Nov 2024 00:35:48 +0400 Subject: [PATCH 02/10] chore: fix lint error in dropzone component & toast figma connect --- core/components/molecules/dropzone/Dropzone.tsx | 2 +- .../dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap | 3 +++ figma/Toast.figma.tsx | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/core/components/molecules/dropzone/Dropzone.tsx b/core/components/molecules/dropzone/Dropzone.tsx index 25b2440333..2af1e2ac80 100644 --- a/core/components/molecules/dropzone/Dropzone.tsx +++ b/core/components/molecules/dropzone/Dropzone.tsx @@ -77,12 +77,12 @@ export const Dropzone = (props: DropzoneProps) => { Drag your files here or browse files diff --git a/core/components/molecules/dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap b/core/components/molecules/dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap index b95f29bf1b..1f423a8985 100644 --- a/core/components/molecules/dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap +++ b/core/components/molecules/dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap @@ -216,6 +216,7 @@ exports[`Dropzone component snapshot class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer" data-test="DesignSystem-Text" role="button" + tabindex="-1" > browse files @@ -279,6 +280,7 @@ exports[`Dropzone component snapshot class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer" data-test="DesignSystem-Text" role="button" + tabindex="-1" > browse files @@ -331,6 +333,7 @@ exports[`Dropzone component snapshot class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer" data-test="DesignSystem-Text" role="button" + tabindex="-1" > browse files diff --git a/figma/Toast.figma.tsx b/figma/Toast.figma.tsx index f056e59c26..327a040465 100644 --- a/figma/Toast.figma.tsx +++ b/figma/Toast.figma.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Toast } from '@/index'; import figma from '@figma/code-connect'; +import { Action } from '@/components/atoms/toast'; figma.connect(Toast, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=694-632&m=dev', { imports: ["import { Toast } from '@innovaccer/design-system'"], @@ -23,5 +24,5 @@ figma.connect(Toast, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS--- false: undefined, }), }, - example: (props) => , + example: (props) => , }); From ce945f265641bf7d0f1b090ab9e2648e0fb6ca34 Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Wed, 27 Nov 2024 14:46:24 +0400 Subject: [PATCH 03/10] feat(avatar): add presence indicator support in avatar component --- core/components/atoms/avatar/Avatar.tsx | 45 +- .../avatar/__stories__/Presence.story.jsx | 36 + .../atoms/avatar/__tests__/Avatar.test.tsx | 41 +- .../__snapshots__/Avatar.test.tsx.snap | 1204 +++++++----- .../__snapshots__/AvatarIcon.test.tsx.snap | 936 +++++---- .../__snapshots__/AvatarImage.test.tsx.snap | 132 +- .../__snapshots__/AvatarGroup.test.tsx.snap | 332 ++-- .../AvatarSelection.test.tsx.snap | 1750 ++++++++++------- .../__tests__/__snapshots__/TS.test.tsx.snap | 30 +- css/src/components/avatar.css | 17 + 10 files changed, 2611 insertions(+), 1912 deletions(-) create mode 100644 core/components/atoms/avatar/__stories__/Presence.story.jsx diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx index 5e4e54fd61..489cb2d988 100644 --- a/core/components/atoms/avatar/Avatar.tsx +++ b/core/components/atoms/avatar/Avatar.tsx @@ -8,6 +8,8 @@ import AvatarIcon from './avatarIcon'; import AvatarImage from './avatarImage'; import AvatarProvider from './AvatarProvider'; +type TPresence = 'active' | 'away'; + export interface AvatarProps extends BaseProps { /** * Color of the `Avatar` @@ -57,6 +59,14 @@ export interface AvatarProps extends BaseProps { * Defines tabIndex of the `Avatar` */ tabIndex?: number; + /** + * Show presence indicator for the `Avatar` + */ + presence?: TPresence; + /** + * Stroke color of `Presence indicator` & `Status indicator` in `Avatar` + */ + strokeColor?: string; } const initialsLength = 2; @@ -77,6 +87,8 @@ export const Avatar = (props: AvatarProps) => { disabled, tooltipSuffix, tabIndex, + presence, + strokeColor, role = 'presentation', } = props; @@ -99,6 +111,7 @@ export const Avatar = (props: AvatarProps) => { appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance; const darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4']; + const showPresence = presence && !disabled && shape === 'round'; const AvatarClassNames = classNames( { @@ -127,6 +140,16 @@ export const Avatar = (props: AvatarProps) => { ['Avatar-content']: darkAppearance.includes(AvatarAppearance), }); + const presenceClassNames = classNames({ + ['Avatar-presence']: presence, + ['Avatar-presence--active']: presence === 'active', + ['Avatar-presence--away']: presence === 'away', + }); + + const borderStyle = { + boxShadow: `0 0 0 var(--spacing-s) ${strokeColor}`, + }; + const sharedProp = { size, firstName, @@ -180,17 +203,20 @@ export const Avatar = (props: AvatarProps) => { ); }; - const renderTooltip = () => { - if (withTooltip && initials) { - return ( - + const renderTooltip = () => ( + + {withTooltip && initials ? ( + {renderAvatar()} - ); - } - - return renderAvatar(); - }; + ) : ( + renderAvatar() + )} + {showPresence && ( + + )} + + ); return renderTooltip(); }; @@ -205,6 +231,7 @@ Avatar.defaultProps = { withTooltip: true, size: 'regular', shape: 'round', + strokeColor: 'var(--white)', }; export default Avatar; diff --git a/core/components/atoms/avatar/__stories__/Presence.story.jsx b/core/components/atoms/avatar/__stories__/Presence.story.jsx new file mode 100644 index 0000000000..bafe97f20f --- /dev/null +++ b/core/components/atoms/avatar/__stories__/Presence.story.jsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { Avatar, Row, Column, Text } from '@/index'; + +// CSF format story +export const presence = () => { + const weight = 'strong'; + + return ( + + + Active +
+
+ + + + Away +
+
+ + + + ); +}; + +export default { + title: 'Components/Avatar/Avatar/Presence', + component: Avatar, + parameters: { + docs: { + docPage: { + title: 'Avatar', + }, + }, + }, +}; diff --git a/core/components/atoms/avatar/__tests__/Avatar.test.tsx b/core/components/atoms/avatar/__tests__/Avatar.test.tsx index cf7279134d..51d743e69b 100644 --- a/core/components/atoms/avatar/__tests__/Avatar.test.tsx +++ b/core/components/atoms/avatar/__tests__/Avatar.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import Avatar, { AvatarProps as Props } from '../Avatar'; import { AccentAppearance, AvatarShape, AvatarSize } from '@/common.type'; import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper'; @@ -231,3 +231,42 @@ describe('Avatar component with tooltip', () => { expect(tooltip).toHaveTextContent('John Doe (Deactivated)'); }); }); + +describe('Avatar component with prop:presence', () => { + it('presence should be available for only round avatar', () => { + const { getByTestId } = render(); + const presenceEle = getByTestId('DesignSystem-Avatar--Presence'); + expect(presenceEle).toBeInTheDocument(); + expect(presenceEle).toHaveClass('Avatar-presence'); + }); + + it('presence should not be available for square avatar', () => { + render(); + const presenceEle = screen.queryByText('DesignSystem-Avatar--Presence'); + expect(presenceEle).not.toBeInTheDocument(); + }); + + it('presence should not be available for disabled avatar', () => { + render(); + const presenceEle = screen.queryByText('DesignSystem-Avatar--Presence'); + expect(presenceEle).not.toBeInTheDocument(); + }); + + it('presence should have active class for prop presence:active', () => { + const { getByTestId } = render(); + const presenceEle = getByTestId('DesignSystem-Avatar--Presence'); + expect(presenceEle).toHaveClass('Avatar-presence--active'); + }); + + it('presence should have active class for prop presence:away', () => { + const { getByTestId } = render(); + const presenceEle = getByTestId('DesignSystem-Avatar--Presence'); + expect(presenceEle).toHaveClass('Avatar-presence--away'); + }); + + it('presence should have custom stroke color', () => { + const { getByTestId } = render(); + const presenceEle = getByTestId('DesignSystem-Avatar--Presence'); + expect(presenceEle).toHaveStyle('box-shadow: 0 0 0 var(--spacing-s) red'); + }); +}); diff --git a/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index c61690820e..eae3cd0c62 100644 --- a/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -7,6 +7,39 @@ Object { "asFragment": [Function], "baseElement":
+ +