@popsure/dirty-swan 0.27.3 → 0.27.6

package/dist/lib/components/autocompleteAddress/demo.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 export declare const WithoutAddress: () => JSX.Element;
 export declare const WithAddress: () => JSX.Element;
+export declare const WithoutAddressLocalized: () => JSX.Element;
+export declare const WithAddressLocalized: () => JSX.Element;

package/dist/lib/components/autocompleteAddress/index.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="react" />
 import { Address } from '@popsure/public-models';
-declare const AutoCompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, }: {
+declare const AutoCompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: {
     apiKey: string;
     address?: Partial<Address> | undefined;
     onAddressChange: (address: Partial<Address>) => void;
+    placeholders?: {
+        manualAddressEntry?: string | undefined;
+        street?: string | undefined;
+        houseNumber?: string | undefined;
+        additionalInformation?: string | undefined;
+        postcode?: string | undefined;
+        city?: string | undefined;
+    } | undefined;
+    manualAddressEntryTexts?: {
+        preText?: string | undefined;
+        cta?: string | undefined;
+    } | undefined;
 }) => JSX.Element;
 export default AutoCompleteAddress;

package/dist/lib/components/dateSelector/index.d.ts

@@ -5,7 +5,7 @@ export declare const daysInMonthOfYear: ({ month, year, }: {
     month: number;
     year: number;
 }) => number;
-declare const DateSelector: ({ value, onChange, yearBoundaries, displayCalendar, }: {
+declare const DateSelector: ({ value, onChange, yearBoundaries, displayCalendar, placeholders, dayjsLocale, firstDayOfWeek, }: {
     value?: string | undefined;
     onChange: (date: string) => void;
     yearBoundaries: {
@@ -13,5 +13,12 @@ declare const DateSelector: ({ value, onChange, yearBoundaries, displayCalendar,
         max: number;
     };
     displayCalendar?: boolean | undefined;
+    placeholders?: {
+        day?: string | undefined;
+        month?: string | undefined;
+        year?: string | undefined;
+    } | undefined;
+    dayjsLocale?: ILocale | undefined;
+    firstDayOfWeek?: number | undefined;
 }) => JSX.Element;
 export default DateSelector;

package/dist/lib/components/multiDropzone/index.d.ts

@@ -14,6 +14,7 @@ interface Props {
     uploadedFiles: UploadedFile[];
     uploading: boolean;
     onRemoveFile: (id: string) => void;
+    isCondensed?: boolean;
 }
-declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, }: Props) => JSX.Element;
+declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, }: Props) => JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.3",
+  "version": "0.27.6",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/autocompleteAddress/demo.tsx

@@ -36,3 +36,53 @@ export const WithAddress = () => {
     />
   );
 };
+
+export const WithoutAddressLocalized = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>();
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+      placeholders={{
+        manualAddressEntry: 'Adresse suchen',
+        street: 'Straße',
+        houseNumber: 'Hausnummer',
+        additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',
+        postcode: 'PLZ',
+        city: 'Stadt',
+      }}
+      manualAddressEntryTexts={{
+        preText: 'Oder ',
+        cta: 'Adresse direkt eingeben',
+      }}
+    />
+  );
+};
+
+export const WithAddressLocalized = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>({});
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+      placeholders={{
+        manualAddressEntry: 'Adresse suchen',
+        street: 'Straße',
+        houseNumber: 'Hausnummer',
+        additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
+        postcode: 'PLZ',
+        city: 'Stadt',
+      }}
+      manualAddressEntryTexts={{
+        preText: 'Oder ',
+        cta: 'Adresse direkt eingeben',
+      }}
+    />
+  );
+};

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

@@ -3,17 +3,24 @@ import { useState } from 'react';
 import { Meta, Preview } from '@storybook/addon-docs/blocks';
 
 import AutocompleteAddress from '.';
