release(v0.45.0): merge to master

.github/pull_request_template.md

@@ -14,7 +14,7 @@ Closes [insert issue #]
 
 - [ ] Yes - this PR contains breaking changes
   - Details ...
-- [ ] No - this PR is backwards compatible
+- [ ] No - this PR is backwards compatible with ALL of the following feature flags in this [doc](https://www.notion.so/opengov/Existing-feature-flags-518ad2cdc325420893a105e88c432be5)
 
 **Features**:
 

.github/workflows/chromatic.yml

@@ -62,7 +62,8 @@ jobs:
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
 
-      - name: Check for changes
+      - name: Check for changes (push)
+        if: ${{ github.event_name == 'push' }}
         uses: dorny/paths-filter@v2
         id: filter
         with:
@@ -72,9 +73,11 @@ jobs:
               - 'src/layouts/**'
               - 'src/theme/**'
               - 'src/styles/**'
+              - 'package.json'
+              - 'package-lock.json'
 
       - name: Set environment variable to run Chromatic build
-        if: ${{ (github.event_name == 'push' || (steps.check.outputs.triggered == 'true' && github.event_name == 'issue_comment' && github.event.issue.pull_request)) && steps.filter.outputs.frontend == 'true' }}
+        if: ${{ ((github.event_name == 'push' && steps.filter.outputs.frontend == 'true') || (steps.check.outputs.triggered == 'true' && github.event_name == 'issue_comment' && github.event.issue.pull_request)) }}
         run: echo "ISOMER_RUN_CHROMATIC_BUILD=true" >> $GITHUB_ENV
 
       # This extra step is not in the original chromatic workflow.

CHANGELOG.md

@@ -4,8 +4,18 @@ 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.45.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.44.0...v0.45.0)
+
+- 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)
+- Release/0.44.0 [`#1511`](https://github.com/isomerpages/isomercms-frontend/pull/1511)
+- fix(chromatic): only do path checking on push [`#1513`](https://github.com/isomerpages/isomercms-frontend/pull/1513)
+
 #### [v0.44.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.43.0...v0.44.0)
 
+> 20 September 2023
+
 - feat(flags): add feature flag [`#1507`](https://github.com/isomerpages/isomercms-frontend/pull/1507)
 - feat(homepage): add floating variant [`#1498`](https://github.com/isomerpages/isomercms-frontend/pull/1498)
 - feat(heroimageonlylayout): add dropdown [`#1494`](https://github.com/isomerpages/isomercms-frontend/pull/1494)
@@ -28,15 +38,21 @@ 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.44.0",
+  "version": "0.45.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -46,6 +46,7 @@
     "libphonenumber-js": "^1.9.48",
     "lodash": "^4.17.21",
     "marked": "^4.0.12",
+    "moment": "^2.29.4",
     "moment-timezone": "^0.5.35",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.2.4",

src/assets/images/index.ts

@@ -17,3 +17,5 @@ export * from "./SiteLaunchSuccessImage"
 export * from "./SiteLaunchFailureImage"
 export * from "./SiteLaunchPendingImage"
 export * from "./NotFoundSubmarineImage"
+export * from "./HomepageAnnouncementsSampleImage"
+export * from "./HomepageTextCardsSampleImage"

src/components/Editable/AddSectionButton.stories.tsx

@@ -0,0 +1,108 @@
+import { Box, Center } from "@chakra-ui/react"
+import type { Meta, StoryFn } from "@storybook/react"
+
+import {
+  HomepageAnnouncementsSampleImage,
+  HomepageTextCardsSampleImage,
+} from "assets/images"
+
+import { AddSectionButton } from "./AddSectionButton"
+
+const addSectionButtonMeta = {
+  title: "Components/AddSectionButton",
+  component: AddSectionButton,
+} as Meta<typeof AddSectionButton>
+
+interface AddSectionButtonOptions {
+  title: string
+  subtitle: string
+  overlayTitle?: string
+  overlayDescription?: string
+  overlayImage?: JSX.Element
+}
+
+interface AddSectionButtonTemplateArgs {
+  buttonText: string
+  options: AddSectionButtonOptions[]
+}
+
+const Template: StoryFn<AddSectionButtonTemplateArgs> = ({
+  buttonText,
+  options,
+}: AddSectionButtonTemplateArgs) => {
+  return (
+    <Box height="50vh" width="450px">
+      <Center
+        height="40vh"
+        bgColor="brand.secondary.100"
+        my={3}
+        borderRadius="0.5rem"
+      >
+        This space is for content.
+      </Center>
+      <AddSectionButton buttonText={buttonText}>
+        <AddSectionButton.List>
+          {options.map((option) => {
+            if (option.overlayTitle && option.overlayDescription) {
+              return (
+                <AddSectionButton.HelpOverlay
+                  title={option.overlayTitle}
+                  description={option.overlayDescription}
+                  image={option.overlayImage}
+                >
+                  <AddSectionButton.Option
+                    title={option.title}
+                    subtitle={option.subtitle}
+                  />
+                </AddSectionButton.HelpOverlay>
+              )
+            }
+
+            return (
+              <AddSectionButton.Option
+                title={option.title}
+                subtitle={option.subtitle}
+              />
+            )
+          })}
+        </AddSectionButton.List>
+      </AddSectionButton>
+    </Box>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  buttonText: "Add section",
+  options: [
+    {
+      title: "Infopic",
+      subtitle: "Add an image and text",
+    },
+    {
+      title: "Text cards",
+      subtitle: "Add up to 4 clickable cards with text",
+      overlayTitle: "Text cards",
+      overlayDescription:
+        "Add clickable cards with bite-sized information to your homepage. You can link any page or external URL, such as blog posts, articles, and more.",
+      overlayImage: <HomepageTextCardsSampleImage />,
+    },
+    {
+      title: "Info-columns",
+      subtitle: "Add snippets of text in 2- or 3-column layouts",
+      overlayTitle: "Info-Columns",
+      overlayDescription:
+        "Add bite-sized snippets of text in a multi-column layout. These texts aren’t clickable. Perfect for showing informative text that describes your organisation.",
+    },
+    {
+      title: "Announcements",
+      subtitle: "Add a list of announcements with dates",
+      overlayTitle: "Announcements",
+      overlayDescription:
+        "Make exciting news from your organisation stand out by adding a list of announcements with dates on your homepage.",
+      overlayImage: <HomepageAnnouncementsSampleImage />,
+    },
+  ],
+}
+
+export default addSectionButtonMeta

src/layouts/components/Editable/AddSectionButton.tsx → src/components/Editable/AddSectionButton.tsx

@@ -1,5 +1,20 @@
-import { HStack, Icon, MenuItemProps, Text } from "@chakra-ui/react"
+import {
+  Box,
+  HStack,
+  Icon,
+  MenuItemProps,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverProps,
+  PopoverTrigger,
+  Portal,
+  Text,
+  VStack,
+} from "@chakra-ui/react"
 import { Menu, MenuButtonProps } from "@opengovsg/design-system-react"
+import { PropsWithChildren } from "react"
 import { BiPlus } from "react-icons/bi"
 
 type AddSectionButtonProps = MenuButtonProps & {
@@ -54,5 +69,48 @@ const AddSectionButtonOption = ({
   )
 }
 
+export interface HelpOverlayProps
+  extends Omit<PopoverProps, "children">,
+    PropsWithChildren {
+  title: string
+  description: string
+  image?: JSX.Element
+}
+const HelpOverlay = ({
+  title,
+  description,
+  image,
+  children,
+  ...rest
+}: HelpOverlayProps) => {
+  return (
+    <Popover
+      placement="end"
+      trigger="hover"
+      arrowSize={16}
+      offset={[0, 11]}
+      {...rest}
+    >
+      <PopoverTrigger>
+        <Box>{children}</Box>
+      </PopoverTrigger>
+      {/* Portal is needed to avoid PopoverArrow from jumping around */}
+      <Portal>
+        <PopoverContent p="0.75rem">
+          <PopoverArrow />
+          <PopoverBody>
+            <VStack align="left">
+              {image && <Box pb="1.5rem">{image}</Box>}
+              <Text textStyle="subhead-1">{title}</Text>
+              <Text textStyle="body-1">{description}</Text>
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}
+
 AddSectionButton.Option = AddSectionButtonOption
 AddSectionButton.List = Menu.List
+AddSectionButton.HelpOverlay = HelpOverlay

src/layouts/components/Editable/Editable.tsx → src/components/Editable/Editable.tsx

@@ -162,7 +162,11 @@ const EditableSidebar = ({
   )
 }
 
-type HomepageDroppableZone = "dropdownelem" | "leftPane" | "highlight"
+type HomepageDroppableZone =
+  | "dropdownelem"
+  | "leftPane"
+  | "highlight"
+  | "announcement"
 type ContactUsDroppableZone =
   | "locations"
   | "contacts"

src/components/PageSettingsModal/PageSettingsSchema.jsx

@@ -5,7 +5,7 @@ import {
   permalinkRegexTest,
   specialCharactersRegexTest,
   jekyllFirstCharacterRegexTest,
-  dateRegexTest,
+  resourceDateRegexTest,
   PAGE_SETTINGS_PERMALINK_MIN_LENGTH,
   PAGE_SETTINGS_PERMALINK_MAX_LENGTH,
   PAGE_SETTINGS_TITLE_MIN_LENGTH,
@@ -71,7 +71,10 @@ export const PageSettingsSchema = (existingTitlesArray = []) =>
         layout
           ? schema
               .required("Date is required")
-              .matches(dateRegexTest, "Date must be formatted as YYYY-MM-DD")
+              .matches(
+                resourceDateRegexTest,
+                "Date must be formatted as YYYY-MM-DD"
+              )
               .test(
                 "Date cannot be in the future",
                 "Date cannot be in the future",