@pareto-engineering/design-system 4.0.0-alpha.73 → 4.0.0-alpha.75

package/dist/cjs/f/fields/SelectInput/styles.scss

@@ -14,72 +14,176 @@ $hover-border: var(--theme-hover-input-border);
 $focus-border: var(--theme-focus-input-border);
 $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-gap: var(--gap);
 
-.#{bem.$base}.select-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
 
-  .select-wrapper {
-    background-color: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
+.#{bem.$base}.select-input {
+  > .#{bem.$base}.single {
     display: flex;
     flex-direction: column;
-    padding: $default-padding;
-    padding-right: 0;
-    position: relative;
 
-    &:not(.disabled) {
-      &:hover,
-      &:active {
-        border: $hover-border;
+    > .#{bem.$base}.form-label {
+      margin-bottom: var(--gap);
+    }
+
+    .select-wrapper {
+      background-color: $default-background;
+      border: $default-border;
+      border-radius: $default-input-border-radius;
+      display: flex;
+      flex-direction: column;
+      padding: $default-padding;
+      padding-right: 0;
+      position: relative;
+
+      &:not(.disabled) {
+        &:hover,
+        &:active {
+          border: $hover-border;
+        }
+
+        &:focus {
+          border: $focus-border;
+        }
       }
 
-      &:focus {
-        border: $focus-border;
+      &.disabled {
+        background: $disabled-background;
       }
-    }
 
-    &.disabled {
-      background: $disabled-background;
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &::after {
+        border-radius: $default-input-border-radius;
+      }
+
+      >.#{bem.$base}.loading-circle {
+        position: absolute;
+        right: $default-spacing-size;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      select {
+        appearance: none;
+        background-color: $default-background;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+        background-position: calc(100% - $default-spacing-size);
+        background-repeat: no-repeat;
+        background-size: $default-spacing-size;
+        padding-right: $default-spacing-size;
+
+        &.input {
+          border: none;
+          color: var(--y);
+          outline: none;
+          width: 100%;
+
+          /* stylelint-disable-next-line max-nesting-depth -- required */
+          &:disabled {
+            opacity: 0%;
+          }
+        }
+      }
     }
+  }
 
-    &::placeholder {
-      color: var(--metadata);
+  > .#{bem.$base}.multiple {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    position: relative;
+
+    > .#{bem.$base}.form-label {
+      margin-bottom: var(--gap);
     }
 
-    &::after {
+
+    .#{bem.$base}.popover {
+      border: $default-border;
       border-radius: $default-input-border-radius;
-    }
+      width: 100%;
+
+      >.menu {
+        list-style: none;
+        margin: 0;
+        outline: 0;
+        padding: 0;
+
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        >.item {
+          border-radius: $default-input-border-radius;
+          padding: $default-padding;
+
+          /* stylelint-disable max-nesting-depth -- required */
+          > p {
+            margin: 0;
+          }
 
-    >.#{bem.$base}.loading-circle {
-      position: absolute;
-      right: $default-spacing-size;
-      top: 50%;
-      transform: translateY(-50%);
+          &.#{bem.$modifier-active} {
+            background-color: var(--y);
+
+            > p {
+              color: var(--on-y);
+            }
+          }
+        }
+      }
     }
 
