Release/0.42.0

.github/workflows/chromatic.yml

@@ -2,27 +2,68 @@
 name: "Chromatic"
 
 # Event for the workflow
-on: push
+on:
+  issue_comment:
+    types: [created, edited]
+
+  push:
+    branches:
+      - develop
 
 env:
+  # The full comment text to match to trigger this workflow
+  ISOMER_TRIGGER_COMMENT: "!run chromatic"
+  # The slug for the Isomer core team
+  ISOMER_CORE_TEAM_SLUG: core
+  # Use GitHub Token
+  GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
   # Required for the chromatic action
   REACT_APP_BACKEND_URL: "https://cms-api.isomer.gov.sg/v1"
 
 # List of jobs
 jobs:
-  chromatic-deployment:
+  chromatic:
     # Operating System
     runs-on: ubuntu-latest
-    # Only run if the user is not a bot and there are changes
+    # Only run if the user is not a bot
     if: ${{ !endsWith(github.actor , 'bot') }}
     environment: staging
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      # Determine if the PR comment should trigger the Chromatic build
+      - name: Check if user is part of Isomer core team (PR comment)
+        if: ${{ github.event_name == 'issue_comment' && github.event.issue.pull_request }}
+        uses: tspascoal/get-user-teams-membership@v1
+        id: checkUserMember
+        with:
+          username: ${{ github.actor }}
+          team: ${{ env.ISOMER_CORE_TEAM_SLUG }}
+          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }} # requires read:org
+
+      - name: Check for trigger words (in PR comment)
+        if: ${{ github.event_name == 'issue_comment' && github.event.issue.pull_request }}
+        uses: khan/[email protected]
+        id: check
         with:
+          trigger: "${{ env.ISOMER_TRIGGER_COMMENT }}"
+          prefix_only: "true"
+          reaction: "+1"
+
+      - name: Checkout repository (pull request)
+        if: ${{ github.event_name == 'issue_comment' }}
+        uses: actions/checkout@v3
+        with:
+          ref: refs/pull/${{ github.event.issue.number }}/head
           fetch-depth: 0 # 👈 Required to retrieve git history
 
-      - uses: dorny/paths-filter@v2
+      - name: Checkout repository (push)
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+
+      - name: Check for changes
+        uses: dorny/paths-filter@v2
         id: filter
         with:
           filters: |
@@ -32,26 +73,49 @@ jobs:
               - 'src/theme/**'
               - 'src/styles/**'
 
+      - 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' }}
+        run: echo "ISOMER_RUN_CHROMATIC_BUILD=true" >> $GITHUB_ENV
+
       # This extra step is not in the original chromatic workflow.
       # This is to pin the version of node (18.x) used.
       - name: Setup Node.js
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         uses: actions/setup-node@v3
         with:
           node-version: "18.x"
           cache: "npm"
 
       - name: Install dependencies
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         run: npm ci
 
-        # 👇 Adds Chromatic as a step in the workflow
+      - name: Get pull request information (for pull requests)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'issue_comment' }}
+        uses: octokit/[email protected]
+        id: get_pull_request
+        with:
+          route: GET /repos/{repository}/pulls/{pull_number}
+          repository: ${{ github.repository }} # isomerpages/isomercms-frontend
+          pull_number: ${{ github.event.issue.number }}
+
+      - name: Save branch name as environment variable (for pull requests)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'issue_comment' }}
+        run: echo "ISOMER_BRANCH_NAME=${{ fromJSON(steps.get_pull_request.outputs.data).head.ref }}" >> $GITHUB_ENV
+
+      - name: Save branch name as environment variable (for push)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'push' }}
+        run: echo "ISOMER_BRANCH_NAME=${{ github.ref_name }}" >> $GITHUB_ENV
+
+      # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         uses: chromaui/action@v1
         # Chromatic GitHub Action options
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
+          branchName: ${{ env.ISOMER_BRANCH_NAME }}
+          autoAcceptChanges: develop

CHANGELOG.md

