0.57.0

CHANGELOG.md

@@ -4,8 +4,19 @@ 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.57.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.56.0...v0.57.0)
+
+- fix(menubar): remove uuid [`#1659`](https://github.com/isomerpages/isomercms-frontend/pull/1659)
+- fix(badge): flickering issue [`#1657`](https://github.com/isomerpages/isomercms-frontend/pull/1657)
+- feat(images): bulk upload [`#1654`](https://github.com/isomerpages/isomercms-frontend/pull/1654)
+- feat(media): introduce new move media modal [`#1652`](https://github.com/isomerpages/isomercms-frontend/pull/1652)
+- IS-685 enhance delete images [`#1631`](https://github.com/isomerpages/isomercms-frontend/pull/1631)
+- release(0.56.0): merge to dev [`#1649`](https://github.com/isomerpages/isomercms-frontend/pull/1649)
+
 #### [v0.56.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.55.0...v0.56.0)
 
+> 3 November 2023
+
 - fix(api): dont ping be every 5 sec if ! whitelist [`#1648`](https://github.com/isomerpages/isomercms-frontend/pull/1648)
 - fix(protected-route): add missing deps [`#1647`](https://github.com/isomerpages/isomercms-frontend/pull/1647)
 - release(0.55.0): merge to dev [`#1640`](https://github.com/isomerpages/isomercms-frontend/pull/1640)

package.json

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

src/assets/icons/BxErrorSolid.tsx

@@ -0,0 +1,19 @@
+export const BxErrorSolid = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.58939 1.68808C8.35872 1.25208 7.64139 1.25208 7.41072 1.68808L1.41072 13.0214C1.35671 13.123 1.32993 13.2368 1.333 13.3518C1.33607 13.4668 1.36887 13.5791 1.42822 13.6777C1.48757 13.7762 1.57144 13.8577 1.67165 13.9142C1.77187 13.9707 1.88501 14.0003 2.00005 14.0001H14.0001C14.115 14.0003 14.2281 13.9708 14.3282 13.9143C14.4284 13.8578 14.5122 13.7764 14.5715 13.6779C14.6308 13.5794 14.6635 13.4672 14.6665 13.3522C14.6696 13.2373 14.6427 13.1236 14.5887 13.0221L8.58939 1.68808ZM8.66672 12.0001H7.33339V10.6667H8.66672V12.0001ZM7.33339 9.33342V6.00008H8.66672L8.66739 9.33342H7.33339Z"
+        fill="#272D41"
+      />
+    </svg>
+  )
+}

src/assets/icons/index.ts

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

src/components/Attachment/Attachment.tsx

@@ -21,7 +21,6 @@ import { AttachmentStylesProvider } from "./AttachmentContext"
 import { AttachmentDropzone } from "./AttachmentDropzone"
 import { AttachmentError } from "./AttachmentError"
 import { AttachmentFileInfo } from "./AttachmentFileInfo"
-import { MAX_NUM_UPLOADS } from "./constants"
 
 export interface AttachmentProps extends UseFormControlProps<HTMLElement> {
   /**
@@ -145,7 +144,7 @@ export const Attachment = forwardRef<AttachmentProps, "div">(
         if (maxSize && file.size > maxSize) {
           return {
             code: "file-too-large",
-            message: `Upload too big (${getReadableFileSize(file.size)})`,
+            message: `File is too big (${getReadableFileSize(file.size)})`,
           }
         }
         return null
@@ -158,7 +157,7 @@ export const Attachment = forwardRef<AttachmentProps, "div">(
       disabled: inputProps.disabled,
       validator: fileValidator,
       onDrop: handleFileDrop,
-      maxFiles: MAX_NUM_UPLOADS,
+      multiple: true,
     })
 
     const mergedRefs = useMergeRefs(rootRef, ref)
@@ -213,29 +212,52 @@ export const Attachment = forwardRef<AttachmentProps, "div">(
               mt="0.5rem"
               textStyle="body-2"
             >
-              Maximum size per image: {readableMaxSize}
+              Maximum size per file: {readableMaxSize}
             </Text>
           )}
         </Box>
-        <Box mt="1.5rem" mb="0.75rem">
-          <Text textStyle="subhead-1">Selected images</Text>
-          <Text textStyle="caption-2">{`${value.length}/5 images can be uploaded`}</Text>
-        </Box>
-        {value?.map((file) => (
+        {value?.length > 0 && (
           <>
-            <Divider />
-            <AttachmentFileInfo
-              file={file}
-              imagePreview={imagePreview}
-              isDisabled={inputProps.disabled}
-            />
+            <Box mt="1.5rem" mb="0.75rem">
+              <Text textStyle="subhead-1">Files to be uploaded</Text>
+              <Text textStyle="caption-2">{`${value.length}/${
+                value.length + rejected.length
+              } files can be uploaded`}</Text>
+            </Box>
+            {value?.map((file) => (
+              <>
+                <Divider />
+                <AttachmentFileInfo
+                  file={file}
+                  imagePreview={imagePreview}
+                  isDisabled={inputProps.disabled}
+                />
+              </>
+            ))}
+            {/* NOTE: Add last divider if we have content above */}
+            {value?.length > 0 && <Divider />}
+          </>
+        )}
+        {rejected?.length > 0 && (
+          <>
+            <Box mt="1.5rem" mb="0.75rem">
+              <Text textStyle="subhead-1">Unable to upload</Text>
+              <Text textStyle="caption-2">{`${rejected.length}/${
+                value.length + rejected.length
+              } files cannot be uploaded`}</Text>
+            </Box>
+            <Box overflowY="auto" maxH="25vh">
+              {rejected?.map((fileRejection) => (
+                <>
+                  <Divider />
+                  <AttachmentError fileRejection={fileRejection} />
+                </>
+              ))}
+              {/* NOTE: Add last divider if we have content above */}
+              {rejected.length > 0 && <Divider />}
+            </Box>
           </>
-        ))}
-        {rejected?.map((fileRejection) => (
-          <AttachmentError fileRejection={fileRejection} />
-        ))}
-        {/* NOTE: Add last divider if we have content above */}
-        {(value?.length > 0 || rejected.length > 0) && <Divider />}
+        )}
       </AttachmentStylesProvider>
     )
   }

