sag_components 2.0.0-beta285 → 2.0.0-beta287

package/dist/index.d.ts

@@ -1250,6 +1250,8 @@ declare namespace DownloadProgress {
         const failedMessage: PropTypes.Requireable<string>;
         const downloadStatus: PropTypes.Requireable<string>;
         const showShadow: PropTypes.Requireable<boolean>;
+        const showCloseButton: PropTypes.Requireable<boolean>;
+        const onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
         const progressPercent: PropTypes.Requireable<number>;
         const refreshInterval: PropTypes.Requireable<number>;
         const progressBarColor: PropTypes.Requireable<string>;
@@ -1267,6 +1269,10 @@ declare namespace DownloadProgress {
         export { downloadStatus_1 as downloadStatus };
         const showShadow_1: boolean;
         export { showShadow_1 as showShadow };
+        const showCloseButton_1: boolean;
+        export { showCloseButton_1 as showCloseButton };
+        export function onCloseClick_1(): void;
+        export { onCloseClick_1 as onCloseClick };
         const progressPercent_1: number;
         export { progressPercent_1 as progressPercent };
         const refreshInterval_1: number;

package/dist/index.esm.js

@@ -34198,7 +34198,7 @@ const Header$3 = styled.div`
     align-items: flex-start;
   }
 `;
-const CloseButton$1 = styled.button`
+const CloseButton$2 = styled.button`
   position: absolute;
   top: -10px;
   right: 0px;
@@ -34399,7 +34399,7 @@ const InsightsCarousel = _ref => {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
-  }), title), /*#__PURE__*/React$1.createElement(CloseButton$1, {
+  }), title), /*#__PURE__*/React$1.createElement(CloseButton$2, {
     onClick: () => onClose?.({
       label: "closeCarousel"
     }),
@@ -34536,14 +34536,13 @@ ProgressBar.defaultProps = {
 
 const DownloadProgressMainContainer = styled.div`
   font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   color: #212121;
   line-height: 14px;
   position: relative;
   margin: 0;
-  padding: 10px;
+  padding: 15px 20px 10px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
@@ -34551,14 +34550,13 @@ const DownloadProgressMainContainer = styled.div`
 const DownloadProgressContentContainer = styled.div` 
   display: flex;
   align-items: center;
-  margin: 0 10px;
   gap: 10px;
 `;
-const DownloadProgressTitle = styled.h3`  
+const DownloadProgressTitle = styled.h4`  
   font-weight: 400;
-  margin: 10px;  
+  margin: 0 30px 10px 0;  
 `;
-const DownloadProgressStatusMessage = styled.h3`   
+const DownloadProgressStatusMessage = styled.h5`   
   margin: 3px 0;
   &.DownloadProgressStatusMessage_succeeded{
     font-weight: 500;  
@@ -34572,11 +34570,19 @@ const DownloadProgressStatusMessage = styled.h3`
     font-weight: 400;
     text-decoration: underline;  
     &:hover {
-    background-Color: #f1f1f1;
-    cursor: pointer;
-  } 
+      background-Color: #f1f1f1;
+      cursor: pointer;
+    } 
   }
 `;
+const CloseButton$1 = styled.button`
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
 
 const DownloadProgress = props => {
   const {
@@ -34585,11 +34591,13 @@ const DownloadProgress = props => {
     failedMessage,
     downloadStatus,
     showShadow,
+    showCloseButton,
     progressPercent,
     refreshInterval,
     progressBarColor,
     onTryAgainClick,
-    className
+    className,
+    onCloseClick
   } = props;
   const [DownloadStatus, setDownloadStatus] = useState(downloadStatus);
   useEffect(() => {
@@ -34647,7 +34655,12 @@ const DownloadProgress = props => {
     showShadow: showShadow
   }, /*#__PURE__*/React$1.createElement(DownloadProgressTitle, {
     className: "DownloadProgressTitle"
-  }, title), displayProgressContent());
+  }, title, showCloseButton && /*#__PURE__*/React$1.createElement(CloseButton$1, {
+    onClick: onCloseClick
+  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+    width: "11",
+    height: "11"
+  }))), displayProgressContent());
 };
 DownloadProgress.propTypes = {
   title: PropTypes.string,
@@ -34655,6 +34668,8 @@ DownloadProgress.propTypes = {
   failedMessage: PropTypes.string,
   downloadStatus: PropTypes.string,
   showShadow: PropTypes.bool,
+  showCloseButton: PropTypes.bool,
+  onCloseClick: PropTypes.func,
   progressPercent: PropTypes.number,
   refreshInterval: PropTypes.number,
   progressBarColor: PropTypes.string,
@@ -34667,6 +34682,8 @@ DownloadProgress.defaultProps = {
   failedMessage: 'Something went wrong',
   downloadStatus: 'inProgress',
   showShadow: true,
+  showCloseButton: false,
+  onCloseClick: () => {},
   progressPercent: 0,
   refreshInterval: 100,
   progressBarColor: '#92CF17',