@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Calendar/Calendar.module.scss

@@ -0,0 +1,185 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$inputMaxWidth: 300px;
+$inputMinWidth: 118px;
+$inputMinWidthWithTime: 183px;
+$inputPadding: c.$grid * 3;
+
+/*
+ * Rest of styles
+ */
+.container {
+  width: $inputMaxWidth;
+  min-width: $inputMinWidth;
+
+  :global .react-datepicker-wrapper {
+    width: 100%;
+  }
+
+  &.time {
+    min-width: $inputMinWidthWithTime;
+  }
+}
+
+.popper {
+  :global(.hz-date-picker-popper-container) {
+    /*
+  * Internal styles override for those that cannot be
+  * overridden using classNames composition
+  */
+    :global .react-datepicker-popper {
+      z-index: c.$zIndex200;
+    }
+
+    :global .react-datepicker {
+      padding: $inputPadding;
+
+      :global .react-datepicker__header {
+        margin: 0;
+        padding: 0;
+        background-color: c.$colorNeutralLighter;
+        border: none;
+        border-radius: 0;
+
+        :global .react-datepicker__day-names {
+          margin-bottom: c.$grid;
+
+          :global .react-datepicker__day-name {
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+            color: c.$colorText;
+
+            @include c.typographyBodySmall('bold');
+
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
+          }
+        }
+      }
+
+      :global .react-datepicker__month {
+        /*
+         * Note: The calendar part is asymmetrical by design
+         * It's padded by 2 extra px from the left
+         */
+        margin: 0 0 0 (c.$grid * 0.5);
+
+        :global .react-datepicker__week {
+          &:not(:last-of-type) {
+            margin-bottom: c.$grid * 2;
+          }
+
+          /*
+           * Note:
+           * We need to use :global override here, as 'renderCustomDay' only allows us to override
+           * the child of this element, which does not allow us to touch the styles properly
+           *
+           * Source styles:
+           * https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
+           */
+          :global .react-datepicker__day {
+            border-radius: c.$grid;
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            background-color: c.$colorNeutralWhite;
+            color: c.$colorTextSecondary;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+
+            // Do not remove outline for high-contrast modes
+            // https://stackoverflow.com/a/52616313
+            outline: transparent solid c.$outlineWidth;
+
+            @include c.typographyBodySmall;
+
+            &--today {
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--in-selecting-range,
+            &--in-range {
+              // TODO: Improvised colour, consult with @Pawel
+              background-color: c.$colorInfoLight;
+              color: c.$colorNeutralWhite;
+            }
+
+            &--selected {
+              background-color: c.$colorPrimaryLight;
+              color: c.$colorNeutralWhite;
+
+              // Note: Disable default browser outline, force our only on :focus
+
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--disabled {
+              cursor: default;
+              color: c.$colorNeutral;
+            }
+
+            &:focus-visible {
+              @include h.outlineSimple;
+            }
+
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
+          }
+        }
+      }
+
+      :global .react-datepicker__input-time-container {
+        margin: 0;
+        padding: 0;
+
+        :global .react-datepicker-time__caption {
+          display: none;
+        }
+
+        :global .react-datepicker-time__input-container {
+          margin: 0 c.$grid 0 c.$grid * 5;
+
+          :global .react-datepicker-time__input {
+            margin: 0;
+
+            input {
+              width: auto;
+            }
+          }
+        }
+      }
+    }
+
+    .calendar {
+      display: flex;
+      flex-direction: row;
+      border: c.$borderWidth solid c.$colorNeutralLight;
+      background-color: c.$colorNeutralLighter;
+      box-sizing: border-box;
+
+      .headerContainer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
+        margin-bottom: c.$separatorWidth;
+
+        .headerMonthAndYear {
+          color: c.$colorTextSecondary;
+
+          @include c.typographyBodySmall('bold');
+        }
+      }
+    }
+  }
+}

package/lib/components/Calendar/CalendarRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarRange.js","sourceRoot":"","sources":["../../../src/components/Calendar/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAehD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,SAAS,EACT,eAAe,GAAG,MAAM,EACxB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,OAAO,EACP,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC;QACjF,oBAAC,QAAQ,iBACG,sBAAsB,EAChC,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,iBAAiB,EAC/B,YAAY,QACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,KACN,IAAI,GACR;QACD,OAAO,KAAK,YAAY,IAAI,CAC3B,oBAAC,IAAI,iBACO,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,CAAC,EACtE,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,aAAa,GACvB,CACH;QACD,oBAAC,QAAQ,iBACG,oBAAoB,EAC9B,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,eAAe,EAC7B,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,aAAa,EACzB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,IAAI,KACN,IAAI,GACR,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Calendar/CalendarRange.module.scss

@@ -0,0 +1,21 @@
+@use '../../../styles/constants' as c;
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  &.vertical {
+    flex-direction: column;
+    gap: c.$grid * 4;
+  }
+
+  .arrowRight {
+    color: c.$colorNeutralLight;
+    margin: 0 c.$grid * 2 c.$grid * 2;
+
+    &.small {
+      margin-bottom: c.$grid * 0.75;
+    }
+  }
+}

