@popsure/dirty-swan 0.26.10 → 0.26.13

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

@@ -0,0 +1,211 @@
+import React, { useRef, useState } from 'react';
+import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
+import classNames from 'classnames';
+
+import Row from './components/Row';
+import TableArrows, { ArrowValues } from './components/TableArrows';
+import TableRating from './components/TableRating';
+import TableTrueFalse from './components/TableTrueFalse';
+import TableRowHeader from './components/TableRowHeader';
+import TableInfoButton from './components/TableInfoButton';
+import Chevron from './components/Chevron';
+import { useActiveTableArrows } from './hooks/useActiveTableArrows';
+
+import baseStyles from './style.module.scss';
+
+export interface CellBaseProps<T> {
+  /** Used to display the row's title */
+  label?: React.ReactNode;
+  /**
+   *
+   * @param value The current data value
+   * @param element The complete data object
+   */
+  render?: (value: any, element: T) => React.ReactNode; //TODO: add typing to value param
+}
+
+interface CellWithId<T> extends CellBaseProps<T> {
+  /** Used when adding component add-ons */
+  addonId: string | number;
+}
+
+export type Cell<T> =
+  | ({ key: Extract<keyof T, string> } & CellBaseProps<T>)
+  | ({ key?: undefined } & CellWithId<T>);
+
+export interface TableHeader<T> {
+  /** Required unique id number for each table group */
+  id: number;
+  /** Used to display a table group subheader */
+  label?: React.ReactNode;
+  cells: Array<Cell<T>>;
+  default?: boolean;
+}
+
+export interface ComparisonTableProps<T> {
+  headers: Array<TableHeader<T>>;
+  data: Array<T>;
+  hideDetails?: boolean;
+  styles?: {
+    header?: string;
+    container?: string;
+  };
+}
+
+const ComparisonTable = <T extends { id: number }>(
+  props: ComparisonTableProps<T>
+) => {
+  const { headers, data, hideDetails, styles } = props;
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const headerContainerRef = useRef<HTMLDivElement | null>(null);
+  const { activeArrows, contentContainerRef, contentWrapperRef } =
+    useActiveTableArrows();
+
+  /** narrow types */
+  const headerContainer = headerContainerRef
+    ? headerContainerRef.current
+    : null;
+  const contentWrapper =
+    typeof contentWrapperRef === 'object' && contentWrapperRef
+      ? contentWrapperRef.current
+      : null;
+
+  const handleArrowsClick = (value: ArrowValues) => {
+    if (headerContainerRef.current) {
+      headerContainerRef.current.scroll({
+        top: 0,
+        left:
+          value === 'next'
+            ? headerContainerRef.current.scrollLeft + window.innerWidth
+            : headerContainerRef.current.scrollLeft - window.innerWidth,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  const toggleMoreRows = async () => {
+    if (showMore && headerContainer && contentWrapper) {
+      window.scroll(
+        0,
+        window.scrollY +
+          (contentWrapper.getBoundingClientRect().y -
+            headerContainer.getBoundingClientRect().bottom)
+      );
+    }
+    setShowMore(!showMore);
+  };
+
+  return (
+    <ScrollSync>
+      <div>
+        <div className={classNames(baseStyles.header, styles?.header)}>
+          <ScrollSyncPane>
+            <div className={baseStyles.container} ref={headerContainerRef}>
+              <div className={classNames(baseStyles['overflow-container'])}>
+                <div className={baseStyles['group-container']}>
+                  <TableArrows
+                    onClick={handleArrowsClick}
+                    active={activeArrows}
+                  />
+                  <Row<T>
+                    key="table-header-row"
+                    rowId="table-header-row"
+                    cell={headers[0].cells[0]}
+                    data={data}
+                    isRowHeader
+                  />
+                </div>
+              </div>
+            </div>
+          </ScrollSyncPane>
+        </div>
+        <ScrollSyncPane>
+          <div
+            className={classNames(baseStyles.container, styles?.container)}
+            ref={contentWrapperRef}
+          >
+            <div
+              className={classNames(baseStyles['overflow-container'])}
+              ref={contentContainerRef}
+            >
+              <div className={baseStyles['group-container']}>
+                {Array.isArray(headers) &&
+                  headers
+                    .filter(
+                      (headerGroup) =>
+                        !hideDetails || showMore || headerGroup.default
+                    )
+                    .map((headerGroup, headerGroupIndex) => (
+                      <div key={headerGroup.id}>
+                        {
+                          /**
+                           * Print a table subheader if the `label` value is present
+                           */
+                          headerGroup.label && (
+                            <div className={baseStyles['group-title']}>
+                              <h4 className={`p-h4 ${baseStyles.sticky}`}>
+                                {headerGroup.label}
+                              </h4>
+                            </div>
+                          )
+                        }
+
+                        {headerGroup.cells?.map((cell, index) => {
+                          const rowId = `${headerGroup.id}-${
+                            cell.key ?? 'addon'
+                          }-${index}`;
+
+                          /** Do not render the first row */
+                          if (index === 0 && headerGroupIndex === 0)
+                            return null;
+
+                          return (
+                            <Row<T>
+                              key={rowId}
+                              rowId={rowId}
+                              cell={cell}
+                              data={data}
+                            />
+                          );
+                        })}
+                      </div>
+                    ))}
+                {hideDetails && (
+                  <div
+                    className={classNames(
+                      baseStyles['show-details-container'],
+                      baseStyles.sticky,
+                      'mt48'
+                    )}
+                  >
+                    <div>
+                      <button
+                        className={`w100 d-flex p-a p-h4 c-pointer ${baseStyles['show-details-button']}`}
+                        onClick={toggleMoreRows}
+                      >
+                        {showMore ? 'Hide details' : 'Show details'}
+                        <Chevron
+                          className={
+                            showMore ? '' : baseStyles['icon-inverted']
+                          }
+                        />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </ScrollSyncPane>
+      </div>
+    </ScrollSync>
+  );
+};
+
+export {
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+};

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>