@popsure/dirty-swan 27.0.0 → 27.0.5

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/scss/private/_reset.scss

@@ -147,3 +147,8 @@ input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

package/dist/lib/scss/private/base/_typography.scss

@@ -95,10 +95,17 @@ body {
 .p-a {
   color: $ds-primary-500;
   text-decoration: none;
+
   &:hover,
   &:focus {
     color: $ds-primary-700;
   }
+
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
 }
 
 // Layout

package/dist/lib/scss/private/base/demo.tsx

@@ -11,6 +11,10 @@ export const Typography = () => (
     <h4 className="p-h4">The quick brown fox jumps over the lazy dog</h4>
     <p className="p-p">The quick brown fox jumps over the lazy dog</p>
     <p className="p-p--small">The quick brown fox jumps over the lazy dog</p>
+    <a href="#" className="p-a">
+      The quick brown fox jumps over the lazy dog
+    </a>
+    <p className="p-error">The quick brown fox jumps over the lazy dog</p>
   </>
 );
 

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

@@ -94,10 +94,7 @@
 .p-radio:checked {
   & + label::before {
     border-color: $ds-primary-500;
-
-    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="#{util.url-encoded-color($ds-primary-500)}" /></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
+    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="#{util.url-encoded-color($ds-primary-500)}"/></svg>');
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "27.0.0",
+  "version": "27.0.5",
   "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/scss/private/_reset.scss

@@ -147,3 +147,8 @@ input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

package/src/lib/scss/private/base/_typography.scss

@@ -95,10 +95,17 @@ body {
 .p-a {
   color: $ds-primary-500;
   text-decoration: none;
+
   &:hover,
   &:focus {
     color: $ds-primary-700;
   }
+
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
 }
 
 // Layout

package/src/lib/scss/private/base/demo.tsx

@@ -11,6 +11,10 @@ export const Typography = () => (
     <h4 className="p-h4">The quick brown fox jumps over the lazy dog</h4>
     <p className="p-p">The quick brown fox jumps over the lazy dog</p>
     <p className="p-p--small">The quick brown fox jumps over the lazy dog</p>
+    <a href="#" className="p-a">
+      The quick brown fox jumps over the lazy dog
+    </a>
+    <p className="p-error">The quick brown fox jumps over the lazy dog</p>
   </>
 );
 

package/src/lib/scss/private/base/typography.stories.mdx

@@ -48,6 +48,8 @@ Dirty swan provides classes to override default heading.
 <h4 class="p-h4">The quick brown fox jumps over the lazy dog</h4>
 <p class="p-p">The quick brown fox jumps over the lazy dog</p>
 <p class="p-p--small">The quick brown fox jumps over the lazy dog</p>
+<a class="p-a">The quick brown fox jumps over the lazy dog</a>
+<p class="p-error">The quick brown fox jumps over the lazy dog</p>
 ```
 
 ## Layout
@@ -69,3 +71,4 @@ Dirty swan provides classes to override default heading.
 | ----------- | ------------------- |
 | `fs-italic` | font-style: italic; |
 | `fs-normal` | font-style: normal; |
+

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

@@ -94,10 +94,7 @@
 .p-radio:checked {
   & + label::before {
     border-color: $ds-primary-500;
-
-    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="#{util.url-encoded-color($ds-primary-500)}" /></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
+    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="#{util.url-encoded-color($ds-primary-500)}"/></svg>');
   }
 }
 

package/src/lib/scss/public/grid.stories.mdx

@@ -19,9 +19,9 @@ You can use the following helper within your sass code.
 
 | Help             | Range   |
 | ---------------- | ------- |
-| `p-size-mobile`  | < 34rem |
-| `p-size-tablet`  | > 34rem |
-| `p-size-desktop` | > 64rem |
+| `p-size-mobile`  | <= 34rem |
+| `p-size-tablet`  | >= 34rem |
+| `p-size-desktop` | >= 64rem |
 
 ### Example