Feat/hide delete button

components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.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 HideDeleteButtonArticle = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Hide Delete Button</H2>
+      <Paragraph>
+        When <Code>showDeleteButton</Code> prop is set to <Code>false</Code>, the delete button will be hidden from the
+        thumb cards. This is useful when you want to prevent users from deleting uploaded photos.
+      </Paragraph>
+      <Paragraph>Try uploading some photos below to see how the delete 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}
+        showDeleteButton={false}
+        infoIcon={_infoIcon}
+        limitPhotosUploadedText={_limitPhotosUploaded}
+        limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
+        mainPhotoLabel={_mainPhotoLabel}
+        maxPhotos={_maxPhotos}
+        notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
+        rejectPhotosIcon={_rejectPhotosIcon}
+        retryIcon={_retryErrorPhotosIcon}
+        rotateIcon={_rotateIcon}
+        uploadingPhotosText={_uploadingPhotosText}
+      />
+    </Article>
+  )
+}
+
+HideDeleteButtonArticle.displayName = 'ShowDeleteButtonArticle'
+
+HideDeleteButtonArticle.propTypes = {
+  className: PropTypes.string
+}
+
+export default HideDeleteButtonArticle

components/molecule/photoUploader/demo/index.js

@@ -1,6 +1,7 @@
 import {Code, H1, Paragraph} from '@s-ui/documentation-library'
 
 import DefaultArticle from './articles/DefaultArticle.js'
+import HideDeleteButtonArticle from './articles/HideDeleteButtonArticle.js'
 import InitialPhotosArticle from './articles/InitialPhotosArticle.js'
 import WithContentArticle from './articles/WithContentArticle.js'
 import {CLASS_DEMO_SECTION} from './config.js'
@@ -15,6 +16,8 @@ const Demo = () => {
       </Paragraph>
       <DefaultArticle className={CLASS_DEMO_SECTION} />
       <br />
+      <HideDeleteButtonArticle className={CLASS_DEMO_SECTION} />
+      <br />
       <InitialPhotosArticle className={CLASS_DEMO_SECTION} />
       <br />
       <WithContentArticle className={CLASS_DEMO_SECTION} />

components/molecule/photoUploader/src/PhotosPreview/index.js

@@ -43,6 +43,7 @@ const PhotosPreview = ({
   dragIcon,
   errorInitialPhotoDownloadErrorText,
   files,
+  showDeleteButton,
   inputId,
   isPhotoUploaderFully,
   mainPhotoLabel,
@@ -178,6 +179,7 @@ const PhotosPreview = ({
               deleteButtonAriaLabel={deleteButtonAriaLabel}
               deleteIcon={deleteIcon()}
               dragIcon={dragIcon()}
+              showDeleteButton={showDeleteButton}
               iconSize={thumbIconSize}
               image={file}
               index={index}
@@ -253,6 +255,7 @@ PhotosPreview.propTypes = {
   dragIcon: PropTypes.node,
   errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
   files: PropTypes.array.isRequired,
+  showDeleteButton: PropTypes.bool,
   inputId: PropTypes.string.isRequired,
   isPhotoUploaderFully: PropTypes.bool.isRequired,
   mainPhotoLabel: PropTypes.string.isRequired,

components/molecule/photoUploader/src/ThumbCard/index.js

@@ -22,6 +22,7 @@ const ThumbCard = ({
   deleteButtonAriaLabel,
   deleteIcon,
   dragIcon,
+  showDeleteButton = true,
   iconSize = ATOM_ICON_SIZES.small,
   image,
   index,
@@ -66,23 +67,25 @@ const ThumbCard = ({
       </div>
       <Content file={image} index={index} />
       <div className={ACTION_THUMB_CARD_CLASS_NAME}>
-        <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
-          <AtomButton
-            aria-label={`${deleteButtonAriaLabel} ${thumbCardLabel}`}
-            design={atomButtonDesigns.LINK}
-            fullWidth
-            onClick={() => callbackDeleteItem(index)}
-            size={atomButtonSizes.SMALL}
-            tabIndex="0"
-            type="button"
-          >
-            <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
-              <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
-                {deleteIcon}
-              </AtomIcon>
-            </div>
-          </AtomButton>
-        </div>
+        {showDeleteButton && (
+          <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
+            <AtomButton
+              aria-label={`${deleteButtonAriaLabel} ${thumbCardLabel}`}
+              design={atomButtonDesigns.LINK}
+              fullWidth
+              onClick={() => callbackDeleteItem(index)}
+              size={atomButtonSizes.SMALL}
+              tabIndex="0"
+              type="button"
+            >
+              <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
+                <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
+                  {deleteIcon}
+                </AtomIcon>
+              </div>
+            </AtomButton>
+          </div>
+        )}
         {hasErrors ? (
           <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
             <AtomButton
@@ -135,6 +138,7 @@ ThumbCard.propTypes = {
   deleteButtonAriaLabel: PropTypes.string.isRequired,
   deleteIcon: PropTypes.node.isRequired,
   dragIcon: PropTypes.node.isRequired,
+  showDeleteButton: PropTypes.bool,
   iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
   image: PropTypes.object.isRequired,
   index: PropTypes.number,

components/molecule/photoUploader/src/index.js

@@ -68,6 +68,7 @@ const MoleculePhotoUploader = forwardRef(
       errorFormatPhotoUploadedText,
       errorInitialPhotoDownloadErrorText,
       errorSaveImageEndpoint,
+      showDeleteButton = true,
       id = DEFAULT_INPUT_ID,
       infoIcon = noop,
       initialPhotos = [],
@@ -313,6 +314,7 @@ const MoleculePhotoUploader = forwardRef(
                 deleteIcon={deleteIcon}
                 dragDelay={dragDelay}
                 dragIcon={dragIcon}
+                showDeleteButton={showDeleteButton}
                 errorInitialPhotoDownloadErrorText={errorInitialPhotoDownloadErrorText}
                 files={files}
                 inputId={id}
@@ -454,6 +456,9 @@ MoleculePhotoUploader.propTypes = {
   /** Text showed when the user drag files into the dropzone, to indicate he can drop */
   dropPhotosHereText: PropTypes.string.isRequired,
 
+  /** Show the delete button on thumb cards */
+  showDeleteButton: PropTypes.bool,
+
   /** Id of the input element */
   id: PropTypes.string,
 

components/molecule/photoUploader/src/styles/index.scss

@@ -301,7 +301,7 @@ $skeleton-class: '#{$base-class}-skeleton';
       display: flex;
       justify-content: center;
       padding: $p-photo-uploader-action-buttons;
-      width: 50%;
+      width: 100%;
 
       &:first-of-type {
         border-radius: 0 0 0 $bdrs-photo-uploader-thumb-card;