From 0321f26924816cf21125f4fddfb39de999fa1b11 Mon Sep 17 00:00:00 2001 From: seaerchin Date: Fri, 8 Sep 2023 15:18:04 +0800 Subject: [PATCH 01/15] fix(homepagepreview): add default if no variant --- src/layouts/EditHomepage/HomepagePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx index 0c3ab93e8..9738db915 100644 --- a/src/layouts/EditHomepage/HomepagePreview.tsx +++ b/src/layouts/EditHomepage/HomepagePreview.tsx @@ -105,7 +105,7 @@ export const HomepagePreview = ({ dropdownIsActive={dropdownIsActive} toggleDropdown={toggleDropdown} ref={scrollRefs[sectionIndex] as Ref} - variant={section.hero.variant} + variant={section.hero.variant ?? "center"} /> )} From 7c5068431ae9ca996a778527aaf4f73fb0a7ebd5 Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:12:48 +0800 Subject: [PATCH 02/15] build(inView): allows us to know if elem is in view --- package-lock.json | 9 +++++++++ package.json | 1 + 2 files changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index 008d28053..657ec2709 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "react-hook-form": "^7.32.0", "react-icons": "^4.4.0", "react-input-mask": "^2.0.4", + "react-intersection-observer": "^9.5.2", "react-joyride": "^2.5.3", "react-markdown": "^8.0.7", "react-query": "^3.34.16", @@ -30756,6 +30757,14 @@ "react": "^16.8.4 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-intersection-observer": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz", + "integrity": "sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "license": "MIT" diff --git a/package.json b/package.json index 0ebd40ef1..6c741c390 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-hook-form": "^7.32.0", "react-icons": "^4.4.0", "react-input-mask": "^2.0.4", + "react-intersection-observer": "^9.5.2", "react-joyride": "^2.5.3", "react-markdown": "^8.0.7", "react-query": "^3.34.16", From 48fe1e3109404e4ac5b62a936a0dae44128e03cb Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:13:16 +0800 Subject: [PATCH 03/15] chore(heroBannerToolTipImage): add in required image --- src/assets/images/HeroBannerToolTipImage.tsx | 36 ++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/assets/images/HeroBannerToolTipImage.tsx diff --git a/src/assets/images/HeroBannerToolTipImage.tsx b/src/assets/images/HeroBannerToolTipImage.tsx new file mode 100644 index 000000000..2032ebe9f --- /dev/null +++ b/src/assets/images/HeroBannerToolTipImage.tsx @@ -0,0 +1,36 @@ +export const HeroBannerToolTipImage = ( + props: React.SVGProps +): JSX.Element => { + return ( + + + + + + + + + + ) +} From fb9bbcdcd4bbde6176a69c8e348ba609b4ffc737 Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:14:12 +0800 Subject: [PATCH 04/15] feat(hero feature tour): add in storybook for feature tour --- src/constants/localStorage.ts | 1 + .../FeatureTour/FeatureTourContent.tsx | 28 +++++++++++ .../FeatureTour/FeatureTourSequence.ts | 15 ++++++ .../FeatureTourTooltip.stories.tsx | 33 +++++++++---- .../FeatureTour/FeatureTourTooltip.tsx | 47 +++++++++++-------- 5 files changed, 95 insertions(+), 29 deletions(-) create mode 100644 src/features/FeatureTour/FeatureTourContent.tsx diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts index 3a099f12a..41db10956 100644 --- a/src/constants/localStorage.ts +++ b/src/constants/localStorage.ts @@ -5,4 +5,5 @@ export enum LOCAL_STORAGE_KEYS { DashboardFeatureTour = "dashboard-identity-feature-tour-v1", WorkspaceFeatureTour = "workspace-identity-feature-tour-v1", Feedback = "feedback", + HeroOptionsFeatureTour = "hero-options-feature-tour-v1", } diff --git a/src/features/FeatureTour/FeatureTourContent.tsx b/src/features/FeatureTour/FeatureTourContent.tsx new file mode 100644 index 000000000..b34f95474 --- /dev/null +++ b/src/features/FeatureTour/FeatureTourContent.tsx @@ -0,0 +1,28 @@ +import { Icon, Text } from "@chakra-ui/react" +import { Badge } from "@opengovsg/design-system-react" +import { BiCheck } from "react-icons/bi" + +export const HeroOptionsFeatureTourContent = (): JSX.Element => { + return ( + <> + + + New feature + + + {" "} + Now you can customise your hero banner with various layouts!{" "} + + + {`We've added some variations to how you can display your hero section. + Try them out here.`} + + + ) +} diff --git a/src/features/FeatureTour/FeatureTourSequence.ts b/src/features/FeatureTour/FeatureTourSequence.ts index c2a43e37f..9dcf69f48 100644 --- a/src/features/FeatureTour/FeatureTourSequence.ts +++ b/src/features/FeatureTour/FeatureTourSequence.ts @@ -1,5 +1,10 @@ +import React from "react" import { Step } from "react-joyride" +import { HeroBannerToolTipImage } from "assets/images" + +import { HeroOptionsFeatureTourContent } from "./FeatureTourContent" + export const DASHBOARD_FEATURE_STEPS: Array = [ { target: "#isomer-dashboard-feature-tour-step-1", @@ -62,3 +67,13 @@ export const STORYBOOK_FEATURE_STEPS: Array = [ placement: "top-end", }, ] + +export const HERO_OPTIONS_FEATURE_STEPS: Array = [ + { + target: "#isomer-hero-feature-tour-step-1", + content: React.createElement("div", {}, HeroOptionsFeatureTourContent()), + floaterProps: { placement: "right-end" }, + placement: "right-end", + title: React.createElement("div", {}, HeroBannerToolTipImage({})), + }, +] diff --git a/src/features/FeatureTour/FeatureTourTooltip.stories.tsx b/src/features/FeatureTour/FeatureTourTooltip.stories.tsx index f1429ec84..22c03f267 100644 --- a/src/features/FeatureTour/FeatureTourTooltip.stories.tsx +++ b/src/features/FeatureTour/FeatureTourTooltip.stories.tsx @@ -1,9 +1,13 @@ import { ButtonProps } from "@opengovsg/design-system-react" -import { Meta, Story } from "@storybook/react" +import { Meta, StoryFn } from "@storybook/react" import { useState } from "react" +import { Step } from "react-joyride" import { FeatureTourContext } from "./FeatureTourContext" -import { DASHBOARD_FEATURE_STEPS } from "./FeatureTourSequence" +import { + DASHBOARD_FEATURE_STEPS, + HERO_OPTIONS_FEATURE_STEPS, +} from "./FeatureTourSequence" import { FeatureTourStep, FeatureTourTooltip, @@ -18,26 +22,27 @@ export default { }, } as Meta -const Template: Story = (args) => { - const { index, isLastStep } = args +const Template: StoryFn = ( + args +) => { + const { index, isLastStep, steps = DASHBOARD_FEATURE_STEPS } = args const [featureStep, setFeatureStep] = useState(index ?? 0) const handleNextClick = () => { - featureStep === DASHBOARD_FEATURE_STEPS.length - 1 + featureStep === steps.length - 1 ? setFeatureStep(featureStep) : setFeatureStep(featureStep + 1) } const getFeatureTourTooltipContent = (step: number): FeatureTourStep => { return { - title: DASHBOARD_FEATURE_STEPS[step].title, - content: DASHBOARD_FEATURE_STEPS[step].content, + title: steps[step].title, + content: steps[step].content, } } const featureTourTooltipContent = getFeatureTourTooltipContent(featureStep) - const isThisLastStep = - isLastStep ?? featureStep === DASHBOARD_FEATURE_STEPS.length - 1 + const isThisLastStep = isLastStep ?? featureStep === steps.length - 1 const mockPrimaryProps: ButtonProps = { onClick: handleNextClick, } @@ -53,6 +58,7 @@ const Template: Story = (args) => { primaryProps={mockPrimaryProps} isLastStep={isThisLastStep} index={featureStep} + size={steps.length} /> ) @@ -65,3 +71,12 @@ LastFeatureStep.args = { index: DASHBOARD_FEATURE_STEPS.length - 1, isLastStep: true, } + +export const HeroBannerStep = Template.bind({}) + +HeroBannerStep.args = { + index: 0, + isLastStep: true, + steps: HERO_OPTIONS_FEATURE_STEPS, + isTipBadgeShown: false, +} diff --git a/src/features/FeatureTour/FeatureTourTooltip.tsx b/src/features/FeatureTour/FeatureTourTooltip.tsx index de99e8a42..7051c6f0e 100644 --- a/src/features/FeatureTour/FeatureTourTooltip.tsx +++ b/src/features/FeatureTour/FeatureTourTooltip.tsx @@ -5,7 +5,6 @@ import { BiBulb, BiRightArrowAlt } from "react-icons/bi" import { ProgressIndicator } from "components/ProgressIndicator/ProgressIndicator" import { useFeatureTourContext } from "./FeatureTourContext" -import { DASHBOARD_FEATURE_STEPS } from "./FeatureTourSequence" export interface FeatureTourStep { content: React.ReactNode @@ -20,6 +19,7 @@ export interface FeatureTourTooltipProps { closeProps: ButtonProps isLastStep: boolean index: number + isTipBadgeShown?: boolean } export const FeatureTourTooltip = ({ @@ -30,32 +30,37 @@ export const FeatureTourTooltip = ({ closeProps, isLastStep, index, + isTipBadgeShown = true, }: FeatureTourTooltipProps): JSX.Element => { const { paginationCallback } = useFeatureTourContext() + const showProgressIndicator = size > 1 return ( - - - - Tip - - + {isTipBadgeShown && ( + + + + Tip + + + )} + {step.title} @@ -68,14 +73,16 @@ export const FeatureTourTooltip = ({ alignItems="center" justifyContent="space-between" > - + {showProgressIndicator && ( + + )} {isLastStep ? ( ) : (