Feat/hide rotate icon photo uploader

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 (
+    <Article className={className}>
+      <H2>Hide Both Delete and Rotate Buttons</H2>
+      <Paragraph>
+        When both <Code>showDeleteButton</Code> and <Code>showRotateButton</Code> props are set to <Code>false</Code>,
+        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.
+      </Paragraph>
+      <Paragraph>Try uploading some photos below to see how both action buttons are hidden:</Paragraph>
+      <MoleculePhotoUploader
+        addMorePhotosIcon={_addMorePhotosIcon}
+        addPhotoTextButton={_addPhotoTextButton}
+        addPhotoTextSkeleton={_addPhotoTextSkeleton}
+        callbackPhotosRejected={_callbackPhotosRejected}
+        callbackPhotosUploaded={_callbackPhotosUploaded}
+        callbackUploadPhoto={_callbackUploadPhoto}
+        deleteIcon={_deleteIcon}
+        dragPhotosIcon={_dragPhotosIcon}
+        dragPhotoTextInitialContent={_dragPhotoTextInitialContent}
+        dragPhotoDividerTextInitialContent={_dragPhotoDividerTextInitialContent}
+        dropPhotosHereText={_dropPhotosHere}
+        errorCorruptedPhotoUploadedText={_errorCorruptedPhotoUploaded}
+        errorFileExcededMaxSizeText={_errorFileExcededMaxSize}
+        errorFormatPhotoUploadedText={_errorFormatPhotoUploaded}
+        errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError}
+        showDeleteButton={false}
+        showRotateButton={false}
+        infoIcon={_infoIcon}
+        limitPhotosUploadedText={_limitPhotosUploaded}
+        limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
+        mainPhotoLabel={_mainPhotoLabel}
+        maxPhotos={_maxPhotos}
+        notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
+        rejectPhotosIcon={_rejectPhotosIcon}
+        retryIcon={_retryErrorPhotosIcon}
+        rotateIcon={_rotateIcon}
+        uploadingPhotosText={_uploadingPhotosText}
+      />
+    </Article>
+  )
+}
+
+HideBothButtonsArticle.displayName = 'HideBothButtonsArticle'
+
+HideBothButtonsArticle.propTypes = {
+  className: PropTypes.string
+}
+
+export default HideBothButtonsArticle

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 (
+    <Article className={className}>
+      <H2>Hide Rotate Button</H2>
+      <Paragraph>
+        When <Code>showRotateButton</Code> prop is set to <Code>false</Code>, the rotate button will be hidden from the
+        thumb cards. This is useful when you want to prevent users from rotating uploaded photos.
+      </Paragraph>
+      <Paragraph>Try uploading some photos below to see how the rotate button is hidden:</Paragraph>
+      <MoleculePhotoUploader
+        addMorePhotosIcon={_addMorePhotosIcon}
+        addPhotoTextButton={_addPhotoTextButton}
+        addPhotoTextSkeleton={_addPhotoTextSkeleton}
+        callbackPhotosRejected={_callbackPhotosRejected}
+        callbackPhotosUploaded={_callbackPhotosUploaded}
+        callbackUploadPhoto={_callbackUploadPhoto}
+        deleteIcon={_deleteIcon}
+        dragPhotosIcon={_dragPhotosIcon}
+        dragPhotoTextInitialContent={_dragPhotoTextInitialContent}
+        dragPhotoDividerTextInitialContent={_dragPhotoDividerTextInitialContent}
+        dropPhotosHereText={_dropPhotosHere}
+        errorCorruptedPhotoUploadedText={_errorCorruptedPhotoUploaded}
+        errorFileExcededMaxSizeText={_errorFileExcededMaxSize}
+        errorFormatPhotoUploadedText={_errorFormatPhotoUploaded}
+        errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError}
+        showRotateButton={false}
+        infoIcon={_infoIcon}
+        limitPhotosUploadedText={_limitPhotosUploaded}
+        limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
+        mainPhotoLabel={_mainPhotoLabel}
+        maxPhotos={_maxPhotos}
+        notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
+        rejectPhotosIcon={_rejectPhotosIcon}
+        retryIcon={_retryErrorPhotosIcon}
+        rotateIcon={_rotateIcon}
+        uploadingPhotosText={_uploadingPhotosText}
+      />
+    </Article>
+  )
+}
+
+HideRotateButtonArticle.displayName = 'HideRotateButtonArticle'
+
+HideRotateButtonArticle.propTypes = {
+  className: PropTypes.string
+}
+
+export default HideRotateButtonArticle

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 = () => {
       <br />
       <HideDeleteButtonArticle className={CLASS_DEMO_SECTION} />
       <br />
+      <HideRotateButtonArticle className={CLASS_DEMO_SECTION} />
+      <br />
+      <HideBothButtonsArticle className={CLASS_DEMO_SECTION} />
+      <br />
       <InitialPhotosArticle className={CLASS_DEMO_SECTION} />
       <br />
       <WithContentArticle className={CLASS_DEMO_SECTION} />

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,

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 = ({
             </AtomButton>
           </div>
         ) : (
-          <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
-            <AtomButton
-              aria-label={`${rotateButtonAriaLabel} ${thumbCardLabel}`}
-              design={atomButtonDesigns.LINK}
-              fullWidth
-              onClick={() => callbackRotateItem(index)}
-              size={atomButtonSizes.SMALL}
-              tabIndex="0"
-              type="button"
-            >
-              <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
-                <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
-                  {rotateIcon}
-                </AtomIcon>
-              </div>
-            </AtomButton>
-          </div>
+          showRotateButton && (
+            <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
+              <AtomButton
+                aria-label={`${rotateButtonAriaLabel} ${thumbCardLabel}`}
+                design={atomButtonDesigns.LINK}
+                fullWidth
+                onClick={() => callbackRotateItem(index)}
+                size={atomButtonSizes.SMALL}
+                tabIndex="0"
+                type="button"
+              >
+                <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
+                  <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
+                    {rotateIcon}
+                  </AtomIcon>
+                </div>
+              </AtomButton>
+            </div>
+          )
         )}
       </div>
     </div>
@@ -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,

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,
 

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;