@popsure/dirty-swan 0.26.9 → 0.26.12

package/src/lib/components/dateSelector/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 18.1406L9 12.1406L15 6.14062" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/dateSelector/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.04504 18.1406L15.045 12.1406L9.04504 6.14062" stroke="#26262E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import DateSelector from '.';
+
+<Meta title="JSX/Date selector" component={DateSelector} />
+
+# Date selector
+
+Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.
+
+<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%3D293%253A169"
+    allowFullScreen
+  ></iframe>
+</Preview>
+
+## Default example
+
+### Without calendar
+
+export const DateSelectorWithoutCalendarStory = () => {
+  const [date, setDate] = useState('');
+  return (
+    <>
+      <DateSelector
+        value={date}
+        className="mt24"
+        yearBoundaries={{ min: 2020, max: 2022 }}
+        onChange={(date) => {
+          setDate(date);
+        }}
+      />
+    </>
+  );
+};
+
+<DateSelectorWithoutCalendarStory />
+
+### With calendar
+
+export const DateSelectorWithCalendarStory = () => {
+  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}
+      />
+    </div>
+  );
+};
+
+<DateSelectorWithCalendarStory />

package/src/lib/components/dateSelector/index.test.ts

@@ -0,0 +1,33 @@
+import { fillArray, daysInMonthOfYear } from '.';
+
+describe('fillArray tests', () => {
+  it('Should fill array from 1 to 10 ascending', () => {
+    const expectedOutput = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+    expect(fillArray(1, 10)).toEqual(expectedOutput);
+  });
+
+  it('Should fill array from 10 to 5 descending', () => {
+    const expectedOutput = [10, 9, 8, 7, 6, 5];
+
+    expect(fillArray(10, 5)).toEqual(expectedOutput);
+  });
+});
+
+describe('Days for month in year', () => {
+  it('Should return 28 for February 2019', () => {
+    expect(daysInMonthOfYear({ month: 2, year: 2019 })).toEqual(28);
+  });
+
+  it('Should return 31 for January 2019', () => {
+    expect(daysInMonthOfYear({ month: 1, year: 2019 })).toEqual(31);
+  });
+
+  it('Should return 29 for February 2016', () => {
+    expect(daysInMonthOfYear({ month: 2, year: 2016 })).toEqual(29);
+  });
+
+  it('Should return 31 for October 2016', () => {
+    expect(daysInMonthOfYear({ month: 10, year: 2016 })).toEqual(31);
+  });
+});

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