-import { WithoutAddress, WithAddress } from './demo';
+import {
+  WithoutAddress,
+  WithoutAddressLocalized,
+  WithAddress,
+  WithAddressLocalized,
+} from './demo';
 
 <Meta title="JSX/Autocomplete Address" component={AutocompleteAddress} />
 
 # Autocomplete Address
 
-| attribute       | unit                                      | description                                                                                                                    | default value | required |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
-| address         | `Partial<Address>`                        | The address                                                                                                                    | undefined     | false    |
-| onAddressChange | `function (newAddress: Partial<Address>)` | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
-| apiKey          | string                                    | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
+| attribute               | unit                                                                                                                                        | description                                                                                                                    | default value | required |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
+| address                 | `Partial<Address>`                                                                                                                          | The address                                                                                                                    | undefined     | false    |
+| onAddressChange         | `function (newAddress: Partial<Address>)`                                                                                                   | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
+| apiKey                  | string                                                                                                                                      | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
+| placeholders            | `{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }` | Placeholder text                                                                                                               | undefined     | false    |
+| manualAddressEntryTexts | `{ preText?: string; cta: string?; }`                                                                                                       | The CTA that enables manual address entry and the text preceding it                                                            | undefined     | false    |
 
 Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.
 
@@ -31,10 +38,12 @@ This component is for now only restricted to "address" types and will restrict e
 
 <WithAddress />
 
