@inseefr/lunatic 2.7.20-rc.2 → 3.0.0-rc.1

package/lib/components/{commons/components/combo-box/selection/__snapshots__/selection.spec.tsx.snap → shared/Combobox/Selection/__snapshots__/ComboboxSelection.spec.tsx.snap}

@@ -5,9 +5,7 @@ exports[`Selection component > should render correctly when it is disabled 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
-  class="lunatic-combo-box-selection"
-  id="idUndefined"
+  class="lunatic-combo-box-selection disabled"
   role="combobox"
 >
   <div
@@ -27,9 +25,7 @@ exports[`Selection component > should render correctly when it is editable 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div
@@ -48,9 +44,7 @@ exports[`Selection component > should render correctly when it is expanded 1`] =
   aria-controls="todo"
   aria-expanded="true"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div
@@ -68,9 +62,7 @@ exports[`Selection component > should render correctly with default props 1`] =
   aria-autocomplete="list"
   aria-controls="todo"
   aria-haspopup="listbox"
-  aria-owns="idUndefined"
   class="lunatic-combo-box-selection"
-  id="idUndefined"
   role="combobox"
 >
   <div

package/lib/components/shared/Combobox/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/components/{commons/components/errors/errors.js → shared/ComponentErrors/ComponentErrors.js}

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.ComponentErrors = ComponentErrors;
 exports.getComponentErrors = getComponentErrors;
-require("./errors.scss");
+require("./ComponentErrors.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,14 +16,16 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * Display a list of error as simple red text
  */
-function Errors(_ref) {
-  var errors = _ref.errors;
-  if (!errors) {
+function ComponentErrors(_ref) {
+  var errors = _ref.errors,
+    componentId = _ref.componentId;
+  var componentErrors = Array.isArray(errors) ? errors : getComponentErrors(errors, componentId);
+  if (!componentErrors) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "lunatic-errors",
-    children: errors.map(function (_ref2) {
+    children: componentErrors.map(function (_ref2) {
       var id = _ref2.id,
         errorMessage = _ref2.errorMessage;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -46,5 +48,4 @@ function getComponentErrors(errors, componentId) {
     return activeErrors[1];
   }
   return undefined;
-}
-var _default = exports["default"] = Errors;
+}

package/lib/components/shared/ComponentErrors/ComponentErrors.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+var _ComponentErrors = require("./ComponentErrors");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Errors component', function () {
+  var errors = {
+    id1: [{
+      id: 'error1',
+      errorMessage: 'Error 1 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }],
+    id2: [{
+      id: 'error2',
+      errorMessage: 'Error 2 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }, {
+      id: 'error3',
+      errorMessage: 'Error 3 message',
+      criticality: 'ERROR',
+      typeOfControl: 'CONSISTENCY'
+    }]
+  };
+  (0, _vitest.it)('renders null when no active errors', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+        errors: errors,
+        componentId: "id3"
+      })),
+      container = _render.container;
+    (0, _vitest.expect)(container.firstChild).toBeNull();
+  });
+  (0, _vitest.it)('renders active errors', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+        errors: errors,
+        componentId: "id2"
+      })),
+      getByText = _render2.getByText;
+    (0, _vitest.expect)(getByText('Error 2 message')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('Error 3 message')).toBeInTheDocument();
+  });
+});

package/lib/components/shared/ComponentWrapper.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentWrapper = ComponentWrapper;
+var _Missing = require("./Missing/Missing");
+var _VariableStatus = require("./VariableStatus/VariableStatus");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Declarations = require("./Declarations/Declarations");
+var _function = require("../../utils/function");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Wrapper around Lunatic components, handle Declarations and missing buttons
+ *
+ * ## The structure :
+ *
+ * |--------------------------|
+ * |    DeclarationBefore     |
+ * |__________________________|
+ * |--------------------------|
+ * |        Component         |
+ * |__________________________|
+ * |--------------------------|
+ * |     Missing Buttons      |
+ * |__________________________|
+ */
+function ComponentWrapper(props) {
+  var id = props.id,
+    declarations = props.declarations,
+    children = props.children,
+    management = props.management,
+    handleChange = props.handleChange;
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "BEFORE_QUESTION_TEXT",
+      declarations: declarations,
+      id: id
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "field-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])({
+          'field-with-tooltip': management,
+          field: !management
+        }),
+        children: children
+      }), management && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "tooltip"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
+      type: "DETACHABLE",
+      declarations: declarations,
+      id: id
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Missing.Missing, _objectSpread(_objectSpread({}, props), {}, {
+      handleChange: handleChange !== null && handleChange !== void 0 ? handleChange : _function.voidFunction
+    }))]
+  });
+  return management ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VariableStatus.VariableStatus, {
+    children: content
+  }) : content;
+}

