@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.64

package/dist/cjs/f/fields/V2/TextareaInput/styles.scss

@@ -1,53 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-padding: .55em .75em;
-$default-border: 1px solid var(--outline-inputs);
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$default-border: var(--theme-default-input-border);
-$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);
-
-.#{bem.$base}.text-area-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-
-  > .textarea {
-    background: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
-    color: var(--y);
-    outline: none;
-    padding: $default-padding;
-    width: 100%;
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-
-    &:disabled {
-      background-color: $disabled-background;
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:active {
-        border: $hover-border;
-      }
-
-      &:focus {
-        border: $focus-border;
-      }
-    }
-  }
-}

package/dist/cjs/f/fields/V2/index.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CheckboxV2", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.Checkbox;
-  }
-});
-Object.defineProperty(exports, "ChoicesInputV2", {
-  enumerable: true,
-  get: function () {
-    return _ChoicesInput.ChoicesInput;
-  }
-});
-Object.defineProperty(exports, "EditorInputV2", {
-  enumerable: true,
-  get: function () {
-    return _EditorInput.EditorInput;
-  }
-});
-Object.defineProperty(exports, "LinkInputV2", {
-  enumerable: true,
-  get: function () {
-    return _LinkInput.LinkInput;
-  }
-});
-Object.defineProperty(exports, "QueryChoicesV2", {
-  enumerable: true,
-  get: function () {
-    return _QueryChoices.QueryChoices;
-  }
-});
-Object.defineProperty(exports, "QueryComboboxV2", {
-  enumerable: true,
-  get: function () {
-    return _QueryCombobox.QueryCombobox;
-  }
-});
-Object.defineProperty(exports, "QuerySelectV2", {
-  enumerable: true,
-  get: function () {
-    return _QuerySelect.QuerySelect;
-  }
-});
-Object.defineProperty(exports, "RatingsInputV2", {
-  enumerable: true,
-  get: function () {
-    return _RatingsInput.RatingsInput;
-  }
-});
-Object.defineProperty(exports, "SelectInputV2", {
-  enumerable: true,
-  get: function () {
-    return _SelectInput.SelectInput;
-  }
-});
-Object.defineProperty(exports, "TextInputV2", {
-  enumerable: true,
-  get: function () {
-    return _TextInput.TextInput;
-  }
-});
-Object.defineProperty(exports, "TextareaInputV2", {
-  enumerable: true,
-  get: function () {
-    return _TextareaInput.TextareaInput;
-  }
-});
-var _TextInput = require("./TextInput");
-var _SelectInput = require("./SelectInput");
-var _ChoicesInput = require("./ChoicesInput");
-var _TextareaInput = require("./TextareaInput");
-var _RatingsInput = require("./RatingsInput");
-var _QueryCombobox = require("./QueryCombobox");
-var _QuerySelect = require("./QuerySelect");
-var _Checkbox = require("./Checkbox");
-var _QueryChoices = require("./QueryChoices");
-var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");

package/dist/es/f/common/InputWrapper/InputWrapper.js

@@ -1,61 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'input-wrapper';
-
-/**
- * This is the component description.
- */
-const InputWrapper = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  columnSpan,
-  desktopColumnSpan
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: {
-    ...style,
-    '--column-span': columnSpan || 'var(--columns)',
-    '--column-span-md': desktopColumnSpan || 'var(--columns)'
-  }
-}, children);
-InputWrapper.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 children JSX
-   */
-  children: PropTypes.node,
-  /**
-   * How many columns the input should span
-   */
-  columnSpan: PropTypes.number,
-  /**
-   * How many columns the input should span on desktop
-   */
-  desktopColumnSpan: PropTypes.number
-};
-InputWrapper.defaultProps = {
-  // as      :'label',
-};
-export default InputWrapper;

package/dist/es/f/common/InputWrapper/index.js

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

package/dist/es/f/common/InputWrapper/styles.scss

@@ -1,13 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.input-wrapper {
-  grid-column: span var(--column-span);
-
-  @include mixins.media($from: $sm-md) {
-    grid-column: span var(--column-span-md);
-  }
-}

package/dist/es/f/common/V2/Description/Description.js

@@ -1,68 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useInsertionEffect } from 'react';
-import { useField } from 'formik';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'description';
-
-/**
- * This is the component description.
- */
-const Description = ({
-  id,
-  className: userClassName,
-  style,
-  description,
-  name,
-  color
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [, meta] = useField(name);
-  const hasError = meta.touched && meta.error;
-  if (hasError || description) {
-    return /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName, hasError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
-      style: style
-    }, hasError ? meta.error : description);
-  }
-  return null;
-};
-Description.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 base color for the description
-   */
-  color: PropTypes.string,
-  /**
-   * Input description - extra description to guide a use in filling the input
-   */
-  description: PropTypes.string,
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: PropTypes.string.isRequired
-};
-Description.defaultProps = {
-  color: 'metadata'
-};
-export default Description;