@@ -4,8 +4,26 @@ 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.42.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.41.0...v0.42.0)
+
+- 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)
+- chore(contactus): styling fixes based on design feedback [`#1470`](https://github.com/isomerpages/isomercms-frontend/pull/1470)
+- feat: re-introduce comment-based trigger for Chromatic [`#1468`](https://github.com/isomerpages/isomercms-frontend/pull/1468)
+- release(0.41.0): merge to `develop` [`#1463`](https://github.com/isomerpages/isomercms-frontend/pull/1463)
+
 #### [v0.41.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.40.0...v0.41.0)
 
+> 30 August 2023
+
 - Fix/homepage images on private repos [`#1461`](https://github.com/isomerpages/isomercms-frontend/pull/1461)
 - Feat/is 494 smooth scroll [`#1439`](https://github.com/isomerpages/isomercms-frontend/pull/1439)
 - fix(edithomepage): remove optional tags [`#1450`](https://github.com/isomerpages/isomercms-frontend/pull/1450)
@@ -46,12 +64,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: downgrade webpack-dev-server [`#1418`](https://github.com/isomerpages/isomercms-frontend/pull/1418)
 - fix(e2e): reduce mem usage [`#1428`](https://github.com/isomerpages/isomercms-frontend/pull/1428)
 - Release/0.39.0 [`#1425`](https://github.com/isomerpages/isomercms-frontend/pull/1425)
+- fix: conditional for checkCSP  [`#1423`](https://github.com/isomerpages/isomercms-frontend/pull/1423)
 
 #### [v0.39.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.38.0...v0.39.0)
 
-> 17 August 2023
+> 16 August 2023
 
-- fix: conditional for checkCSP  [`#1423`](https://github.com/isomerpages/isomercms-frontend/pull/1423)
 - feat(sl): integrate screens with be [`#1410`](https://github.com/isomerpages/isomercms-frontend/pull/1410)
 - Fix/is 422 update csp retrieval [`#1414`](https://github.com/isomerpages/isomercms-frontend/pull/1414)
 - Feat(site launch): add pending screen [`#1409`](https://github.com/isomerpages/isomercms-frontend/pull/1409)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

public/index.html

@@ -29,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Isomer CMS</title>
+    <title>IsomerCMS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/assets/icons/BxDraggableVertical.tsx

@@ -0,0 +1,21 @@
+export const BxDraggableVertical = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="9" cy="18" r="2" fill="#BABECB" />
+      <circle cx="9" cy="12" r="2" fill="#BABECB" />
+      <circle cx="9" cy="6" r="2" fill="#BABECB" />
+      <circle cx="15" cy="18" r="2" fill="#BABECB" />
+      <circle cx="15" cy="12" r="2" fill="#BABECB" />
+      <circle cx="15" cy="6" r="2" fill="#BABECB" />
+    </svg>
+  )
+}

src/assets/icons/index.ts

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

src/components/FormFieldMedia/FormMediaInput.jsx

@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react"
+import { HStack } from "@chakra-ui/react"
 import { Button } from "@opengovsg/design-system-react"
 import PropTypes from "prop-types"
 
@@ -16,7 +16,7 @@ const FormMediaInput = ({
   const { isRequired, isDisabled } = useFormContext()
 
   return (
-    <Flex>
+    <HStack spacing="0.5rem">
       <FormInput
         placeholder={placeholder}
         value={value}
@@ -30,7 +30,7 @@ const FormMediaInput = ({
           {inlineButtonText}
         </Button>
       )}
-    </Flex>
+    </HStack>
   )
 }
 

src/components/Header.jsx

@@ -110,7 +110,7 @@ const Header = ({
             <Box w="180px">
               <img
                 src={`${process.env.PUBLIC_URL}/img/logo.svg`}
-                alt="Isomer CMS logo"
+                alt="IsomerCMS logo"
               />
             </Box>
           ) : (

src/components/Header/AllSitesHeader.tsx

@@ -28,7 +28,7 @@ export const AllSitesHeader = (): JSX.Element => {
       <Flex w="180px" justifyContent="center">
         <Image
           src={`${process.env.PUBLIC_URL}/img/logo.svg`}
-          alt="Isomer CMS logo"
+          alt="IsomerCMS logo"
         />
       </Flex>
       <Spacer />

src/components/VerifyUserDetailsModal.jsx

@@ -189,7 +189,7 @@ const VerifyUserDetailsModal = () => {
           <>
             <div>
               In order to improve security, a verified email is now required for
-              all users of Isomer CMS. Only <b>.gov.sg</b> or{" "}
+              all users of IsomerCMS. Only <b>.gov.sg</b> or{" "}
               <b>whitelisted email addresses</b> will be accepted. You must
               verify your email before proceeding.{" "}
               <Link isExternal href={IDENTITY_GUIDE_LINK}>

src/components/navbar/NavSection.jsx

@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import PropTypes from "prop-types"
 import { useState, useRef } from "react"
@@ -269,7 +270,7 @@ const NavSection = ({
           </div>
         )}
       </Droppable>
-      <div className="d-flex justify-content-between mt-4">
+      <Box mt="2rem" mb="1rem">
         <Select
           ref={selectInputRef}
           className="w-50"
@@ -278,14 +279,15 @@ const NavSection = ({
           options={sectionCreationOptions}
         />
         <Button
+          mt="1rem"
           onClick={sectionCreationHandler}
           isDisabled={!newSectionType}
           variant="solid"
           colorScheme="primary"
         >
           Create New Menu
         </Button>
-      </div>
+      </Box>
       <span className={elementStyles.info}>
         {`Note: you can specify a folder ${
           hasResourceRoom ? `or resource room ` : ``

src/layouts/EditHomepage/EditHomepage.jsx

@@ -964,13 +964,19 @@ const EditHomepage = ({ match }) => {
                               {({ currentSelectedOption }) =>
                                 currentSelectedOption === "dropdown" ? (
                                   <HeroDropdownSection
-                                    {...section.hero}
+                                    {...section.hero.dropdown}
                                     state={section.hero}
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      ...errors.sections[0].hero,
+                                    }}
                                   />
                                 ) : (
                                   <HeroHighlightSection
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      ...errors.sections[0].hero,
+                                    }}
                                     highlights={section.hero.key_highlights}
                                   />
                                 )
@@ -1084,7 +1090,7 @@ const EditHomepage = ({ match }) => {
                         as otherwise, when dragging, 
                         the component will appear over the button
                     */}
-                <Box p="1.5rem">
+                <Box px="1.5rem">
                   <AddSectionButton>
                     <AddSectionButton.List>
                       <AddSectionButton.Option

src/layouts/EditNavBar.jsx

@@ -87,28 +87,28 @@ const EditNavBar = ({ match }) => {
   const errorToast = useErrorToast()
 
   const LinkCollectionSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New folder",
     collection: collections[0],
   })
 
   const LinkResourceSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New resource room",
     resource_room: true,
   })
 
   const LinkPageSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New single page",
     url: "/permalink",
   })
 
   const LinkSublinkSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New menu group",
     url: "/permalink",
     sublinks: [],
   })
 
   const SublinkSectionConstructor = () => ({
-    title: "Submenu Title",
+    title: "New submenu",
     url: "/permalink",
   })
 
@@ -710,7 +710,7 @@ const EditNavBar = ({ match }) => {
                                     <Editable.DraggableAccordionItem
                                       index={linkIndex}
                                       tag={
-                                        <Tag variant="subtle">Menu Group</Tag>
+                                        <Tag variant="subtle">Menu group</Tag>
                                       }
                                       title={link.title}
                                       isInvalid={
@@ -763,7 +763,7 @@ const EditNavBar = ({ match }) => {
                     </VStack>
                   </Editable.Accordion>
 
-                  <Box p="1.5rem">
+                  <Box px="1.5rem">
                     <AddSectionButton buttonText="Add menu item">
                       <AddSectionButton.List>
                         {/* NOTE: Check if the site contains any collections in `options`