@uncinc/uncinc-react-kitchen-sink 2.24.0 → 2.25.0

package/dist/components/Download/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface DownloadProps {
     source: string;
     title: string;
+    image?: string | string[];
     description?: string;
     filesize?: number;
     filename?: string;

package/dist/components/Download/index.js

@@ -8,20 +8,37 @@ import React from 'react';
 import c from 'classnames';
 import prettyBytes from 'pretty-bytes';
 import Icon from '../Icon';
-var Download = function Download(_ref) {
-  var source = _ref.source,
-    title = _ref.title,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$filesize = _ref.filesize,
-    filesize = _ref$filesize === void 0 ? null : _ref$filesize,
-    _ref$filename = _ref.filename,
-    filename = _ref$filename === void 0 ? '' : _ref$filename,
-    materialIconName = _ref.materialIconName,
-    mime = _ref.mime,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '_self' : _ref$target,
-    className = _ref.className;
+import Image from '../Image';
+var DownloadIcon = function DownloadIcon(_ref) {
+  var materialIconName = _ref.materialIconName,
+    mimeType = _ref.mimeType,
+    mimeSubType = _ref.mimeSubType;
+  if (materialIconName) {
+    return /*#__PURE__*/React.createElement(Icon, {
+      className: "Download__icon Icon-".concat(mimeType, " Icon-").concat(mimeSubType),
+      name: materialIconName,
+      flair: "outlined"
+    });
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: "Download__icon icon icon-download icon-".concat(mimeType, " icon-").concat(mimeSubType)
+  });
+};
+var Download = function Download(_ref2) {
+  var source = _ref2.source,
+    title = _ref2.title,
+    image = _ref2.image,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? null : _ref2$description,
+    _ref2$filesize = _ref2.filesize,
+    filesize = _ref2$filesize === void 0 ? null : _ref2$filesize,
+    _ref2$filename = _ref2.filename,
+    filename = _ref2$filename === void 0 ? '' : _ref2$filename,
+    materialIconName = _ref2.materialIconName,
+    mime = _ref2.mime,
+    _ref2$target = _ref2.target,
+    target = _ref2$target === void 0 ? '_self' : _ref2$target,
+    className = _ref2.className;
   var classes = c('Download', className);
   var _mime$split = mime.split('/'),
     _mime$split2 = _slicedToArray(_mime$split, 2),
@@ -33,12 +50,20 @@ var Download = function Download(_ref) {
     target: target,
     href: source,
     rel: "noreferrer"
-  }, materialIconName ? /*#__PURE__*/React.createElement(Icon, {
-    className: "Download__icon Icon-".concat(mimeType, " Icon-").concat(mimeSubType),
-    name: materialIconName,
-    flair: "outlined"
-  }) : /*#__PURE__*/React.createElement("span", {
-    className: "Download__icon icon icon-download icon-".concat(mimeType, " icon-").concat(mimeSubType)
+  }, image ?
+  /*#__PURE__*/
+  // Thumbnail image is decorative: alt="" hides it from screen readers
+  // role="presentation" removes any implicit role from the element
+  React.createElement("div", {
+    className: "Download__image"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: image,
+    alt: "",
+    role: "presentation"
+  })) : /*#__PURE__*/React.createElement(DownloadIcon, {
+    materialIconName: materialIconName,
+    mimeType: mimeType,
+    mimeSubType: mimeSubType
   }), /*#__PURE__*/React.createElement("div", {
     className: "Download__content"
   }, /*#__PURE__*/React.createElement("span", {
@@ -51,6 +76,10 @@ var Download = function Download(_ref) {
     className: "Download__extension"
   }, extension[0], "\xA0"), filesize && /*#__PURE__*/React.createElement("span", {
     className: "Download__filesize"
-  }, "(", prettyBytes(filesize), ")")));
+  }, "(", prettyBytes(filesize), ")")), image && /*#__PURE__*/React.createElement(DownloadIcon, {
+    materialIconName: materialIconName,
+    mimeType: mimeType,
+    mimeSubType: mimeSubType
+  }));
 };
 export default Download;

package/dist/components/Form/Select/Input/index.js

@@ -1,9 +1,15 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["fieldName", "id", "validation", "defaultValue", "onChange", "options", "placeholder", "disabled", "className", "wrapperClassName", "isClearable", "isSearchable", "multiple", "size", "required"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _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; }
 import React from 'react';
-import SelectStyled from 'react-select';
+import SelectStyled, { components as ReactSelectComponents } from 'react-select';
 import c from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -21,6 +27,35 @@ var SelectInputOption = function SelectInputOption(props) {
     })
   );
 };