package/lib/components/Calendar/components/CalendarHeader.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+import { format } from 'date-fns';
+import { IconButton } from '../../IconButton';
+import styles from '../Calendar.module.scss';
+import styleConsts from '../../../../styles/constants/export.module.scss';
+export const CalendarHeader = ({ date, decreaseMonth, increaseMonth }) => {
+    return (React.createElement("div", { "data-test": "date-picker-header", className: styles.headerContainer },
+        React.createElement(IconButton, { "data-test": "date-picker-header-icon-previous", icon: ChevronLeft, ariaLabel: "Previous month", iconColor: styleConsts.colorPrimary, onClick: decreaseMonth }),
+        React.createElement("div", { className: styles.headerMonthAndYear }, format(date, 'MMMM y')),
+        React.createElement(IconButton, { "data-test": "date-picker-header-icon-next", icon: ChevronRight, ariaLabel: "Next month", iconColor: styleConsts.colorPrimary, onClick: increaseMonth })));
+};
+//# sourceMappingURL=CalendarHeader.js.map

package/lib/components/Calendar/components/CalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,WAAW,MAAM,iDAAiD,CAAA;AAezE,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,EAAE;IAChG,OAAO,CACL,0CAAe,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe;QACnE,oBAAC,UAAU,iBACC,kCAAkC,EAC5C,IAAI,EAAE,WAAW,EACjB,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,WAAW,CAAC,YAAY,EACnC,OAAO,EAAE,aAAa,GACtB;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,IAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAO;QACzE,oBAAC,UAAU,iBACC,8BAA8B,EACxC,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,WAAW,CAAC,YAAY,EACnC,OAAO,EAAE,aAAa,GACtB,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Calendar/components/CalendarInput.d.ts

@@ -0,0 +1,16 @@
+import React, { FC, ChangeEvent, InputHTMLAttributes } from 'react';
+import { DataTestProp } from '../../../../src';
+import { CalendarSize } from '../Calendar';
+export type CalendarInputInternalProps = {
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+} & CalendarInputExtraProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Required<DataTestProp>;
+export declare const CalendarInputInternal: React.ForwardRefExoticComponent<{
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+} & CalendarInputExtraProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & Required<DataTestProp> & React.RefAttributes<HTMLInputElement>>;
+export type CalendarInputExtraProps = {
+    label?: string;
+    textFieldSize?: CalendarSize;
+    className?: string;
+};
+export type CalendarInputProps = unknown & CalendarInputExtraProps;
+export declare const CalendarInput: FC<CalendarInputProps>;