-    select {
-      appearance: none;
-      background-color: $default-background;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
-      background-position: calc(100% - $default-spacing-size);
-      background-repeat: no-repeat;
-      background-size: $default-spacing-size;
-      padding-right: $default-spacing-size;
-
-      &.input {
-        border: none;
-        color: var(--y);
+
+    > .input-container {
+      position: relative;
+
+      > .input {
+        background: $default-background;
+        border: $default-border;
+        border-radius: calc(var(--theme-default-border-radius) / 2);
+        color: var(--paragraph);
         outline: none;
+        padding: $default-padding;
         width: 100%;
 
+        &::placeholder {
+          color: var(--metadata);
+        }
+
         &:disabled {
-          opacity: 0%;
+          background-color: $disabled-background;
+          color: var(--paragraph);
+        }
+
+        &:not(:disabled) {
+          &:hover,
+          &:active {
+            border: $hover-border;
+          }
+
+          &:focus {
+            border: $focus-border;
+          }
+        }
+      }
+    }
+
+
+    >.selected-items {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc($default-gap / 2);
+      margin-bottom: calc($default-gap / 2);
+
+      >.item {
+        >.#{bem.$base}.button {
+          align-items: center;
+          display: flex;
+          gap: calc($default-gap / 2);
+        }
+
+        .close {
+          font-size: calc(var(--s-3) * 1em);
         }
       }
     }

package/dist/es/a/DatePicker/DatePicker.js

@@ -0,0 +1,154 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import { format } from 'date-fns';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'date-picker';
+
+/**
+ * This is the component description.
+ */
+const DatePickerWrapper = ({
+  id,
+  className: userClassName,
+  style,
+  mode,
+  selected,
+  setSelection,
+  fromMonth,
+  toDate,
+  customFooter,
+  timeFrom,
+  setTimeFrom,
+  timeTo,
+  setTimeTo,
+  dateFormat,
+  showDebugger,
+  ...otherProps
+}) => {
+  const convertFooterText = selection => {
+    if (mode === 'single') {
+      return format(selection, dateFormat);
+    }
+    if (mode === 'multiple') {
+      return selection.map(date => format(date, dateFormat)).join(', ');
+    }
+    if (mode === 'range') {
+      return selection.from && selection.to ? `${format(selection.from, dateFormat)} - ${format(selection.to, dateFormat)}` : 'Please pick an additional day.';
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(DayPicker, _extends({
+    mode: mode,
+    selected: selected,
+    onSelect: setSelection,
+    fromMonth: fromMonth,
+    toDate: toDate,
+    showOutsideDays: true,
+    footer: customFooter || /*#__PURE__*/React.createElement("div", {
+      className: "default-footer"
+    }, timeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+      className: "time-label s-1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon"
+    }, "C"), "\xA0 Time"), /*#__PURE__*/React.createElement("div", {
+      className: `time-inputs${timeTo ? ' multiple' : ''}`
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeFrom,
+      onChange: e => setTimeFrom(e.target.value)
+    }), timeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "icon s-2"
+    }, "r"), /*#__PURE__*/React.createElement("input", {
+      className: "s-1",
+      type: "time",
+      value: timeTo,
+      onChange: e => setTimeTo(e.target.value)
+    })))), /*#__PURE__*/React.createElement("p", {
+      className: "s-1 footer-text"
+    }, selected && convertFooterText(selected)))
+  }, otherProps)), showDebugger && /*#__PURE__*/React.createElement("div", {
+    className: "debugger"
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(selected, null, 2))));
+};
+DatePickerWrapper.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The mode for this date picker.
+   */
+  mode: PropTypes.oneOf(['single', 'multiple', 'range']),
+  /**
+   * The current selection.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  selected: PropTypes.objectOf(PropTypes.any).isRequired,
+  /**
+   * The function to update the selection.
+   */
+  setSelection: PropTypes.func.isRequired,
+  /**
+   * The earliest month to display.
+   */
+  fromMonth: PropTypes.instanceOf(Date),
+  /**
+   * The latest month to display.
+   */
+  toDate: PropTypes.instanceOf(Date),
+  /**
+   * Custom footer component.
+   */
+  customFooter: PropTypes.node,
+  /**
+   * The start time.
+   */
+  timeFrom: PropTypes.string,
+  /**
+   * The function to update the start time.
+   */
+  setTimeFrom: PropTypes.func,
+  /**
+   * The end time.
+   */
+  timeTo: PropTypes.string,
+  /**
+   * The function to update the end time.
+   */
+  setTimeTo: PropTypes.func,
+  /**
+   * The date format.
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Show the debugger.
+   */
+  showDebugger: PropTypes.bool
+};
+DatePickerWrapper.defaultProps = {
+  mode: 'single',
+  dateFormat: 'PPP',
+  showDebugger: false
+};
+export default DatePickerWrapper;

package/dist/es/a/DatePicker/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as DatePicker } from "./DatePicker";