diff --git a/components/molecule/photoUploader/demo/articles/HideBothButtonsArticle.js b/components/molecule/photoUploader/demo/articles/HideBothButtonsArticle.js
new file mode 100644
index 000000000..37e5639b5
--- /dev/null
+++ b/components/molecule/photoUploader/demo/articles/HideBothButtonsArticle.js
@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types'
+
+import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library'
+
+import MoleculePhotoUploader from '../../src/index.js'
+import {
+ _addPhotoTextButton,
+ _addPhotoTextSkeleton,
+ _callbackPhotosRejected,
+ _callbackPhotosUploaded,
+ _callbackUploadPhoto,
+ _dragPhotoDividerTextInitialContent,
+ _dragPhotoTextInitialContent,
+ _dropPhotosHere,
+ _errorCorruptedPhotoUploaded,
+ _errorFileExcededMaxSize,
+ _errorFormatPhotoUploaded,
+ _errorInitialPhotoDownloadError,
+ _limitPhotosUploaded,
+ _limitPhotosUploadedNotification,
+ _mainPhotoLabel,
+ _maxPhotos,
+ _notificationErrorFormatPhotoUploaded,
+ _uploadingPhotosText
+} from '../config.js'
+import {
+ _addMorePhotosIcon,
+ _deleteIcon,
+ _dragPhotosIcon,
+ _infoIcon,
+ _rejectPhotosIcon,
+ _retryErrorPhotosIcon,
+ _rotateIcon
+} from '../icons.js'
+
+const HideBothButtonsArticle = ({className}) => {
+ return (
+
+ Hide Both Delete and Rotate Buttons
+
+ When both showDeleteButton and showRotateButton props are set to false,
+ both the delete and rotate buttons will be hidden from the thumb cards. This creates a read-only view where
+ users can only view uploaded photos without any editing capabilities.
+
+ Try uploading some photos below to see how both action buttons are hidden:
+
+
+ )
+}
+
+HideBothButtonsArticle.displayName = 'HideBothButtonsArticle'
+
+HideBothButtonsArticle.propTypes = {
+ className: PropTypes.string
+}
+
+export default HideBothButtonsArticle
diff --git a/components/molecule/photoUploader/demo/articles/HideRotateButtonArticle.js b/components/molecule/photoUploader/demo/articles/HideRotateButtonArticle.js
new file mode 100644
index 000000000..c19f36dba
--- /dev/null
+++ b/components/molecule/photoUploader/demo/articles/HideRotateButtonArticle.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+
+import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library'
+
+import MoleculePhotoUploader from '../../src/index.js'
+import {
+ _addPhotoTextButton,
+ _addPhotoTextSkeleton,
+ _callbackPhotosRejected,
+ _callbackPhotosUploaded,
+ _callbackUploadPhoto,
+ _dragPhotoDividerTextInitialContent,
+ _dragPhotoTextInitialContent,
+ _dropPhotosHere,
+ _errorCorruptedPhotoUploaded,
+ _errorFileExcededMaxSize,
+ _errorFormatPhotoUploaded,
+ _errorInitialPhotoDownloadError,
+ _limitPhotosUploaded,
+ _limitPhotosUploadedNotification,
+ _mainPhotoLabel,
+ _maxPhotos,
+ _notificationErrorFormatPhotoUploaded,
+ _uploadingPhotosText
+} from '../config.js'
+import {
+ _addMorePhotosIcon,
+ _deleteIcon,
+ _dragPhotosIcon,
+ _infoIcon,
+ _rejectPhotosIcon,
+ _retryErrorPhotosIcon,
+ _rotateIcon
+} from '../icons.js'
+
+const HideRotateButtonArticle = ({className}) => {
+ return (
+
+ Hide Rotate Button
+
+ When showRotateButton prop is set to false, the rotate button will be hidden from the
+ thumb cards. This is useful when you want to prevent users from rotating uploaded photos.
+
+ Try uploading some photos below to see how the rotate button is hidden:
+
+
+ )
+}
+
+HideRotateButtonArticle.displayName = 'HideRotateButtonArticle'
+
+HideRotateButtonArticle.propTypes = {
+ className: PropTypes.string
+}
+
+export default HideRotateButtonArticle
diff --git a/components/molecule/photoUploader/demo/index.js b/components/molecule/photoUploader/demo/index.js
index 21264c302..09c83206e 100644
--- a/components/molecule/photoUploader/demo/index.js
+++ b/components/molecule/photoUploader/demo/index.js
@@ -1,7 +1,9 @@
import {Code, H1, Paragraph} from '@s-ui/documentation-library'
import DefaultArticle from './articles/DefaultArticle.js'
+import HideBothButtonsArticle from './articles/HideBothButtonsArticle.js'
import HideDeleteButtonArticle from './articles/HideDeleteButtonArticle.js'
+import HideRotateButtonArticle from './articles/HideRotateButtonArticle.js'
import InitialPhotosArticle from './articles/InitialPhotosArticle.js'
import WithContentArticle from './articles/WithContentArticle.js'
import {CLASS_DEMO_SECTION} from './config.js'
@@ -18,6 +20,10 @@ const Demo = () => {
+
+
+
+
diff --git a/components/molecule/photoUploader/src/PhotosPreview/index.js b/components/molecule/photoUploader/src/PhotosPreview/index.js
index 4921938a5..9fb22fc64 100644
--- a/components/molecule/photoUploader/src/PhotosPreview/index.js
+++ b/components/molecule/photoUploader/src/PhotosPreview/index.js
@@ -44,6 +44,7 @@ const PhotosPreview = ({
errorInitialPhotoDownloadErrorText,
files,
showDeleteButton,
+ showRotateButton,
inputId,
isPhotoUploaderFully,
mainPhotoLabel,
@@ -180,6 +181,7 @@ const PhotosPreview = ({
deleteIcon={deleteIcon()}
dragIcon={dragIcon()}
showDeleteButton={showDeleteButton}
+ showRotateButton={showRotateButton}
iconSize={thumbIconSize}
image={file}
index={index}
@@ -256,6 +258,7 @@ PhotosPreview.propTypes = {
errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
files: PropTypes.array.isRequired,
showDeleteButton: PropTypes.bool,
+ showRotateButton: PropTypes.bool,
inputId: PropTypes.string.isRequired,
isPhotoUploaderFully: PropTypes.bool.isRequired,
mainPhotoLabel: PropTypes.string.isRequired,
diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js
index 686410b6d..9a378c163 100644
--- a/components/molecule/photoUploader/src/ThumbCard/index.js
+++ b/components/molecule/photoUploader/src/ThumbCard/index.js
@@ -23,6 +23,7 @@ const ThumbCard = ({
deleteIcon,
dragIcon,
showDeleteButton = true,
+ showRotateButton = true,
iconSize = ATOM_ICON_SIZES.small,
image,
index,
@@ -45,7 +46,8 @@ const ThumbCard = ({
})
const imageThumbClass = cx(IMAGE_THUMB_CARD_CLASS_NAME, {
- [`${IMAGE_THUMB_CARD_CLASS_NAME}--ratioDisabled`]: outputImageAspectRatioDisabled
+ [`${IMAGE_THUMB_CARD_CLASS_NAME}--ratioDisabled`]: outputImageAspectRatioDisabled,
+ [`${IMAGE_THUMB_CARD_CLASS_NAME}--rotateAndDeleteButtonsHidden`]: !showDeleteButton && !showRotateButton
})
const thumbCardLabel = index === 0 && isDefaultView ? mainPhotoLabel : index + 1
@@ -105,23 +107,25 @@ const ThumbCard = ({
) : (
-
-
callbackRotateItem(index)}
- size={atomButtonSizes.SMALL}
- tabIndex="0"
- type="button"
- >
-
-
-
+ showRotateButton && (
+
+
callbackRotateItem(index)}
+ size={atomButtonSizes.SMALL}
+ tabIndex="0"
+ type="button"
+ >
+
+
+
+ )
)}
@@ -139,6 +143,7 @@ ThumbCard.propTypes = {
deleteIcon: PropTypes.node.isRequired,
dragIcon: PropTypes.node.isRequired,
showDeleteButton: PropTypes.bool,
+ showRotateButton: PropTypes.bool,
iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
image: PropTypes.object.isRequired,
index: PropTypes.number,
diff --git a/components/molecule/photoUploader/src/index.js b/components/molecule/photoUploader/src/index.js
index 1cfba840f..f266d02f7 100644
--- a/components/molecule/photoUploader/src/index.js
+++ b/components/molecule/photoUploader/src/index.js
@@ -69,6 +69,7 @@ const MoleculePhotoUploader = forwardRef(
errorInitialPhotoDownloadErrorText,
errorSaveImageEndpoint,
showDeleteButton = true,
+ showRotateButton = true,
id = DEFAULT_INPUT_ID,
infoIcon = noop,
initialPhotos = [],
@@ -315,6 +316,7 @@ const MoleculePhotoUploader = forwardRef(
dragDelay={dragDelay}
dragIcon={dragIcon}
showDeleteButton={showDeleteButton}
+ showRotateButton={showRotateButton}
errorInitialPhotoDownloadErrorText={errorInitialPhotoDownloadErrorText}
files={files}
inputId={id}
@@ -459,6 +461,9 @@ MoleculePhotoUploader.propTypes = {
/** Show the delete button on thumb cards */
showDeleteButton: PropTypes.bool,
+ /** Show the rotate button on thumb cards */
+ showRotateButton: PropTypes.bool,
+
/** Id of the input element */
id: PropTypes.string,
diff --git a/components/molecule/photoUploader/src/styles/index.scss b/components/molecule/photoUploader/src/styles/index.scss
index 0f72fab3c..7f1a2f916 100644
--- a/components/molecule/photoUploader/src/styles/index.scss
+++ b/components/molecule/photoUploader/src/styles/index.scss
@@ -270,6 +270,10 @@ $skeleton-class: '#{$base-class}-skeleton';
object-fit: cover;
width: $w-photo-uploader-thumb-image;
+ &--rotateAndDeleteButtonsHidden {
+ border-radius: $bdrs-photo-uploader-thumb-card;
+ }
+
@include media-breakpoint-up(m) {
height: $h-photo-uploader-thumb-image-desktop;
width: $w-photo-uploader-thumb-image-desktop;