diff --git a/e2e/tests/components/fields/image-upload/image-upload.e2e.spec.ts b/e2e/tests/components/fields/image-upload/image-upload.e2e.spec.ts index cbaf1d12e..16e255016 100644 --- a/e2e/tests/components/fields/image-upload/image-upload.e2e.spec.ts +++ b/e2e/tests/components/fields/image-upload/image-upload.e2e.spec.ts @@ -155,6 +155,7 @@ test.describe("ImageUpload", () => { await test.step("Confirm review prompt and open modal", async () => { await story.locators.reviewOkButton.click(); + await story.waitForImageEditorCanvas(); await story.snapshot("review-modal", { fullscreen: true, }); diff --git a/package-lock.json b/package-lock.json index bed20d136..f1e578e98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@floating-ui/react": "^0.26.23", - "@lifesg/react-design-system": "^4.0.0-alpha.6", + "@lifesg/react-design-system": "^4.0.0-alpha.9", "@lifesg/react-icons": "^1.9.0", "@lifesg/web-form-builder": "^1.0.0-alpha.4", "@linaria/babel-preset": "^5.0.4", @@ -108,7 +108,7 @@ }, "peerDependencies": { "@floating-ui/react": ">=0.26.23 <1.0.0", - "@lifesg/react-design-system": "^4.0.0-alpha.6", + "@lifesg/react-design-system": "^4.0.0-alpha.9", "@lifesg/react-icons": "^1.9.0", "react": "^17.0.2 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0" @@ -2993,6 +2993,20 @@ "dev": true, "license": "MIT" }, + "node_modules/@govtechsg/sgds-web-component": { + "version": "3.26.0", + "resolved": "https://registry.npmjs.org/@govtechsg/sgds-web-component/-/sgds-web-component-3.26.0.tgz", + "integrity": "sha512-5F/r6KgSyeyx+scndMFTuJ0G0IHdRhAp7eta5VVfZJNev8LEywxWTLw1YUawd3/fd1GpTRPHcaoJkMKjY/C/DA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.4", + "@lit/context": "^1.1.3", + "@lit/react": "^1.0.6", + "lit": "^3.1.4", + "tslib": "^2.6.2" + } + }, "node_modules/@hookform/resolvers": { "version": "2.9.11", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.11.tgz", @@ -4317,18 +4331,18 @@ } }, "node_modules/@lifesg/react-design-system": { - "version": "4.0.0-alpha.6", - "resolved": "https://registry.npmjs.org/@lifesg/react-design-system/-/react-design-system-4.0.0-alpha.6.tgz", - "integrity": "sha512-74hYrkGx/3lKl9qXQlWl591j+yjzxqkU9f9WCKReVnDWQ1NoBV3bnZeooj/DusvCrc6E8El1Cj73HEsYoQcWCQ==", + "version": "4.0.0-alpha.12", + "resolved": "https://registry.npmjs.org/@lifesg/react-design-system/-/react-design-system-4.0.0-alpha.12.tgz", + "integrity": "sha512-kafpidssQ+NyK/2PFlL7reH4gyiGiAsIhkawXJRno6Gj1202/Zu88axqnWcIFRgW0JseKl6cgiLktLrBzThghw==", "dev": true, "license": "ISC", "dependencies": { + "@govtechsg/sgds-web-component": "3.26.0", "@react-aria/live-announcer": "^3.4.4", "@react-spring/web": "^10.0.1", "clsx": "^2.1.1", "fabric": "^7.2.0", "immer": "^10.0.2", - "react-slider": "^2.0.6", "react-virtuoso": "^4.12.5", "react-zoom-pan-pinch": "^3.3.0" }, @@ -4698,6 +4712,43 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz", + "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==", + "dev": true, + "license": "BSD-3-Clause" + }, + "node_modules/@lit/context": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz", + "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.6.2 || ^2.1.0" + } + }, + "node_modules/@lit/react": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz", + "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==", + "dev": true, + "license": "BSD-3-Clause", + "peerDependencies": { + "@types/react": "17 || 18 || 19" + } + }, + "node_modules/@lit/reactive-element": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.2.tgz", + "integrity": "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.5.0" + } + }, "node_modules/@mdx-js/react": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", @@ -6605,6 +6656,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/whatwg-mimetype": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz", @@ -15155,6 +15213,40 @@ "node": ">=20.0.0" } }, + "node_modules/lit": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz", + "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^2.1.0", + "lit-element": "^4.2.0", + "lit-html": "^3.3.0" + } + }, + "node_modules/lit-element": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz", + "integrity": "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.5.0", + "@lit/reactive-element": "^2.1.0", + "lit-html": "^3.3.0" + } + }, + "node_modules/lit-html": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz", + "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.2.tgz", diff --git a/package.json b/package.json index 58779d593..2cdfe6600 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ }, "peerDependencies": { "@floating-ui/react": ">=0.26.23 <1.0.0", - "@lifesg/react-design-system": "^4.0.0-alpha.6", + "@lifesg/react-design-system": "^4.0.0-alpha.9", "@lifesg/react-icons": "^1.9.0", "react": "^17.0.2 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0" @@ -72,7 +72,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@floating-ui/react": "^0.26.23", - "@lifesg/react-design-system": "^4.0.0-alpha.6", + "@lifesg/react-design-system": "^4.0.0-alpha.9", "@lifesg/react-icons": "^1.9.0", "@lifesg/web-form-builder": "^1.0.0-alpha.4", "@linaria/babel-preset": "^5.0.4", diff --git a/src/components/fields/checkbox-group/checkbox-group.styles.ts b/src/components/fields/checkbox-group/checkbox-group.styles.ts index e64155c21..a0a730c43 100644 --- a/src/components/fields/checkbox-group/checkbox-group.styles.ts +++ b/src/components/fields/checkbox-group/checkbox-group.styles.ts @@ -1,4 +1,4 @@ -import { Colour, Spacing } from "@lifesg/react-design-system/theme"; +import { Spacing } from "@lifesg/react-design-system/theme"; import { css } from "@linaria/core"; export const label = css` @@ -29,18 +29,6 @@ export const toggleWrapper = css` gap: ${Spacing["spacing-16"]}; `; -export const toggleWrapperHasError = css` - /* No item selected — all items get error border */ - &:not(:has(input:checked)) > * { - border-color: ${Colour["border-error"]}; - } - - /* An item is selected — unselected items revert to normal border */ - &:has(input:checked) > *:not(:has(input:checked)) { - border-color: ${Colour.border}; - } -`; - export const toggleWrapperVertical = css` flex-direction: column; `; @@ -51,19 +39,3 @@ export const toggle = css` padding: 0; } `; - -export const toggleHasError = css` - &:has(input:checked) { - background: ${Colour["bg-error"]}; - border-color: ${Colour["border-error"]}; - - label, - span { - color: ${Colour["text-error"]}; - } - - svg { - color: ${Colour["icon-error"]}; - } - } -`; diff --git a/src/components/fields/checkbox-group/checkbox-group.tsx b/src/components/fields/checkbox-group/checkbox-group.tsx index 050c351b9..9edbd2b9a 100644 --- a/src/components/fields/checkbox-group/checkbox-group.tsx +++ b/src/components/fields/checkbox-group/checkbox-group.tsx @@ -150,7 +150,6 @@ export const CheckboxGroup = (props: IGenericFieldProps) = className={clsx( styles.toggleWrapper, customOptions.layoutType === "vertical" && styles.toggleWrapperVertical, - error?.message && styles.toggleWrapperHasError, className ? `${className}-checkbox-container` : undefined )} > @@ -163,7 +162,7 @@ export const CheckboxGroup = (props: IGenericFieldProps) = type="checkbox" data-testid={TestHelper.generateId(id, "toggle")} id={checkboxId} - className={clsx(styles.toggle, className, error?.message && styles.toggleHasError)} + className={clsx(styles.toggle, className)} disabled={disabled ?? option.disabled} focusableWhenDisabled={disabled} name={checkboxId} diff --git a/src/components/fields/image-upload/image-review/image-review.styles.ts b/src/components/fields/image-upload/image-review/image-review.styles.ts index aeec890a6..59559f368 100644 --- a/src/components/fields/image-upload/image-review/image-review.styles.ts +++ b/src/components/fields/image-upload/image-review/image-review.styles.ts @@ -121,11 +121,10 @@ export const drawDeleteButtonWrapper = css` export const drawDeleteButton = css` padding: 0; width: 5.4375rem; - height: 2.5rem; gap: ${Spacing["spacing-4"]}; background-color: ${Colour.bg}; box-shadow: ${Shadow["sm-strong"]}; - border-radius: 1.25rem; + border-radius: ${Radius.full}; &:first-child { margin-bottom: ${Spacing["spacing-16"]}; diff --git a/src/components/fields/image-upload/image-review/image-review.tsx b/src/components/fields/image-upload/image-review/image-review.tsx index 753de56a5..dde0200ef 100644 --- a/src/components/fields/image-upload/image-review/image-review.tsx +++ b/src/components/fields/image-upload/image-review/image-review.tsx @@ -430,6 +430,7 @@ export const ImageReview = (props: IProps) => { className={clsx(styles.drawIcon, drawDeleteDisabled && styles.drawIconDisabled)} /> } + sizeType="small" > { className={clsx(styles.deleteIcon, drawDeleteDisabled && styles.deleteIconDisabled)} /> } + sizeType="small" >