Release/0.44.0

CHANGELOG.md

@@ -4,8 +4,27 @@ 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.44.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.43.0...v0.44.0)
+
+- 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)
+- chore(imports): standardize way to import image assets [`#1509`](https://github.com/isomerpages/isomercms-frontend/pull/1509)
+- feat(hero-section): adds dropdown [`#1491`](https://github.com/isomerpages/isomercms-frontend/pull/1491)
+- feat(homepage): add previews for side layout [`#1490`](https://github.com/isomerpages/isomercms-frontend/pull/1490)
+- feat(preview): add preview for new homepage variant [`#1485`](https://github.com/isomerpages/isomercms-frontend/pull/1485)
+- feat(herobody): add first pass of layout [`#1473`](https://github.com/isomerpages/isomercms-frontend/pull/1473)
+- chore(announcements): add missing padding for item [`#1506`](https://github.com/isomerpages/isomercms-frontend/pull/1506)
+- feat(homepage): add preview for announcements component [`#1496`](https://github.com/isomerpages/isomercms-frontend/pull/1496)
+- fix(styles): introduce site colors as CSS variables [`#1503`](https://github.com/isomerpages/isomercms-frontend/pull/1503)
+- fix(contactus): ensure feedback key is present as string [`#1501`](https://github.com/isomerpages/isomercms-frontend/pull/1501)
+- feat(helpers): introduce padding and margin helpers from Tailwind [`#1488`](https://github.com/isomerpages/isomercms-frontend/pull/1488)
+- 0.43.0 [`#1493`](https://github.com/isomerpages/isomercms-frontend/pull/1493)
+
 #### [v0.43.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.42.0...v0.43.0)
 
+> 13 September 2023
+
 - 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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -68,6 +68,7 @@
     "sass": "^1.51.0",
     "sgds-govtech": "^1.3.16",
     "slugify": "^1.6.5",
+    "tinycolor2": "^1.6.0",
     "toml": "^3.0.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",

src/assets/icons/BxGrayTranslucent.tsx

@@ -0,0 +1,46 @@
+// eslint-disable-next-line import/prefer-default-export
+export const BxGrayTranslucent = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_15241_43184"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="40"
+        height="40"
+      >
+        <path d="M0 0H20V40H0V0Z" fill="#EAEAEA" />
+        <path d="M26 0H34V8H26V0Z" fill="#D9D9D9" />
+        <path d="M34 8H40V16H34V8Z" fill="#D9D9D9" />
+        <path d="M18 8H26V16H18V8Z" fill="#D9D9D9" />
+        <path d="M26 16H34V24H26V16Z" fill="#D9D9D9" />
+        <path d="M34 24H40V32H34V24Z" fill="#D9D9D9" />
+        <path d="M18 24H26V32H18V24Z" fill="#D9D9D9" />
+        <path d="M26 32H34V40H26V32Z" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_15241_43184)">
+        <path
+          d="M20 2.38498e-07C22.6264 2.69818e-07 25.2272 0.517316 27.6537 1.52241C30.0802 2.5275 32.285 4.00069 34.1421 5.85787C35.9993 7.71504 37.4725 9.91982 38.4776 12.3463C39.4827 14.7728 40 17.3736 40 20C40 22.6264 39.4827 25.2272 38.4776 27.6537C37.4725 30.0802 35.9993 32.285 34.1421 34.1421C32.285 35.9993 30.0802 37.4725 27.6537 38.4776C25.2272 39.4827 22.6264 40 20 40L20 20L20 2.38498e-07Z"
+          fill="#D9D9D9"
+        />
+      </g>
+      <path
+        d="M20 40C17.3736 40 14.7728 39.4827 12.3463 38.4776C9.91982 37.4725 7.71503 35.9993 5.85786 34.1421C4.00069 32.285 2.5275 30.0802 1.52241 27.6537C0.517314 25.2272 -1.10384e-06 22.6264 -8.74228e-07 20C-6.44617e-07 17.3736 0.517315 14.7728 1.52241 12.3463C2.5275 9.91982 4.00069 7.71503 5.85787 5.85786C7.71504 4.00069 9.91982 2.5275 12.3463 1.52241C14.7728 0.517315 17.3736 -3.44415e-07 20 0L20 20L20 40Z"
+        fill="black"
+      />
+    </svg>
+  )
+}

src/assets/icons/index.ts

@@ -17,3 +17,4 @@ export * from "./BxLifeBuoy"
 export * from "./BxCopy"
 export * from "./BxDraggable"
 export * from "./BxDraggableVertical"
+export * from "./BxGrayTranslucent"

src/assets/images/index.ts

@@ -16,3 +16,4 @@ export * from "./HomepageStartEditingImage"
 export * from "./SiteLaunchSuccessImage"
 export * from "./SiteLaunchFailureImage"
 export * from "./SiteLaunchPendingImage"
+export * from "./NotFoundSubmarineImage"

src/constants/featureFlags.ts

@@ -1,3 +1,4 @@
 export const FEATURE_FLAGS = {
   STYLING_REVAMP: "styles",
+  HOMEPAGE_TEMPLATES: "homepage_new_templates",
 } as const

src/constants/homepage.ts

@@ -0,0 +1,18 @@
+export const HERO_LAYOUTS = {
+  CENTERED: {
+    value: "center",
+    label: "Centre-aligned text",
+  },
+  IMAGE_ONLY: {
+    value: "image",
+    label: "Image only",
+  },
+  SIDE_SECTION: {
+    value: "side",
+    label: "Side section",
+  },
+  FLOATING_SECTION: {
+    value: "floating",
+    label: "Floating section",
+  },
+} as const

src/features/AnnouncementModal/Announcements.ts

@@ -1,5 +1,5 @@
 import { IsomerThumbsUp } from "assets"
-import { IsomerWaitingLine } from "assets/images/IsomerWaitingLine"
+import { IsomerWaitingLine } from "assets/images"
 import { AnnouncementBatch } from "types/announcements"
 
 export const ANNOUNCEMENT_BATCH: AnnouncementBatch[] = [

src/layouts/EditContactUs.jsx

@@ -801,6 +801,7 @@ const EditContactUs = ({ match }) => {
 
       filteredFrontMatter.contacts = newContacts
       filteredFrontMatter.locations = newLocations
+      filteredFrontMatter.feedback = frontMatter.feedback || ""
 
       // If array is empty, delete the object
       if (!filteredFrontMatter.contacts.length)

src/layouts/EditHomepage/HomepagePreview.tsx

@@ -1,11 +1,11 @@
 // NOTE: Below eslint disable is inherited from our legacy code :(
 /* eslint-disable react/no-array-index-key */
 import { Ref, useState } from "react"
-import { useParams } from "react-router-dom"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
-import TemplateHeroSection from "templates/homepage/HeroSection"
+import { TemplateAnnouncementsSection } from "templates/homepage/AnnouncementsSection"
+import { TemplateHeroSection } from "templates/homepage/HeroSection"
 import TemplateInfobarSection from "templates/homepage/InfobarSection"
 import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection"
 import TemplateInfopicRightSection from "templates/homepage/InfopicRightSection"
@@ -38,7 +38,6 @@ export const HomepagePreview = ({
   frontMatter,
   scrollRefs,
 }: HomepagePreviewProps) => {
-  const { siteName } = useParams<{ siteName: string }>()
   const [dropdownIsActive, setDropdownIsActive] = useState(false)
 
   const toggleDropdown = () => setDropdownIsActive((prevState) => !prevState)
@@ -105,7 +104,8 @@ export const HomepagePreview = ({
                 hero={section.hero}
                 dropdownIsActive={dropdownIsActive}
                 toggleDropdown={toggleDropdown}
-                ref={scrollRefs[sectionIndex]}
+                ref={scrollRefs[sectionIndex] as Ref<HTMLDivElement>}
+                variant={section.hero.variant}
               />
             </>
           )}
@@ -166,6 +166,19 @@ export const HomepagePreview = ({
               )}
             </>
           )}
+          {/* Announcements section */}
+          {EditorHomepageFrontmatterSection.isAnnouncements(section) && (
+            <>
+              <TemplateAnnouncementsSection
+                key={`section-${sectionIndex}`}
+                title={section.announcements.title}
+                subtitle={section.announcements.subtitle}
+                announcementItems={section.announcements.announcement_items}
+                sectionIndex={sectionIndex}
+                ref={scrollRefs[sectionIndex] as Ref<HTMLDivElement>}
+              />
+            </>
+          )}
         </>
       ))}
     </div>

src/layouts/LegacyEditHomepage/LegacyEditHomepage.jsx

@@ -20,7 +20,7 @@ import useSiteColorsHook from "hooks/useSiteColorsHook"
 import elementStyles from "styles/isomer-cms/Elements.module.scss"
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
-import TemplateHeroSection from "templates/homepage/HeroSection"
+import { TemplateHeroSection } from "templates/homepage/HeroSection"
 import TemplateInfobarSection from "templates/homepage/InfobarSection"
 import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection"
 import TemplateInfopicRightSection from "templates/homepage/InfopicRightSection"

src/layouts/NotFoundPage/NotFoundPage.tsx

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react"
 import { Link as RouterLink, useLocation } from "react-router-dom"
 
-import { NotFoundSubmarineImage } from "assets/images/NotFoundSubmarineImage"
+import { NotFoundSubmarineImage } from "assets/images"
 
 const GRID_LAYOUT: Pick<
   GridProps,

src/layouts/ReviewRequest/components/Comments/CommentsDrawer.tsx

@@ -23,7 +23,7 @@ import { useGetComments, useUpdateReadComments } from "hooks/commentsHooks"
 
 import { getDateTimeFromUnixTime } from "utils/date"
 
-import { EmptyChatImage } from "assets/images/EmptyChatImage"
+import { EmptyChatImage } from "assets/images"
 import { CommentProps } from "types/comments"
 
 import { SendCommentForm } from "./SendCommentForm"