package/lib/components/Calendar/components/CalendarInput.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { Calendar } from 'react-feather';
+import { TextField } from '../../TextField';
+export const CalendarInputInternal = forwardRef(({ className, value, onChange, label, textFieldSize, 'data-test': dataTest, ...props }, ref) => (React.createElement(TextField, { ...props, mRef: ref, size: textFieldSize, "data-test": dataTest, value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" })));
+CalendarInputInternal.displayName = 'CalendarInputInternal';
+export const CalendarInput = forwardRef((props, ref) => {
+    // Note: Cast the "unknown" props to the actual type
+    const propsTyped = props;
+    return React.createElement(CalendarInputInternal, { ref: ref, ...propsTyped });
+});
+CalendarInput.displayName = 'CalendarInput';
+//# sourceMappingURL=CalendarInput.js.map

package/lib/components/Calendar/components/CalendarInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAS3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9F,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,aAAa,eACR,QAAQ,EACnB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,GACtC,CACH,CACF,CAAA;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAgB3D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnH,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAC5D,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}

package/lib/components/Calendar/components/CalendarTime.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DataTestProp } from '../../../../src';
+export type CalendarTimeInternalProps = {
+    date: Date;
+    onChange: (timeString: string) => void;
+    value: string;
+} & DataTestProp;
+export declare const CalendarTimeInternal: FC<CalendarTimeInternalProps>;
+export type CalendarTimeProps = unknown & Required<DataTestProp>;
+export declare const CalendarTime: FC<CalendarTimeProps>;

package/lib/components/Calendar/components/CalendarTime.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { format, parse } from 'date-fns';
+import { Button } from '../../Button';
+import { timePoints } from '../helpers/consts';
+import { TimeField } from '../../TimeField';
+import { useRefValue } from '../../../hooks';
+import styles from './CalendarTime.module.scss';
+const DATE_FORMAT = 'HH:mm';
+export const CalendarTimeInternal = ({ date, value, onChange, 'data-test': dataTest = 'calendar-time' }) => {
+    const [time, setTime] = useState(value);
+    const [timeInputError, setTimeInputError] = useState();
+    const getValue = useRefValue(value);
+    /*
+     * Note:
+     * We cannot override how react-datepicker handles time values.
+     * It always expects format of "xx:xx" to parse the hours and minutes from. (See Source 2. link below)
+     *
+     * This is not an issue for majority of browsers, however as for IE11, where <input type="time" />
+     * fall back to <input type="text" />, this becomes an issue.
+     *
+     * Furthermore, the package even does not handle potential thrown error by date-fns' parse.
+     * Even the live demos do crash on an input like "10:10q" (See source 1. link below).
+     *
+     * For these reasons we need to provide our own wrapper around the functionality to achieve 2 things:
+     * - Provide IE11 with a proper fallback
+     * - Prevent the invalid input value crash
+     * - Provide the user with an input error in case the value is invalid
+     *
+     * Source(1): https://reactdatepicker.com/#example-custom-time-input
+     * Source(2): https://github.com/Hacker0x01/react-datepicker/blob/master/src/inputTime.jsx#L32
+     */
+    useEffect(() => {
+        setTime(value);
+    }, [value]);
+    const handleTimeInputChange = useCallback(({ target: { value } }) => {
+        setTime(value);
+        const parsedDate = parse(value, DATE_FORMAT, date);
+        if (!isNaN(parsedDate.valueOf())) {
+            setTimeInputError(undefined);
+            onChange(value);
+        }
+        else {
+            setTimeInputError('Invalid time');
+        }
+    }, [onChange, date]);
+    const handleDateClick = useCallback((dp) => () => {
+        // Note: Input time (derived from timePoints) is in 'DATE_FORMAT'
+        const parsedDate = parse(dp, DATE_FORMAT, date);
+        // Note: Output time, that we feed back to 'react-datetime' is in 'DATE_FORMAT_NO_MERIDIEM' format
+        const timeStringWithoutAm = format(parsedDate, DATE_FORMAT);
+        onChange(timeStringWithoutAm);
+        // remove error because time from the list can not be invalid
+        setTimeInputError(undefined);
+        // restores input field value when we select the same time from the list
+        if (getValue() === timeStringWithoutAm) {
+            setTime(timeStringWithoutAm);
+        }
+    }, [onChange, getValue, date]);
+    return (React.createElement("div", { "data-test": dataTest, className: styles.container },
+        React.createElement("div", { "data-test": `${dataTest}-header`, className: styles.header },
+            React.createElement(TimeField, { showAriaLabel: true, size: "small", label: "Time Input", error: timeInputError, name: "time", value: time.toString(), "data-test": `${dataTest}-input`, inputClassName: styles.timeInput, onChange: handleTimeInputChange })),
+        React.createElement("div", { "data-test": `${dataTest}-timePoints`, className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP, variant: "text", onClick: handleDateClick(tP) }, tP))))));
+};
+export const CalendarTime = (props) => {
+    // Note: Cast the "unknown" props to the actual type
+    const propsTyped = props;
+    return React.createElement(CalendarTimeInternal, { ...propsTyped });
+};
+//# sourceMappingURL=CalendarTime.js.map

package/lib/components/Calendar/components/CalendarTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../../src/components/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"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"}

package/lib/components/Calendar/components/CalendarTime.module.scss

@@ -0,0 +1,72 @@
+@use '../../../../styles/constants' as c;
+@use '../../../../styles/helpers' as h;
+
+/*
+ * Note:
+ * What's the motivation for statically settings the height of this particular element?
+ * We need to prevent the height of this element to expand the size of the calendar popper itself.
+ * There are basically 2 ways to do this:
+ * 1. Settings the height of the popper container
+ * 2. Settings the height of the element itself
+ *
+ * Even though I think option 1 is readable a bit better, there is this odd feature, where react-datepicker
+ * renders 6 weeks (rows) instead of 5 for some of the months. This expands the height by 1 week row,
+ * and would cause overflow in case of option 1.
+ * Therefore only option 2 is left.
+ */
+$calendarTimeHeight: 227px;
+
+// Note: Add padding in order to preserve button's outline
+$outlinePreservingPadding: c.$grid * 1.25;
+
+// Note: Button width is 98px with border-box applied
+/* doiuse-disable calc */
+$buttonWidth: calc(98px - 2 * #{$outlinePreservingPadding});
+/* doiuse-enable calc */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: c.$grid * 2;
+  }
+
+  .timePoints {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    padding: $outlinePreservingPadding;
+    height: $calendarTimeHeight;
+    width: $buttonWidth;
+    box-sizing: border-box;
+
+    > .timePoint {
+      color: c.$colorTextSubdued;
+      /*
+       * Note: Using min-height instead of height to workaround IE11 flex-bug
+       * where flex text content on overflow: scroll disappears
+       */
+      min-height: c.$grid * 5;
+
+      @include c.typographyBodySmall;
+
+      &:not(:last-of-type) {
+        margin-bottom: c.$grid;
+      }
+
+      > .timePointBody {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.timeInput {
+  width: 88px !important;
+}

package/lib/components/Calendar/helpers/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/components/Calendar/helpers/consts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,0DAA0D;IAC1D,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;CACR,CAAA"}

package/lib/components/Card.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { DataTestProp } from '../../src';
+import { IconProps } from './Icon';
+export type CardProps = {
+    headingIcon?: IconProps['icon'];
+    caption?: ReactNode;
+    title?: string;
+    titleTagName?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingContent?: ReactNode;
+    separator?: boolean;
+    variant?: 'bordered' | 'default';
+    children: ReactNode;
+    className?: string;
+    iconClassName?: string;
+    titleClassName?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+} & DataTestProp;
+/**
+ * ### Purpose
+ * Card components define content hierarchy (visual and logical), separating content into "groups".
+ *
+ * ### General Info
+ * - Card can be rendered with an optional separator and/or icon.
+ */
+export declare const Card: FC<CardProps>;

package/lib/components/Card.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import cn from 'classnames';
+import { Icon } from './Icon';
+import styles from './Card.module.scss';
+const Title = ({ as: Tag, ...props }) => React.createElement(Tag, { "data-test": "card-heading-title", ...props });
+/**
+ * ### Purpose
+ * Card components define content hierarchy (visual and logical), separating content into "groups".
+ *
+ * ### General Info
+ * - Card can be rendered with an optional separator and/or icon.
+ */
+export const Card = ({ headingIcon, title, headingContent, separator = false, variant = 'default', 'data-test': dataTest, children, titleTagName = 'h2', className, iconClassName, titleClassName, contentClassName, headerClassName, caption, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title, [styles.bordered]: variant === 'bordered' }, className) },
+    caption && React.createElement("div", { className: styles.caption }, caption),
+    (title || headingContent || headingIcon) && (React.createElement("div", { "data-test": "card-heading", className: cn(styles.heading, headerClassName) },
+        headingIcon && React.createElement(Icon, { "data-test": "card-heading-icon", icon: headingIcon, className: cn(styles.icon, iconClassName), ariaHidden: true }),
+        title && (React.createElement(Title, { as: titleTagName, className: cn(styles.title, { [styles.space]: !!headingContent }, titleClassName) }, title)),
+        headingContent)),
+    separator && React.createElement("div", { "data-test": "card-separator", className: styles.separator }),
+    children && (React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children))));
+//# sourceMappingURL=Card.js.map