+
+// react-select renders the clear button as aria-hidden div by default.
+// Replace it with a proper <button> so keyboard users can reach it.
+var ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$innerProps = _ref.innerProps,
+    onMouseDown = _ref$innerProps.onMouseDown,
+    onTouchEnd = _ref$innerProps.onTouchEnd,
+    selectProps = _ref.selectProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var selectedValue = selectProps === null || selectProps === void 0 ? void 0 : selectProps.value;
+  var selectedLabel = Array.isArray(selectedValue) ? selectedValue.map(function (v) {
+    return v.label;
+  }).join(', ') : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label;
+  var ariaLabel = selectedLabel ? t('select.clear_with_value', {
+    value: selectedLabel,
+    defaultValue: "Wis de zoekopdracht, met ".concat(selectedLabel)
+  }) : (selectProps === null || selectProps === void 0 ? void 0 : selectProps.clearLabel) || t('select.clear', {
+    defaultValue: 'Wissen'
+  });
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "Select__inner__indicator Select__inner__clear-indicator",
+    onMouseDown: onMouseDown,
+    onTouchEnd: onTouchEnd,
+    onClick: onMouseDown,
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement(ReactSelectComponents.CrossIcon, null));
+};
 var SelectInput = function SelectInput(props) {
   var fieldName = props.fieldName,
     id = props.id,
@@ -45,8 +80,8 @@ var SelectInput = function SelectInput(props) {
   var _useExtendedFormikCon = useExtendedFormikContext(),
     values = _useExtendedFormikCon.values,
     setFieldValue = _useExtendedFormikCon.setFieldValue;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
   var value = getNestedFieldvalue(fieldName, values);
 
   // Check if options is [{value, label}] or {value: label}.
@@ -89,7 +124,11 @@ var SelectInput = function SelectInput(props) {
     value: value,
     validate: handleValidation
   }, function () {
-    return /*#__PURE__*/React.createElement(SelectStyled, _extends({}, restProps, {
+    return /*#__PURE__*/React.createElement(SelectStyled, _extends({
+      components: _objectSpread({
+        ClearIndicator: ClearIndicator
+      }, restProps.components)
+    }, restProps, {
       id: id,
       inputId: fieldName,
       className: c('Select__select', className),

package/dist/components/Form/Select/Input/style.scss

@@ -1,28 +1,49 @@
 @import '../../../../styles/assets/variables';
 @import '../../../../styles/assets/mixins';
 
+.Select__inner__clear-indicator {
+  display: flex;
+  align-items: center;
+  padding: 0 0.8rem;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  color: var(--color--primary, #{$color--primary});
+
+  &:focus-visible {
+    z-index: 1;
+    outline: 0.2rem solid var(--border--color--focus);
+    outline-offset: 0;
+    border-radius: 2px;
+  }
+}
+
 .Select {
   &__inner {
+
     &__control {
       border-radius: 0;
+
       &--menu-is-open,
       &--is-focused {
         border-color: inherit;
         box-shadow: none;
+
         &:hover,
         &:focus {
           border-color: inherit;
           box-shadow: none;
         }
-
       }
     }
+
     &__option {
       &--is-selected {
         background-color: transparent;
         color: $color--primary;
       }
     }
+
     &__menu {
       border-radius: 0;
       margin-top: 0;

package/dist/organisms/Downloads/index.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { DownloadProps } from '../../components/Download';
+export interface LinkProps {
+    href: string;
+    title: string;
+}
 export interface DownloadsProps {
     title?: string;
     text?: string;
     downloads: DownloadProps[];
     target?: HTMLAnchorElement['target'];
     materialIconName?: string;
+    links?: LinkProps[];
     className?: string;
 }
 declare const Downloads: React.FC<DownloadsProps>;

package/dist/organisms/Downloads/index.js

@@ -2,25 +2,37 @@ import React from 'react';
 import c from 'classnames';
 import Download from '../../components/Download';
 import TitleWithText from '../../components/TitleWithText';
+import Button from '../../components/Button';
 var Downloads = function Downloads(_ref) {
   var title = _ref.title,
     text = _ref.text,
     downloads = _ref.downloads,
     target = _ref.target,
     materialIconName = _ref.materialIconName,
-    className = _ref.className;
+    className = _ref.className,
+    links = _ref.links;
   var classes = c('Downloads', className);
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement(TitleWithText, {
     title: title,
     text: text
-  }), /*#__PURE__*/React.createElement("div", {
+  }), links && links.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "Downloads__links"
+  }, links.map(function (link) {
+    return /*#__PURE__*/React.createElement(Button, {
+      primary: false,
+      className: "Downloads__link",
+      href: link.href
+    }, link.title);
+  })), /*#__PURE__*/React.createElement("div", {
     className: "Downloads__files"
   }, downloads.map(function (download) {
     return /*#__PURE__*/React.createElement(Download, {
+      key: download.source,
       source: download.source,
       title: download.title,
+      image: download.image,
       description: download.description,
       filesize: download.filesize,
       filename: download.filename,

package/package.json

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