@popsure/dirty-swan 0.26.10 → 0.26.11

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

@@ -0,0 +1,104 @@
+@use "../../scss/public/grid" as *;
+@use "../../scss/public/colors" as *;
+
+.container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+
+  @include p-size-tablet {
+    scroll-snap-type: unset;
+  }
+}
+
+.overflow-container {
+  width: max-content;
+  min-width: 100%;
+}
+
+.group-container {
+  display: flex;
+  flex-flow: column;
+  width: max-content;
+  margin: auto;
+  min-width: calc(56rem + 48px);
+}
+
+.group-title {
+  width: 100%;
+
+  background-color: $ds-grey-100;
+  border-radius: 8px;
+
+  margin-top: 48px;
+
+  & > h4 {
+    padding: 24px;
+    display: inline-block;
+  }
+
+  @include p-size-tablet {
+    margin-top: 72px;
+  }
+}
+
+.sticky {
+  position: sticky;
+  justify-content: flex-start;
+  z-index: 1;
+
+  top: 0;
+  left: 0;
+
+  @include p-size-tablet {
+    border-right: 1px solid $ds-grey-100;
+  }
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: white;
+
+  .container {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.show-details-container {
+  width: 100%;
+  max-width: calc(100vw - 24px);
+
+  padding-left: 16px;
+
+  border: none;
+}
+
+.show-details-button {
+  font-family: inherit;
+  background-color: $ds-grey-100;
+
+  border: none;
+  border-radius: 8px;
+
+  height: 64px;
+
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    margin-left: 8px;
+  }
+}
+
+.icon-inverted {
+  transform: rotate(180deg);
+  transition: all 0.25s ease;
+}

package/src/lib/components/dateSelector/datepicker.scss

@@ -0,0 +1,406 @@
+@use '../../scss/public/grid' as *;
+@use '../../scss/public/colors' as *;
+
+.DayPickerInput {
+  cursor: pointer;
+  position: relative;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  min-width: 180px;
+  padding-left: 8px;
+  line-height: 40px;
+  border-radius: 4px;
+  text-align: left;
+  border: 1px solid $ds-grey-500;
+}
+
+.DayPickerInput input {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  height: 100%;
+  color: $ds-grey-700;
+  font-size: 16px;
+}
+
+.DayPickerInput::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-top: 12px solid $ds-grey-500;
+}
+
+.DayPickerInput:hover::before {
+  border-top: 12px solid $ds-grey-700;
+}
+
+.DayPickerInput:hover {
+  border-color: $ds-grey-700;
+}
+
+.DayPicker {
+  position: absolute;
+  left: -9px;
+  top: 8px;
+  z-index: 100;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  background-color: white;
+  display: inline-block;
+  font-size: 1rem;
+}
+
+.DayPicker-wrapper {
+  position: relative;
+
+  flex-direction: row;
+  padding-bottom: 1em;
+
+  user-select: none;
+}
+
+.DayPicker-Months {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.DayPicker-Month {
+  display: table;
+  margin: 0 1em;
+  margin-top: 1em;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  user-select: none;
+
+  font: 16px;
+}
+
+.DayPicker-NavButton {
+  position: absolute;
+  top: 1em;
+  right: 1.5em;
+  left: auto;
+  display: inline-block;
+  margin-top: 2px;
+  width: 1.25em;
+  height: 1.25em;
+  background-position: center;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  color: #8b9898;
+  cursor: pointer;
+}
+
+.DayPicker-NavButton:hover {
+  opacity: 0.8;
+}
+
+.DayPicker-NavButton--prev {
+  margin-right: 1.5em;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
+}
+
+.DayPicker-NavButton--next {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');
+}
+
+.DayPicker-NavButton--interactionDisabled {
+  visibility: hidden;
+}
+
+.DayPicker-Caption {
+  display: table-caption;
+  margin-bottom: 0.5em;
+  padding: 0 0.5em;
+  text-align: left;
+}
+
+.DayPicker-Caption > div {
+  font-weight: 500;
+  font-size: 1.15em;
+}
+
+.DayPicker-Weekdays {
+  display: table-header-group;
+  margin-top: 1em;
+}
+
+.DayPicker-WeekdaysRow {
+  display: table-row;
+}
+
+.DayPicker-Weekday {
+  display: table-cell;
+  padding: 0.5em;
+  color: #8b9898;
+  text-align: center;
+  font-size: 0.875em;
+}
+
+.DayPicker-Weekday abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.DayPicker-Body {
+  display: table-row-group;
+}
+
+.DayPicker-Week {
+  display: table-row;
+}
+
+.DayPicker-Day {
+  display: table-cell;
+  padding: 0.5em;
+  border-radius: 50%;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+
+  font: normal 16px Lato;
+}
+
+.DayPicker-WeekNumber {
+  display: table-cell;
+  padding: 0.5em;
+  min-width: 1em;
+  border-right: 1px solid #eaecec;
+  color: #8b9898;
+  vertical-align: middle;
+  text-align: right;
+  font-size: 0.75em;
+  cursor: pointer;
+}
+
+.DayPicker--interactionDisabled .DayPicker-Day {
+  cursor: default;
+}
+
+.DayPicker-Footer {
+  padding-top: 0.5em;
+}
+
+.DayPicker-TodayButton {
+  border: none;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  color: #4a90e2;
+  font-size: 0.875em;
+  cursor: pointer;
+}
+
+.DayPicker-Day--sunday {
+  background-color: #f7f8f8;
+}
+
+.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
+  color: #dce0e0;
+}
+
+.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+  position: relative;
+
+  background-color: $ds-purple-500;
+  color: #f0f8ff;
+}
+
+.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
+  background-color: $ds-purple-700;
+}
+
+.DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
+  background-color: $ds-purple-100;
+}
+
+.DayPickerInput {
+  display: inline-block;
+}
+
+.DayPickerInput-OverlayWrapper {
+  position: relative;
+}
+
+.DayPickerInput-Overlay {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+
+  background: white;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
+
+.DayPicker {
+  position: absolute;
+  left: 40px;
+  top: -112px;
+  z-index: 100;
+  background-color: white;
+  border: 1px solid #d2d2d8;
+  box-shadow: 0px 0px 32px rgba(210, 210, 216, 0.25);
+  border-radius: 16px;
+  display: inline-block;
+  color: $ds-grey-900;
+
+  @include p-size-mobile {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.DayPicker-wrapper {
+  padding: 8px 24px 24px 24px;
+}
+
+.DayPicker-NavBar {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+
+.DayPicker-NavButton {
+  position: unset;
+  margin-top: 0;
+  width: 48px;
+  height: 48px;
+}
+
+.DayPicker-NavButton:hover {
+  opacity: 1;
+  border-radius: 50%;
+  background-color: $ds-purple-100;
+}
+
+.DayPicker-NavButton--prev {
+  background-image: url('./icons/chevron-left.svg');
+  margin-left: 16px;
+}
+
+.DayPicker-NavButton--next {
+  background-image: url('./icons/chevron-right.svg');
+  margin-right: 16px;
+}
+
+.DayPicker-Months {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 14px;
+}
+
+.DayPicker-Month {
+  display: table;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  user-select: none;
+
+  font: 16px;
+}
+
+.DayPicker-Caption {
+  margin: 0 0 24px 0;
+  padding: unset;
+  text-align: center;
+}
+
+.DayPicker-Weekdays {
+  display: table-header-group;
+}
+
+.DayPicker-WeekdaysRow {
+  display: table-row;
+}
+
+.DayPicker-Weekday {
+  display: table-cell;
+  padding: 0.5em;
+  color: #8b9898;
+  text-align: center;
+  font-size: 0.875em;
+}
+
+.DayPicker-Weekday abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.DayPicker-Body {
+  display: table-row-group;
+}
+
+.DayPicker-Week {
+  display: table-row;
+}
+
+.DayPicker-Day {
+  display: table-cell;
+  padding: 0.5em;
+  border-radius: 50%;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+
+  font: normal 16px Lato;
+}
+
+.DayPicker-WeekNumber {
+  display: table-cell;
+  padding: 0.5em;
+  min-width: 1em;
+  border-right: 1px solid #eaecec;
+  color: #8b9898;
+  vertical-align: middle;
+  text-align: right;
+  font-size: 0.75em;
+  cursor: pointer;
+}
+
+.DayPicker--interactionDisabled .DayPicker-Day {
+  cursor: default;
+}
+
+.DayPicker-Footer {
+  padding-top: 0.5em;
+}
+
+.DayPicker-TodayButton {
+  border: none;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  color: #4a90e2;
+  font-size: 0.875em;
+  cursor: pointer;
+}
+
+.DayPicker-Day--outside {
+  color: $ds-grey-300;
+  cursor: pointer;
+
+  &:hover {
+    background: $ds-primary-100;
+  }
+}
+
+.DayPicker-Day--disabled {
+  color: $ds-grey-300;
+  background-color: transparent;
+  pointer-events: none;
+}

package/src/lib/components/dateSelector/icons/calendar.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4.46118H5C3.89543 4.46118 3 5.35661 3 6.46118V20.4612C3 21.5658 3.89543 22.4612 5 22.4612H19C20.1046 22.4612 21 21.5658 21 20.4612V6.46118C21 5.35661 20.1046 4.46118 19 4.46118Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M16 2.46118V6.46118" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M8 2.46118V6.46118" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M3 10.4612H21" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

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);
+  });
+});