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" - > -
- - {rotateIcon} - -
-
-
+ showRotateButton && ( +
+ callbackRotateItem(index)} + size={atomButtonSizes.SMALL} + tabIndex="0" + type="button" + > +
+ + {rotateIcon} + +
+
+
+ ) )} @@ -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;