-```typescript
-import React, { useState } from 'react';
-import { Address } from '@popsure/public-models';
+### Localized inputs
 
+<WithoutAddressLocalized />
+<WithAddressLocalized />
+
+```typescript import React, {useState} from 'react'; import {Address} from '@popsure/public-models';
 import AutoCompleteAddress from '.';
 
 export default () => {

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

@@ -53,10 +53,24 @@ const AutoCompleteAddress = ({
   apiKey,
   address: initialAddress,
   onAddressChange,
+  placeholders,
+  manualAddressEntryTexts,
 }: {
   apiKey: string;
   address?: Partial<Address>;
   onAddressChange: (address: Partial<Address>) => void;
+  placeholders?: {
+    manualAddressEntry?: string;
+    street?: string;
+    houseNumber?: string;
+    additionalInformation?: string;
+    postcode?: string;
+    city?: string;
+  };
+  manualAddressEntryTexts?: {
+    preText?: string;
+    cta?: string;
+  };
 }) => {
   const [manualAddressEntry, setManualAddressEntry] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -216,7 +230,9 @@ const AutoCompleteAddress = ({
               id="autocomplete"
               data-cy="autocomplete"
               type="text"
-              placeholder="Search for address"
+              placeholder={
+                placeholders?.manualAddressEntry || 'Search for address'
+              }
               ref={autocompleteElement}
             />
             {hasLoadedGoogleAPI === false && (
@@ -227,12 +243,12 @@ const AutoCompleteAddress = ({
           </div>
         ) : (
           <>
-            <div className={`d-flex ${styles['input-line']}`}>
+            <div className={`d-flex c-gap16 ${styles['input-line']}`}>
               <Input
                 className="w100"
                 data-cy="autocomplete"
                 type="text"
-                placeholder="Street"
+                placeholder={placeholders?.street || 'Street'}
                 value={address?.street || ''}
                 onChange={(e) => {
                   const newAddress = {
@@ -247,7 +263,7 @@ const AutoCompleteAddress = ({
               <Input
                 className={`wmx2 ${styles['house-number-input']}`}
                 data-cy="autocomplete-house-number"
-                placeholder="House Number"
+                placeholder={placeholders?.houseNumber || 'House Number'}
                 value={address?.houseNumber || ''}
                 onChange={(e) => {
                   const newAddress = {
@@ -263,7 +279,10 @@ const AutoCompleteAddress = ({
             <Input
               className="mt16"
               data-cy="autocomplete-additional-info"
-              placeholder="Additional information (C/O, appartment…)"
+              placeholder={
+                placeholders?.additionalInformation ||
+                'Additional information (C/O, apartment, …)'
+              }
               value={address?.additionalInformation || ''}
               onChange={(e) => {
                 const newAddress = {
@@ -274,11 +293,11 @@ const AutoCompleteAddress = ({
                 setAddress(newAddress);
               }}
             />
-            <div className={`d-flex mt16 ${styles['input-line']}`}>
+            <div className={`d-flex mt16 c-gap16 ${styles['input-line']}`}>
               <Input
                 className="w100"
                 data-cy="autocomplete-postcode"
-                placeholder="Postcode"
+                placeholder={placeholders?.postcode || 'Postcode'}
                 value={address?.postcode || ''}
                 onChange={(e) => {
                   const newAddress = {
@@ -293,7 +312,7 @@ const AutoCompleteAddress = ({
               <Input
                 className="w100"
                 data-cy="autocomplete-city"
-                placeholder="City"
+                placeholder={placeholders?.city || 'City'}
                 value={address?.city || ''}
                 onChange={(e) => {
                   const newAddress = {
@@ -311,12 +330,12 @@ const AutoCompleteAddress = ({
       </div>
       {manualAddressEntry === false && (
         <div className="p-p mt8">
-          Or{' '}
+          {manualAddressEntryTexts?.preText || 'Or '}
           <span
             className="p-a fw-bold c-pointer"
             onClick={handleEnterAddressManually}
           >
-            Enter address manually
+            {manualAddressEntryTexts?.cta || 'Enter address manually'}
           </span>
         </div>
       )}

package/src/lib/components/autocompleteAddress/style.module.scss

@@ -2,12 +2,6 @@
 @use "../../scss/public/colors" as *;
 
 .input-line {
-  margin-left: -16px;
-
-  > * {
-    margin-left: 16px;
-  }
-
   @include p-size-mobile {
     flex-direction: column;
 
@@ -19,7 +13,7 @@
 
 .house-number-input {
   @include p-size-mobile {
-    max-width: none;
+    max-width: none !important;
   }
 }
 

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Meta, Preview } from '@storybook/addon-docs/blocks';
 
 import DateSelector from '.';
+import de from 'dayjs/locale/de';
 
 <Meta title="JSX/Date selector" component={DateSelector} />
 
@@ -60,3 +61,46 @@ export const DateSelectorWithCalendarStory = () => {
 };
 
 <DateSelectorWithCalendarStory />
+
+### Localization
+
+| attribute      | unit                                               | description                                                                             | default value | required |
+| -------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------- | -------- |
+| placeholders   | `{ day?: string; month: string?; year?: string; }` | Placeholder text                                                                        | undefined     | false    |
+| dayjsLocale    | `ILocale`                                          | Imported [Day.js locale Object](https://day.js.org/docs/en/customization/customization) | undefined     | false    |
+| firstDayOfWeek | number                                             | Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)                       | 0             | false    |
+
+The `dayjsLocale` and `firstDayOfWeek` properties are used to localize the calendar of the `DateSelector`, whereas
+the `placeholders` object can be used to change the text of the different dropdowns. If no `dayjsLocale` is supplied, the default locale 'en' will be used for the DateSelector.
+
+Additional locales can be imported from dayjs like
+`import de from 'dayjs/locale/de';` and then passed on to the component:
+`<DateSelector ... dayjsLocale={de} />`
+
+[List of all supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)
+
+export const DateSelectorWithCalendarLocalizedStory = () => {
+  const [date, setDate] = useState('');
+  return (
+    <div style={{ paddingBottom: '120px' }}>
+      <DateSelector
+        value={date}
+        className="mt24"
+        yearBoundaries={{ min: 2020, max: 2022 }}
+        onChange={(date) => {
+          setDate(date);
+        }}
+        displayCalendar={true}
+        placeholders={{
+          day: 'Tag',
+          month: 'Monat',
+          year: 'Jahr',
+        }}
+        dayjsLocale={de}
+        firstDayOfWeek={1}
+      />
+    </div>
+  );
+};
+
+<DateSelectorWithCalendarLocalizedStory />

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

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
+
 import localeData from 'dayjs/plugin/localeData';
 import { CalendarDate } from '@popsure/public-models';
 import DayPicker from 'react-day-picker';
@@ -13,7 +14,6 @@ import './datepicker.scss';
 import calendarIcon from './icons/calendar.svg';
 
 dayjs.extend(localeData);
-
 const COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
 
 /*
@@ -55,11 +55,21 @@ const DateSelector = ({
   onChange,
   yearBoundaries,
   displayCalendar,
+  placeholders,
+  dayjsLocale,
+  firstDayOfWeek = 0,
 }: {
   value?: string;
   onChange: (date: string) => void;
   yearBoundaries: { min: number; max: number };
   displayCalendar?: boolean;
+  placeholders?: {
+    day?: string;
+    month?: string;
+    year?: string;
+  };
+  dayjsLocale?: ILocale;
+  firstDayOfWeek?: number;
 }) => {
   const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
   const daysInSelectedDate = calendarDateValue
@@ -68,9 +78,19 @@ const DateSelector = ({
         year: calendarDateValue.year,
       })
     : 31;
+
+  const localeDate = dayjsLocale
+    ? dayjs().locale(dayjsLocale).localeData()
+    : dayjs().locale('en').localeData();
+
+  const localizedWeekdays = localeDate.weekdays();
+  const localizedWeekdaysShort = localeDate.weekdaysShort();
+  const localizedMonths = localeDate.months();
+  const localizedMonthsShort = localeDate.monthsShort();
+
   const availableDays = fillArray(1, daysInSelectedDate);
   const availableYears = fillArray(yearBoundaries.max, yearBoundaries.min);
-  const availableMonths = dayjs.monthsShort();
+  const availableMonths = localizedMonthsShort;
 
   const [date, setDate] = useState<Partial<CalendarDate>>(
     calendarDateValue ?? {}
@@ -154,7 +174,7 @@ const DateSelector = ({
             }}
           >
             <option value="" disabled={true}>
-              Day
+              {placeholders?.day || 'Day'}
             </option>
             {availableDays.map((day) => (
               <option key={day} value={day}>
@@ -174,7 +194,7 @@ const DateSelector = ({
             }}
           >
             <option value="" disabled={true}>
-              Month
+              {placeholders?.month || 'Month'}
             </option>
             {availableMonths.map((month, i) => (
               <option key={month} value={i + 1}>
@@ -195,7 +215,7 @@ const DateSelector = ({
           }}
         >
           <option value="" disabled={true}>
-            Year
+            {placeholders?.year || 'Year'}
           </option>
           {availableYears.map((year) => (
             <option key={year} value={year}>
@@ -236,6 +256,11 @@ const DateSelector = ({
                 before: dateCalendarFromMonth,
                 after: dateCalendarToMonth,
               }}
+              firstDayOfWeek={firstDayOfWeek}
+              locale={dayjsLocale?.name || 'en'}
+              months={localizedMonths}
+              weekdaysLong={localizedWeekdays}
+              weekdaysShort={localizedWeekdaysShort}
             />
           )}
         </div>

package/src/lib/components/multiDropzone/icons/upload.svg

@@ -1,5 +1,5 @@
-<svg width="74" height="65" viewBox="0 0 74 65" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.7331 51.0225H16.9671C12.207 51.0225 2 46.6745 2 35.4347C2 23.341 12.207 19.2864 17.3221 19.2864C18.0198 13.4585 21.8677 2.64515 36.0438 1.896C49.6806 1.896 55.7671 14.2015 54.7655 23.3697C60.0996 23.0395 72 25.4458 72 37.4209C72 47.6065 61.3317 51.4782 55.9975 51.0225H47.5947" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M36.9999 62.9938V29.5552" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M28.6452 37.91L37 29.5552L45.3548 37.91" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.589 52.324H16.6368C12.2734 52.324 2.91699 48.3383 2.91699 38.0351C2.91699 26.9493 12.2734 23.2325 16.9623 23.2325C17.6018 17.8902 21.1291 7.97805 34.1238 7.29132C46.6242 7.29132 52.2035 18.5714 51.2854 26.9756C56.175 26.6729 67.0837 28.8787 67.0837 39.8558C67.0837 49.1926 57.3044 52.7417 52.4147 52.324H44.7121" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35 63.2981V32.646" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.3428 40.3045L35.0013 32.646L42.6599 40.3045" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -69,6 +69,27 @@ MultiDropzone component allows upload of multiple documents / files.
   />
 </Preview>
 
+### Condensed view
+
+<Preview>
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        type: 'pdf',
+        progress: '100',
+        name: 'test_file_name.pdf',
+        token: 'abc',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    isCondensed
+  />
+</Preview>
+
 ### Error state
 
 <Preview>

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import classnames from 'classnames';
 
@@ -44,6 +44,7 @@ interface Props {
   uploadedFiles: UploadedFile[];
   uploading: boolean;
   onRemoveFile: (id: string) => void;
+  isCondensed?: boolean;
 }
 
 export default ({
@@ -51,6 +52,7 @@ export default ({
   onFileSelect,
   uploading,
   onRemoveFile,
+  isCondensed = false,
 }: Props) => {
   const onDrop = useCallback(
     (acceptedFiles) => {
@@ -62,16 +64,23 @@ export default ({
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   return (
-    <div className={`w100 ${styles.container}`}>
+    <div className={styles.container}>
       <div
-        className={classnames(`w100 ta-center ${styles['upload-container']}`, {
-          [styles['upload-container-disabled']]: uploading,
-        })}
+        className={classnames(
+          `w100 ta-center br8 c-pointer ${styles.dropzoneContainer}`,
+          {
+            [styles['dropzoneContainerDisabled']]: uploading,
+          }
+        )}
         {...getRootProps()}
       >
         <input {...getInputProps()} />
-        <img src={icons.uploadIcon} alt="" />
-        <div className="p-h4 mt8">
+        <img
+          className={isCondensed ? styles.img : ''}
+          src={icons.uploadIcon}
+          alt="purple cloud with an arrow"
+        />
+        <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
           {uploading
             ? 'Please wait while uploading file...'
             : 'Choose file or drag & drop'}
@@ -79,7 +88,7 @@ export default ({
         <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
       </div>
       {uploadedFiles.length > 0 && (
-        <div className={`w100 mt16`}>
+        <div className="w100 mt16">
           {uploadedFiles.map((file) => {
             const uploadStatus = getUploadStatus(file.progress, file.error);
             return (

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

@@ -1,32 +1,37 @@
 @use "../../scss/public/grid" as *;
 
 .container {
-  background-color: white;
-  padding: 24px;
-  box-shadow: 0px 2px 3px rgba(38, 38, 46, 0.04);
-  border-radius: 8px;
-
-  @include p-size-mobile {
-    padding: 16px;
-  }
+  background-color: transparent;
 }
 
-.upload-container {
+.dropzoneContainer {
   border: 1px dashed var(--ds-primary-500);
   padding: 32px 0;
-  cursor: pointer;
-  border-radius: 8px;
+  background-color: white;
+
+  transition: all 0.6s ease-in-out;
+}
+
+.img {
+  vertical-align: middle;
+  margin-right: 8px;
+  height: 18px;
+}
+
+.textInline {
+  display: inline-flex;
 }
 
-.upload-container:focus {
+.dropzoneContainer:focus {
   outline: none;
 }
 
-.upload-container:hover {
+.dropzoneContainer:hover {
   background-color: var(--ds-primary-100);
   transition: 0.5s ease;
 }
 
-.upload-container-disabled {
+.dropzoneContainerDisabled {
   pointer-events: none;
+  opacity: 0.4
 }