pixel-react 1.5.4 → 1.5.6

package/src/components/FileDropzone/Dropzone.tsx

@@ -1,55 +1,57 @@
-import { FC } from 'react';
-import classNames from 'classnames';
-import './FileDropzone.scss';
-import { DroppableProps } from './types';
-import Button from '../Button';
-import Typography from '../Typography';
-
-const Dropzone: FC<DroppableProps> = ({
-  icon,
-  primaryLabel,
-  secondaryLabel,
-  buttonLabel,
-  getRootProps,
-  getInputProps,
-  isDragActive = false,
-}) => {
-  return (
-    <div
-      {...getRootProps()}
-      className={classNames('ff-file-dropzone', {
-        'ff-file-dropzone--active': isDragActive,
-      })}
-    >
-      <div className="ff-file-dropzone-content__icon">{icon}</div>
-      <div className="ff-file-dropzone-content__labels">
-        <Typography
-          as="p"
-          fontWeight="semi-bold"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {primaryLabel}
-        </Typography>
-        <Typography
-          as="p"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {secondaryLabel}
-        </Typography>
-        <Button
-          variant="primary"
-          label={buttonLabel}
-          className="choose-file-btn"
-        >
-          <input {...getInputProps()} />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default Dropzone;
+import { FC } from 'react';
+import classNames from 'classnames';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+import Button from '../Button';
+import Typography from '../Typography';
+
+const Dropzone: FC<DroppableProps> = ({
+  icon,
+  primaryLabel,
+  secondaryLabel,
+  buttonLabel,
+  getRootProps,
+  getInputProps,
+  isDragActive = false,
+  height = 188,
+}) => {
+  return (
+    <div
+      {...getRootProps()}
+      className={classNames('ff-file-dropzone', {
+        'ff-file-dropzone--active': isDragActive,
+      })}
+      style={{height: height}}
+    >
+      <div className="ff-file-dropzone-content__icon">{icon}</div>
+      <div className="ff-file-dropzone-content__labels">
+        <Typography
+          as="p"
+          fontWeight="semi-bold"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {primaryLabel}
+        </Typography>
+        <Typography
+          as="p"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {secondaryLabel}
+        </Typography>
+        <Button
+          variant="primary"
+          label={buttonLabel}
+          className="choose-file-btn"
+        >
+          <input {...getInputProps()} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Dropzone;

package/src/components/FileDropzone/FileDropzone.scss

@@ -1,137 +1,136 @@
-@mixin column-flex-gap($gap: 0) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-}
-
-@mixin center {
-  display: grid;
-  place-items: center;
-}
-
-@mixin icon-container($height: 24px, $width: 24px) {
-  height: $height;
-  width: $width;
-}
-
-.ff-file-dropzone-wrapper {
-  @include column-flex-gap(10px);
-
-  .ff-file-dropzone {
-    width: 640px;
-    height: 188px;
-    padding: 16px 0;
-    border-radius: 8px;
-    background: var(--file-dropzone-default-color);
-    border: 1px dashed var(--brand-color);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-    gap: 8px;
-    transition: background-color 0.2s ease;
-
-    &:hover,
-    &--active {
-      background-color: var(--file-dropzone-selected-color);
-    }
-
-    &-content {
-      &__icon {
-        height: 80px;
-        width: 80px;
-        display: grid;
-        place-items: center;
-      }
-
-      &__labels {
-        .choose-file-btn {
-          margin: 0 auto;
-          position: relative;
-          font-weight: 600;
-          line-height: 15px;
-
-          input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .ff-file-details-wrapper {
-    @include column-flex-gap(10px);
-    width: 640px;
-    max-height: 300px;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    padding: 2px;
-
-    ::-webkit-scrollbar {
-      width: 2px;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: thin;
-
-    .ff-file-details {
-      @include column-flex-gap(10px);
-
-      &__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px;
-        border-radius: 4px;
-        background-color: var(--file-details-bg);
-        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
-        overflow: hidden;
-
-        .ff-file-info {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          width: 90%;
-
-          .ff-file-info__icon {
-            @include center;
-            @include icon-container;
-          }
-
-          &__name-wrapper {
-            @include column-flex-gap(2px);
-            justify-content: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 100%;
-
-            &__name {
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              display: block;
-              color: var(--text-color);
-            }
-          }
-        }
-
-        .ff-file-actions {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          &__icon-replace,
-          &__icon-remove {
-            @include icon-container;
-            @include center;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
+@mixin column-flex-gap($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin icon-container($height: 24px, $width: 24px) {
+  height: $height;
+  width: $width;
+}
+
+.ff-file-dropzone-wrapper {
+  @include column-flex-gap(10px);
+  
+
+  .ff-file-dropzone {
+    padding: 16px 0;
+    border-radius: 8px;
+    background: var(--file-dropzone-default-color);
+    border: 1px dashed var(--brand-color);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+    transition: background-color 0.2s ease;
+
+    &:hover,
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+
+    &-content {
+      &__icon {
+        height: 80px;
+        width: 80px;
+        display: grid;
+        place-items: center;
+      }
+
+      &__labels {
+        .choose-file-btn {
+          margin: 0 auto;
+          position: relative;
+          font-weight: 600;
+          line-height: 15px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    width: 640px;
+    max-height: 300px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 2px;
+
+    ::-webkit-scrollbar {
+      width: 2px;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: thin;
+
+    .ff-file-details {
+      @include column-flex-gap(10px);
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        border-radius: 4px;
+        background-color: var(--file-details-bg);
+        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
+        overflow: hidden;
+
+        .ff-file-info {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          width: 90%;
+
+          .ff-file-info__icon {
+            @include center;
+            @include icon-container;
+          }
+
+          &__name-wrapper {
+            @include column-flex-gap(2px);
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+
+            &__name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              display: block;
+              color: var(--text-color);
+            }
+          }
+        }
+
+        .ff-file-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,83 +1,86 @@
-import { StoryObj, Meta } from '@storybook/react';
-import FileDropzone from './FileDropzone';
-import Toaster from '../Toast';
-import { useState } from 'react';
-
-const meta: Meta<typeof FileDropzone> = {
-  title: 'Components/FileDropzone',
-  component: FileDropzone,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof FileDropzone>;
-
-const defaultArgs = {
-  accept: ['.png'],
-  multiple: true,
-  maxFiles: 5,
-  maxSize: 5000000,
-  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
-  invalidFileMessage: 'Invalid file format',
-  fileExistMessage: 'File already exist with same name and type',
-};
-
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export const withMIMEValidation: Story = {
-  args: {
-    ...defaultArgs,
-    accept: [
-      'image/png',
-      'image/jpeg',
-      'application/x-zip-compressed',
-      'application/zip',
-    ],
-    validateMIMEType: true,
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [showToaster, setShowToaster] = useState<boolean>(false);
-
-    const showMaxFilesError = () => {
-      setShowToaster(true);
-      setTimeout(() => {
-        setShowToaster(false);
-      }, 2000);
-    };
-
-    return (
-      <>
-        <FileDropzone
-          {...defaultArgs}
-          accept={[
-            'image/png',
-            'image/jpeg',
-            'application/x-zip-compressed',
-            'application/zip',
-          ]}
-          validateMIMEType={true}
-          onMaxFilesError={showMaxFilesError}
-        />
-        {showToaster && (
-          <Toaster
-            isOpen={showToaster}
-            variant="danger"
-            toastTitle="Error"
-            toastMessage={'Max 5 files can be uploaded'}
-          />
-        )}
-      </>
-    );
-  },
-};
-
-export default meta;
+import { StoryObj, Meta } from '@storybook/react';
+import FileDropzone from './FileDropzone';
+import Toaster from '../Toast';
+import { useState } from 'react';
+import React from 'react';
+
+const meta: Meta<typeof FileDropzone> = {
+  title: 'Components/FileDropzone',
+  component: FileDropzone,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FileDropzone>;
+
+const defaultArgs = {
+  accept: ['.png'],
+  multiple: true,
+  maxFiles: 5,
+  maxSize: 5000000,
+  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
+  invalidFileMessage: 'Invalid file format',
+  fileExistMessage: 'File already exist with same name and type',
+  width: 700,
+  height: 350,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const withMIMEValidation: Story = {
+  args: {
+    ...defaultArgs,
+    accept: [
+      'image/png',
+      'image/jpeg',
+      'application/x-zip-compressed',
+      'application/zip',
+    ],
+    validateMIMEType: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [showToaster, setShowToaster] = useState<boolean>(false);
+
+    const showMaxFilesError = () => {
+      setShowToaster(true);
+      setTimeout(() => {
+        setShowToaster(false);
+      }, 2000);
+    };
+
+    return (
+      <>
+        <FileDropzone
+          {...defaultArgs}
+          accept={[
+            'image/png',
+            'image/jpeg',
+            'application/x-zip-compressed',
+            'application/zip',
+          ]}
+          validateMIMEType={true}
+          onMaxFilesError={showMaxFilesError}
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;