Story 1.4.2.24. CRM. Talent Profile view mode. Implement component Drawer

Content

General info

In the Talent Profile view mode, there is a drawer that can be opened by default. This drawer includes 3 tabs: Notes, Activity, and Communication. It can be closed by clicking on the blue arrow, and it will animate to the right. The drawer content can be scrolled independently from the rest of the page. The names of the tabs are sticky to the top of the drawer, remaining visible during scrolling.

Additionally, the drawer will behave differently depending on the content of the tab:

  • For listing content (such as Processes or other lists), the drawer can overlap with the content on the page.

  • For other content tabs (such as Professional, Interview, and Personal info), the drawer will squeeze the page content without overlapping.

User story

As a CRM user,
I want to have a drawer that can be opened and closed, which contains tabs for Notes, Activity, and Communication,
So that I can view and interact with additional profile information in a compact and accessible manner.


RT-6667

Получение подробных данных проблемы…
СТАТУС

Visual design:

https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=62003-91381&t=53IiQGXfjZ21fCqj-4

Prototype: https://www.figma.com/proto/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=62003-90925&t=53IiQGXfjZ21fCqj-0&scaling=min-zoom&content-scaling=fixed&page-id=23085%3A130636&starting-point-node-id=62403%3A74798

Acceptance criteria

01

Scenario: Display Drawer
Given I am viewing the Talent Profile,
When I navigate to the page,
Then the drawer should be open by default, displaying the 3 tabs: Notes, Activity, and Communication.

image-20250212-070709.png

02

Scenario: Close Drawer
Given the drawer is open,
When I click on the blue arrow,
Then the drawer should close and animate to the right side of the screen.

03

Scenario: Scroll Drawer Content
Given I am viewing the content inside the drawer,
When I scroll inside the drawer,
Then the content inside the drawer should scroll independently of the rest of the page.

04

Scenario: Sticky Tabs in drawer
Given I am scrolling within the drawer,
When I scroll down in the drawer,
Then the names of the tabs (Notes, Activity, Communication) should remain sticky at the top of the drawer.

image-20250212-071036.png

05

Scenario: Sticky Tabs on the page
Given I am scrolling the page
When I scroll down on the page,
Then the names of the tabs (Notes, Activity, Communication) should remain sticky at the top of the drawer.

image-20250212-071051.png

06

Scenario: Switch Between Tabs
Given I am viewing the drawer,
When I click on any of the tabs (Notes, Activity, Communication),
Then the relevant content for that tab should display, while the tab names remain sticky at the top.

07

Scenario: Drawer Behavior for Listings (Overlap)
Given I am viewing the "Processes" tab on the page (or other listings),
When the drawer is opened,
Then the drawer should overlap the content on the page (like filter drawer).

image-20250212-071717.png

08

Scenario: Drawer Behavior for Non-Listing Content (Squeeze)
Given I am viewing a tab with non-listing content (Professional, Interview, Personal info),
When the drawer is opened,
Then the content on the page should be squeezed, but not overlapped.

image-20250212-071659.png

09

NEW Scenario: main scroll for the page
Given I am viewing profile view mode page
When I scroll the whole page
Then the content on the page should be scrolled together with the drawer

10

NEW Scenario: scroll for the drawer
Given I am viewing profile view mode page
When I scroll in the drawer
Then the content of all drawer is scrallble together with pinned notes
! Only one scroll for the drawer

Comments

Leave a Reply