@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

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

@@ -0,0 +1,69 @@
+import { Accept, ErrorCode, FileError } from "react-dropzone";
+import { formatBytes } from "../../../util/formatBytes";
+import { 
+  AcceptType, 
+  DOCUMENT_FILES, 
+  FileType, 
+  IMAGE_FILES, 
+  TextOverrides,
+  UploadStatus } from "../types";
+
+export const getUploadStatus = (progress: number, error?: string): UploadStatus => {
+  if (error) {
+    return 'ERROR';
+  }
+
+  if (progress < 100) {
+    return 'UPLOADING';
+  }
+
+  return 'COMPLETE';
+};
+
+const formatMimeType = (type: string, values: FileType[]): Accept  => {
+  const formatedValues = {} as Accept;
+
+  values.forEach((value) => {
+    formatedValues[`${type}/${value}`] = [`.${value}`];
+  });
+
+  return formatedValues;
+};
+
+export const DOCUMENT_FILES_ACCEPT = formatMimeType("application", DOCUMENT_FILES);
+export const IMAGE_FILES_ACCEPT = formatMimeType("image", IMAGE_FILES);
+  
+export const getFormattedAcceptObject = (accept: AcceptType = {}): Accept => {
+  if (accept === "document") {
+    return DOCUMENT_FILES_ACCEPT;
+  };
+
+  if (accept === "image") {
+    return IMAGE_FILES_ACCEPT;
+  };
+
+  return accept;
+}
+  
+export const formatAcceptFileList = (accept: Accept): string => (
+  Object.values(accept)
+    .reduce((acc, value) => [...acc, ...value], [])
+    .join(", ")
+    .replace(/\./g, '')
+    .toUpperCase()
+);
+
+export const getErrorMessage = (
+  { code, message }: FileError,
+  { fileList = "", maxSize }: { fileList?: string, maxSize?: number },
+  textOverrides?: TextOverrides,
+): string => {
+  switch (code) {
+    case ErrorCode.FileInvalidType:
+      return `${textOverrides?.fileTypeError || "File type must be one of"} ${fileList}`;
+    case ErrorCode.FileTooLarge:
+      return `${textOverrides?.fileTooLargeError || "File is too large. It must be less than"} ${formatBytes(maxSize || 0)}.`;
+    default:
+      return message;
+  }
+}

package/src/lib/components/segmentedControl/index.test.tsx

@@ -0,0 +1,45 @@
+import { render } from '../../util/testUtils';
+
+import SegmentedControl from '.';
+
+const setup = (onChange: (selectedIndex: number) => void = () => {}) => {
+  return render(
+    <SegmentedControl
+      values={['kg', 'lbs']}
+      onChange={onChange}
+      selectedIndex={0}
+    />
+  );
+};
+
+describe('SegmentedControl component', () => {
+  it('Should provide the index of the clicked button', async () => {
+    const callback = jest.fn();
+    const { getAllByRole, user } = setup(callback);
+    const buttons = getAllByRole('button');
+
+    // click first button
+    await user.click(buttons[0]);
+
+    // click second button
+    await user.click(buttons[1]);
+
+    expect(callback.mock.calls).toEqual([[0], [1]]);
+  });
+
+  it('Should provide the index of the selected button on key down', async () => {
+    const callback = jest.fn();
+    const { getAllByRole, user } = setup(callback);
+    const buttons = getAllByRole('button');
+
+    // focus first button and select with keyboard
+    buttons[0].focus();
+    await user.keyboard('{enter}');
+
+    // focus second button and select with keyboard
+    buttons[1].focus();
+    await user.keyboard('{enter}');
+
+    expect(callback.mock.calls).toEqual([[0], [1]]);
+  });
+});

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

@@ -56,6 +56,7 @@ const SegmentedControl = ({
                   onChange(index);
                 }}
                 className={styles.chip}