package/lib/components/shared/Declarations/Declarations.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Declarations = exports.Declaration = void 0;
+var _customizedComponent = require("../HOC/customizedComponent");
+require("./Declarations.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Declaration = exports.Declaration = (0, _customizedComponent.customizedComponent)('Declaration', function (_ref) {
+  var children = _ref.children,
+    type = _ref.type;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": "declaration",
+    className: (0, _classnames["default"])('declaration-lunatic', "declaration-".concat(type.toLowerCase())),
+    children: children
+  });
+});
+function LunaticDeclarations(_ref2) {
+  var _declarations$filter;
+  var id = _ref2.id,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'AFTER_QUESTION_TEXT' : _ref2$type,
+    declarations = _ref2.declarations;
+  var filtered = (_declarations$filter = declarations === null || declarations === void 0 ? void 0 : declarations.filter(function (d) {
+    return d.position === type;
+  })) !== null && _declarations$filter !== void 0 ? _declarations$filter : [];
+  if (filtered.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: "declarations-".concat(id, "-").concat(type),
+    className: "declarations-lunatic",
+    children: filtered.map(function (_ref3) {
+      var id = _ref3.id,
+        label = _ref3.label,
+        declarationType = _ref3.declarationType;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Declaration, {
+        type: declarationType,
+        children: label
+      }, id);
+    })
+  });
+}
+var Declarations = exports.Declarations = (0, _customizedComponent.customizedComponent)('Declarations', LunaticDeclarations);

package/lib/components/{declarations/declarations.spec.js → shared/Declarations/Declarations.spec.js}

@@ -1,10 +1,9 @@
 "use strict";
 
