@inseefr/lunatic 0.4.0-v2 → 0.4.4-v2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,25 +1,25 @@
-<img align="right" src="docs/img/lunatic-logo.png" alt="Lunatic logo"/>
-
-# Lunatic
-
-Library of questionnaire components
-
-[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml)
-[![npm version](https://badge.fury.io/js/%40inseefr%2Flunatic.svg)](https://badge.fury.io/js/%40inseefr%2Flunatic)
-[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=coverage)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-The documentation can be found in the [docs](https://github.com/InseeFr/Lunatic/tree/master/docs) folder and [browsed online](https://inseefr.github.io/Lunatic).
-
-[Storybook](https://inseefr.github.io/Lunatic/storybook) is also available online.
-
-[Storybook of the future major release](https://inseefr.github.io/Lunatic/storybook-v2) under construction is also available online.
-
-## Usage
-
-An [example](https://github.com/InseeFr/Lunatic/tree/master/example/orchestrator) of use of Lunatic is available. This simple orchestrator is deployed [online](https://inseefr.github.io/Lunatic/orchestrator).
-
-## Editor
-
-A Lunatic Model / Lunatic [Editor](https://github.com/InseeFr/Lunatic/tree/master/example/lunatic-editor) is avaible [online](https://inseefr.github.io/Lunatic/editor).
+<img align="right" src="docs/img/lunatic-logo.png" alt="Lunatic logo"/>
+
+# Lunatic
+
+Library of questionnaire components
+
+[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/%40inseefr%2Flunatic.svg)](https://badge.fury.io/js/%40inseefr%2Flunatic)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=coverage)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+The documentation can be found in the [docs](https://github.com/InseeFr/Lunatic/tree/master/docs) folder and [browsed online](https://inseefr.github.io/Lunatic).
+
+[Storybook](https://inseefr.github.io/Lunatic/storybook) is also available online.
+
+[Storybook of the future major release](https://inseefr.github.io/Lunatic/storybook-v2) under construction is also available online.
+
+## Usage
+
+An [example](https://github.com/InseeFr/Lunatic/tree/master/example/orchestrator) of use of Lunatic is available. This simple orchestrator is deployed [online](https://inseefr.github.io/Lunatic/orchestrator).
+
+## Editor
+
+A Lunatic Model / Lunatic [Editor](https://github.com/InseeFr/Lunatic/tree/master/example/lunatic-editor) is avaible [online](https://inseefr.github.io/Lunatic/editor).

package/lib/components/button/button.scss

@@ -1,24 +1,24 @@
-.button-lunatic {
-	min-width: 20%;
-	color: white;
-	border-color: var(--color-primary-dark);
-	background-color: var(--color-primary-dark);
-	font-size: 1.2em;
-	font-weight: bold;
-	padding: 0.4em;
-	&:hover,
-	&:focus:hover {
-		color: var(--color-primary-dark);
-		background-color: white;
-		border-color: var(--color-primary-dark);
-	}
-	&:focus {
-		outline: none;
-		background-color: var(--color-primary-light);
-		border-color: var(--color-primary-light);
-	}
-	&:disabled {
-		background: var(--color-disabled);
-		color: var(--color-primary-dark);
-	}
-}
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/lib/components/checkbox/checkbox-boolean/lunatic-checkbox-boolean.js

@@ -19,15 +19,18 @@ function LunaticCheckboxBoolean(_ref) {
       options = _ref.options,
       disabled = _ref.disabled,
       onChange = _ref.onChange,
-      custom = _ref.custom;
-  return /*#__PURE__*/_react["default"].createElement(_checkboxBoolean["default"], {
+      custom = _ref.custom,
+      errors = _ref.errors;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_checkboxBoolean["default"], {
     id: id,
     options: options,
     checked: value,
     onClick: onChange,
     disabled: disabled,
     custom: custom
-  });
+  }), /*#__PURE__*/_react["default"].createElement(_commons.Errors, {
+    errors: errors
+  }));
 }
 
 LunaticCheckboxBoolean.defaultProps = {

package/lib/components/checkbox/checkbox-group/lunatic-checkbox-group.js

@@ -18,14 +18,17 @@ function LunaticCheckboxGroup(_ref) {
       value = _ref.value,
       responses = _ref.responses,
       custom = _ref.custom,
-      handleChange = _ref.handleChange;
-  return /*#__PURE__*/_react["default"].createElement(_checkboxGroup["default"], {
+      handleChange = _ref.handleChange,
+      errors = _ref.errors;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_checkboxGroup["default"], {
     id: id,
     options: responses,
     value: value,
     handleChange: handleChange,
     custom: custom
-  });
+  }), /*#__PURE__*/_react["default"].createElement(_commons.Errors, {
+    errors: errors
+  }));
 }
 
 var _default = (0, _commons.createLunaticComponent)(LunaticCheckboxGroup, {

package/lib/components/checkbox/checkbox-one/lunatic-checkbox-one.js

@@ -9,13 +9,26 @@ var _react = _interopRequireDefault(require("react"));
 
 var _radio = _interopRequireDefault(require("../../radio"));
 
+var _commons = require("../../commons");
+
+var _excluded = ["errors"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
 
-function LunaticCheckboxOne(props) {
-  return /*#__PURE__*/_react["default"].createElement(_radio["default"], _extends({}, props, {
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function LunaticCheckboxOne(_ref) {
+  var errors = _ref.errors,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_radio["default"], _extends({}, props, {
     checkboxStyle: true
+  })), /*#__PURE__*/_react["default"].createElement(_commons.Errors, {
+    errors: errors
   }));
 }
 

package/lib/components/commons/components/combo-box/combo-box.scss

@@ -1,218 +1,218 @@
-@mixin preventSelect() {
-	-moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-}
-
-@mixin placeholder {
-	color: gray;
-	@include defaultFont();
-	font-size: 15px;
-	line-height: 34px;
-	vertical-align: middle;
-	font-weight: normal;
-}
-
-@mixin defaultFont {
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-}
-
-@mixin selection() {
-	@include defaultFont();
-}
-
-.lunatic-combo-box-container {
-	position: relative;
-	width: 100%;
-
-	&.default-style {
-		--color-combo-box-selected: Cornsilk;
-		--color-primary-dark: DarkGreen;
-		--color-primary-main: FloralWhite;
-		--color-combo-box-background: snow;
-		--color-disabled: Gainsboro;
-		--color-primary-light: GreenYellow;
-
-		margin-bottom: 10px;
-		.lunatic-combo-box {
-			min-height: 30px;
-			min-width: 260px;
-			width: 100%;
-
-			.lunatic-combo-box-content {
-				.lunatic-combo-box-selection {
-					border-radius: 5px;
-					border: 2px solid var(--color-primary-dark);
-					background-color: var(--color-combo-box-background);
-					&:hover {
-						border-color: var(--color-primary-main);
-					}
-					.lunatic-combo-box-input {
-						height: 34;
-						line-height: 34px;
-						font-size: 15px;
-						padding-left: 4px;
-						@include selection();
-
-						&::placeholder {
-							@include placeholder();
-						}
-					}
-
-					.lunatic-combo-box-selected {
-						height: 34px;
-						line-height: 34px;
-						background-color: var(--color-combo-box-background);
-						border-radius: 5px;
-						padding-left: 4px;
-						@include selection();
-						outline: none;
-
-						display: block;
-						@include placeholder();
-
-						.placeholder {
-						}
-
-						.selection {
-							display: inline-block;
-							line-height: 34px;
-							font-size: 15px;
-						}
-
-						&.disabled {
-							background-color: var(--color-disabled);
-						}
-					}
-				}
-
-				.lunatic-combo-box-panel {
-					@include defaultFont();
-					height: 0;
-					opacity: 0;
-					background-color: var(--color-combo-box-background);
-					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-					&.expended {
-						border: solid 1px var(--color-primary-light);
-						opacity: 1;
-						min-height: 30px;
-						height: max-content;
-						box-shadow: 0 2px 2px grey;
-						border-radius: 4px;
-					}
-					&:focus {
-					}
-					.lunatic-combo-box-option {
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						overflow: hidden;
-						margin-bottom: 0.1em;
-						line-height: 2rem;
-						display: block;
-
-						&.selected {
-							color: var(--color-primary-dark);
-							background-color: var(--color-combo-box-selected);
-						}
-						&:hover {
-							background-color: var(--color-primary-main);
-							color: var(--color-combo-box-background);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.lunatic-combo-box-fab {
-		position: absolute;
-		right: 4px;
-		top: 8px;
-		z-index: 0;
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-icon {
-			svg {
-				fill: white;
-				width: 16px;
-				height: 16px;
-			}
-		}
-	}
-
-	.lunatic-combo-box {
-		position: relative;
-		z-index: 0;
-
-		&:focus {
-			outline: none;
-		}
-
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-combo-box-content {
-			position: absolute;
-			width: 100%;
-
-			.lunatic-combo-box-selection {
-				position: relative;
-				.lunatic-combo-box-input {
-					border: none;
-					margin: 0;
-					padding: 0;
-					background-color: transparent;
-					&:focus {
-						outline: none;
-					}
-
-					width: 100%;
-					/* */
-				}
-
-				.lunatic-combo-box-selected {
-					// position: absolute;
-					top: 0;
-					white-space: nowrap;
-					overflow-x: hidden;
-					width: 100%;
-					height: 100%;
-					display: none;
-					&.displayed {
-						display: block;
-					}
-
-					.placeholder {
-					}
-					.selection {
-					}
-				}
-			}
-
-			ul,
-			li,
-			div,
-			span {
-				margin: 0;
-				padding: 0;
-				border: none;
-				list-style: none;
-			}
-
-			.lunatic-combo-box-panel {
-				&:focus {
-					outline: none;
-				}
-				.lunatic-combo-box-option {
-					white-space: nowrap;
-					@include preventSelect();
-				}
-			}
-		}
-	}
-}
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin placeholder {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+.lunatic-combo-box-container {
+	position: relative;
+	width: 100%;
+
+	&.default-style {
+		--color-combo-box-selected: Cornsilk;
+		--color-primary-dark: DarkGreen;
+		--color-primary-main: FloralWhite;
+		--color-combo-box-background: snow;
+		--color-disabled: Gainsboro;
+		--color-primary-light: GreenYellow;
+
+		margin-bottom: 10px;
+		.lunatic-combo-box {
+			min-height: 30px;
+			min-width: 260px;
+			width: 100%;
+
+			.lunatic-combo-box-content {
+				.lunatic-combo-box-selection {
+					border-radius: 5px;
+					border: 2px solid var(--color-primary-dark);
+					background-color: var(--color-combo-box-background);
+					&:hover {
+						border-color: var(--color-primary-main);
+					}
+					.lunatic-combo-box-input {
+						height: 34;
+						line-height: 34px;
+						font-size: 15px;
+						padding-left: 4px;
+						@include selection();
+
+						&::placeholder {
+							@include placeholder();
+						}
+					}
+
+					.lunatic-combo-box-selected {
+						height: 34px;
+						line-height: 34px;
+						background-color: var(--color-combo-box-background);
+						border-radius: 5px;
+						padding-left: 4px;
+						@include selection();
+						outline: none;
+
+						display: block;
+						@include placeholder();
+
+						.placeholder {
+						}
+
+						.selection {
+							display: inline-block;
+							line-height: 34px;
+							font-size: 15px;
+						}
+
+						&.disabled {
+							background-color: var(--color-disabled);
+						}
+					}
+				}
+
+				.lunatic-combo-box-panel {
+					@include defaultFont();
+					height: 0;
+					opacity: 0;
+					background-color: var(--color-combo-box-background);
+					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+					&.expended {
+						border: solid 1px var(--color-primary-light);
+						opacity: 1;
+						min-height: 30px;
+						height: max-content;
+						box-shadow: 0 2px 2px grey;
+						border-radius: 4px;
+					}
+					&:focus {
+					}
+					.lunatic-combo-box-option {
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						margin-bottom: 0.1em;
+						line-height: 2rem;
+						display: block;
+
+						&.selected {
+							color: var(--color-primary-dark);
+							background-color: var(--color-combo-box-selected);
+						}
+						&:hover {
+							background-color: var(--color-primary-main);
+							color: var(--color-combo-box-background);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.lunatic-combo-box-fab {
+		position: absolute;
+		right: 4px;
+		top: 8px;
+		z-index: 0;
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-icon {
+			svg {
+				fill: white;
+				width: 16px;
+				height: 16px;
+			}
+		}
+	}
+
+	.lunatic-combo-box {
+		position: relative;
+		z-index: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-combo-box-content {
+			position: absolute;
+			width: 100%;
+
+			.lunatic-combo-box-selection {
+				position: relative;
+				.lunatic-combo-box-input {
+					border: none;
+					margin: 0;
+					padding: 0;
+					background-color: transparent;
+					&:focus {
+						outline: none;
+					}
+
+					width: 100%;
+					/* */
+				}
+
+				.lunatic-combo-box-selected {
+					// position: absolute;
+					top: 0;
+					white-space: nowrap;
+					overflow-x: hidden;
+					width: 100%;
+					height: 100%;
+					display: none;
+					&.displayed {
+						display: block;
+					}
+
+					.placeholder {
+					}
+					.selection {
+					}
+				}
+			}
+
+			ul,
+			li,
+			div,
+			span {
+				margin: 0;
+				padding: 0;
+				border: none;
+				list-style: none;
+			}
+
+			.lunatic-combo-box-panel {
+				&:focus {
+					outline: none;
+				}
+				.lunatic-combo-box-option {
+					white-space: nowrap;
+					@include preventSelect();
+				}
+			}
+		}
+	}
+}