@uncinc/uncinc-react-kitchen-sink 2.10.3 → 2.11.1

package/dist/components/Form/GenericFormElement/index.js

@@ -18,7 +18,9 @@ var GenericFormElement = function GenericFormElement(props) {
     errorId = props.errorId,
     descriptionId = props.descriptionId,
     _props$includeFieldSe = props.includeFieldSet,
-    includeFieldSet = _props$includeFieldSe === void 0 ? false : _props$includeFieldSe;
+    includeFieldSet = _props$includeFieldSe === void 0 ? false : _props$includeFieldSe,
+    _props$descriptionAbo = props.descriptionAboveInput,
+    descriptionAboveInput = _props$descriptionAbo === void 0 ? false : _props$descriptionAbo;
   return /*#__PURE__*/React.createElement("div", {
     className: error ? "FormElement ".concat(className, " error") : "FormElement ".concat(className)
   }, title && /*#__PURE__*/React.createElement("label", {
@@ -27,12 +29,17 @@ var GenericFormElement = function GenericFormElement(props) {
     className: "FormElement__optional ".concat(className, "__optional")
   }, t(['form.optional', ' - optioneel'])), required && displayRequiredIndicator === 'required' && /*#__PURE__*/React.createElement("span", {
     className: "FormElement__required ".concat(className, "__required")
-  }, t(['form.required', ' - vereist']))), /*#__PURE__*/React.createElement("div", {
+  }, t(['form.required', ' - vereist']))), description && descriptionAboveInput && /*#__PURE__*/React.createElement(WysiwygField, {
+    id: descriptionId,
+    property: "schema:text",
+    html: description,
+    className: "FormElement__description ".concat(className, "__description FormElement__description--above-input")
+  }), /*#__PURE__*/React.createElement("div", {
     className: "FormElement__inner ".concat(className, "__inner")
-  }, includeFieldSet && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("fieldset", {
+  }, includeFieldSet && /*#__PURE__*/React.createElement("fieldset", {
     "aria-describedby": "".concat(errorId, " ").concat(descriptionId),
     "aria-invalid": Boolean(error && touched)
-  }, children)), !includeFieldSet && /*#__PURE__*/React.createElement(React.Fragment, null, children)), description && /*#__PURE__*/React.createElement(WysiwygField, {
+  }, children), !includeFieldSet && /*#__PURE__*/React.createElement(React.Fragment, null, children)), description && !descriptionAboveInput && /*#__PURE__*/React.createElement(WysiwygField, {
     id: descriptionId,
     property: "schema:text",
     html: description,

package/dist/components/Form/GenericFormElement/style.scss

@@ -26,6 +26,11 @@
     line-height: 1.29;
     letter-spacing: normal;
     color: #1f1f1d;
+
+    &--above-input {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
   }
 
   &__error {

package/dist/components/Form/TextField/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "onChange", "className", "wrapperClassName", "disabled"];
+var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "onChange", "className", "wrapperClassName", "disabled", "descriptionAboveInput"];
 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 _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; }
@@ -22,6 +22,7 @@ export var TextField = function TextField(props) {
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
+    descriptionAboveInput = props.descriptionAboveInput,
     restProps = _objectWithoutProperties(props, _excluded);
   var type = props.type || 'text';
   var _useTranslation = useTranslation(),
@@ -78,7 +79,8 @@ export var TextField = function TextField(props) {
     error: error,
     errorId: errorId,
     descriptionId: descriptionId,
-    displayRequiredIndicator: displayRequiredIndicator
+    displayRequiredIndicator: displayRequiredIndicator,
+    descriptionAboveInput: descriptionAboveInput
   }, /*#__PURE__*/React.createElement(Field, _extends({}, restProps, {
     className: c(className, {
       'error': error && isTouched

package/dist/helpers/a11y.d.ts

@@ -0,0 +1 @@
+export function prefersReducedMotion(): boolean;

package/dist/helpers/a11y.js

@@ -0,0 +1,3 @@
+export var prefersReducedMotion = function prefersReducedMotion() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
 export { default as gtm } from "./helpers/gtm";
 export { default as useValueForCurrentViewPort } from "./helpers/useValueForCurrentViewPort";
 export { getApiAutoCompleteSuggestions } from "./helpers/apiAutoComplete";
+export { prefersReducedMotion } from "./helpers/a11y";
 export { default as FormikWrapper, FormikExtendedContextProvider } from "./components/Form/FormikWrapper";
 export { parseDateWithTimezoneOffset, isValidDate, doubleDigits } from "./helpers/date";
 export { setUtmCookies, getUtmCookies, addUtmQueryString } from "./helpers/utm";

package/dist/index.js

@@ -95,4 +95,5 @@ export { default as useValueForCurrentViewPort } from './helpers/useValueForCurr
 export { parseDateWithTimezoneOffset, isValidDate, doubleDigits } from './helpers/date';
 export { setUtmCookies, getUtmCookies, addUtmQueryString } from './helpers/utm';
 export { isExternalLink, normalizeLink } from './helpers/link';
-export { getApiAutoCompleteSuggestions } from './helpers/apiAutoComplete';
+export { getApiAutoCompleteSuggestions } from './helpers/apiAutoComplete';
+export { prefersReducedMotion } from './helpers/a11y';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",