@popsure/dirty-swan 0.26.10 → 0.26.13

package/src/lib/components/modal/index.stories.mdx

@@ -0,0 +1,316 @@
+import { useState } from 'react';
+
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import { BottomModal, RegularModal, BottomOrRegularModal } from '.';
+
+<Meta title="JSX/Modals" />
+
+# Modals
+
+Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.
+
+<Preview>
+  <iframe
+    width="100%"
+    height="450"
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D283%253A1"
+    allowFullScreen
+  ></iframe>
+</Preview>
+
+| attribute   | unit                  | description                                                                            | default value | required |
+| ----------- | --------------------- | -------------------------------------------------------------------------------------- | ------------- | -------- |
+| title       | string                | The title that needs to be displayed on the modal                                      | n/a           | true     |
+| isOpen      | boolean               | When set to `true`, the modal is displayed. When set to `false` the modal gets removed | n/a           | true     |
+| onClose     | `function () => void` | Callback when the user close the modal                                                 | n/a           | true     |
+| children    | React.jsx             | The content that gets displayed on the modal                                           | n/a           | true     |
+| className   | string                | Any additional className                                                               | n/a           | false    |
+| dismissible | boolean               | When set to `false` prevents the user from closing the modal                           | true          | false    |
+
+export const RegularModalStory = () => {
+  const [display, setDisplay] = useState(false);
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2"
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        Regular modal
+      </button>
+      <RegularModal
+        title="Regular modal title"
+        isOpen={display}
+        onClose={() => {
+          setDisplay(false);
+        }}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <p className="p-p">
+            This is a regular modal that is mostly meant to be used on desktop.
+            Need to use it on mobile? Check my friend BottomModal instead! Not
+            sure? Just use BottomOrRegularModal <br /> Do you like this modal?
+            Tell us by answering this short survey!
+          </p>
+          <div className="p-label-container wmx4">
+            <input id="bordered-1" className="p-radio" type="radio" />
+            <label htmlFor="bordered-1" className="p-label p-label--bordered">
+              Yes
+            </label>
+            <input id="bordered-2" className="p-radio" type="radio" />
+            <label
+              htmlFor="bordered-2"
+              className="p-label p-label--bordered mt16"
+            >
+              No
+            </label>
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </RegularModal>
+    </>
+  );
+};
+
+export const BottomModalStory = () => {
+  const [display, setDisplay] = useState(false);
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2 d-block"
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        Bottom modal
+      </button>
+      <BottomModal
+        title="Bottom modal title"
+        isOpen={display}
+        onClose={() => {
+          setDisplay(false);
+        }}
+      >
+        <div style={{ padding: '0 16px 16px 16px' }}>
+          <p className="p-p">
+            This is a bottom modal that is mostly meant to be used on mobile, do
+            you like this modal? Tell us by answering this short survey!
+          </p>
+          <div className="p-label-container wmx4">
+            <input id="bordered-1" className="p-radio" type="radio" />
+            <label htmlFor="bordered-1" className="p-label p-label--bordered">
+              Yes
+            </label>
+            <input id="bordered-2" className="p-radio" type="radio" />
+            <label
+              htmlFor="bordered-2"
+              className="p-label p-label--bordered mt16"
+            >
+              No
+            </label>
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomModal>
+    </>
+  );
+};
+
+export const NonDismissibleModal = () => {
+  const [display, setDisplay] = useState(false);
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2"
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        Open modal
+      </button>
+      <RegularModal
+        title="Non-dismissible modal title"
+        isOpen={display}
+        onClose={() => {
+          setDisplay(false);
+        }}
+        dismissible={false}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <p className="p-p">
+            This modal requires clear user interaction to dismiss it. The close
+            button is hidden, and it cannot be closed using the keyboard nor
+            clicking outside.
+          </p>
+          <button
+            className="p-btn--primary bg-red-500 mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Reject
+          </button>
+          <button
+            className="p-btn--primary mt24 wmn3 ml16"
+            onClick={() => setDisplay(false)}
+          >
+            Accept
+          </button>
+        </div>
+      </RegularModal>
+    </>
+  );
+};
+
+## Regular modal
+
+Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left "X" icon.
+
+If you want to use it for Mobile only, you should check [Bottom modal](##Bottom-modal) instead.
+
+Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](##Bottom-or-Regular-modal).
+
+<RegularModalStory />
+
+```typescript
+import React, { useState } from 'react';
+import { BottomModal } from '@popsure/dirty-swan';
+
+export default () => {
+  const [display, setDisplay] = useState(false);
+
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2 d-block"
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        Bottom modal
+      </button>
+      <BottomModal
+        title="Bottom modal title"
+        isOpen={display}
+        onClose={() => {
+          setDisplay(false);
+        }}
+      >
+        <div style={{ padding: '0 16px 16px 16px' }}>
+          <p className="p-p">
+            This is a bottom modal that is mostly meant to be used on mobile, do
+            you like this modal? Tell us by answering this short survey!
+          </p>
+          <div className="p-label-container wmx4">
+            <input id="bordered-1" className="p-radio" type="radio" />
+            <label htmlFor="bordered-1" className="p-label p-label--bordered">
+              Yes
+            </label>
+            <input id="bordered-2" className="p-radio" type="radio" />
+            <label
+              htmlFor="bordered-2"
+              className="p-label p-label--bordered mt16"
+            >
+              No
+            </label>
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomModal>
+    </>
+  );
+};
+```
+
+## Bottom modal
+
+Regular modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left "X" icon.
+
+If you want to use it for Desktop only, you should check [Regular modal](##Regular-modal) instead.
+
+Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](##Bottom-or-Regular-modal).
+
+<BottomModalStory />
+
+```typescript
+import React, { useState } from 'react';
+import { BottomModal } from '@popsure/dirty-swan';
+
+export default () => {
+  const [display, setDisplay] = useState(false);
+
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2 d-block"
+        onClick={() => {
+          setDisplay(!display);
+        }}
+      >
+        Bottom modal
+      </button>
+      <BottomModal
+        title="Bottom modal title"
+        isOpen={display}
+        onClose={() => {
+          setDisplay(false);
+        }}
+      >
+        <div style={{ padding: '0 16px 16px 16px' }}>
+          <p className="p-p">
+            This is a bottom modal that is mostly meant to be used on mobile, do
+            you like this modal? Tell us by answering this short survey!
+          </p>
+          <div className="p-label-container wmx4">
+            <input id="bordered-1" className="p-radio" type="radio" />
+            <label htmlFor="bordered-1" className="p-label p-label--bordered">
+              Yes
+            </label>
+            <input id="bordered-2" className="p-radio" type="radio" />
+            <label
+              htmlFor="bordered-2"
+              className="p-label p-label--bordered mt16"
+            >
+              No
+            </label>
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomModal>
+    </>
+  );
+};
+```
+
+## Bottom or Regular modal
+
+Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.
+
+## Non-dismissible modal
+
+Setting the `dismissible` prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
+This prop can be useful if we want the user to explicitly interact with the modal options.
+
+**Warning:** a modal with the `dismissible` prop can only be closed by changing the `isOpen` prop to `false`.
+
+<NonDismissibleModal />

package/src/lib/components/modal/index.ts

@@ -0,0 +1,14 @@
+import BottomModal from './bottomModal';
+import RegularModal from './regularModal';
+import BottomOrRegularModal from './bottomOrRegularModal';
+
+export interface Props {
+  title: string;
+  isOpen: boolean;
+  children: React.ReactNode;
+  onClose: () => void;
+  className?: string;
+  dismissible?: boolean;
+}
+
+export { BottomModal, RegularModal, BottomOrRegularModal };

package/src/lib/components/modal/regularModal/img/close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M6 6L18 18" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/modal/regularModal/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Props } from '..';
+import useOnClose from '../hooks/useOnClose';
+
+import styles from './style.module.scss';
+
+import imageClose from './img/close.svg';
+
+export default ({
+  title,
+  isOpen,
+  children,
+  onClose,
+  className = '',
+  dismissible = true,
+}: Props) => {
+  const { isClosing, handleContainerClick, handleOnClose } = useOnClose(
+    onClose,
+    isOpen,
+    dismissible
+  );
+
+  if (!isOpen) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={isClosing ? styles['overlay--close'] : styles.overlay}
+      onClick={handleOnClose}
+    >
+      <div
+        className={`${
+          isClosing ? styles['container--close'] : styles.container
+        } ${className}`}
+        onClick={handleContainerClick}
+      >
+        <div className={styles.header}>
+          <div className={`p-h2 ${styles.title}`}>{title}</div>
+          {dismissible && (
+            <button
+              type="button"
+              className={styles.close}
+              onClick={handleOnClose}
+            >
+              <img src={imageClose} alt="Close" />
+            </button>
+          )}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/components/modal/regularModal/style.module.scss

@@ -0,0 +1,106 @@
+@keyframes fade-in {
+  0% {
+    background-color: rgba($color: #000000, $alpha: 0);
+  }
+  100% {
+    background-color: rgba($color: #000000, $alpha: 0.3);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    background-color: rgba($color: #000000, $alpha: 0.3);
+  }
+  to {
+    background-color: rgba($color: #000000, $alpha: 0);
+  }
+}
+
+@keyframes appear-in {
+  0% {
+    transform: translateY(24px) translateX(-50%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) translateX(-50%);
+    opacity: 1;
+  }
+}
+
+@keyframes disappear-out {
+  0% {
+    transform: translateY(0) translateX(-50%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(24px) translateX(-50%);
+    opacity: 0;
+  }
+}
+
+.overlay {
+  position: fixed;
+
+  z-index: 100;
+
+  overflow: auto;
+
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  animation: fade-in 0.3s both;
+
+  &--close {
+    @extend .overlay;
+    animation-delay: 0.1s;
+    animation: fade-out 0.3s both;
+  }
+}
+
+.container {
+  position: relative;
+
+  background-color: white;
+
+  border-radius: 8px;
+
+  max-width: 592px;
+  width: fit-content;
+  width: -moz-fit-content;
+
+  animation-name: appear-in;
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+
+  top: calc(100vh / 2 - 50% / 2);
+  left: 50%;
+  transform: translateX(-50%);
+
+  margin-bottom: 80px;
+
+  &--close {
+    @extend .container;
+    animation-name: disappear-out;
+    animation-duration: 0.4s;
+    animation-delay: 0s;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 24px 24px 0 24px;
+}
+
+.close {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import styles from './style.module.scss';
+import icons from '../icons/index';
+import { UploadStatus, UploadedFile, FileType } from '..';
+
+const getUploadingIcon = (type: FileType | string): string => {
+  switch (type) {
+    case 'heic':
+      return icons.heicIcon;
+    case 'bmp':
+      return icons.bmpIcon;
+    case 'doc':
+      return icons.docIcon;
+    case 'docx':
+      return icons.docxIcon;
+    case 'jpeg':
+      return icons.jpegIcon;
+    case 'jpg':
+      return icons.jpgIcon;
+    case 'pdf':
+      return icons.pdfIcon;
+    case 'png':
+      return icons.pngIcon;
+    default:
+      return icons.genericIcon;
+  }
+};
+
+const getCompleteIcon = (type: FileType | string): string => {
+  switch (type) {
+    case 'heic':
+      return icons.heicCompleteIcon;
+    case 'bmp':
+      return icons.bmpCompleteIcon;
+    case 'doc':
+      return icons.docCompleteIcon;
+    case 'docx':
+      return icons.docxCompleteIcon;
+    case 'jpeg':
+      return icons.jpegCompleteIcon;
+    case 'jpg':
+      return icons.jpgCompleteIcon;
+    case 'pdf':
+      return icons.pdfCompleteIcon;
+    case 'png':
+      return icons.pngCompleteIcon;
+    default:
+      return icons.genericCompleteIcon;
+  }
+};
+
+export default ({
+  uploadStatus,
+  file,
+  onRemoveFile,
+  uploading,
+}: {
+  uploadStatus: UploadStatus;
+  file: UploadedFile;
+  onRemoveFile: (id: string) => void;
+  uploading: boolean;
+}) => {
+  const { id, error, type, name, progress, previewUrl } = file;
+
+  const mapFileIcon: { [k in UploadStatus]: string } = {
+    UPLOADING: getUploadingIcon(type),
+    COMPLETE: getCompleteIcon(type),
+    ERROR: icons.errorIcon,
+  };
+
+  const mapDisplayText: { [s in UploadStatus]: string } = {
+    UPLOADING: 'Uploading...',
+    COMPLETE: name,
+    ERROR: error ?? 'Something went wrong. Try uploading again.',
+  };
+
+  return (
+    <div
+      className={classnames(`mt8 ${styles['upload-file-cell']}`, {
+        [styles['upload-file-cell-error']]: uploadStatus === 'ERROR',
+      })}
+    >
+      <div className={`w100 ${styles['cell-left-section']}`}>
+        <img
+          className={styles['main-icon']}
+          src={mapFileIcon[uploadStatus]}
+          alt=""
+        />
+        <div className="w100">
+          <div className={`p-p wmx5 ${styles['upload-display-text']}`}>
+            {mapDisplayText[uploadStatus]}
+          </div>
+          {uploadStatus === 'UPLOADING' && (
+            <div className={`mt8 w100 ${styles['progress-bar-container']}`}>
+              <div className={`${styles['progress-bar']}`} />
+              <div
+                className={`${styles['progress-bar-filler']}`}
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={classnames(styles['cell-right-section'], {
+          [styles['cell-right-section-complete']]: uploadStatus === 'COMPLETE',
+        })}
+      >
+        {uploadStatus === 'UPLOADING' ? (
+          <div className={`p-spinner p-spinner__m ${styles.spinner}`} />
+        ) : (
+          <div>
+            {uploadStatus === 'COMPLETE' && (
+              <a
+                className={styles['view-icon']}
+                href={previewUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={icons.eyeIcon} alt="preview" />
+              </a>
+            )}
+            <img
+              className={classnames(styles['remove-icon'], {
+                [styles.disabled]: uploading,
+              })}
+              src={icons.trashIcon}
+              onClick={() => onRemoveFile(id)}
+              alt="remove"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};