@uncinc/uncinc-react-kitchen-sink 2.2.11 → 2.2.14

package/dist/components/Accordion/AccordionItem/index.js

@@ -30,10 +30,11 @@ const AccordionItem = ({
   iconClassName,
   duration,
   easing,
-  titleComponent
+  titleComponent,
+  className
 }) => {
   const [collapsed, setCollapsed] = useState(true);
-  const classes = c('Accordion__item', {
+  const classes = c(className, 'Accordion__item', {
     collapsed: collapsed
   });
   const iconClasses = c('icon', iconClassName);

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

@@ -35,9 +35,8 @@ function Checkbox(props) {
       const inputClasses = c({
         hidden: !field.value.includes('__other__')
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/React.createElement("label", {
+      return /*#__PURE__*/React.createElement("label", {
+        className: classes,
         htmlFor: name
       }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
         name: props.name,
@@ -47,7 +46,7 @@ function Checkbox(props) {
         checked: checked,
         disabled: disabled,
         className: className
-      })), props.otherLabel), /*#__PURE__*/React.createElement("textarea", {
+      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("textarea", {
         placeholder: props.otherPlaceholder,
         className: inputClasses,
         onChange: e => {
@@ -67,7 +66,7 @@ function Checkbox(props) {
       checked: checked,
       disabled: disabled,
       className: className
-    })), props.label);
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 }
 
@@ -83,6 +82,7 @@ const Checkboxes = props => {
     error,
     type,
     options,
+    descriptions = {},
     displayRequiredIndicator,
     className,
     wrapperClassName,
@@ -101,9 +101,11 @@ const Checkboxes = props => {
     displayRequiredIndicator: displayRequiredIndicator
   }, Object.keys(options).map(value => {
     const label = options[value];
+    const description = descriptions[value] || null;
     return /*#__PURE__*/React.createElement(Checkbox, {
       key: value,
       label: label,
+      description: description,
       className: c(className, {
         'error': error && touched
       }),

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

@@ -22,22 +22,21 @@ const Radio = props => {
     const classes = c('WebformRadios__radio__input', {
       'icon-before': true,
       'icon-radio': true,
-      'icon-variant-1': field.value && field.value.includes(props.value)
+      'icon-variant-1': field.value && field.value === props.value
     });
 
     if (props.value === '__other__') {
       const inputClasses = c({
         hidden: field.value !== '__other__'
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("label", {
+        htmlFor: name,
         className: classes
-      }, /*#__PURE__*/React.createElement("label", {
-        htmlFor: name
       }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
         type: "radio",
         id: name,
         value: props.value
-      })), props.otherLabel), /*#__PURE__*/React.createElement("textarea", {
+      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("textarea", {
         placeholder: props.otherPlaceholder,
         className: inputClasses,
         onChange: e => {
@@ -55,7 +54,7 @@ const Radio = props => {
       id: name,
       value: props.value,
       disabled: disabled
-    })), props.label);
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 };
 
@@ -71,6 +70,7 @@ const RadioButtons = props => {
     error,
     type,
     options,
+    descriptions = {},
     otherLabel,
     otherPlaceholder,
     displayRequiredIndicator
@@ -84,11 +84,13 @@ const RadioButtons = props => {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, Object.keys(options).map(value => {
+  }, Object.keys(options).map((value, index) => {
     const label = options[value];
+    const description = descriptions[value] || null;
     return /*#__PURE__*/React.createElement(Radio, {
       key: value,
       label: label,
+      description: description,
       className: error && touched ? 'error' : null,
       name: fieldName,
       type: type || 'text',

package/dist/components/Form/RadioButtons/stories.js

@@ -24,6 +24,11 @@ export const RadioButtons = props => {
       whisky: 'Whisk(e)y',
       '__other__': 'Anders'
     },
+    descriptions: {
+      beer: 'Bier is lekker',
+      wine: 'Wijn ook wel',
+      whisky: 'Maar whiskey is het lekkerst'
+    },
     validation: value => {
       let error;
 

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

@@ -16,7 +16,8 @@ const SelectInput = props => {
     placeholder,
     disabled,
     className,
-    wrapperClassName
+    wrapperClassName,
+    isClearable = true
   } = props;
   let {
     selectedOption
@@ -77,7 +78,7 @@ const SelectInput = props => {
         return option.disabled;
       },
       placeholder: placeholder,
-      isClearable: true,
+      isClearable: isClearable,
       theme: {
         borderRadius: 0,
         colors: {

package/dist/components/SearchKit/Facets/ChipFacet/index.js

@@ -30,9 +30,13 @@ export const ChipFacet = ({
           identifier: facet.identifier,
           value: entry.label
         });
+        api.setPage({
+          from: 0
+        });
         api.search();
       }
     }, entry.label);
   })));
 };
-ChipFacet.DISPLAY = 'ChipFacet';
+ChipFacet.DISPLAY = 'ChipFacet';
+export default ChipFacet;

package/dist/components/SearchKit/Facets/ListFacet/index.js

@@ -26,10 +26,14 @@ export const ListFacet = ({
           identifier: facet.identifier,
           value: entry.label
         });
+        api.setPage({
+          from: 0
+        });
         api.search();
       },
       disabled: parseInt(entry.count) === 0
     }, entry.label, " (", entry.count, ")"));
   })));
 };
-ListFacet.DISPLAY = 'ListFacet';
+ListFacet.DISPLAY = 'ListFacet';
+export default ListFacet;

package/dist/components/SearchKit/Facets/SelectFacet/index.js

@@ -1,32 +1,65 @@
 import React from 'react';
-import { useSearchkit } from '@searchkit/client';
+import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
 import Select from '../../../Form/Select';
 import FormikWrapper from '../../../Form/FormikWrapper';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+const useInitialValues = () => {
+  const parsed = useSearchkitVariables();
+  const filters = {};
+
+  if (parsed.filters) {
+    parsed.filters.forEach(filter => {
+      filters[filter.identifier] = filter.value;
+    });
+  }
+
+  return filters;
+};
+
 export const SelectFacet = ({
   facet
 }) => {
+  const {
+    t
+  } = useTranslation();
   const api = useSearchkit();
   const options = facet.entries.map(entry => ({
     value: entry.label,
-    label: entry.label,
+    label: facet.identifier === 'type' ? t(`tags.${entry.label.toLowerCase()}`) : entry.label,
     disabled: parseInt(entry.count) === 0
   }));
+  const placeHolder = t(`placeholders.${facet.identifier}.placeholder`);
+  const classes = classNames('Facet', 'SelectFacet', `Facet--${facet.identifier}`);
+  const initialValues = useInitialValues();
   return /*#__PURE__*/React.createElement("div", {
-    className: "Facet SelectFacet",
+    className: classes,
     key: facet.identifier
-  }, /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: initialValues
+  }, /*#__PURE__*/React.createElement(Select, {
     title: facet.label,
     required: true,
-    placeholder: "Select a value...",
+    placeholder: placeHolder,
     fieldName: facet.identifier,
     options: options,
     onChange: value => {
-      api.toggleFilter({
-        identifier: facet.identifier,
-        value: value
+      api.removeFiltersByIdentifier(facet.identifier);
+      api.setPage({
+        from: 0
       });
+
+      if (value) {
+        api.addFilter({
+          identifier: facet.identifier,
+          value: value
+        });
+      }
+
       api.search();
     }
   })));
 };
-SelectFacet.DISPLAY = 'SelectFacet';
+SelectFacet.DISPLAY = 'SelectFacet';
+export default SelectFacet;

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

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import usePrevious from '../../../hooks/usePrevious';
+import { useSearchkitVariables } from '@searchkit/client';
 
 const SearchResultItemDefault = ({
   item
@@ -17,30 +18,57 @@ const SearchResults = ({
 }) => {
   const SearchResultItem = renderItem || SearchResultItemDefault;
   const SearchResultHeader = renderHeader || SearchResultHeaderDefault;
+  const variables = useSearchkitVariables();
   const [items, setItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(-1);
+  const [previousQuery, setPreviousQuery] = useState(variables.query);
+  const [previousActiveFilters, setPreviousActiveFilters] = useState(variables.filters);
+  const [previousSortBy, setPreviousSortBy] = useState(variables.sortBy);
+  const [searchResultItems, setSearchResultItems] = useState( /*#__PURE__*/React.createElement(React.Fragment, null));
+  const [currentData, setCurrentData] = useState("");
   const previousPage = usePrevious(currentPage);
   const previousItems = usePrevious(items);
   useEffect(() => {
+    if (typeof data.results === 'undefined') return;
+
     if (!appendResults) {
-      return;
+      // Set items directly if not appendResults
+      return setItems([...data.results.hits.items]);
     }
 
-    if (data && previousPage !== undefined && data.results.hits.page.pageNumber !== previousPage) {
-      if (typeof previousItems === 'undefined') {
+    const currentPageNumber = data.results.hits.page.pageNumber;
+    const currentQuery = variables.query;
+    const currentFiltersLength = variables.filters.length;
+    const newData = JSON.stringify(data);
+    const currentSortBy = variables.sortBy;
+    const queryChanged = previousQuery !== currentQuery;
+    const filtersChanged = previousActiveFilters.length !== currentFiltersLength;
+    const sortByChanged = currentSortBy !== previousSortBy;
+    const pageChanged = currentPageNumber !== previousPage;
+    const dataChanged = currentData !== newData; // Determine if we have to reset the results, or should append them to the results
+
+    if (dataChanged && (queryChanged || filtersChanged || pageChanged || sortByChanged)) {
+      if (typeof previousItems === 'undefined' || queryChanged || filtersChanged || sortByChanged) {
+        // Overwrite data when Query, Filters or SortBy has changed
         setItems([...data.results.hits.items]);
       } else {
+        // Append data if the page has changed and we have previousItems
         setItems([...previousItems, ...data.results.hits.items]);
       }
 
       setCurrentPage(data.results.hits.page.pageNumber);
+      setPreviousQuery(variables.query);
+      setPreviousSortBy(variables.sortBy);
+      setPreviousActiveFilters(variables.filters);
+      setCurrentData(JSON.stringify(data));
     }
-  }, [data, previousPage, previousItems, appendResults]);
-  const searchResultItems = appendResults ? data && items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  })) : data && data.results.hits.items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  }));
+  }, [data, appendResults, variables]); // Set the search results when items have changed
+
+  useEffect(() => {
+    setSearchResultItems(items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
+      item: item
+    })));
+  }, [items]);
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {

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

@@ -1,20 +1,40 @@
-import React from 'react';
-import { SortingSelector } from '@searchkit/elastic-ui';
+import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
+import React, { useState, useEffect } from 'react';
+import SelectStyled from 'react-select';
+import FormikWrapper from '../../Form/FormikWrapper';
+import Select from '../../Form/Select';
 
-const SearchSorting = ({
+const useInitialValues = () => {
+  const parsed = useSearchkitVariables();
+  return {
+    'sortBy': parsed.sortBy
+  };
+};
+
+export const SearchSorting = ({
   data,
   loading
 }) => {
-  if (!data) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "SearchSorting"
-  }, /*#__PURE__*/React.createElement(SortingSelector, {
-    data: data.results,
-    loading: loading
+  const api = useSearchkit();
+  const initialValues = useInitialValues();
+  const options = data?.results?.summary?.sortOptions?.map(sortOption => ({
+    value: sortOption.id,
+    label: sortOption.label
+  })) || [];
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: initialValues
+  }, /*#__PURE__*/React.createElement(Select, {
+    fieldName: "sortBy",
+    isClearable: false,
+    options: options,
+    isLoading: loading,
+    onChange: value => {
+      api.setSortBy(value);
+      api.setPage({
+        from: 0
+      });
+      api.search();
+    }
   }));
 };
-
 export default SearchSorting;

package/dist/components/SearchKit/index.js

@@ -39,19 +39,15 @@ const SearchKit = ({
   }, [uri]);
   const skClient = useMemo(() => {
     const skClient = new SearchkitClient();
-
-    if (!useRouting) {
-      skClient.updateBaseSearchState({
-        filters: defaultFilters,
-        query: defaultQuery,
-        page: {
-          size: pageSize,
-          from: 0
-        },
-        sortBy: defaultSorting
-      });
-    }
-
+    skClient.updateBaseSearchState({
+      filters: defaultFilters,
+      query: defaultQuery,
+      page: {
+        size: pageSize,
+        from: 0
+      },
+      sortBy: defaultSorting
+    });
     return skClient;
   }, [useRouting, defaultFilters, defaultQuery, pageSize, defaultSorting]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {

package/dist/index.js

@@ -38,6 +38,9 @@ export { default as ViewportContext } from './Context/ViewportContext';
 export { default as SearchKit } from './components/SearchKit';
 export { default as SearchField } from './components/SearchKit/SearchField';
 export { default as SearchFacets } from './components/SearchKit/SearchFacets';
+export { default as SelectFacet } from './components/SearchKit/Facets/SelectFacet';
+export { default as ListFacet } from './components/SearchKit/Facets/ListFacet';
+export { default as ChipFacet } from './components/SearchKit/Facets/ChipFacet';
 export { default as SearchSelectedFilters } from './components/SearchKit/SearchSelectedFilters';
 export { default as SearchSorting } from './components/SearchKit/SearchSorting';
 export { default as SearchReset } from './components/SearchKit/SearchReset';

package/package.json

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

package/dist/components/Button/stories.scss

@@ -1,45 +0,0 @@
-@import '../../styles/assets/variables';
-
-.Button {
-  &.Button--styled {
-    display: inline-block;
-    border-radius: 5px;
-    text-decoration: none;
-    text-align: center;
-    cursor: pointer;
-
-    &--primary {
-      font-size: 21px;
-      background-color: black;
-      color: #ffffff;
-      font-weight: 600;
-      line-height: 1.14;
-      padding: 19px 30px;
-
-      &:hover {
-        background-color: #434343;
-      }
-      &:disabled {
-        font-family: inherit;
-        background-color: rgba(0, 0, 0, 0.3);
-      }
-    }
-
-    &--inverted {
-      border: solid 1px #888888;
-      background-color: #ffffff;
-      padding: 18px 34.5px;
-      font-size: 18px;
-      font-weight: 600;
-      color: #000000;
-
-      &:hover {
-        background-color: #f1f1f1;
-      }
-      &:disabled {
-        font-family: inherit;
-        opacity: .5;
-      }
-    }
-  }
-}

package/dist/components/WysiwygField/stories.scss

@@ -1,3 +0,0 @@
-.WysiwygField {
-  margin-right: 200px;
-}

package/dist/helpers/makeSafeForCSS.js

@@ -1,5 +0,0 @@
-const makeSafeForCSS = value => {
-  return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
-};
-
-export default makeSafeForCSS;