@uncinc/uncinc-react-kitchen-sink 2.3.4 → 2.3.6

package/dist/components/AbbreviationAnnotation/index.js

@@ -0,0 +1,47 @@
+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); }
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import './style.scss';
+const AbbreviationAnnotation = ({
+  title,
+  children,
+  abbreviationTitle,
+  abbreviationContent,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const handleClick = e => {
+    e.preventDefault();
+    setVisible(!visible);
+  };
+  const className = classnames('AbbreviationAnnotationLink', {
+    'AbbreviationAnnotationLink--uncollapsed': visible
+  });
+  const classNameInfo = classnames('AbbreviationAnnotation', {
+    'AbbreviationAnnotation--visible': visible
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    className: className,
+    onClick: handleClick
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "AbbreviationAnnotationLink__content"
+  }, abbreviationTitle(children))), /*#__PURE__*/React.createElement("div", {
+    className: classNameInfo
+  }, abbreviationContent(title)));
+};
+AbbreviationAnnotation.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+  abbreviationTitle: PropTypes.func,
+  abbreviationContent: PropTypes.func
+};
+AbbreviationAnnotation.defaultProps = {
+  abbreviationTitle: html => {
+    return /*#__PURE__*/React.createElement("div", null, html);
+  },
+  abbreviationContent: html => {
+    return /*#__PURE__*/React.createElement("div", null, html);
+  }
+};
+export default AbbreviationAnnotation;

package/dist/components/AbbreviationAnnotation/stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AbbreviationAnnotation from './';
+export default {
+  title: 'Atoms/AbbreviationAnnotation'
+};
+const title = 'Titel';
+const content = 'Content';
+import './stories.scss';
+export const Default = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, ", /*#__PURE__*/React.createElement("abbr", {
+  title: "Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi."
+}, "consectetur adipiscing"), " elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget."), /*#__PURE__*/React.createElement("p", null, "Donec feugiat, nunc vitae euismod", /*#__PURE__*/React.createElement(AbbreviationAnnotation, {
+  title: title,
+  abbreviationTitle: html => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, html, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-arrow icon-right"
+    }));
+  },
+  abbreviationContent: html => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-arrow icon-content"
+    }), /*#__PURE__*/React.createElement("div", null, html));
+  }
+}, content), "posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare."), /*#__PURE__*/React.createElement("p", null, "Nam venenatis est eget lorem laoreet, id tempor urna hendrerit. Quisque suscipit in magna nec condimentum. Duis id tempor nisi. Sed rutrum urna elit, vitae placerat enim volutpat nec. Vivamus volutpat, magna sit amet commodo ultricies, enim turpis pretium libero, quis molestie nibh augue a ex. Nulla vestibulum vestibulum tellus, vel molestie libero vehicula nec. Sed maximus tortor vel ipsum cursus egestas. Proin suscipit tortor id luctus bibendum."));

package/dist/components/AbbreviationAnnotation/stories.scss

