Skip to content

[WS-2650]: Sign-in popup banner implementation#14082

Merged
elvinasv merged 50 commits into
latestfrom
WS-2650-sign-in-popup-banner-implementation
Jun 25, 2026
Merged

[WS-2650]: Sign-in popup banner implementation#14082
elvinasv merged 50 commits into
latestfrom
WS-2650-sign-in-popup-banner-implementation

Conversation

@SantaZena

@SantaZena SantaZena commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2650

Summary

Adds a sign-in popup modal that surfaces the account promotional banner in a focus-trapped, dismissible dialog with responsive imagery.

Screenshot 2026-06-22 at 16 30 29 Screenshot 2026-06-22 at 16 31 08

Code changes

  • Add AccountSignInModal component with backdrop, focus trapping and Escape/click-to-close handling.
  • Add useTrappedFocus hook to keep keyboard focus within the modal.
  • Add responsive sign-in images (mobile/tablet/desktop) and remove the redundant globe images.

Testing

  1. Run yarn dev and open a hindi article (e.g. /hindi/articles/c0469479x9xo) (The user should not be signed in).
  2. Trigger the sign-in modal by clicking on "Save for later" and confirm it opens centred over a dimmed backdrop.
  3. Tab through the modal and confirm focus stays trapped inside it.
  4. Press Escape, click the backdrop, and click the close button — each should dismiss the modal.
  5. Resize across mobile, tablet and desktop breakpoints and confirm the correct sign-in image renders.

Useful Links

Figma design: https://www.figma.com/design/8xqdz6WAYt2QpcLguVBCFz/WS-Sign-In-prompt?node-id=117-4210&p=f&t=bLX9drCEGAV2HoZj-0

@SantaZena SantaZena self-assigned this Jun 2, 2026
@LukasFrm LukasFrm changed the title Ws 2650 sign in popup banner implementation [WS-2650]: Sign-in popup banner implementation Jun 10, 2026
@LukasFrm LukasFrm marked this pull request as ready for review June 11, 2026 08:21
@LukasFrm LukasFrm marked this pull request as draft June 11, 2026 08:52

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Implements the WS-2650 guest sign-in prompt as a modal dialog surfaced from the “Save for later” guest flow, reusing the existing Account promotional banner content while adding modal-specific layout and focus management.

Changes:

  • Added AccountSignInModal (dialog + backdrop + Escape/close handling) and a useTrappedFocus hook for focus trapping.
  • Extended PromotionalBanner to support a top image slot and style overrides, enabling reuse inside the modal.
  • Updated the guest save button to open the modal, and added a Storybook entry to preview the modal state.

Reviewed changes

Copilot reviewed 10 out of 13 changed files in this pull request and generated 10 comments.

Show a summary per file
File Description
src/app/hooks/useTrappedFocus/index.ts New focus-trap hook used by the modal.
src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx Opens the sign-in modal for signed-out users.
src/app/components/PromotionalBanner/index.types.ts Adds topImage and styleOverrides types.
src/app/components/PromotionalBanner/index.tsx Renders topImage and applies style overrides.
src/app/components/PromotionalBanner/index.test.tsx Adds test coverage for topImage placement.
src/app/components/Account/SignInPromotionalBanner/index.tsx New banner composition for modal sign-in prompt.
src/app/components/Account/SignInPromotionalBanner/index.styles.tsx Styles and responsive imagery for the modal banner.
src/app/components/Account/AccountSignInModal/index.tsx New modal wrapper with inert/background handling and focus trap usage.
src/app/components/Account/AccountSignInModal/index.styles.tsx Modal/backdrop styling and responsive sizing.
src/app/components/Account/AccountPromotionalBanner/index.stories.tsx Adds Storybook story for signed-out modal state.

Comment thread src/app/hooks/useTrappedFocus/index.ts Outdated
Comment thread src/app/hooks/useTrappedFocus/index.ts
Comment thread src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx Outdated
Comment thread src/app/components/Account/AccountSignInModal/index.tsx Outdated
Comment thread src/app/components/Account/AccountSignInModal/index.tsx Outdated
Comment thread src/app/components/Account/AccountSignInModal/index.tsx Outdated
Comment thread src/app/components/Account/AccountPromotionalBanner/index.stories.tsx Outdated
Comment thread src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx Outdated
@LukasFrm LukasFrm marked this pull request as ready for review June 12, 2026 07:51
Comment thread src/app/components/Account/AccountSignInModal/index.tsx Outdated
Comment thread src/app/components/PromotionalBanner/index.tsx
Comment thread src/app/hooks/useTrappedFocus/index.ts Outdated
Comment thread src/app/hooks/useTrappedFocus/index.ts
@elvinasv elvinasv merged commit e6081d1 into latest Jun 25, 2026
14 checks passed
@elvinasv elvinasv deleted the WS-2650-sign-in-popup-banner-implementation branch June 25, 2026 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants