@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Button.module.scss

@@ -0,0 +1,329 @@
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+@mixin buttonColor($color: c.$colorPrimary) {
+  color: $color;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin disabledButtonColor {
+  color: c.$colorTextSecondary;
+  background-color: c.$colorNeutral;
+  border-color: c.$colorNeutral;
+}
+
+.button {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  border-radius: c.$borderRadiusButtonSmall;
+  height: c.$inputHeightSmall;
+  max-width: c.$buttonMaxWidth;
+
+  // for <a> element
+  text-decoration: none;
+
+  @include c.typographyButton('small');
+
+  &.medium {
+    height: c.$grid * 10.75;
+
+    @include c.typographyButton('medium');
+  }
+
+  .outline {
+    position: absolute;
+    border-radius: c.$borderRadiusButtonSmall;
+    pointer-events: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* doiuse-disable calc */
+    width: calc(100% + #{c.$grid} * 2);
+    height: calc(100% + #{c.$grid} * 2);
+    /* doiuse-enable calc */
+    z-index: c.$zIndex100;
+    visibility: hidden;
+
+    @include h.outlineSimple;
+
+    &.inset {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:focus-visible,
+  &.focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: c.$outlineWidth solid transparent;
+
+    .outline {
+      visibility: visible;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  .iconLeft {
+    flex-shrink: 0;
+    margin-right: c.$grid * 2;
+  }
+
+  .iconRight {
+    flex-shrink: 0;
+    margin-left: c.$grid * 2;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    padding: 0 c.$grid * 5;
+    box-sizing: border-box;
+  }
+
+  &.color {
+    &Primary {
+      @include buttonColor(c.$colorPrimary);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorPrimaryLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorPrimaryDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Secondary {
+      @include buttonColor(c.$colorError);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorErrorLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorErrorDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Warning {
+      @include buttonColor(c.$colorWarning);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorWarningLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorWarningDark);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Brand {
+      @include buttonColor(c.$colorBrand);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: 20%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &AuthPrimary {
+      @include buttonColor(c.$colorBrandPrimary);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &AuthSecondary {
+      @include buttonColor(c.$colorAuthSecondary);
+
+      border-color: c.$colorNeutralWhite;
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &.variantOutlined {
+        border-color: c.$colorAuthSecondary;
+      }
+
+      &:disabled {
+        color: c.$colorText;
+        background-color: c.$colorNeutralWhite;
+      }
+    }
+
+    &Light {
+      @include buttonColor(c.$colorNeutralLighter);
+
+      border-color: c.$colorNeutralLighter;
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrandText, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorBrandText);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+
+        &:disabled {
+          @include disabledButtonColor;
+        }
+      }
+
+      &:disabled {
+        @include buttonColor(c.$colorNeutralLight);
+      }
+    }
+  }
+
+  &.variant {
+    &Outlined {
+      background: none;
+      border-style: solid;
+      border-width: c.$borderWidth;
+
+      .outline {
+        /* Note: We need to take border of 1px into account */
+        /* doiuse-disable calc */
+        width: calc(100% + #{c.$grid} * 2.5);
+        height: calc(100% + #{c.$grid} * 2.5);
+        /* doiuse-enable calc */
+
+        &.inset {
+          /* doiuse-disable calc */
+          width: calc(100% + #{c.$grid});
+          height: calc(100% + #{c.$grid});
+          /* doiuse-enable calc */
+        }
+      }
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus-visible,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
+    }
+
+    &Text {
+      background: none;
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus-visible,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
+    }
+  }
+}

package/lib/components/Calendar/Calendar.js

@@ -1,81 +1,27 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactDom = require('react-dom');
-var DatePicker = require('react-datepicker');
-var components_Calendar_components_CalendarInput = require('./components/CalendarInput.js');
-var components_Calendar_components_CalendarHeader = require('./components/CalendarHeader.js');
-var components_Calendar_components_CalendarTime = require('./components/CalendarTime.js');
-var utils_portal = require('../../utils/portal.js');
-var Calendar_module = require('./Calendar.module.scss.js');
-
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { createPortal } from 'react-dom';
+import DatePicker from 'react-datepicker';
+import { CalendarInput } from './components/CalendarInput';
+import { CalendarHeader } from './components/CalendarHeader';
+import { CalendarTime } from './components/CalendarTime';
+import { getPortalContainer } from '../../utils/portal';
+import styles from './Calendar.module.scss';
 const DATE_FORMAT = 'yyyy-MM-dd';
 const TIME_FORMAT = 'HH:mm';
-const CalendarPopperContainer = (container, inPortal) => ({
-  children
-}) => {
-  const content = /*#__PURE__*/React.createElement("div", {
-    className: Calendar_module.default.popper
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "date-picker-popper-container",
-    className: "hz-date-picker-popper-container"
-  }, children));
-  if (inPortal) {
-    return content;
-  }
-  return container && children ? /*#__PURE__*/reactDom.createPortal(content, container) : null;
+const CalendarPopperContainer = (container, inPortal) => ({ children }) => {
+    const content = (React.createElement("div", { className: styles.popper },
+        React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)));
+    if (inPortal) {
+        return content;
+    }
+    return container && children ? createPortal(content, container) : null;
 };
-const Calendar = ({
-  calendarClassName,
-  className,
-  containerClassName,
-  date,
-  inputLabel,
-  inputClassName,
-  onDateChange,
-  showTimeInput,
-  size = 'medium',
-  container = `body`,
-  inPortal = false,
-  dateFormat = DATE_FORMAT,
-  timeFormat = TIME_FORMAT,
-  'data-test': dataTest = 'calendar',
-  ...props
-}) => {
-  const PopperContainer = React.useMemo(() => CalendarPopperContainer(utils_portal.getPortalContainer(container), inPortal), [container, inPortal]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(Calendar_module.default.container, {
-      [Calendar_module.default.time]: showTimeInput
-    }, containerClassName)
-  }, /*#__PURE__*/React.createElement(DatePicker, {
-    ...props,
-    "data-test": dataTest,
-    calendarClassName: cn(Calendar_module.default.calendar, calendarClassName),
-    className: className,
-    customInput: /*#__PURE__*/React.createElement(components_Calendar_components_CalendarInput.CalendarInput, {
-      "data-test": `${dataTest}-input`,
-      label: inputLabel,
-      textFieldSize: size,
-      className: inputClassName
-    }),
-    customTimeInput: /*#__PURE__*/React.createElement(components_Calendar_components_CalendarTime.CalendarTime, {
-      "data-test": `${dataTest}-time`
-    }),
-    dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat,
-    onChange: onDateChange,
-    popperContainer: PopperContainer,
-    renderCustomHeader: ({
-      ...props
-    }) => /*#__PURE__*/React.createElement(components_Calendar_components_CalendarHeader.CalendarHeader, {
-      ...props
-    }),
-    selected: date,
-    timeFormat: timeFormat,
-    showPopperArrow: false,
-    showTimeInput: showTimeInput
-  }));
+export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', container = `body`, inPortal = false, dateFormat = DATE_FORMAT, timeFormat = TIME_FORMAT, 'data-test': dataTest = 'calendar', ...props }) => {
+    const PopperContainer = useMemo(() => CalendarPopperContainer(getPortalContainer(container), inPortal), [container, inPortal]);
+    return (React.createElement("div", { className: cn(styles.container, {
+            [styles.time]: showTimeInput,
+        }, containerClassName) },
+        React.createElement(DatePicker, { ...props, "data-test": dataTest, calendarClassName: cn(styles.calendar, calendarClassName), className: className, customInput: React.createElement(CalendarInput, { "data-test": `${dataTest}-input`, label: inputLabel, textFieldSize: size, className: inputClassName }), customTimeInput: React.createElement(CalendarTime, { "data-test": `${dataTest}-time` }), dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat, onChange: onDateChange, popperContainer: PopperContainer, renderCustomHeader: ({ ...props }) => React.createElement(CalendarHeader, { ...props }), selected: date, timeFormat: timeFormat, showPopperArrow: false, showTimeInput: showTimeInput })));
 };
-
-exports.Calendar = Calendar;
-//# sourceMappingURL=Calendar.js.map
+//# sourceMappingURL=Calendar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":[null],"names":["DATE_FORMAT","TIME_FORMAT","CalendarPopperContainer","container","inPortal","children","content","React","createElement","className","styles","popper","createPortal","Calendar","calendarClassName","containerClassName","date","inputLabel","inputClassName","onDateChange","showTimeInput","size","dateFormat","timeFormat","dataTest","props","PopperContainer","useMemo","getPortalContainer","cn","time","DatePicker","calendar","customInput","CalendarInput","label","textFieldSize","customTimeInput","CalendarTime","onChange","popperContainer","renderCustomHeader","CalendarHeader","selected","showPopperArrow"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAA+B,MAAM,kBAAkB,CAAA;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAmB,MAAM,oBAAoB,CAAA;AAExE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAmBH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,eACE,QAAQ,EACnB,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAC,aAAa,iBAAY,GAAG,QAAQ,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjI,eAAe,EAAE,oBAAC,YAAY,iBAAY,GAAG,QAAQ,OAAO,GAAI,EAChE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAc,OAAK,KAAK,GAAI,EACnE,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

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