@@ -0,0 +1,39 @@
+@import 'assets/variables';
+
+.AbbreviationAnnotationLink {
+  background-color: $color--tertiary;
+  font-family: var(--font--primary);
+  font-weight: normal;
+
+  &__content {
+    color: $color--white;
+  }
+
+  .icon-left {
+    margin-right: 0.5rem;
+  }
+
+  .icon-right {
+    margin-left: 0.5rem;
+    transform: rotate(90deg);
+  }
+
+  &--uncollapsed {
+    .icon-right {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.AbbreviationAnnotation {
+  color: $color--white;
+  background-color: $color--tertiary;
+
+  .icon-content {
+    display: block;
+    font-size: 200%;
+    margin-top: -0.25rem;
+    flex: 0 0 auto;
+    margin-right: 1rem;
+  }
+}

package/dist/components/AbbreviationAnnotation/style.scss

@@ -0,0 +1,33 @@
+@import 'assets/variables';
+
+.AbbreviationAnnotationLink {
+  display: inline-block;
+  padding: 0 0.5rem;
+  margin-right: 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+
+  :hover {
+    text-decoration: underline;
+  }
+
+  &__content {
+    white-space: nowrap;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+}
+
+.AbbreviationAnnotation {
+  margin: 1rem 0;
+  padding: 2.4rem;
+  display: none;
+  align-items: row;
+
+  &--visible {
+    display: flex;
+  }
+
+}

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

@@ -1,7 +1,11 @@
 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); }
 import React from 'react';
 import TextField from '../TextField';
+import { useTranslation } from "react-i18next";
 const Number = props => {
+  const {
+    t
+  } = useTranslation();
   const {
     min,
     max,
@@ -12,13 +16,17 @@ const Number = props => {
   const validation = value => {
     let error;
     if (required && !value) {
-      error = requiredError || `Value can not be empty`;
+      error = requiredError || t('webform.required');
     }
     if (min && parseInt(value) < min) {
-      error = `Value can not be lower than ${min}.`;
+      error = t('webform.number.min', {
+        min: min
+      });
     }
     if (max && parseInt(value) > max) {
-      error = `Value can not be higher than ${max}.`;
+      error = t('webform.number.max', {
+        max: max
+      });
     }
     return error;
   };

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

@@ -17,6 +17,7 @@ const SelectInput = props => {
     className,
     wrapperClassName,
     isClearable = true,
+    isSearchable = true,
     multiple = false,
     size
   } = props;
@@ -99,6 +100,7 @@ const SelectInput = props => {
       },
       placeholder: placeholder,
       isClearable: isClearable,
+      isSearchable: isSearchable,
       theme: {
         borderRadius: 0,
         colors: {

package/dist/components/SearchKit/SearchResults/index.js

@@ -71,17 +71,15 @@ const SearchResults = ({
 
   // Scroll to top on every page.
   useEffect(() => {
-    if (!currentData) {
-      return;
-    }
-    const currentPageNumber = currentData.results.hits.page.pageNumber;
+    if (typeof data.results === 'undefined') return;
+    const currentPageNumber = data?.results?.hits?.page?.pageNumber;
     if (appendResults === false && scrollView && scrollView.current && currentPageNumber !== 0) {
       scrollView.current.scrollIntoView({
         behavior: 'smooth',
         block: 'start'
       });
     }
-  }, [currentData]);
+  }, [data, appendResults, scrollView]);
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {

package/dist/components/SearchKit/SearchSorting/index.js

@@ -1,6 +1,5 @@
 import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
-import React, { useState, useEffect } from 'react';
-import SelectStyled from 'react-select';
+import React from 'react';
 import FormikWrapper from '../../Form/FormikWrapper';
 import Select from '../../Form/Select';
 const useInitialValues = () => {
@@ -24,6 +23,7 @@ export const SearchSorting = ({
   }, /*#__PURE__*/React.createElement(Select, {
     fieldName: "sortBy",
     isClearable: false,
+    isSearchable: false,
     options: options,
     isLoading: loading,
     onChange: value => {

package/dist/components/WysiwygField/stories.js

@@ -1,5 +1,7 @@
+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); }
 import React from 'react';
 import WysiwygField from './';
+import AbbreviationAnnotation from '../AbbreviationAnnotation';
 export default {
   title: 'Atoms/WysiwygField'
 };
@@ -7,14 +9,6 @@ const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>H
 export const Primary = () => /*#__PURE__*/React.createElement(WysiwygField, {
   html: html
 });
-const Abbr = ({
-  title,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement("abbr", {
-    title: title
-  }, children);
-};
 const htmlCustomHandler = `
   <p>Lorem ipsum dolor sit amet, <abbr title="Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>
   <p>Donec feugiat, nunc vitae euismod posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare.</p>
@@ -26,10 +20,9 @@ export const CustomHandlers = () => /*#__PURE__*/React.createElement(WysiwygFiel
     switch (element.name) {
       case 'abbr':
         {
-          console.log(element);
-          return /*#__PURE__*/React.createElement(Abbr, {
+          return /*#__PURE__*/React.createElement(AbbreviationAnnotation, _extends({
             title: element.attribs.title
-          }, element.children[0].data);
+          }, element.attribs), element.children[0].data);
         }
       default:
         {

package/dist/index.js

@@ -51,4 +51,5 @@ export { default as Cookie } from './components/Cookie';
 export { default as useOnScreen } from './hooks/useOnScreen';
 export { default as usePrevious } from './hooks/usePrevious';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
-export { default as useWindowDimensions } from './hooks/useWindowDimensions';
+export { default as useWindowDimensions } from './hooks/useWindowDimensions';
+export { default as AbbreviationAnnotation } from './components/AbbreviationAnnotation';

package/dist/styles/assets/_base.scss

@@ -23,7 +23,6 @@ a:not(.Button) {
   &:focus,
   &:active,
   &:hover {
-    text-decoration: none;
     color: inherit;
   }
 

package/package.json

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