src/components/Attachment/AttachmentDropzone.tsx

@@ -1,5 +1,5 @@
 import { chakra, Icon, Text } from "@chakra-ui/react"
-import { Button, Link, BxsCloudUpload } from "@opengovsg/design-system-react"
+import { Button, BxsCloudUpload } from "@opengovsg/design-system-react"
 import { DropzoneInputProps, DropzoneState } from "react-dropzone"
 
 import { useAttachmentStyles } from "./AttachmentContext"
@@ -31,7 +31,7 @@ export const AttachmentDropzone = ({
             or drag and drop here
           </Text>
           <Text textStyle="caption-1">
-            Images exceeding 5MB and videos are not supported
+            Only images and PDFs are supported. Files must be smaller than 5MB.
           </Text>
         </>
       )}

src/components/Attachment/AttachmentError.tsx

@@ -75,6 +75,7 @@ export const AttachmentError = forwardRef<AttachmentErrorProps, "div">(
         ref={ref}
         tabIndex={0}
         sx={styles.fileInfoContainer}
+        w="100%"
       >
         <VisuallyHidden>
           File attached: {file.name} with file size of {readableFileSize}
@@ -86,13 +87,25 @@ export const AttachmentError = forwardRef<AttachmentErrorProps, "div">(
             src={previewSrc}
           />
         )}
-        <Flex sx={styles.fileInfo}>
-          <Icon as={BiError} />
-          <Text ml="2rem">{file.name}</Text>
+        <Flex sx={styles.fileInfo} w="100%">
+          <Icon as={BiError} fill="utility.feedback.critical" />
+          <Text
+            ml="2rem"
+            textStyle="caption-2"
+            noOfLines={1}
+            textColor="utility.feedback.critical"
+          >
+            {file.name}
+          </Text>
           <Spacer />
           <Text
             data-disabled={dataAttr(isDisabled)}