-var _declarations = _interopRequireDefault(require("./declarations"));
+var _Declarations = require("./Declarations");
 var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var declarations = [{
   id: '1',
   label: 'Declaration 1',
@@ -22,11 +21,11 @@ var declarations = [{
   position: 'DETACHABLE'
 }];
 (0, _vitest.describe)('Declarations component', function () {
-  (0, _vitest.it)('renders correctly with filtered declarations', function () {
+  (0, _vitest.it)('renders correctly with filtered Declarations', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-AFTER_QUESTION_TEXT"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "AFTER_QUESTION_TEXT",
           declarations: declarations
@@ -41,7 +40,7 @@ var declarations = [{
     (0, _vitest.expect)(declarationElement).toHaveClass('declaration-lunatic');
     (0, _vitest.expect)(declarationElement).toHaveClass('declaration-after');
   });
-  (0, _vitest.it)('renders nothing with unfiltered declarations', function () {
+  (0, _vitest.it)('renders nothing with unfiltered Declarations', function () {
     var declarationstest = [{
       id: '3',
       label: 'Declaration 3',
@@ -51,7 +50,7 @@ var declarations = [{
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-BEFORE_QUESTION_TEXT"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "BEFORE_QUESTION_TEXT",
           declarations: declarationstest
@@ -61,11 +60,11 @@ var declarations = [{
     var declarationsElement = queryByTestId('declarations-1-BEFORE_QUESTION_TEXT');
     (0, _vitest.expect)(declarationsElement.nextElementSibling).toBeNull();
   });
-  (0, _vitest.it)('renders nothing with empty declarations array', function () {
+  (0, _vitest.it)('renders nothing with empty Declarations array', function () {
     var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           "data-testid": "declarations-1-DETACHABLE"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_declarations["default"], {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Declarations.Declarations, {
           id: "1",
           type: "DETACHABLE",
           declarations: []

package/lib/components/shared/Fieldset/Fieldset.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Fieldset = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _customizedComponent = require("../HOC/customizedComponent");
+var _LabelDescription = require("../LabelDescription");
+require("./Fieldset.scss");
+var _isElement = require("../../../utils/is-element");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function LunaticFieldset(_ref) {
+  var children = _ref.children,
+    legend = _ref.legend,
+    description = _ref.description,
+    className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: (0, _classnames["default"])(className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
+      children: [labelToReactNode(legend), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelDescription.LabelDescription, {
+        value: description
+      })]
+    }), children]
+  });
+}
+function labelToReactNode(label) {
+  if (!label) {
+    return '';
+  }
+  if (typeof label === 'string' || typeof label === 'boolean' || typeof label === 'number') {
+    return label;
+  }
+  if (_typeof(label) === 'object') {
+    if ((0, _isElement.isElement)(label)) return label;
+    if ('value' in label && typeof label.value === 'string') {
+      return label.value;
+    }
+  }
+  return "";
+}
+var Fieldset = exports.Fieldset = (0, _customizedComponent.customizedComponent)('Fieldset', LunaticFieldset);

package/lib/components/shared/Fieldset/Fieldset.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Fieldset = require("./Fieldset");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Fieldset', function () {
+  (0, _vitest.it)('renders the legend text', function () {
+    var legendText = 'Example Legend';
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        legend: legendText
+      })),
+      getByText = _render.getByText;
+    var legendElement = getByText(legendText);
+    (0, _vitest.expect)(legendElement).toBeInTheDocument();
+  });
+  (0, _vitest.it)('renders the children', function () {
+    var childText = 'Example child text';
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: childText
+        })
+      })),
+      getByText = _render2.getByText;
+    var childElement = getByText(childText);
+    (0, _vitest.expect)(childElement).toBeInTheDocument();
+  });
+  (0, _vitest.it)('applies the className', function () {
+    var className = 'custom-class';
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
+        className: className
+      })),
+      container = _render3.container;
+    var fieldsetElement = container.querySelector('fieldset');
+    (0, _vitest.expect)(fieldsetElement).toHaveClass(className);
+  });
+});

package/lib/components/{commons/create-customizable-field.js → shared/HOC/customizedComponent.js}

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.customizedComponent = customizedComponent;
 var _react = require("react");
-var _lunaticContext = require("../../use-lunatic/lunatic-context");
+var _lunaticContext = require("../../../use-lunatic/lunatic-context");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function createCustomizableLunaticField(LunaticField, name) {
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } /**
+ * Create a replaceable version of a component
+ */
+function customizedComponent(name, LunaticField) {
   var Memoized = /*#__PURE__*/(0, _react.memo)(LunaticField);
   Memoized.displayName = name;
   return function OverlayField(props) {
@@ -24,5 +26,4 @@ function createCustomizableLunaticField(LunaticField, name) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Memoized, _objectSpread({}, props));
   };
-}
-var _default = exports["default"] = createCustomizableLunaticField;
+}

package/lib/components/{commons/icons → shared/Icons}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CheckboxChecked", {
+Object.defineProperty(exports, "CheckboxCheckedIcon", {
   enumerable: true,
   get: function get() {
     return _checkboxCheckedIcon.CheckboxCheckedIcon;
   }
 });
-Object.defineProperty(exports, "CheckboxUnchecked", {
+Object.defineProperty(exports, "CheckboxUncheckedIcon", {
   enumerable: true,
   get: function get() {
     return _checkboxUncheckedIcon.CheckboxUncheckedIcon;
@@ -51,13 +51,13 @@ Object.defineProperty(exports, "OpenedIcon", {
     return _openedIcon.OpenedIcon;
   }
 });
-Object.defineProperty(exports, "RadioChecked", {
+Object.defineProperty(exports, "RadioCheckedIcon", {
   enumerable: true,
   get: function get() {
     return _radioCheckedIcon.RadioCheckedIcon;
   }
 });
-Object.defineProperty(exports, "RadioUnchecked", {
+Object.defineProperty(exports, "RadioUncheckedIcon", {
   enumerable: true,
   get: function get() {
     return _radioUncheckedIcon.RadioUncheckedIcon;

package/lib/components/shared/Label/Label.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _customizedComponent = require("../HOC/customizedComponent");
+var _LabelDescription = require("../LabelDescription");
+require("./Label.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * Label displayed on top of a field
+ */
+function LunaticLabel(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    htmlFor = _ref.htmlFor,
+    className = _ref.className,
+    style = _ref.style,
+    description = _ref.description;
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    htmlFor: htmlFor,
+    id: id,
+    className: (0, _classnames["default"])('lunatic-label', className),
+    style: style,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelDescription.LabelDescription, {
+      value: description
+    })]
+  });
+}
+var Label = exports.Label = (0, _customizedComponent.customizedComponent)('Label', LunaticLabel);

package/lib/components/shared/Label/Label.spec.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Label = require("./Label");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Label', function () {
+  (0, _vitest.it)('renders null when children is falsy', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+        htmlFor: "input",
+        id: "label",
+        description: "This is a label",
+        children: null
+      })),
+      container = _render.container;
+    (0, _vitest.expect)(container.firstChild).toBeNull();
+  });
+  (0, _vitest.it)('renders a label without description', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+          htmlFor: "kze792d8",
+          id: "label",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "Name"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          id: "kze792d8",
+          className: "",
+          type: "number",
+          "aria-labelledby": "label",
+          min: "0",
+          max: "10",
+          value: "",
+          lang: "en"
+        })]
+      })),
+      getByText = _render2.getByText,
+      queryByText = _render2.queryByText;
+    var label = getByText('Name');
+    (0, _vitest.expect)(label).toBeInTheDocument();
+    (0, _vitest.expect)(label.parentNode).toHaveAttribute('for', 'kze792d8');
+    var description = queryByText('This is a label');
+    (0, _vitest.expect)(description).not.toBeInTheDocument();
+  });
+});

