@popsure/dirty-swan 0.28.0 → 0.28.2

package/src/lib/components/comparisonTable/components/TableRowHeader/index.test.tsx

@@ -0,0 +1,78 @@
+import { render } from '../../../../util/testUtils';
+import '@testing-library/jest-dom';
+
+import TableRowHeader, { TableRowHeaderProps } from '.';
+
+const mockOnClick = jest.fn();
+
+const label = "Table label";
+const subtitle = "Subtitle label";
+const icon = "🎉";
+const buttonTestId = "ds-table-button";
+
+const setup = (props: Partial<TableRowHeaderProps> = {}) => render(
+  <TableRowHeader 
+    label={label} 
+    {...props}
+  />
+);
+
+describe('TableRowHeader component', () => {
+  it("should render label", () => {
+    const { getByText } = setup();
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("should not render subtitle", () => {
+    const { queryByText } = setup();
+
+    expect(queryByText(subtitle)).not.toBeInTheDocument();
+  });
+
+  it("should render subtitle", () => {
+    const { getByText } = setup({ subtitle });
+
+    expect(getByText(subtitle)).toBeInTheDocument();
+  });
+
+  it("should not render icon", () => {
+    const { queryByText } = setup();
+
+    expect(queryByText(icon)).not.toBeInTheDocument();
+  });
+
+  it("should render icon", () => {
+    const { getByText } = setup({ icon });
+
+    expect(getByText(icon)).toBeInTheDocument();
+  });
+
+  it("should not render button if onClickInfo is not defined", () => {
+    const { queryByTestId } = setup();
+
+    expect(queryByTestId(buttonTestId)).not.toBeInTheDocument();
+  });
+
+  it("should render button if onClickInfo is defined", () => {
+    const { getByTestId } = setup({ onClickInfo: mockOnClick });
+
+    expect(getByTestId(buttonTestId)).toBeInTheDocument();
+  });
+
+  it("should not call onClickInfo if not defined", async () => {
+    const { getByText, user } = setup();
+
+    await user.click(getByText(label));
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  it("should call onClickInfo if defined", async () => {
+    const { getByText, user } = setup({ onClickInfo: mockOnClick });
+
+    await user.click(getByText(label));
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

package/src/lib/components/comparisonTable/components/TableRowHeader/index.tsx

@@ -1,35 +1,30 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import TableInfoButton from '../TableInfoButton';
-
+import TableButton from '../TableButton';
 import styles from './style.module.scss';
 
-const TableRowHeader = (props: {
+interface TableRowHeaderProps {
   label: string;
   icon?: string;
   subtitle?: string;
   onClickInfo?: () => void;
-}) => {
-  const { icon, label, subtitle, onClickInfo } = props;
-  return (
-    <div className="d-flex">
-      <span className={`mr8 ${styles.icon}`}>{icon}</span>
-      <div>
-        <p className="p-p d-inline">
-          <span
-            className={classNames({
-              mr8: onClickInfo,
-            })}
-          >
+}
+
+const TableRowHeader = ({ icon, label, subtitle, onClickInfo }: TableRowHeaderProps) => (
+  <div className="d-flex">
+    {icon && <span className={`mr8 ${styles.icon}`}>{icon}</span>}
+    <div>
+      <p className="p-p d-inline">
+        {!onClickInfo ? (
+          <span>{label}</span>
+        ) : (
+          <TableButton className="mr8" onClick={onClickInfo}>
             {label}
-          </span>
-          {onClickInfo && <TableInfoButton onClick={onClickInfo} />}
-        </p>
-        {subtitle && <p className="p-p--small tc-grey-500">{subtitle}</p>}
-      </div>
+          </TableButton>
+        )}
+      </p>
+      {subtitle && <p className="p-p--small tc-grey-500">{subtitle}</p>}
     </div>
-  );
-};
+  </div>
+);
 
+export type { TableRowHeaderProps };
 export default TableRowHeader;

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

@@ -1,6 +1,6 @@
 import { Meta, Preview } from '@storybook/addon-docs/blocks';
 
-import { ComparisonTable, TableRating, TableTrueFalse } from '.';
+import { ComparisonTable, TableRating, TableRowHeader, TableButton, TableTrueFalse } from '.';
 
 <Meta title="JSX/Comparison Table" component={ComparisonTable} />
 
@@ -81,8 +81,12 @@ export const ComparisonTableWithData = () => {
         {
           id: 3,
           key: 'rating',
-          label: 'Our rating',
-          render: (value) => <TableRating type="star" rating={value} />,
+          label: <TableRowHeader label="Our Rating" onClickInfo={console.log} />,
+          render: (value) => (
+            <TableButton className="jc-center" onClick={console.log}>
+              <TableRating type="star" rating={value} />
+            </TableButton>
+          ),
         },
         {
           id: 5,
@@ -297,8 +301,12 @@ export const ComparisonTableWithData = () => {
         {
           id: 3,
           key: 'rating',
-          label: 'Our rating',
-          render: (value) => <TableRating type="star" rating={value} />,
+          label: <TableRowHeader label="Our Rating" onClickInfo={console.log} />,
+          render: (value) => (
+            <TableButton className="jc-center" onClick={console.log}>
+              <TableRating type="star" rating={value} />
+            </TableButton>
+          ),
         },
         {
           id: 5,

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

@@ -5,6 +5,7 @@ import { AccordionItem } from './components/AccordionItem';
 import Chevron from './components/Chevron';
 import Row from './components/Row';
 import TableArrows from './components/TableArrows';
+import TableButton from './components/TableButton';
 import TableInfoButton from './components/TableInfoButton';
 import TableRating from './components/TableRating';
 import TableRowHeader from './components/TableRowHeader';
@@ -257,6 +258,7 @@ const ComparisonTable = <T extends { id: number }>(
 
 export {
   ComparisonTable,
+  TableButton,
   TableInfoButton,
   TableRating,
   TableRowHeader,

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

@@ -16,11 +16,12 @@ import {
 import { 
   AcceptType, 
   ErrorMessage, 
-  FileType, 
+  FileType,
   TextOverrides, 
   UploadedFile, 
   UploadStatus 
 } from './types';
+
 import { formatBytes } from '../../util/formatBytes';
 
 interface MultiDropzoneProps {
@@ -125,7 +126,6 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
             id,
             name: message,
             progress: 0,
-            type: "",
           }}
           key={id}
           onRemoveFile={() => removeError(id)}

package/src/lib/components/multiDropzone/types.ts

@@ -1,17 +1,30 @@
 import { Accept } from "react-dropzone";
 
-export type UploadStatus = 'UPLOADING' | 'COMPLETE' | 'ERROR';
+export enum FileMimeTypes {
+  bmp = "image/bmp",
+  doc = "application/msword",
+  docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  heic = "image/heic",
+  jpeg = "image/jpeg",
+  jpg = "image/jpg",
+  pdf = "application/pdf",
+  png = "image/png",
+  tif = "image/tiff",
+  tiff = "image/tiff",
+  webp = "image/webp",
+}
 
-export const DOCUMENT_FILES = ['doc', 'docx', 'pdf'];
-export const IMAGE_FILES = ['heic', 'bmp', 'jpeg', 'jpg', 'png'];
+export type FileType = keyof typeof FileMimeTypes;
 
-export const FILE_TYPES = [...DOCUMENT_FILES, ...IMAGE_FILES];
-export type FileType = typeof FILE_TYPES[number];
+export type UploadStatus = 'UPLOADING' | 'COMPLETE' | 'ERROR';
+
+export const DOCUMENT_FILES: FileType[] = ['doc', 'docx', 'pdf'];
+export const IMAGE_FILES: FileType[] = ['heic', 'bmp', 'jpeg', 'jpg', 'png'];
 
 export interface UploadedFile {
   id: string;
   name: string;
-  type: FileType | string;
+  type?: FileType;
   previewUrl?: string;
   progress: number;
   error?: string;
@@ -20,6 +33,7 @@ export interface UploadedFile {
 }
 
 export type AcceptType = "document" | "image" | Accept;
+
 export interface TextOverrides {
   currentlyUploadingText?: string;
   fileTypeError?: string;

package/src/lib/components/multiDropzone/utils/index.test.ts

@@ -7,8 +7,8 @@ import {
 } from '.';
 
 const documentsAccept = {
-  'application/doc': ['.doc'],
-  'application/docx': ['.docx'],
+  'application/msword': ['.doc'],
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
   'application/pdf': ['.pdf']
 };
 

package/src/lib/components/multiDropzone/utils/index.ts

@@ -3,10 +3,12 @@ import { formatBytes } from "../../../util/formatBytes";
 import { 
   AcceptType, 
   DOCUMENT_FILES, 
-  FileType, 
+  FileMimeTypes,
+  FileType,
   IMAGE_FILES, 
   TextOverrides,
-  UploadStatus } from "../types";
+  UploadStatus
+} from "../types";
 
 export const getUploadStatus = (progress: number, error?: string): UploadStatus => {
   if (error) {
@@ -20,18 +22,18 @@ export const getUploadStatus = (progress: number, error?: string): UploadStatus
   return 'COMPLETE';
 };
 
-const formatMimeType = (type: string, values: FileType[]): Accept  => {
+const formatMimeType = (values: FileType[]): Accept  => {
   const formatedValues = {} as Accept;
 
   values.forEach((value) => {
-    formatedValues[`${type}/${value}`] = [`.${value}`];
+    formatedValues[FileMimeTypes[value]] = [`.${value}`];
   });
 
   return formatedValues;
 };
 
-export const DOCUMENT_FILES_ACCEPT = formatMimeType("application", DOCUMENT_FILES);
-export const IMAGE_FILES_ACCEPT = formatMimeType("image", IMAGE_FILES);
+export const DOCUMENT_FILES_ACCEPT = formatMimeType(DOCUMENT_FILES);
+export const IMAGE_FILES_ACCEPT = formatMimeType(IMAGE_FILES);
   
 export const getFormattedAcceptObject = (accept: AcceptType = {}): Accept => {
   if (accept === "document") {

package/src/lib/index.tsx

@@ -2,7 +2,12 @@ import DateSelector from './components/dateSelector';
 import SignaturePad from './components/signaturePad';
 import AutocompleteAddress from './components/autocompleteAddress';
 import Input from './components/input';
-import MultiDropzone from './components/multiDropzone';
+import MultiDropzone, { 
+  FileType,
+  MultiDropzoneProps,
+  UploadedFile,
+  UploadStatus
+} from './components/multiDropzone';
 import DownloadButton from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
@@ -27,12 +32,20 @@ import {
   TableRating,
   TableTrueFalse,
   TableRowHeader,
+  TableButton,
   TableInfoButton,
   TableHeader,
 } from './components/comparisonTable';
 import SegmentedControl from './components/segmentedControl';
 import Markdown from './components/markdown';
 
+export type {
+  FileType,
+  MultiDropzoneProps,
+  UploadedFile,
+  UploadStatus
+};
+
 export {
   DateSelector,
   SignaturePad,
@@ -58,6 +71,7 @@ export {
   TableRating,
   TableTrueFalse,
   TableRowHeader,
+  TableButton,
   TableInfoButton,
   SegmentedControl,
   Markdown,

package/dist/esm/_commonjsHelpers-0f86abda.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers-0f86abda.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}