+                key={typeof value === 'string' ? value : value.title}
               >
                 {typeof value === 'string' ? (
                   <div

package/src/lib/scss/index.scss

@@ -5,6 +5,8 @@
 
 @import 'public/colors';
 
+@import 'third-party';
+
 html {
   box-sizing: border-box;
 }

package/src/lib/scss/private/components/_input.scss

@@ -158,9 +158,7 @@
   &--bordered {
     align-items: center;
 
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 16px;
+    padding: 8px 16px;
 
     border-radius: 8px;
     border: 1px solid $ds-grey-400;

package/src/lib/scss/public/demo.tsx

@@ -164,7 +164,7 @@ const colors = [
   {
     name: 'Grey 500',
     code: 'grey-500',
-    hex: '#b4b4ba',
+    hex: '#91919c',
   },
   {
     name: 'Grey 600',

package/src/lib/scss/third-party/_google_places.scss

@@ -0,0 +1,62 @@
+@use "../../scss/public/font-weight.scss" as *;
+
+.pac-item {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  cursor: pointer;
+
+  border-top: none;
+
+  font-family: Lato, sans-serif;
+
+  &:hover {
+    background-color: var(--ds-grey-200);
+  }
+}
+
+.pac-item-selected {
+  background-color: var(--ds-primary-100);
+}
+
+.pac-item {
+  padding-left: 16px;
+}
+
+.pac-matched,
+.pac-item-query,
+.pac-item {
+  font-size: 16px;
+  //   font-weight: $p-font-weight-normal;
+}
+
+.pac-icon {
+  display: none;
+}
+
+@keyframes appear-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.pac-container {
+  background-color: white;
+  border: 1px solid var(--ds-grey-400);
+  box-shadow: none;
+  border-radius: 8px;
+  margin-top: 8px;
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+
+  &::after {
+    content: ('');
+    display: none;
+  }
+}

package/src/lib/scss/third-party/_index.scss

@@ -0,0 +1 @@
+@import 'google_places';

package/src/lib/scss/utils/_index.scss

@@ -1,3 +1,15 @@
 @function url-encoded-color($color) {
   @return '%23' + str-slice('#{$color}', 2, -1);
 }
+
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/src/lib/util/formatBytes/index.test.ts

@@ -0,0 +1,19 @@
+import { formatBytes } from '.';
+
+describe('Format bytes', () => {
+  it('Should format to 1KB with no decimals', () => {
+    expect(formatBytes(1024)).toEqual("1 KB");
+  });
+
+  it('Should format to 1KB with two decimals', () => {
+    expect(formatBytes(1234, 2)).toEqual("1.21 KB");
+  });
+
+  it('Should format to 0 bytes', () => {
+    expect(formatBytes(0)).toEqual("0 Bytes");
+  });
+
+  it('Should format to 1MB', () => {
+    expect(formatBytes(1049000)).toEqual("1 MB");
+  });
+});

package/src/lib/util/formatBytes/index.ts

@@ -0,0 +1,13 @@
+const k = 1024;
+const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+export function formatBytes(bytes: number, decimals = 0): string {
+  if (!+bytes) {
+    return '0 Bytes';
+  }
+
+  const dm = decimals < 0 ? 0 : decimals;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}

package/src/lib/util/testUtils/customRender.tsx

@@ -0,0 +1,15 @@
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+
+interface CustomRenderResult extends RenderResult {
+ user: UserEvent;
+}
+
+export const customRender = (
+  ui: JSX.Element,
+  options: RenderOptions = {}
+): CustomRenderResult => ({
+  user: userEvent.setup(),
+  ...render(ui, options),
+});

package/src/lib/util/testUtils/index.ts

@@ -0,0 +1,5 @@
+// Re-export all @testing-library/react exports
+export * from '@testing-library/react';
+
+// Override render method with user-event
+export { customRender as render } from './customRender';

package/src/setupTests.js

@@ -1,8 +1,56 @@
+import '@testing-library/jest-dom';
+
 window.google = {
   maps: {
+    StyledMapType: class {},
+    Marker: class {
+      setPosition() {}
+    },
+    Map: class {
+      constructor() {
+        this.mapTypes = { set: jest.fn() };
+      }
+
+      setMapTypeId() {
+        return jest.fn();
+      }
+      panTo() {}
+      setZoom() {}
+    },
+    LatLngBounds: class {},
     places: {
-      Autocomplete: class {},
+      Autocomplete: class {
+        addListener() {
+          return jest.fn();
+        }
+      },
+      AutocompleteService: class {},
+      PlacesServiceStatus: {
+        INVALID_REQUEST: 'INVALID_REQUEST',
+        NOT_FOUND: 'NOT_FOUND',
+        OK: 'OK',
+        OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
+        REQUEST_DENIED: 'REQUEST_DENIED',
+        UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+        ZERO_RESULTS: 'ZERO_RESULTS',
+      },
+      PlacesAutocomplete: {
+        INVALID_REQUEST: 'INVALID_REQUEST',
+        NOT_FOUND: 'NOT_FOUND',
+        OK: 'OK',
+        OVER_QUERY_LIMIT: 'OVER_QUERY_LIMIT',
+        REQUEST_DENIED: 'REQUEST_DENIED',
+        UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+        ZERO_RESULTS: 'ZERO_RESULTS',
+      },
+      PlacesService: class {
+        findPlaceFromQuery() {
+          return jest.fn();
+        }
+      },
     },
-    StyledMapType: class {},
+
+    MarkerClusterer: class {},
+    Geocoder: class {},
   },
 };