package/lib/components/shared/LabelDescription.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LabelDescription = LabelDescription;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LabelDescription(_ref) {
+  var value = _ref.value,
+    className = _ref.className;
+  if (typeof value === 'string' && value.length > 0 || /*#__PURE__*/_react["default"].isValidElement(value)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames["default"])('label-description', className),
+      children: value
+    });
+  }
+  return null;
+}

package/lib/components/{commons/components/md-label/md-label.js → shared/MDLabel/MDLabel.js}

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.MDLabel = void 0;
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
-var _link = _interopRequireDefault(require("./link"));
-var _function = require("../../../../utils/function");
+var _MDLabelLink = require("./MDLabelLink");
+var _function = require("../../../utils/function");
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -14,10 +14,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var DEFAULT_LOG_FUNCTION = _function.voidFunction;
-var MdLabel = function MdLabel(_ref) {
+var MDLabel = exports.MDLabel = function MDLabel(_ref) {
   var expression = _ref.expression,
     _ref$logFunction = _ref.logFunction,
     logFunction = _ref$logFunction === void 0 ? DEFAULT_LOG_FUNCTION : _ref$logFunction;
@@ -33,7 +33,7 @@ var renderComponentsFor = function renderComponentsFor(expression, extraProps) {
     p: _react.Fragment,
     br: 'br',
     a: function a(props) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_link["default"], _objectSpread({}, _objectSpread(_objectSpread({}, extraProps), props)));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MDLabelLink.MDLabelLink, _objectSpread({}, _objectSpread(_objectSpread({}, extraProps), props)));
     }
   };
   if (/\n\n/.test(expression)) {
@@ -42,5 +42,4 @@ var renderComponentsFor = function renderComponentsFor(expression, extraProps) {
     });
   }
   return components;
-};
-var _default = exports["default"] = MdLabel;
+};