Merge pull request #1533 from isomerpages/release/0.46.0

0.46.0

CHANGELOG.md

@@ -4,8 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.46.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.45.0...v0.46.0)
+
+- fix(announemnt): fix announcemnt bug [`#1532`](https://github.com/isomerpages/isomercms-frontend/pull/1532)
+- Feat/text cards panel [`#1505`](https://github.com/isomerpages/isomercms-frontend/pull/1505)
+- Fix/homepageAnnouncementScroll [`#1530`](https://github.com/isomerpages/isomercms-frontend/pull/1530)
+- Feat/homepageAnnouncement [`#1502`](https://github.com/isomerpages/isomercms-frontend/pull/1502)
+- fix(image): change image used [`#1531`](https://github.com/isomerpages/isomercms-frontend/pull/1531)
+- chore(announcements): sync changes from template [`#1518`](https://github.com/isomerpages/isomercms-frontend/pull/1518)
+- feat(feature tour): FF for hero [`#1508`](https://github.com/isomerpages/isomercms-frontend/pull/1508)
+- refactor(hero): chnage to use breakpoints [`#1524`](https://github.com/isomerpages/isomercms-frontend/pull/1524)
+- refactor(styles): shift to theme [`#1523`](https://github.com/isomerpages/isomercms-frontend/pull/1523)
+- feat(announcements): add help overlay [`#1521`](https://github.com/isomerpages/isomercms-frontend/pull/1521)
+- release(0.45.0): merge to develop [`#1519`](https://github.com/isomerpages/isomercms-frontend/pull/1519)
+
 #### [v0.45.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.44.0...v0.45.0)
 
+> 25 September 2023
+
 - Feat/announcement block [`#1497`](https://github.com/isomerpages/isomercms-frontend/pull/1497)
 - feat: introduce new help overlay for add section button [`#1515`](https://github.com/isomerpages/isomercms-frontend/pull/1515)
 - feat(template): add ffs as a manual check-in [`#1469`](https://github.com/isomerpages/isomercms-frontend/pull/1469)
@@ -38,21 +54,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(herobody): solves empty highlight deafult issue [`#1489`](https://github.com/isomerpages/isomercms-frontend/pull/1489)
 - fix(edithomepage): spread properly [`#1487`](https://github.com/isomerpages/isomercms-frontend/pull/1487)
 - Release/0.42.0 (develop) [`#1481`](https://github.com/isomerpages/isomercms-frontend/pull/1481)
-- fix(editable): hover and focus states for title text [`#1484`](https://github.com/isomerpages/isomercms-frontend/pull/1484)
-- Fix/style nits [`#1483`](https://github.com/isomerpages/isomercms-frontend/pull/1483)
-- fix: styling [`#1482`](https://github.com/isomerpages/isomercms-frontend/pull/1482)
-- fix(editable): change drag handle to be on top part only [`#1475`](https://github.com/isomerpages/isomercms-frontend/pull/1475)
-- feat(editable): introduce new nested card variant [`#1478`](https://github.com/isomerpages/isomercms-frontend/pull/1478)
-- fix(homepage): various styling fixes  [`#1477`](https://github.com/isomerpages/isomercms-frontend/pull/1477)
-- Fix/edit nav nits [`#1476`](https://github.com/isomerpages/isomercms-frontend/pull/1476)
-- fix(edithomepage): spread properly [`#1474`](https://github.com/isomerpages/isomercms-frontend/pull/1474)
-- Chore/fix title text [`#1472`](https://github.com/isomerpages/isomercms-frontend/pull/1472)
-- Chore/fix edit nav bar styles [`#1466`](https://github.com/isomerpages/isomercms-frontend/pull/1466)
 
 #### [v0.42.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.41.0...v0.42.0)
 
 > 7 September 2023
 
+- fix(editable): hover and focus states for title text [`#1484`](https://github.com/isomerpages/isomercms-frontend/pull/1484)
+- Fix/style nits [`#1483`](https://github.com/isomerpages/isomercms-frontend/pull/1483)
+- fix: styling [`#1482`](https://github.com/isomerpages/isomercms-frontend/pull/1482)
+- fix(editable): change drag handle to be on top part only [`#1475`](https://github.com/isomerpages/isomercms-frontend/pull/1475)
 - feat(editable): introduce new nested card variant [`#1478`](https://github.com/isomerpages/isomercms-frontend/pull/1478)
 - fix(homepage): various styling fixes  [`#1477`](https://github.com/isomerpages/isomercms-frontend/pull/1477)
 - Fix/edit nav nits [`#1476`](https://github.com/isomerpages/isomercms-frontend/pull/1476)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -59,6 +59,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",

src/assets/images/index.ts

@@ -19,3 +19,5 @@ export * from "./SiteLaunchPendingImage"
 export * from "./NotFoundSubmarineImage"
 export * from "./HomepageAnnouncementsSampleImage"
 export * from "./HomepageTextCardsSampleImage"
+export * from "./HeroBannerToolTipImage"
+export * from "./HomepageNewFeatures"

src/components/Editable/Editable.tsx

@@ -167,6 +167,7 @@ type HomepageDroppableZone =
   | "leftPane"
   | "highlight"
   | "announcement"
+  | `textCardItem-${number}`
 type ContactUsDroppableZone =
   | "locations"
   | "contacts"

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",
 }

src/features/AnnouncementModal/AnnouncementModal.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, Story } from "@storybook/react"
+import { Meta, StoryFn } from "@storybook/react"
 
-import { AnnouncementModal } from "./AnnouncementModal"
+import { AnnouncementModal, AnnouncementModalProps } from "./AnnouncementModal"
 import { ANNOUNCEMENT_BATCH } from "./Announcements"
 
 export default {
@@ -16,13 +16,24 @@ const onClose = () => {
   console.log("closed")
 }
 
-const Template: Story = () => (
-  <AnnouncementModal
-    onClose={onClose}
-    isOpen
-    announcements={ANNOUNCEMENT_BATCH[0].announcements}
-    link={ANNOUNCEMENT_BATCH[0].link}
-  />
-)
+const Template: StoryFn<typeof AnnouncementModal> = (
+  args: AnnouncementModalProps
+) => <AnnouncementModal {...args} />
 
-export const BasicUsage = Template.bind({})
+export const SiteCollaboratorsAnnouncement = Template.bind({})
+SiteCollaboratorsAnnouncement.args = {
+  onClose,
+  isOpen: true,
+  announcements: ANNOUNCEMENT_BATCH[0].announcements,
+  link: ANNOUNCEMENT_BATCH[0].link,
+  onCloseButtonText: ANNOUNCEMENT_BATCH[0].onCloseButtonText,
+}
+
+export const HeroBannerNewFeaturesAnnouncement = Template.bind({})
+
+HeroBannerNewFeaturesAnnouncement.args = {
+  onClose,
+  isOpen: true,
+  announcements: ANNOUNCEMENT_BATCH[1].announcements,
+  onCloseButtonText: ANNOUNCEMENT_BATCH[1].onCloseButtonText,
+}

src/features/AnnouncementModal/AnnouncementModal.tsx

@@ -25,17 +25,19 @@ import { Announcement } from "types/announcements"
 
 import { NewFeatureTag } from "./components/NewFeatureTag"
 
-interface AnnouncementModalProps {
+export interface AnnouncementModalProps {
   isOpen: boolean
   onClose: () => void
   announcements: Announcement[]
-  link: string
+  onCloseButtonText: string
+  link?: string
 }
 
 export const AnnouncementModal = ({
   isOpen,
   announcements,
   onClose,
+  onCloseButtonText,
   link,
 }: AnnouncementModalProps): JSX.Element => {
   const [currActiveIdx, setCurrActiveIdx] = useState<number>(0)
@@ -58,6 +60,17 @@ export const AnnouncementModal = ({
 
   const { title, description, image, tags } = announcements[currActiveIdx]
 
+  let descComponent: JSX.Element = <></>
+  if (typeof description === "string") {
+    descComponent = (
+      <Text textStyle="body-1" color="base.content.default">
+        {description}
+      </Text>
+    )
+  } else {
+    descComponent = description
+  }
+
   return (
     <Modal
       isOpen={isOpen && announcements.length > 0}
@@ -92,11 +105,7 @@ export const AnnouncementModal = ({
           })}
           <Text mt="0.625rem">{title}</Text>
         </ModalHeader>
-        <ModalBody whiteSpace="pre-wrap">
-          <Text textStyle="body-1" color="base.content.default">
-            {description}
-          </Text>
-        </ModalBody>
+        <ModalBody whiteSpace="pre-wrap">{descComponent}</ModalBody>
         <ModalFooter>
           <Stack
             direction="row"
@@ -112,10 +121,13 @@ export const AnnouncementModal = ({
             />
             {isLastAnnouncement ? (
               <Flex gap="1.5rem" alignItems="center">
-                <Link isExternal href={link}>
-                  See release notes
-                </Link>
-                <Button onClick={handleNextClick}>Done</Button>
+                {link && (
+                  <Link isExternal href={link}>
+                    See release notes
+                  </Link>
+                )}
+
+                <Button onClick={handleNextClick}>{onCloseButtonText}</Button>
               </Flex>
             ) : (
               <Button

src/features/AnnouncementModal/Announcements.ts

@@ -1,10 +1,13 @@
-import { IsomerThumbsUp } from "assets"
-import { IsomerWaitingLine } from "assets/images"
+import { HomepageNewFeatures, IsomerThumbsUp } from "assets"
+import { IsomerWaitingLine } from "assets/images/IsomerWaitingLine"
 import { AnnouncementBatch } from "types/announcements"
 
+import { AnnouncementDescription } from "./components/AnnouncementDescription"
+
 export const ANNOUNCEMENT_BATCH: AnnouncementBatch[] = [
   {
     link: "https://guide.isomer.gov.sg/updates",
+    onCloseButtonText: "Done",
     announcements: [
       {
         title: "Control who can edit your website",
@@ -22,4 +25,15 @@ export const ANNOUNCEMENT_BATCH: AnnouncementBatch[] = [
       },
     ],
   },
+  {
+    onCloseButtonText: "Got it",
+    announcements: [
+      {
+        title: "Customise your Hero banner with IsomerCMS",
+        description: AnnouncementDescription(),
+        image: HomepageNewFeatures,
+        tags: ["New Feature"],
+      },
+    ],
+  },
 ]

src/features/AnnouncementModal/components/AnnouncementDescription.tsx

@@ -0,0 +1,16 @@
+import { Link, Text } from "@chakra-ui/react"
+
+export const AnnouncementDescription = (): JSX.Element => {
+  return (
+    <>
+      <Text textStyle="body-1" color="base.content.default">
+        Make your website stand out with new layout options. For technical
+        reasons, this feature is only available to users using email to log in.
+      </Text>
+      <Text textStyle="body-1" color="base.content.default" mt="1rem">
+        <Link href="mailto:[email protected]">Contact us</Link> to
+        understand more about getting access to new features like this.
+      </Text>
+    </>
+  )
+}

src/features/AnnouncementModal/components/NewFeatureTag.tsx

@@ -7,10 +7,10 @@ export const NewFeatureTag = (): JSX.Element => {
   return (
     <Badge
       variant="subtle"
+      colorScheme="brand.secondary"
       display="inline-flex"
       columnGap="0.5rem"
       alignItems="center"
-      color="secondary.500"
     >
       <Icon as={BxsRocket} />
       New feature

src/features/FeatureTour/FeatureTourContent.tsx

@@ -0,0 +1,29 @@
+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 (
+    <>
+      <Badge
+        mt="2rem"
+        variant="subtle"
+        display="inline-flex"
+        columnGap="0.5rem"
+        alignItems="center"
+        colorScheme="brand.secondary"
+      >
+        <Icon as={BiCheck} h="1rem" w="1rem" />
+        <Text textStyle="caption-1">New feature</Text>
+      </Badge>
+      <Text textStyle="subhead-1" mt="1rem" color="base.content.default">
+        {" "}
+        Now you can customise your hero banner with various layouts!{" "}
+      </Text>
+      <Text textStyle="body-2" mt="0.5rem" color="base.content.default">
+        {`We've added some variations to how you can display your hero section.
+        Try them out here.`}
+      </Text>
+    </>
+  )
+}

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<Step> = [
   {
     target: "#isomer-dashboard-feature-tour-step-1",
@@ -62,3 +67,14 @@ export const STORYBOOK_FEATURE_STEPS: Array<Step> = [
     placement: "top-end",
   },
 ]
+
+export const HERO_OPTIONS_FEATURE_STEPS: Array<Step> = [
+  {
+    target: "#isomer-hero-feature-tour-step-1",
+    content: React.createElement("div", {}, HeroOptionsFeatureTourContent()),
+    floaterProps: { placement: "right-end" },
+    placement: "right-end",
+    title: React.createElement("div", {}, HeroBannerToolTipImage({})),
+    disableBeacon: true,
+  },
+]