package/dist/es/f/common/V2/Description/index.js

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

package/dist/es/f/common/V2/Description/styles.scss

@@ -1,10 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-
-.#{bem.$base}.description {
-  color: var(--x);
-}
-
-

package/dist/es/f/common/V2/Label/Label.js

@@ -1,76 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useInsertionEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'form-label';
-
-/**
- * This is the component description.
- */
-const Label = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  name,
-  color,
-  optional,
-  as: Wrapper
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    htmlFor: Wrapper === 'label' ? name : undefined,
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, children, optional && ' (Optional)');
-};
-Label.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 children JSX
-   */
-  children: PropTypes.node,
-  /**
-   *  The name of the input label
-   */
-  name: PropTypes.string,
-  /**
-   *  The html tag that acts as an input label
-   */
-  as: PropTypes.node,
-  /**
-   *  The default color of the label
-   */
-  color: PropTypes.string,
-  /**
-   * Whether the input should have an optional tag
-   */
-  optional: PropTypes.bool
-};
-Label.defaultProps = {
-  as: 'label',
-  color: 'paragraph',
-  optional: false
-};
-export default Label;

package/dist/es/f/common/V2/Label/index.js

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

package/dist/es/f/common/V2/Label/styles.scss

@@ -1,9 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.form-label {
-  color: var(--x);
-}

package/dist/es/f/common/V2/index.js

@@ -1,2 +0,0 @@
-export { Label as FormLabelV2 } from "./Label";
-export { Description as FormDescriptionV2 } from "./Description";

package/dist/es/f/fields/V2/Checkbox/Checkbox.js

@@ -1,114 +0,0 @@
-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 { useInsertionEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { useField } from 'formik';
-import { FormLabelV2, FormDescriptionV2 } from "../../../common";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'checkbox';
-
-/**
- * This is the component description.
- */
-const Checkbox = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  label,
-  description,
-  disabled,
-  optional,
-  labelColor
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [field] = useField({
-    name,
-    type: 'checkbox'
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, label && /*#__PURE__*/React.createElement(FormLabelV2, {
-    name: name,
-    color: labelColor,
-    optional: optional
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
-    id: name,
-    className: "input",
-    type: "checkbox",
-    disabled: disabled
-  }, field)), /*#__PURE__*/React.createElement(FormDescriptionV2, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
-};
-Checkbox.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 input name (html - and Formik state)
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * The Input description to guide the user if it's not obvious
-   */
-  description: PropTypes.string,
-  /**
-   * Whether the input should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The color of the label
-   */
-  labelColor: PropTypes.string,
-  /**
-   * The input label
-   */
-  label: PropTypes.string,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: PropTypes.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: PropTypes.number,
-  /**
-   * Whether the input should have an optional tag
-   */
-  optional: PropTypes.bool
-};
-Checkbox.defaultProps = {
-  disabled: false
-};
-export default Checkbox;

package/dist/es/f/fields/V2/Checkbox/index.js

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

package/dist/es/f/fields/V2/Checkbox/styles.scss

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.checkbox {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-}

package/dist/es/f/fields/V2/ChoicesInput/ChoicesInput.js

@@ -1,148 +0,0 @@
-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 { useInsertionEffect, memo } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-
-import { Choice } from "./common";
-import { FormDescriptionV2, FormLabelV2 } from "../../../common";
-const baseClassName = styleNames.base;
-const componentClassName = 'choices-input';
-
-/**
- * This is the component description.
- */
-const ChoicesInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  validate,
-  options,
-  multiple,
-  color,
-  label,
-  labelColor,
-  optional,
-  disabled,
-  description,
-  spaceBetween,
-  ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, label && /*#__PURE__*/React.createElement(FormLabelV2, {
-    name: name,
-    color: labelColor,
-    optional: optional
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-    className: `x-${color}`,
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescriptionV2, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
-};
-ChoicesInput.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 choices name
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * The input field validator function
-   */
-  validate: PropTypes.string,
-  /**
-   * The choices input options
-   */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple: PropTypes.bool,
-  /**
-   * how many columns should be displayed on the mobile grid
-   */
-  gridColumnsMobile: PropTypes.number,
-  /**
-   * The choice color
-   */
-  color: PropTypes.string,
-  /**
-   * The selected choice color
-   */
-  colorChecked: PropTypes.string,
-  /**
-   * The label of the choices input
-   */
-  label: PropTypes.string,
-  /**
-   * Whether all the Choices inputs should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-  * Whether the input is optional or not
-  */
-  optional: PropTypes.bool,
-  /**
-   * The select input description
-   */
-  description: PropTypes.string,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: PropTypes.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: PropTypes.number,
-  /**
-   * The color of the label
-   */
-  labelColor: PropTypes.string
-};
-ChoicesInput.defaultProps = {
-  color: 'interactive',
-  disabled: false
-};
-export default /*#__PURE__*/memo(ChoicesInput);