@micromag/fields 0.3.821 → 0.3.824

package/assets/css/styles.css

@@ -5,7 +5,7 @@
 .micromag-fields-alignment-label{padding-right:10px}
 .micromag-fields-field-errors-container .micromag-fields-field-errors-error{display:block}
 .micromag-fields-toggle-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-fields-toggle-container .rc-switch{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;overflow:hidden;padding:0;position:relative;-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}.micromag-fields-toggle-container .rc-switch-inner-checked,.micromag-fields-toggle-container .rc-switch-inner-unchecked{color:#fff;font-size:12px;position:absolute;top:0;-webkit-transition:left .3s cubic-bezier(.35,0,.25,1);transition:left .3s cubic-bezier(.35,0,.25,1)}.micromag-fields-toggle-container .rc-switch-inner-checked{left:-14px}.micromag-fields-toggle-container .rc-switch-inner-unchecked{left:24px}.micromag-fields-toggle-container .rc-switch:after{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:rcSwitchOff;animation-name:rcSwitchOff;-webkit-animation-timing-function:cubic-bezier(.35,0,.25,1);animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.26);box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:left .3s cubic-bezier(.35,0,.25,1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}.micromag-fields-toggle-container .rc-switch:hover:after{-webkit-animation-name:rcSwitchOn;animation-name:rcSwitchOn;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.micromag-fields-toggle-container .rc-switch:focus{-webkit-box-shadow:0 0 0 2px #d5f1fd;box-shadow:0 0 0 2px #d5f1fd;outline:none}.micromag-fields-toggle-container .rc-switch-checked{background-color:#87d068;border:1px solid #87d068}.micromag-fields-toggle-container .rc-switch-checked .rc-switch-inner-checked{left:6px}.micromag-fields-toggle-container .rc-switch-checked .rc-switch-inner-unchecked{left:44px}.micromag-fields-toggle-container .rc-switch-checked:after{left:22px}.micromag-fields-toggle-container .rc-switch-disabled{background:#ccc;border-color:#ccc;cursor:no-drop}.micromag-fields-toggle-container .rc-switch-disabled:after{-webkit-animation-name:none;animation-name:none;background:#9e9e9e;cursor:no-drop}.micromag-fields-toggle-container .rc-switch-disabled:hover:after{-webkit-animation-name:none;animation-name:none;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.micromag-fields-toggle-container .rc-switch-label{display:inline-block;font-size:14px;line-height:20px;padding-left:10px;pointer-events:none;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;vertical-align:middle;white-space:normal}@-webkit-keyframes micromag-fields-toggle-rcSwitchOn{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.25);transform:scale(1.25)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes micromag-fields-toggle-rcSwitchOn{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.25);transform:scale(1.25)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@-webkit-keyframes micromag-fields-toggle-rcSwitchOff{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-fields-toggle-rcSwitchOff{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}
-.micromag-fields-field-row-resetButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0}.micromag-fields-field-row-colLabel{-ms-flex-negative:1;flex-shrink:1;text-align:left}.micromag-fields-field-row-colValue{margin-left:auto;white-space:nowrap}.micromag-fields-field-row-colButtonWidth{width:80%}.micromag-fields-field-row-colMinWidth{min-width:0}.micromag-fields-field-row-settingsButton[disabled]{opacity:.25;pointer-events:none}
+.micromag-fields-field-row-resetButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0}.micromag-fields-field-row-colLabel{-ms-flex-negative:1;flex-shrink:1;text-align:left}.micromag-fields-field-row-colValue{margin-left:auto;white-space:nowrap}.micromag-fields-field-row-colButtonWidth{width:80%}.micromag-fields-field-row-colMinWidth{min-width:0}.micromag-fields-field-row-collapsed{display:none;visibility:hidden}.micromag-fields-field-row-settingsButton[disabled]{opacity:.25;pointer-events:none}
 .micromag-fields-container .form-group:last-child{margin-bottom:0}.micromag-fields-container .micromag-fields-field{margin-bottom:1rem}.micromag-fields-container .micromag-fields-field.micromag-fields-isSection{margin-bottom:2rem}.micromag-fields-container .micromag-fields-field.micromag-fields-isList{margin-bottom:0}.micromag-fields-container .micromag-fields-field:last-child{margin-bottom:0}.micromag-fields-container .micromag-fields-advanced{margin-top:2rem}.micromag-fields-container.micromag-fields-withBorders .micromag-fields-fields{border-bottom:1px solid #dedede}.micromag-fields-container.micromag-fields-withBorders .micromag-fields-field{border-top:1px solid #dedede;margin-bottom:0}.micromag-fields-container.micromag-fields-withBorders .micromag-fields-field:last-child{margin-bottom:0}.micromag-fields-container.micromag-fields-withBorders .micromag-fields-fieldRow{padding-bottom:.5rem;padding-top:.5rem}
 
 .micromag-fields-slide-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;white-space:nowrap;width:100%}.micromag-fields-slide-container>*{display:block;margin-right:.5rem}.micromag-fields-slide-container>:last-child{margin-right:0}.micromag-fields-slide-container .micromag-fields-slide-noValue{color:#b3b3b3;overflow:hidden;text-overflow:ellipsis}.micromag-fields-slide-container .micromag-fields-slide-value{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;overflow:hidden;text-overflow:ellipsis}.micromag-fields-slide-panel{padding:.5rem}

package/es/all.js

@@ -2157,6 +2157,17 @@ var quizAnswer = {
         "value": "Answer icon value"
       }]
     })
