diff --git a/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js new file mode 100644 index 0000000000..76a23e3e54 --- /dev/null +++ b/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 ( +
+

Hide Delete Button

+ + When showDeleteButton prop is set to false, the delete button will be hidden from the + thumb cards. This is useful when you want to prevent users from deleting uploaded photos. + + Try uploading some photos below to see how the delete button is hidden: + +
+ ) +} + +HideDeleteButtonArticle.displayName = 'ShowDeleteButtonArticle' + +HideDeleteButtonArticle.propTypes = { + className: PropTypes.string +} + +export default HideDeleteButtonArticle diff --git a/components/molecule/photoUploader/demo/index.js b/components/molecule/photoUploader/demo/index.js index f85f7b7516..21264c3026 100644 --- a/components/molecule/photoUploader/demo/index.js +++ b/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 = () => {
+ +

diff --git a/components/molecule/photoUploader/src/PhotosPreview/index.js b/components/molecule/photoUploader/src/PhotosPreview/index.js index d1d20784f1..4921938a5c 100644 --- a/components/molecule/photoUploader/src/PhotosPreview/index.js +++ b/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, diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js index dd552dab9e..686410b6d3 100644 --- a/components/molecule/photoUploader/src/ThumbCard/index.js +++ b/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 = ({
-
- callbackDeleteItem(index)} - size={atomButtonSizes.SMALL} - tabIndex="0" - type="button" - > -
- - {deleteIcon} - -
-
-
+ {showDeleteButton && ( +
+ callbackDeleteItem(index)} + size={atomButtonSizes.SMALL} + tabIndex="0" + type="button" + > +
+ + {deleteIcon} + +
+
+
+ )} {hasErrors ? (