@pareto-engineering/design-system 2.0.0-alpha.64 → 2.0.0-alpha.65

package/dist/cjs/f/common/Label/Label.js

@@ -32,6 +32,7 @@ var Label = _ref => {
     children,
     name,
     color,
+    optional,
     as: Wrapper // ...otherProps
 
   } = _ref;
@@ -44,7 +45,7 @@ var Label = _ref => {
     className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, children, optional && '(Optional)');
 };
 
 Label.propTypes = {
@@ -81,12 +82,17 @@ Label.propTypes = {
   /**
    *  The default color of the label
    */
-  color: _propTypes.default.string
+  color: _propTypes.default.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: _propTypes.default.bool
 };
 Label.defaultProps = {
-  // someProp:false
   as: 'label',
-  color: 'main2'
+  color: 'main2',
+  optional: false
 };
 var _default = Label;
 exports.default = _default;

package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -49,6 +49,7 @@ var ChoicesInput = _ref => {
     color,
     colorChecked,
     label,
+    optional,
     disabled // ...otherProps
 
   } = _ref;
@@ -64,7 +65,8 @@ var ChoicesInput = _ref => {
     }, style) // {...otherProps}
 
   }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
@@ -144,7 +146,12 @@ ChoicesInput.propTypes = {
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,

package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js

@@ -40,6 +40,7 @@ var QueryCombobox = _ref => {
     name,
     label,
     color,
+    optional,
     description,
     disabled,
     debounceMs,
@@ -117,6 +118,7 @@ var QueryCombobox = _ref => {
     disabled,
     name,
     label,
+    optional,
     description,
     setValue,
     value,
@@ -226,7 +228,12 @@ QueryCombobox.propTypes = {
   /**
    * The query combobox field validator function
    */
-  validate: _propTypes.default.func
+  validate: _propTypes.default.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -49,7 +49,8 @@ var Combobox = _ref => {
     minLength,
     isFetching,
     transformSearch,
-    disabled // ...otherProps
+    disabled,
+    optional // ...otherProps
 
   } = _ref;
   var {
@@ -97,7 +98,8 @@ var Combobox = _ref => {
     style: style,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
@@ -200,7 +202,12 @@ Combobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 Combobox.defaultProps = {// someProp: false
 };

package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -57,6 +57,7 @@ var MultipleCombobox = _ref => {
     style,
     label,
     name,
+    optional,
     options: items,
     getOptions,
     setValue,
@@ -173,7 +174,8 @@ var MultipleCombobox = _ref => {
     className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
@@ -299,7 +301,12 @@ MultipleCombobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 MultipleCombobox.defaultProps = {// someProp: false
 };

package/dist/cjs/f/fields/QuerySelect/QuerySelect.js

@@ -34,6 +34,7 @@ var QuerySelect = _ref => {
     style,
     name,
     label,
+    optional,
     query,
     variables,
     optionsKeyMap,
@@ -97,6 +98,7 @@ var QuerySelect = _ref => {
     style: style,
     name: name,
     label: label,
+    optional: optional,
     color: color,
     description: description,
     disabled: isFetching || disabled,
@@ -190,7 +192,12 @@ QuerySelect.propTypes = {
   /**
    * The query select field validator function
    */
-  validate: _propTypes.default.func
+  validate: _propTypes.default.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 QuerySelect.defaultProps = {
   disabled: false,

package/dist/cjs/f/fields/SelectInput/SelectInput.js

@@ -42,6 +42,7 @@ var SelectInput = _ref => {
     color,
     options,
     validate,
+    optional,
     description,
     disabled,
     isLoading,
@@ -61,7 +62,8 @@ var SelectInput = _ref => {
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name
+    name: name,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "select-wrapper"
   }, /*#__PURE__*/React.createElement("select", _extends({
@@ -154,7 +156,12 @@ SelectInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: _propTypes.default.string
+  autoComplete: _propTypes.default.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 SelectInput.defaultProps = {
   disabled: false,

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -40,6 +40,7 @@ var TextareaInput = _ref => {
     labelAsDescription,
     textAreaId,
     rows,
+    optional,
     textAreaColor,
     labelColor,
     description,
@@ -64,7 +65,8 @@ var TextareaInput = _ref => {
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
     className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
-    color: labelColor
+    color: labelColor,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: "textarea"
@@ -163,7 +165,12 @@ TextareaInput.propTypes = {
    * Whether to disable or allow only a certain method of resizing the area
    * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
    */
-  resize: _propTypes.default.string
+  resize: _propTypes.default.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 TextareaInput.defaultProps = {
   rows: 3,

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

@@ -17,6 +17,7 @@ const Label = ({
   children,
   name,
   color,
+  optional,
   as: Wrapper // ...otherProps
 
 }) => {
@@ -29,7 +30,7 @@ const Label = ({
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, children, optional && '(Optional)');
 };
 
 Label.propTypes = {
@@ -66,11 +67,16 @@ Label.propTypes = {
   /**
    *  The default color of the label
    */
-  color: PropTypes.string
+  color: PropTypes.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
 };
 Label.defaultProps = {
-  // someProp:false
   as: 'label',
-  color: 'main2'
+  color: 'main2',
+  optional: false
 };
 export default Label;

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

@@ -27,6 +27,7 @@ const ChoicesInput = ({
   color,
   colorChecked,
   label,
+  optional,
   disabled // ...otherProps
 
 }) => {
@@ -43,7 +44,8 @@ const ChoicesInput = ({
     } // {...otherProps}
 
   }, label && /*#__PURE__*/React.createElement(FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
@@ -123,7 +125,12 @@ ChoicesInput.propTypes = {
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -19,6 +19,7 @@ const QueryCombobox = ({
   name,
   label,
   color,
+  optional,
   description,
   disabled,
   debounceMs,
@@ -95,6 +96,7 @@ const QueryCombobox = ({
     disabled,
     name,
     label,
+    optional,
     description,
     setValue,
     value,
@@ -204,7 +206,12 @@ QueryCombobox.propTypes = {
   /**
    * The query combobox field validator function
    */
-  validate: PropTypes.func
+  validate: PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -31,7 +31,8 @@ const Combobox = ({
   minLength,
   isFetching,
   transformSearch,
-  disabled // ...otherProps
+  disabled,
+  optional // ...otherProps
 
 }) => {
   const {
@@ -78,7 +79,8 @@ const Combobox = ({
     style: style,
     ref: parentRef
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
@@ -181,7 +183,12 @@ Combobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 Combobox.defaultProps = {// someProp: false
 };

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -32,6 +32,7 @@ const MultipleCombobox = ({
   style,
   label,
   name,
+  optional,
   options: items,
   getOptions,
   setValue,
@@ -146,7 +147,8 @@ const MultipleCombobox = ({
     className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
-    name: name
+    name: name,
+    optional: optional
   }), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
@@ -272,7 +274,12 @@ MultipleCombobox.propTypes = {
   /**
    * Whether the input filed shpuld be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 MultipleCombobox.defaultProps = {// someProp: false
 };

package/dist/es/f/fields/QuerySelect/QuerySelect.js

@@ -16,6 +16,7 @@ const QuerySelect = ({
   style,
   name,
   label,
+  optional,
   query,
   variables,
   optionsKeyMap,
@@ -76,6 +77,7 @@ const QuerySelect = ({
     style: style,
     name: name,
     label: label,
+    optional: optional,
     color: color,
     description: description,
     disabled: isFetching || disabled,
@@ -169,7 +171,12 @@ QuerySelect.propTypes = {
   /**
    * The query select field validator function
    */
-  validate: PropTypes.func
+  validate: PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 QuerySelect.defaultProps = {
   disabled: false,

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -24,6 +24,7 @@ const SelectInput = ({
   color,
   options,
   validate,
+  optional,
   description,
   disabled,
   isLoading,
@@ -43,7 +44,8 @@ const SelectInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    name: name
+    name: name,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "select-wrapper"
   }, /*#__PURE__*/React.createElement("select", _extends({
@@ -136,7 +138,12 @@ SelectInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 SelectInput.defaultProps = {
   disabled: false,

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -24,6 +24,7 @@ const TextareaInput = ({
   labelAsDescription,
   textAreaId,
   rows,
+  optional,
   textAreaColor,
   labelColor,
   description,
@@ -48,7 +49,8 @@ const TextareaInput = ({
   }, /*#__PURE__*/React.createElement(FormLabel, {
     className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
-    color: labelColor
+    color: labelColor,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: "textarea"
@@ -147,7 +149,12 @@ TextareaInput.propTypes = {
    * Whether to disable or allow only a certain method of resizing the area
    * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
    */
-  resize: PropTypes.string
+  resize: PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 TextareaInput.defaultProps = {
   rows: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.64",
+  "version": "2.0.0-alpha.65",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",