+  }, {
+    name: 'buttonLayout',
+    type: 'button-layout',
+    label: defineMessage({
+      id: "OPxJx/",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    }),
+    types: ['label-bottom', 'label-top', 'no-label', 'label-over', 'label-left', 'label-right']
   }, {
     name: 'result',
     type: 'text-element',
@@ -2181,6 +2192,13 @@ var quizAnswer = {
   }, {
     type: 'fields',
     isList: true,
+    label: defineMessage({
+      id: "CQzuFE",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Feedback styles"
+      }]
+    }),
     fields: [{
       name: 'textStyle',
       type: 'text-style-form',

package/es/index.js

@@ -18,10 +18,10 @@ import { faDotCircle } from '@fortawesome/free-solid-svg-icons/faDotCircle';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { createNullableOnChange, isMessage, getFileName, getStyleFromBox, getStyleFromColor, getFontFamilyFromFont, getGridLayoutName, getShadowCoords, getColorAsString, getStyleFromLink, getStyleFromHighlight, getStyleFromText } from '@micromag/core/utils';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons/faSlidersH';
 import Switch from 'rc-switch';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faList } from '@fortawesome/free-solid-svg-icons/faList';
@@ -2214,6 +2214,17 @@ var quizAnswer = {
         "value": "Answer icon value"
       }]
     })