@@ -0,0 +1,247 @@
+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';
+
+import {
+  calendarDateToISODate,
+  isoStringtoCalendarDate,
+} from '../../util/calendarDate';
+import styles from './style.module.scss';
+import './datepicker.scss';
+import calendarIcon from './icons/calendar.svg';
+
+dayjs.extend(localeData);
+
+const COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
+
+/*
+  Fill an array with an increment from a number to another number.
+  i.e. fillArray from 1 to 4 will return the following: [1, 2, 3, 4]
+  
+  You can fill descending by flipping the to value
+  i.e. fillArray from 4 to 1 will return the following: [4, 3, 2, 1]
+*/
+export const fillArray = (from: number, to: number): number[] => {
+  const ascending = from > to;
+  const arraySize = Math.abs(from - to) + 1;
+  const toReturn = new Array(arraySize).fill(0).map((_, index) => {
+    return ascending ? to + index : from + index;
+  });
+
+  if (ascending) {
+    return toReturn.reverse();
+  }
+
+  return toReturn;
+};
+
+/*
+  Return the maximum number of days given a month and a year.
+*/
+export const daysInMonthOfYear = ({
+  month,
+  year,
+}: {
+  month: number;
+  year: number;
+}) => {
+  return dayjs(`${year}-${month}`).daysInMonth();
+};
+
+const DateSelector = ({
+  value,
+  onChange,
+  yearBoundaries,
+  displayCalendar,
+}: {
+  value?: string;
+  onChange: (date: string) => void;
+  yearBoundaries: { min: number; max: number };
+  displayCalendar?: boolean;
+}) => {
+  const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
+  const daysInSelectedDate = calendarDateValue
+    ? daysInMonthOfYear({
+        month: calendarDateValue.month,
+        year: calendarDateValue.year,
+      })
+    : 31;
+  const availableDays = fillArray(1, daysInSelectedDate);
+  const availableYears = fillArray(yearBoundaries.max, yearBoundaries.min);
+  const availableMonths = dayjs.monthsShort();
+
+  const [date, setDate] = useState<Partial<CalendarDate>>(
+    calendarDateValue ?? {}
+  );
+  const [openCalendar, setOpenCalendar] = useState(false);
+
+  const calendarDefaultDate =
+    dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
+      ? dayjs().toDate()
+      : dayjs().set('year', yearBoundaries.max).toDate();
+  const selectedDateInDateType = value
+    ? dayjs(value).toDate()
+    : calendarDefaultDate;
+  const dateCalendarFromMonth = dayjs(String(yearBoundaries.min))
+    .startOf('year')
+    .toDate();
+  const dateCalendarToMonth = dayjs(String(yearBoundaries.max))
+    .endOf('year')
+    .toDate();
+
+  useEffect(() => {
+    if (calendarDateValue) {
+      setDate(calendarDateValue);
+    }
+  }, [value]); //eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (
+      date.year !== undefined &&
+      date.month !== undefined &&
+      date.day !== undefined
+    ) {
+      if (
+        calendarDateValue === undefined ||
+        date.day !== calendarDateValue.day ||
+        date.month !== calendarDateValue.month ||
+        date.year !== calendarDateValue.year
+      ) {
+        onChange(
+          calendarDateToISODate({
+            day: date.day,
+            month: date.month,
+            year: date.year,
+          })
+        );
+      }
+    }
+  }, [date]); //eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleOnChange = (key: keyof CalendarDate, v: number) => {
+    const newValue = { ...date, [key]: v };
+    if (
+      key !== 'day' &&
+      newValue.month !== undefined &&
+      newValue.year !== undefined &&
+      newValue.day !== undefined
+    ) {
+      const cappedDays = Math.min(
+        daysInMonthOfYear({ month: newValue.month, year: newValue.year }),
+        newValue.day
+      );
+      setDate({ ...newValue, day: cappedDays });
+    } else {
+      setDate(newValue);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles['date-selector-container']}>
+        <div className={styles['row-container']}>
+          <select
+            data-cy="date-selector-day"
+            className={`p-select ${styles['day-select']}`}
+            id="day"
+            name="day"
+            required={true}
+            value={date.day ?? ''}
+            onChange={(e) => {
+              handleOnChange('day', parseInt(e.target.value, 10));
+            }}
+          >
+            <option value="" disabled={true}>
+              Day
+            </option>
+            {availableDays.map((day) => (
+              <option key={day} value={day}>
+                {day}
+              </option>
+            ))}
+          </select>
+          <select
+            data-cy="date-selector-month"
+            className={`p-select ${styles['month-select']}`}
+            id="month"
+            name="month"
+            required={true}
+            value={date.month ?? ''}
+            onChange={(e) => {
+              handleOnChange('month', parseInt(e.target.value, 10));
+            }}
+          >
+            <option value="" disabled={true}>
+              Month
+            </option>
+            {availableMonths.map((month, i) => (
+              <option key={month} value={i + 1}>
+                {month}
+              </option>
+            ))}
+          </select>
+        </div>
+        <select
+          data-cy="date-selector-year"
+          className={`p-select ${styles['year-select']}`}
+          id="year"
+          name="year"
+          required={true}
+          value={date.year ?? ''}
+          onChange={(e) => {
+            handleOnChange('year', parseInt(e.target.value, 10));
+          }}
+        >
+          <option value="" disabled={true}>
+            Year
+          </option>
+          {availableYears.map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+      {displayCalendar && (
+        <div className={styles['date-calendar-container']}>
+          <img
+            className="c-pointer"
+            src={calendarIcon}
+            alt="calendar"
+            onClick={() => setOpenCalendar(!openCalendar)}
+          />
+          {openCalendar && (
+            <DayPicker
+              month={selectedDateInDateType}
+              showOutsideDays={true}
+              fromMonth={dateCalendarFromMonth}
+              toMonth={dateCalendarToMonth}
+              selectedDays={selectedDateInDateType}
+              onDayClick={(date: Date) => {
+                if (
+                  dayjs(date).isAfter(dateCalendarFromMonth) ||
+                  dayjs(date).isBefore(dateCalendarToMonth)
+                ) {
+                  const selectedDate = dayjs(date).format(
+                    COLLECTABLE_DATE_FORMAT
+                  );
+                  onChange(selectedDate);
+                  setOpenCalendar(false);
+                }
+              }}
+              pagedNavigation={true}
+              disabledDays={{
+                before: dateCalendarFromMonth,
+                after: dateCalendarToMonth,
+              }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DateSelector;

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

@@ -0,0 +1,77 @@
+@use '../../scss/public/grid' as *;
+
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.date-selector-container {
+  margin-left: -8px;
+
+  display: flex;
+
+  > select {
+    margin-left: 8px;
+
+    @include p-size-mobile {
+      margin-left: 0;
+    }
+  }
+
+  @include p-size-mobile {
+    margin-left: 0;
+    display: unset;
+  }
+}
+
+.row-container {
+  > select {
+    margin-left: 8px;
+
+    @include p-size-mobile {
+      margin-left: 0;
+    }
+  }
+
+  @include p-size-mobile {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.day-select {
+  width: 88px;
+
+  @include p-size-mobile {
+    flex: 1;
+    margin-right: 8px;
+  }
+}
+
+.month-select {
+  width: 104px;
+
+  @include p-size-mobile {
+    flex: 1;
+  }
+}
+
+.year-select {
+  width: 104px;
+
+  @include p-size-mobile {
+    display: block;
+
+    margin-top: 8px;
+    width: 100%;
+  }
+}
+
+.date-calendar-container {
+  position: relative;
+  margin-left: 24px;
+
+  @include p-size-mobile {
+    margin-left: 16px;
+  }
+}

package/src/lib/components/downloadButton/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6666 5.83203L7.49992 14.9987L3.33325 10.832" stroke="#B4B4BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/downloadButton/icons/download.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.33325 8.33301L10.4999 12.4997L14.6666 8.33301" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 12.5V2.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,59 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import DownloadButton from '.';
+
+<Meta title="JSX/DownloadButton" component={DownloadButton} />
+
+# DownloadButton
+
+DownloadButton component displays progress and status of downloading files.
+
+## Examples
+
+### Idle state
+
+<Preview>
+  <DownloadButton downloadStatus="INITIAL" onDownload={() => {}} />
+</Preview>
+
+### Generating state
+
+<Preview>
+  <DownloadButton downloadStatus="GENERATING" onDownload={() => {}} />
+</Preview>
+
+### Download complete state
+
+<Preview>
+  <DownloadButton downloadStatus="COMPLETED" onDownload={() => {}} />
+</Preview>
+
+### Error state
+
+<Preview>
+  <DownloadButton downloadStatus="FAILED" onDownload={() => {}} />
+</Preview>
+
+### Custom Error state
+
+<Preview>
+  <DownloadButton
+    customFail={
+      <>
+        An error occured while generating your documents. Please try again or{' '}
+        <a
+          className='tc-primary-500'
+          href={`mailto:help@yourcompany.com`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          contact us
+        </a>
+        .
+      </>
+    }
+    downloadStatus="FAILED"
+    onDownload={() => {}}
+  />
+</Preview>
+

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

@@ -0,0 +1,67 @@
+import Button from '../button';
+import { DownloadStatus } from '../../models/download';
+
+import checkIcon from './icons/check.svg';
+import downloadIcon from './icons/download.svg';
+import styles from './style.module.scss';
+
+interface Props {
+  downloadStatus: DownloadStatus;
+  onDownload: () => void;
+  className?: string;
+  customFail?: React.ReactNode;
+}
+
+const InitialButton = ({ onDownload }: { onDownload: () => void }) => (
+  <Button
+    className={`w100 ${styles.button}`}
+    buttonTitle="Download"
+    leftIcon={{ src: downloadIcon, alt: 'download arrow icon' }}
+    onClick={onDownload}
+    data-cy="download-documents-button"
+  />
+);
+
+// TODO: Allow setting loading to true to display text
+const GeneratingButton = () => (
+  <Button
+    className={`w100 ${styles.button}`}
+    buttonTitle="Generating"
+    loading={true}
+  />
+);
+
+const CompletedChip = () => (
+  <div className={styles['chip-complete']}>
+    <img src={checkIcon} alt="grey check" />
+    <div className="p-h4 tc-grey-500 ml8">Download complete</div>
+  </div>
+);
+
+const DownloadButton = ({
+  downloadStatus,
+  onDownload,
+  className = '',
+  customFail,
+}: Props) => {
+  const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {
+    INITIAL: <InitialButton onDownload={onDownload} />,
+    GENERATING: <GeneratingButton />,
+    COMPLETED: <CompletedChip />,
+    FAILED: <InitialButton onDownload={onDownload} />,
+  };
+
+  return (
+    <div className={`d-flex fd-column ai-center ${className}`}>
+      <div className="ws4">{mapDownloadButton[downloadStatus]}</div>
+      {downloadStatus === 'FAILED' && (
+        <div className="p-notice p-notice--danger p-p mt40 wmx5">
+          {customFail ??
+            'An error occured when generating documents. Please try again or contact us.'}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DownloadButton;

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

@@ -0,0 +1,19 @@
+@use "../../scss/public/colors" as *;
+
+.button {
+  height: 48px;
+}
+
+.chip-complete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: white;
+
+  border-radius: 8px;
+
+  padding: 8px 16px;
+
+  height: 48px;
+}

package/src/lib/components/downloadRing/icons/check-outside-circle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default () => (
+  <svg
+    width="63"
+    height="63"
+    viewBox="0 0 63 63"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M57.75 29.0849V31.4999C57.7468 37.1605 55.9138 42.6684 52.5245 47.2022C49.1352 51.7359 44.3711 55.0526 38.9428 56.6576C33.5145 58.2626 27.7128 58.0699 22.403 56.1082C17.0932 54.1465 12.5597 50.5209 9.47877 45.7722C6.39782 41.0235 4.93445 35.4061 5.3069 29.7577C5.67935 24.1094 7.86767 18.7327 11.5455 14.4297C15.2233 10.1267 20.1936 7.12777 25.715 5.88027C31.2364 4.63278 37.0132 5.20352 42.1838 7.50739"
+      stroke="#90DF9B"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M57.75 10.5L31.5 36.7762L23.625 28.9012"
+      stroke="#90DF9B"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/lib/components/downloadRing/icons/download-cloud.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+export default () => (
+  <svg
+    width="81"
+    height="60"
+    viewBox="0 0 81 60"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className={styles['fill-primary-500']}
+      d="M40.5003 0.52832C34.2609 0.52832 27.9875 2.90796 23.2303 7.66515C19.6924 11.203 17.5477 15.5917 16.6382 20.1682C7.40644 21.9591 0.40332 30.0216 0.40332 39.7537C0.40332 50.7951 9.41033 59.8022 20.4518 59.8022H51.4253C51.7718 59.8071 52.1159 59.7431 52.4374 59.6139C52.759 59.4846 53.0517 59.2928 53.2985 59.0495C53.5452 58.8062 53.7412 58.5163 53.8749 58.1965C54.0087 57.8768 54.0776 57.5337 54.0776 57.1872C54.0776 56.8406 54.0087 56.4975 53.8749 56.1778C53.7412 55.8581 53.5452 55.5682 53.2985 55.3249C53.0517 55.0816 52.759 54.8897 52.4374 54.7605C52.1159 54.6313 51.7718 54.5673 51.4253 54.5722H20.4518C12.237 54.5722 5.63336 47.9686 5.63336 39.7537C5.63336 31.9959 11.5333 25.6757 19.0898 24.9897C19.6825 24.9319 20.2376 24.6737 20.6636 24.2577C21.0895 23.8416 21.3608 23.2926 21.4325 22.7015C21.9136 18.5566 23.7477 14.5297 26.9349 11.3425C30.688 7.58956 35.5857 5.75836 40.5003 5.75836C45.415 5.75836 50.2818 7.58568 54.0385 11.3425C58.3797 15.6837 60.2168 21.5819 59.541 27.2233C59.4947 27.5909 59.5271 27.964 59.6359 28.3181C59.7447 28.6722 59.9274 28.9991 60.1721 29.2773C60.4168 29.5554 60.7177 29.7784 61.055 29.9315C61.3923 30.0845 61.7583 30.1642 62.1287 30.1652H63.1639C69.9698 30.1652 75.3673 35.5627 75.3673 42.3687C75.3673 49.1747 69.9698 54.5722 63.1639 54.5722H50.9604C50.6139 54.5673 50.2699 54.6313 49.9483 54.7605C49.6267 54.8897 49.334 55.0816 49.0873 55.3249C48.8405 55.5682 48.6445 55.8581 48.5108 56.1778C48.377 56.4975 48.3081 56.8406 48.3081 57.1872C48.3081 57.5337 48.377 57.8768 48.5108 58.1965C48.6445 58.5163 48.8405 58.8062 49.0873 59.0495C49.334 59.2928 49.6267 59.4846 49.9483 59.6139C50.2699 59.7431 50.6139 59.8071 50.9604 59.8022H63.1639C72.7768 59.8022 80.5973 51.9816 80.5973 42.3687C80.5973 33.2962 73.6081 25.9105 64.7438 25.0986C64.7847 18.7886 62.5435 12.4655 57.7431 7.66515C52.99 2.91184 46.7398 0.52832 40.5003 0.52832ZM40.5003 48.1024C39.6285 48.1024 39.1674 47.8218 38.7298 47.4214L29.1414 38.7047C28.0342 37.6771 28.0536 36.0095 28.9778 35C29.9022 33.9906 31.6684 33.9175 32.6825 34.8366L37.8853 39.5763V22.0877C37.8853 20.6435 39.0559 19.4727 40.5003 19.4727C41.9449 19.4727 43.1153 20.6435 43.1153 22.0877V39.5763L48.3182 34.8366C49.3324 33.9175 51.0451 34.0421 52.0228 35C53.053 36.0095 52.8643 37.7756 51.8593 38.7047L42.2709 47.4214C41.7528 47.8957 41.3722 48.1024 40.5003 48.1024Z"
+    />
+  </svg>
+);

package/src/lib/components/downloadRing/icons/style.module.scss

@@ -0,0 +1,7 @@
+.stroke-primary-500 {
+  stroke: var(--ds-primary-500);
+}
+
+.fill-primary-500 {
+  fill: var(--ds-primary-500);
+}

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

@@ -0,0 +1,35 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import DownloadRing from '.';
+
+<Meta title="JSX/DownloadRing" component={DownloadRing} />
+
+# DownloadRing
+
+DownloadRing component displays progress and status of downloading files.
+
+## Examples
+
+### Idle state
+
+<Preview>
+  <DownloadRing progress={0} status="INITIAL" handleClick={() => {}} />
+</Preview>
+
+### Downloading state
+
+<Preview>
+  <DownloadRing progress={74} status="DOWNLOADING" handleClick={() => {}} />
+</Preview>
+
+### Download complete state
+
+<Preview>
+  <DownloadRing progress={100} status="COMPLETED" handleClick={() => {}} />
+</Preview>
+
+### Error state
+
+<Preview>
+  <DownloadRing progress={100} status="FAILED" handleClick={() => {}} />
+</Preview>