Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(feature tour): FF for hero #1508

Merged
merged 15 commits into from
Sep 27, 2023
Merged

Conversation

kishore03109
Copy link
Contributor

@kishore03109 kishore03109 commented Sep 20, 2023

Problem

We are releasing new homepage features. figma link

Closes [insert issue #]

Solution

This PR implements the feature tour + storybooks for this. Feature tour is only shown if feature flag for using the new HOMEPAGE_TEMPLATES are enabled

Breaking Changes

  • Yes - this PR contains breaking changes

  • No - this PR is backwards compatible

  • While API contract for feature tour changed, i preserved the default behaviour of the components.

Screenshots

Screenshot 2023-09-20 at 4 39 32 PM
Screen.Recording.2023-09-20.at.4.37.45.PM.mov

Blocker (potential chrome bug in local machine only)

For some weird reason, the spotlight offsets to create this weird effect. Notice that the tooltip renders properly, but not the spotlight. I did find a related issue here, but the issue was fixed so it seems unlikely to be the cause. NOTE: This was only reproducible in chrome, and only in my local machine. :sadge:

Screenshot 2023-09-25 at 8 38 05 AM

Interestingly, after hot refreshes, the spotlight magically renders to the correct location. I thought this is suggestive of the need to render the spotlight AFTER the render of the Text, but somehow using a useEffect did not solve this :(
Screenshot 2023-09-25 at 9 05 27 AM

Tests

  • Ensure that you are a whitelisted site
  • Login enter in to the /homepage site.
  • Ensure that when you expand the hero section, feature tour pops up

New dependencies:

  • dependency : react-intersection-observer
    We need to to check if an element is in view. Else feature tour doesnt work, with this error thrown in the console.
Screenshot 2023-09-20 at 4 06 42 PM

@kishore03109 kishore03109 force-pushed the IS-539-Hero-banner-help-overlay branch from 690775a to de72219 Compare September 20, 2023 08:27
@kishore03109 kishore03109 temporarily deployed to staging September 20, 2023 08:41 — with GitHub Actions Inactive
@kishore03109 kishore03109 marked this pull request as ready for review September 20, 2023 08:45
@kishore03109 kishore03109 requested a review from a team September 20, 2023 08:45
@kishore03109 kishore03109 changed the title Is 539 hero banner help overlay feat(feature tour): FF for hero Sep 20, 2023
@seaerchin seaerchin force-pushed the feat/add-hero-interactions branch from edb5f56 to 830334f Compare September 20, 2023 09:10
Base automatically changed from feat/add-hero-interactions to develop September 20, 2023 09:11
@kishore03109 kishore03109 temporarily deployed to staging September 20, 2023 09:17 — with GitHub Actions Inactive
@kishore03109 kishore03109 force-pushed the IS-539-Hero-banner-help-overlay branch from 3659d00 to 8db214a Compare September 21, 2023 02:47
return (
<Box
padding="1.5rem"
alignItems="center"
maxW="100%"
w="18rem"
w="20rem"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Confirmed wit Design to standardise this already

{isLastStep ? (
<Button {...primaryProps} title="Done">
Done
Got it
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Confirmed wit Design to standardise this already

@kishore03109
Copy link
Contributor Author

!run chromatic

@kishore03109 kishore03109 temporarily deployed to staging September 21, 2023 03:27 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 21, 2023 12:07 — with GitHub Actions Inactive
@kishore03109 kishore03109 force-pushed the IS-539-Hero-banner-help-overlay branch from 0aaf863 to 1072914 Compare September 22, 2023 01:38
@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 01:53 — with GitHub Actions Inactive
@kishore03109
Copy link
Contributor Author

!run chromatic

@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 04:07 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 05:45 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 07:06 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 07:06 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 22, 2023 07:38 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 25, 2023 04:25 — with GitHub Actions Inactive
@kishore03109 kishore03109 temporarily deployed to staging September 25, 2023 04:26 — with GitHub Actions Inactive
Copy link
Contributor

@dcshzj dcshzj left a comment

Choose a reason for hiding this comment

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

Overall looks okay, need to make sure the design comments are addressed in Chromatic!

@harishv7
Copy link
Contributor

@kishore03109 unable to replicate blocker. Might want to de-prio if this is not happening on staging build

@kishore03109 kishore03109 merged commit fe243e9 into develop Sep 27, 2023
10 checks passed
@mergify mergify bot deleted the IS-539-Hero-banner-help-overlay branch September 27, 2023 01:18
@kishore03109 kishore03109 mentioned this pull request Sep 27, 2023
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.

3 participants