-            sx={styles.fileInfoDescription}
+            sx={{
+              ...styles.fileInfoDescription,
+              textColor: "utility.feedback.critical",
+            }}
+            textStyle="caption-2"
+            minW="fit-content"
           >
             {getErrorMessage(fileRejection)}
           </Text>

src/components/Attachment/AttachmentFileInfo.tsx

@@ -47,6 +47,7 @@ export const AttachmentFileInfo = forwardRef<AttachmentFileInfoProps, "div">(
         ref={ref}
         tabIndex={0}
         sx={styles.fileInfoContainer}
+        w="100%"
       >
         <VisuallyHidden>
           File attached: {file.name} with file size of {readableFileSize}
@@ -58,13 +59,18 @@ export const AttachmentFileInfo = forwardRef<AttachmentFileInfoProps, "div">(
             src={previewSrc}
           />
         )}
-        <Flex sx={styles.fileInfo}>
+        <Flex sx={styles.fileInfo} w="100%">
           <Icon as={BxImage} />
-          <Text ml="2rem">{file.name}</Text>
+          <Text ml="2rem" textStyle="caption-2" noOfLines={1}>
+            {file.name}
+          </Text>
           <Spacer />
           <Text
+            textStyle="caption-2"
             data-disabled={dataAttr(isDisabled)}
             sx={styles.fileInfoDescription}
+            minW="fit-content"
+            textOverflow="ellipsis"
           >
             {readableFileSize}
           </Text>

src/components/Attachment/constants.ts

@@ -1,2 +1 @@
 export const MAX_UPLOAD_SIZE_MB = 5
-export const MAX_NUM_UPLOADS = 5

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryFn } from "@storybook/react"
+import { MemoryRouter, Route } from "react-router-dom"
+
+import { Breadcrumbs } from "./Breadcrumbs"
+
+const breakcrumbsMeta = {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+  decorators: [
+    (Story) => {
+      return (
+        <MemoryRouter
+          initialEntries={[
+            "/sites/storybook/media/images/mediaDirectory/images",
+          ]}
+        >
+          <Route path="/sites/:siteName/media/:mediaRoom/mediaDirectory/:mediaDirectoryName">
+            <Story />
+          </Route>
+        </MemoryRouter>
+      )
+    },
+  ],
+} as Meta<typeof Breadcrumbs>
+
+const breadcrumbsTemplate: StoryFn<typeof Breadcrumbs> = (props) => {
+  return <Breadcrumbs {...props} />
+}
+
+export const Default = breadcrumbsTemplate.bind({})
+
+Default.args = {
+  items: [
+    { title: "images", url: "#" },
+    {
+      title: "nested-album",
+      url: "#",
+    },
+    {
+      title: "level-3",
+      url: "#",
+    },
+  ],
+}
+
+export const Truncated = breadcrumbsTemplate.bind({})
+
+Truncated.args = {
+  items: [
+    { title: "images", url: "#" },
+    {
+      title: "nested-album",
+      url: "#",
+    },
+    {
+      title: "level-3",
+      url: "#",
+    },
+    {
+      title: "level-4",
+      url: "#",
+    },
+  ],
+}
+
+export const NotLinked = breadcrumbsTemplate.bind({})
+
+NotLinked.args = {
+  items: [
+    { title: "images", url: "#" },
+    {
+      title: "nested-album",
+      url: "#",
+    },
+    {
+      title: "level-3",
+      url: "#",
+    },
+    {
+      title: "level-4",
+      url: "#",
+    },
+  ],
+  maxBreadcrumbsLength: 4,
+  spacing: "0rem",
+  textStyle: "body-2",
+  isLinked: false,
+  isLastChildUnderlined: true,
+}
+
+export default breakcrumbsMeta