package/lib/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAuBvC,MAAM,KAAK,GAAmB,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,GAAG,iBAAW,oBAAoB,KAAK,KAAK,GAAI,CAAA;AAE1G;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,EAAE,SAAS,CAAC;IAEhH,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,CAAC,KAAK,IAAI,cAAc,IAAI,WAAW,CAAC,IAAI,CAC3C,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC9H,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACvG,KAAK,CACA,CACT;QACA,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE5E,QAAQ,IAAI,CACX,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACP,CACG,CACP,CAAA"}

package/lib/components/Card.module.scss

@@ -0,0 +1,92 @@
+@use '../../styles/constants' as c;
+
+$padding: c.$grid * 5;
+
+.wrapper {
+  background: c.$colorNeutralWhite;
+
+  .heading {
+    display: flex;
+    align-items: center;
+    margin-bottom: c.$grid * 5;
+
+    .icon {
+      margin-right: c.$grid * 2.5;
+    }
+
+    .title {
+      margin: 0;
+
+      &.space {
+        margin-right: c.$grid * 2.5;
+      }
+    }
+  }
+
+  .separator {
+    width: 100%;
+    height: 1px;
+    margin-top: c.$grid * 4;
+    background: c.$colorNeutral;
+  }
+
+  .content {
+    padding-top: c.$grid * 6;
+    @include c.typographyBodyNormal;
+  }
+
+  .caption {
+    display: flex;
+    margin-bottom: $padding;
+
+    & > * {
+      flex: 1;
+    }
+  }
+}
+
+.bordered {
+  padding: $padding;
+  border-radius: c.$borderRadius;
+  border: c.$borderWidth solid c.$colorNeutral;
+
+  .heading {
+    @include c.typographyH3;
+
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    .icon {
+      margin-right: c.$grid * 2.5;
+    }
+
+    .title {
+      margin: 0;
+      font-size: c.$fontSizeBodyNormal !important;
+      line-height: c.$lineHeightBodyNormal !important;
+
+      &.space {
+        margin-right: c.$grid * 2.5;
+      }
+    }
+  }
+
+  .content {
+    @include c.typographyBodyNormal;
+
+    margin-top: c.$grid * 4;
+    padding: 0;
+  }
+
+  .caption {
+    margin: (-$padding) (-$padding) $padding;
+  }
+}
+
+.noTitle {
+  .content {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}

package/lib/components/Carousel.d.ts

@@ -0,0 +1,26 @@
+import React, { CSSProperties, FC, ReactElement, ReactNode } from 'react';
+import { CarouselProps as NukaCarouselProps } from 'nuka-carousel';
+import { DataTestProp } from '../../src';
+interface ControlsConfig {
+    containerClassName?: string;
+    nextButtonClassName?: string;
+    nextButtonOnClick?: React.MouseEventHandler;
+    nextButtonStyle?: CSSProperties;
+    nextButtonContent?: ReactNode;
+    pagingDotsClassName?: string;
+    pagingDotsContainerClassName?: string;
+    pagingDotsOnClick?: React.MouseEventHandler;
+    pagingDotsStyle?: CSSProperties;
+    prevButtonClassName?: string;
+    prevButtonOnClick?: React.MouseEventHandler;
+    prevButtonStyle?: CSSProperties;
+    prevButtonContent?: ReactNode;
+}
+export type CarouselProps = {
+    children: ReactElement[];
+    color?: string;
+    wrapperClassName?: string;
+    defaultControlsConfig?: ControlsConfig;
+} & Omit<NukaCarouselProps, 'defaultControlsConfig'> & DataTestProp;
+export declare const Carousel: FC<CarouselProps>;
+export {};

package/lib/components/Carousel.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import cn from 'classnames';
+import NukaCarousel from 'nuka-carousel';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+import styleConsts from '../../styles/constants/export.module.scss';
+import styles from './Carousel.module.scss';
+export const Carousel = ({ children, color = styleConsts.colorPrimary, wrapperClassName, cellSpacing = 15, slidesToShow = 1, defaultControlsConfig, 'data-test': dataTest = 'carousel', ...props }) => {
+    var _a, _b, _c, _d, _e;
+    return (React.createElement("div", { "data-test": dataTest, className: cn(wrapperClassName, styles.wrapper) },
+        React.createElement(NukaCarousel, { slidesToShow: slidesToShow, defaultControlsConfig: {
+                nextButtonText: (_a = defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.nextButtonContent) !== null && _a !== void 0 ? _a : React.createElement(ChevronRight, { size: 40, strokeWidth: "0.9", color: color }),
+                prevButtonText: (_b = defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.prevButtonContent) !== null && _b !== void 0 ? _b : React.createElement(ChevronLeft, { size: 40, strokeWidth: "0.9", color: color }),
+                nextButtonClassName: cn(defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.nextButtonClassName, styles.nextButtonClassName),
+                prevButtonClassName: cn(defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.prevButtonClassName, styles.prevButtonClassName),
+                nextButtonStyle: (_c = defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.nextButtonStyle) !== null && _c !== void 0 ? _c : { background: 'none' },
+                prevButtonStyle: (_d = defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.prevButtonStyle) !== null && _d !== void 0 ? _d : { background: 'none' },
+                pagingDotsClassName: cn(defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.pagingDotsClassName, styles.pagingDotsClassName),
+                pagingDotsStyle: (_e = defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.pagingDotsStyle) !== null && _e !== void 0 ? _e : {
+                    fill: color,
+                },
+                containerClassName: defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.containerClassName,
+                nextButtonOnClick: defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.nextButtonOnClick,
+                pagingDotsContainerClassName: defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.pagingDotsContainerClassName,
+                pagingDotsOnClick: defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.pagingDotsOnClick,
+                prevButtonOnClick: defaultControlsConfig === null || defaultControlsConfig === void 0 ? void 0 : defaultControlsConfig.prevButtonOnClick,
+            }, cellSpacing: cellSpacing, ...props }, children)));
+};
+//# sourceMappingURL=Carousel.js.map

package/lib/components/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,YAAoD,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAGzD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AA0B3C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,QAAQ,EACR,KAAK,GAAG,WAAW,CAAC,YAAY,EAChC,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,YAAY,GAAG,CAAC,EAChB,qBAAqB,EACrB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;;IACH,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC;QACvE,oBAAC,YAAY,IACX,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE;gBACrB,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACtH,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACrH,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI;oBACzD,IAAI,EAAE,KAAK;iBACZ;gBACD,kBAAkB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,kBAAkB;gBAC7D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,4BAA4B,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,4BAA4B;gBACjF,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;aAC5D,EACD,WAAW,EAAE,WAAW,KACpB,KAAK,IAER,QAAQ,CACI,CACX,CACP,CAAA;AACH,CAAC,CAAA"}