+  }, {
+    name: 'buttonLayout',
+    type: 'button-layout',
+    label: defineMessage({
+      id: "OPxJx/",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    }),
+    types: ['label-bottom', 'label-top', 'no-label', 'label-over', 'label-left', 'label-right']
   }, {
     name: 'result',
     type: 'text-element',
@@ -2238,6 +2249,13 @@ var quizAnswer = {
   }, {
     type: 'fields',
     isList: true,
+    label: defineMessage({
+      id: "CQzuFE",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Feedback styles"
+      }]
+    }),
     fields: [{
       name: 'textStyle',
       type: 'text-style-form',
@@ -3555,7 +3573,7 @@ ToggleField.propTypes = propTypes$1u;
 ToggleField.defaultProps = defaultProps$1u;
 ToggleField.isHorizontal = true;
 
-var styles$D = {"resetButton":"micromag-fields-field-row-resetButton","colLabel":"micromag-fields-field-row-colLabel","colValue":"micromag-fields-field-row-colValue","colButtonWidth":"micromag-fields-field-row-colButtonWidth","colMinWidth":"micromag-fields-field-row-colMinWidth","settingsButton":"micromag-fields-field-row-settingsButton"};
+var styles$D = {"resetButton":"micromag-fields-field-row-resetButton","colLabel":"micromag-fields-field-row-colLabel","colValue":"micromag-fields-field-row-colValue","colButtonWidth":"micromag-fields-field-row-colButtonWidth","colMinWidth":"micromag-fields-field-row-colMinWidth","collapsed":"micromag-fields-field-row-collapsed","settingsButton":"micromag-fields-field-row-settingsButton"};
 
 var propTypes$1t = {
   label: PropTypes$1.label,
@@ -3569,6 +3587,7 @@ var propTypes$1t = {
   isSection: PropTypes.bool,
   isHorizontal: PropTypes.bool,
   isListItem: PropTypes.bool,
+  isCollapsible: PropTypes.bool,
   withoutLabel: PropTypes.bool,
   withoutCaret: PropTypes.bool,
   withSettings: PropTypes.bool,
@@ -3594,6 +3613,7 @@ var defaultProps$1t = {
   isSection: false,
   isHorizontal: false,
   isListItem: false,
+  isCollapsible: false,
   withoutLabel: false,
   withoutCaret: false,
   withSettings: false,
@@ -3620,6 +3640,7 @@ var FieldRow = function FieldRow(_ref) {
     isSection = _ref.isSection,
     isHorizontal = _ref.isHorizontal,
     isListItem = _ref.isListItem,
+    isCollapsible = _ref.isCollapsible,
     withoutLabel = _ref.withoutLabel,
     withoutCaret = _ref.withoutCaret,
     withSettings = _ref.withSettings,
@@ -3636,6 +3657,15 @@ var FieldRow = function FieldRow(_ref) {
     buttonClassName = _ref.buttonClassName;
   var withLabel = !withoutLabel && label !== null;
   var isClickable = withForm;
+  var _useState = useState(isCollapsible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var toggleCollapsed = useCallback(function () {
+    if (isCollapsible) {
+      setIsCollapsed(!isCollapsed);
+    }
+  }, [isCollapsible, isCollapsed, setIsCollapsed]);
   var onClickRow = useCallback(function () {
     if (typeof withForm === 'string') {
       gotoForm(withForm);
@@ -3658,7 +3688,15 @@ var FieldRow = function FieldRow(_ref) {
   var toggled = !withToggle || value !== null;
   var labelElement = label !== null ? /*#__PURE__*/React.createElement("label", {
     className: classNames((_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, styles$D.colLabel, isHorizontal), 'col-form-label', isHorizontal || withSettings), 'form-label', !isHorizontal && !withSettings), 'col-auto', isHorizontal), "col", !isHorizontal && withSettings), 'py-0', isHorizontal), 'pt-2', isHorizontal && hasIndicationsUnder), 'me-1', isHorizontal), 'align-self-center', isHorizontal && !hasIndicationsUnder), 'fw-normal', !isSection), _defineProperty(_defineProperty(_classNames, 'fw-bold', isSection), labelClassName, labelClassName !== null)))
-  }, /*#__PURE__*/React.createElement(Label, null, label)) : null;
+  }, /*#__PURE__*/React.createElement(Label, null, label), isCollapsible ? /*#__PURE__*/React.createElement(Button, {
+    withoutStyle: true,
+    className: "ms-1",
+    onClick: toggleCollapsed
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ms-1"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faAngleRight
+  }))) : null) : null;
   var arrowElement = isClickable && !withValue && !withoutCaret ? /*#__PURE__*/React.createElement("span", {
     className: "col-auto align-self-center d-flex align-items-center mw-25"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -3668,7 +3706,7 @@ var FieldRow = function FieldRow(_ref) {
     var rowInner = /*#__PURE__*/React.createElement("span", {
       className: classNames(['row', 'flex-nowrap', 'gx-1'])
     }, labelElement, /*#__PURE__*/React.createElement("span", {
-      className: classNames(['col', styles$D.colValue, 'align-self-center', _defineProperty(_defineProperty({}, styles$D.colMinWidth, isListItem), styles$D.colButtonWidth, isClickable && buttonTheme !== null)])
+      className: classNames(['col', styles$D.colValue, 'align-self-center', _defineProperty(_defineProperty(_defineProperty({}, styles$D.collapsed, isCollapsible && isCollapsed), styles$D.colMinWidth, isListItem), styles$D.colButtonWidth, isClickable && buttonTheme !== null)])
     }, /*#__PURE__*/React.createElement("span", {
       className: classNames(['d-flex', 'justify-content-end'])
     }, children), helpElement !== null || errorsElement !== null ? /*#__PURE__*/React.createElement("span", {
@@ -3720,7 +3758,7 @@ var FieldRow = function FieldRow(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "row align-items-center"
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames(['col', 'text-truncate', styles$D.colValue])
+    className: classNames(['col', 'text-truncate', styles$D.colValue, _defineProperty({}, styles$D.collapsed, isCollapsible && isCollapsed)])
   }, children), arrowElement)) : children, helpElement, errorsElement);
 };
 FieldRow.propTypes = propTypes$1t;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/fields",
-    "version": "0.3.821",
+    "version": "0.3.824",
     "private": false,
     "description": "",
     "keywords": [
@@ -80,12 +80,12 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@micromag/ckeditor": "^0.3.811",
-        "@micromag/core": "^0.3.820",
-        "@micromag/data": "^0.3.820",
-        "@micromag/element-grid": "^0.3.820",
-        "@micromag/element-keypad": "^0.3.820",
-        "@micromag/element-map": "^0.3.820",
-        "@micromag/media-gallery": "^0.3.820",
+        "@micromag/core": "^0.3.824",
+        "@micromag/data": "^0.3.824",
+        "@micromag/element-grid": "^0.3.824",
+        "@micromag/element-keypad": "^0.3.824",
+        "@micromag/element-map": "^0.3.824",
+        "@micromag/media-gallery": "^0.3.824",
         "@panneau/uppy": "^3.0.162",
         "classnames": "^2.2.6",
         "draft-js": "^0.11.7",
@@ -105,5 +105,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "090299f5def48c4e11580b7ac83e36659d04153f"
+    "gitHead": "e266e480cdc5741c73160840affee2eac7e7c9de"
 }