@popsure/dirty-swan 0.38.3 → 0.38.5

package/src/lib/components/cards/cardWithLeftIcon/index.tsx

@@ -1,5 +1,5 @@
 import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
-import { Icon, IconSize, arrowRight } from '../icons';
+import { arrowRight, Icon, IconSize } from '../icons';
 
 import styles from './style.module.scss';
 
@@ -37,7 +37,7 @@ export type CardWithLeftIconProps = Omit<CardProps, 'title'> & {
   leftIconSize?: IconSize;
   title?: string;
   subtitle?: string;
-}
+};
 
 export const CardWithLeftIcon = ({
   className = '',
@@ -78,9 +78,7 @@ export const CardWithLeftIcon = ({
         <div className="d-flex">
           {(title || subtitle) && (
             <div>
-              {title && (
-                <div className={headingStyle}>{title}</div>
-              )}
+              {title && <div className={headingStyle}>{title}</div>}
               {subtitle && (
                 <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>
               )}
@@ -96,7 +94,7 @@ export const CardWithLeftIcon = ({
             />
           )}
         </div>
-        <p className={cardTextStyle}>{children}</p>
+        <div className={cardTextStyle}>{children}</div>
       </div>
     </div>
   );

package/src/lib/components/cards/cardWithTopLeftIcon/index.tsx

@@ -1,9 +1,5 @@
-import {
-  associatedClassForCardState,
-  CardProps,
-  headingForCardSize,
-} from '..';
-import { Icon, arrowRight, featherLogo } from '../icons';
+import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
+import { arrowRight, featherLogo, Icon } from '../icons';
 
 import styles from './style.module.scss';
 
@@ -43,7 +39,9 @@ export const CardWithTopLeftIcon = ({
   const titleContainerStyle = styles['title-container'];
   const headingStyle = headingForCardSize(cardSize);
   const iconStyle = styles['right-icon'];
-  const cardTextStyle = `p-p tc-grey-600 ${cardSize === 'xsmall' ? styles.indent : 'mt16'}`;
+  const cardTextStyle = `p-p tc-grey-600 ${
+    cardSize === 'xsmall' ? styles.indent : 'mt16'
+  }`;
 
   return (
     <div className={cardStyle} {...props}>
@@ -68,7 +66,7 @@ export const CardWithTopLeftIcon = ({
           />
         )}
       </div>
-      <p className={cardTextStyle}>{children}</p>
+      <div className={cardTextStyle}>{children}</div>
     </div>
   );
 };

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -8,7 +8,7 @@ import { UploadStatus, UploadedFile } from '../types';
 interface Props {
   uploadStatus: UploadStatus;
   file: UploadedFile;
-  onRemoveFile: (id: string) => void;
+  onRemoveFile?: (id: string) => void;
   uploading: boolean;
 }
 
@@ -38,11 +38,11 @@ const UploadFileCell: React.FC<Props> = ({
     ERROR: icons.fileErrorIcon,
   };
 
-  const mapDisplayText: { [s in UploadStatus]: string } = {
+  const displayText = {
     UPLOADING: 'Uploading...',
     COMPLETE: name,
     ERROR: error ?? 'Something went wrong. Try uploading again.',
-  };
+  }[uploadStatus];
 
   return (
     <div
@@ -57,8 +57,8 @@ const UploadFileCell: React.FC<Props> = ({
           alt=""
         />
         <div className="w100">
-          <div className={`p-p ${styles['upload-display-text']}`}>
-            {mapDisplayText[uploadStatus]}
+          <div className={`p-p ${styles['upload-display-text']}`} title={displayText}>
+            {displayText}
           </div>
 
           {isUploading && showProgressBar && (
@@ -100,14 +100,16 @@ const UploadFileCell: React.FC<Props> = ({
               </a>
             )}
 
-            <img
-              className={classnames(styles['remove-icon'], {
-                [styles.disabled]: uploading,
-              })}
-              src={hasError ? icons.trashErrorIcon : icons.trashIcon}
-              onClick={() => onRemoveFile(id)}
-              alt="remove"
-            />
+            {onRemoveFile && (
+              <img
+                className={classnames(styles['remove-icon'], {
+                  [styles.disabled]: uploading,
+                })}
+                src={hasError ? icons.trashErrorIcon : icons.trashIcon}
+                onClick={() => onRemoveFile(id)}
+                alt="remove"
+              />
+            )}
           </div>
         )}
       </div>

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: space-between;
 
-  height: 64px;
+  min-height: 64px;
   padding: 8px 16px;
 
   border: 1px solid $ds-grey-400;
@@ -34,7 +34,10 @@
 }
 
 .upload-display-text {
-  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
 }
 
 .progress-bar-container {

package/src/lib/components/multiDropzone/index.stories.tsx

@@ -9,7 +9,7 @@ const story = {
     uploadedFiles: {
       defaultValue: [{
         id: '123456789',
-        name: 'dummyfile.png'
+        name: 'my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg'
       }],
       description: 'List of files to be displayed on the component.',
     },
@@ -75,7 +75,7 @@ export const MultiDropzoneStory = ({
   const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);
 
   const handleOnRemoveFile = (id: string) => {
-    onRemoveFile(id);
+    onRemoveFile?.(id);
     setLocalFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));
   };
 

package/src/lib/components/multiDropzone/index.tsx

@@ -28,7 +28,7 @@ interface MultiDropzoneProps {
   uploadedFiles: UploadedFile[];
   uploading: boolean;
   onFileSelect: (files: File[]) => void;
-  onRemoveFile: (id: string) => void;
+  onRemoveFile?: (id: string) => void;
   accept?: AcceptType;
   isCondensed?: boolean;
   maxFiles?: number;
@@ -152,7 +152,8 @@ const MultiDropzone = ({
               uploadStatus={getUploadStatus(file.progress, file.error)}
               file={file}
               key={file.id}
-              onRemoveFile={onRemoveFile}
+              
+              {...!onRemoveFile ? {} : {onRemoveFile}}
               uploading={uploading}
             />
           ))}