@uncinc/uncinc-react-kitchen-sink 2.1.12 → 2.2.1

package/dist/components/Cookie/Checkbox/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import './style.scss';
+
+const CheckboxAndRadio = ({
+  name,
+  id,
+  value,
+  label,
+  checked,
+  onChange,
+  disabled,
+  type
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Checkbox"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: type || "checkbox",
+    className: "Checkbox__input",
+    name: name,
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: "icon-before icon-checkmark"
+  }, label));
+};
+
+export default CheckboxAndRadio;

package/dist/components/Cookie/Checkbox/style.scss

@@ -0,0 +1,36 @@
+@import 'assets/variables';
+@import 'assets/mixins';
+
+// Radio's and checkboxes
+input[type='checkbox'],
+input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+
+  // Unchecked
+  ~ label:not(.no-styling) {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: bold;
+    color: black;
+    user-select: none;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+
+    &:before {
+      margin-right: 1rem;
+      font-size: 1.8rem;
+    }
+  }
+
+  // Checked
+  &:checked ~ label:not(.no-styling) {
+    &:before {
+
+      background-position-y: -1em;
+    }
+  }
+}

package/dist/components/Cookie/index.js

@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import useCookie from 'react-use-cookie';
+import Cookies from 'js-cookie';
+import classNames from 'classnames';
+import Button from '../Button';
+import Container from '../Layout/Container';
+import Checkbox from './Checkbox';
+import './style.scss';
+
+const CookieCompliancePopup = props => {
+  const {
+    className,
+    cookieLevels,
+    children,
+    manualText,
+    agreeText,
+    onDisagree,
+    cookieOptions,
+    cookieDomain
+  } = props; // This is an internal state to check whether we should show the options.
+
+  const [manualChoiceVisible, setManualChoiceVisible] = useState(false); // This is an extra hidden variable to internally check if we should show the notification.
+  // This also allows us to add an animation when the user accepts.
+
+  const [hiddenInternal, setHiddenInternal] = useState(false); // Cookie stating if the cookie has already been accepted. Uses the following states:
+  // 0: Declined (Not yet used).
+  // 1: Not yet agreed/disagreed (Not yet used).
+  // 2: Accepted.
+
+  const [didConsent, setDidConsent] = useCookie('cookie-agreed', null); // Cookie stating whether we should render the notification.
+
+  const [hidden, setHidden] = useState(didConsent !== null); // Default choices for select, this way we can locally manage the state of the form.
+
+  const [choicesSelected, setChoicesSelected] = useState({
+    necessary: true,
+    voorkeuren: true,
+    statistieken: true,
+    marketing: true
+  });
+  useEffect(() => {
+    if (hidden) {
+      setHiddenInternal(true);
+    } // We don't want to add hidden to the dependency list, as this would -
+    // unrender the notification immediately on save.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // Check if didConsent has been changed.
+  // If so, set the hidden cookie for page reloads.
+
+  useEffect(() => {
+    if (didConsent !== null) {
+      setHidden(true);
+    }
+  }, [didConsent, cookieOptions, setHidden]); // This function expands the notification to show the options.
+
+  const displayConsentChoices = e => {
+    e.preventDefault();
+    setManualChoiceVisible(true);
+  }; // This function sets cookie-agreed to 2 ( accepted state ),
+  // and also sets the accepted categories in CookieAgreedCategories.
+
+
+  const onAgree = choices => {
+    const selectedChoices = Object.keys(choices).filter(key => {
+      return choices[key];
+    });
+    Object.keys(choices).forEach(key => {
+      if (choicesSelected[key]) {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+          event: `cookies-accepted-${key}`
+        });
+      }
+    });
+    setDidConsent('2', cookieOptions); // I used js-cookie for this insead of react-use-cookie because the encoding is not what we want
+    // for arrays in react-use-cookie. This shouldn't be an issue, as we don't want to keep track of
+    // CookieAgreedCategories, as we have that in state already.
+
+    Cookies.set('cookie-agreed-categories', JSON.stringify(selectedChoices), {
+      expires: 365,
+      domain: cookieDomain
+    }); // Set cookie for current domain, so it does not appear twice.
+
+    const timestamp = Math.round(new Date().getTime() / 1000);
+    const value = {
+      necessary: true,
+      preferences: true,
+      statistics: true,
+      marketing: true,
+      ver: 1,
+      utc: timestamp,
+      region: 'nl'
+    };
+    Cookies.set('cookie-consent', value, {
+      expires: 365,
+      domain: cookieDomain
+    });
+  }; // This function is fired when the accept button is pressed.
+  // Also has eventual support for a false case.
+
+
+  const onConsent = value => {
+    return () => {
+      if (value === true) {
+        onAgree(choicesSelected);
+      } else {
+        onDisagree();
+      }
+    };
+  }; // This function sets the value of the checkmark in the form state.
+
+
+  const handleChoiceState = event => {
+    const {
+      value,
+      checked
+    } = event.target;
+    setChoicesSelected({ ...choicesSelected,
+      [value]: checked
+    });
+  };
+
+  const classes = classNames('Cookie', className, {
+    'Cookie--hidden': didConsent !== null
+  }); // If hiddenInternal is true, we do not render the notification.
+
+  if (hiddenInternal === true) {
+    return null;
+  } // This function renders the different options of checkboxes,
+  // allowing us to add more checkboxes eventually.
+
+
+  const renderChoices = () => {
+    return cookieLevels.map(choice => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "Cookie__category col-xs-12 col-lg-6",
+        key: choice.value
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "Checkbox"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        name: "cookie-categories",
+        type: "checkbox",
+        id: `cookie-category-${choice.value}`,
+        onChange: handleChoiceState,
+        label: choice.label,
+        value: choice.value,
+        checked: choicesSelected[choice.value],
+        disabled: choice.disabled
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "Cookie__category__description"
+      }, choice.description));
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
+    className: `Cookie__content ${manualChoiceVisible ? 'Cookie__content--full-height' : ''}`
+  }, !manualChoiceVisible ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-12 Cookie__content__message"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "col-12 Cookie__content__buttons"
+  }, /*#__PURE__*/React.createElement(Button, {
+    id: "complete-agree",
+    className: "Button--cta",
+    primary: true,
+    onClick: onConsent(true)
+  }, agreeText), /*#__PURE__*/React.createElement("a", {
+    className: "Cookie__content__buttons__manual-agree icon-after icon-chevron-right icon-variant-2",
+    onClick: e => {
+      displayConsentChoices(e);
+    }
+  }, manualText)))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "Cookie__content__message"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Cookie__checkboxes-container row"
+  }, renderChoices())), /*#__PURE__*/React.createElement("div", {
+    className: "Cookie__content__buttons"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "Button--cta",
+    onClick: onConsent(true)
+  }, agreeText))))));
+};
+
+export default CookieCompliancePopup;
+CookieCompliancePopup.defaultProps = {
+  agreeText: 'Accepteren',
+  manualText: 'Zelf instellen',
+  onDisagree: () => {},
+  cookieLevels: [],
+  cookieDomain: null,
+  cookieOptions: {
+    days: 365,
+    path: '/'
+  }
+};
+CookieCompliancePopup.propTypes = {
+  agreeText: PropTypes.string,
+  manualText: PropTypes.string,
+  onDisagree: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  cookieLevels: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+    description: PropTypes.string,
+    disabled: PropTypes.bool
+  }))
+};

package/dist/components/Cookie/stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Cookie from './';
+import './stories.scss';
+export default {
+  title: 'Organisms/Cookie'
+};
+export const Default = () => /*#__PURE__*/React.createElement(Cookie, {
+  agreeText: 'Accepteren',
+  manualText: 'Zelf instellen',
+  onDisagree: () => {},
+  cookieLevels: [{
+    value: "necessary",
+    label: "Noodzakelijk",
+    description: "Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.",
+    disabled: true
+  }, {
+    value: "voorkeuren",
+    label: "Voorkeuren",
+    description: "Voorkeurscookies zorgen ervoor dat een website informatie kan onthouden die van invloed is op het gedrag en de vormgeving van de website, zoals de taal van uw voorkeur of de regio waar u woont.",
+    disabled: false
+  }, {
+    value: "statistieken",
+    label: "Statistieken",
+    description: "Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.",
+    disabled: false
+  }, {
+    value: "marketing",
+    label: "Marketing",
+    description: "Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Hun doel is advertenties weergeven die zijn toegesneden op en relevant zijn voor de individuele gebruiker. Deze advertenties worden zo waardevoller voor uitgevers en externe adverteerders.",
+    disabled: false
+  }]
+}, /*#__PURE__*/React.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/React.createElement("p", null, "Aliquam accumsan sem lacus, ut laoreet urna aliquam quis. Ut ut imperdiet tortor, sed vestibulum felis. Etiam a eleifend leo, eu interdum nulla. Etiam id elit ex. Etiam condimentum facilisis venenatis. Curabitur accumsan ut dui vel laoreet. Donec dapibus convallis diam, at sodales nulla laoreet ac. Nunc maximus, orci ac tristique dapibus, dolor felis semper lorem, eu dapibus turpis enim quis urna."));

package/dist/components/Cookie/stories.scss

@@ -0,0 +1,71 @@
+@import 'assets/variables';
+@import 'assets/mixins';
+
+
+@keyframes fade-out-and-transform {
+  0% {
+    transform: translateX(-50%) translateY(0px);
+  }
+
+  25% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(-50%) translateY(110%);
+    opacity: 0;
+  }
+}
+
+.Cookie {
+  bottom: 1rem;
+
+  @media #{$tablet} {
+    bottom: 3rem;
+  }
+
+  &--hidden {
+    animation-name: fade-out-and-transform;
+    animation-duration: .6s;
+    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
+    animation-fill-mode: forwards;
+  }
+
+  &__content {
+    background: #F4F4F4;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+
+    @media #{$tablet-down} {
+      width: auto;
+    }
+
+    @media #{$tablet} {
+      padding: 4rem;
+    }
+
+    &__full-height {
+      overflow-y: scroll;
+
+      @media #{$mobile-down} {
+        position: fixed;
+        top: 2rem;
+        bottom: 2rem;
+        right: 2rem;
+        left: 2rem;
+      }
+
+      @media #{$normal} {
+        height: auto;
+        overflow-y: unset;
+      }
+    }
+  }
+}

package/dist/components/Cookie/style.scss

@@ -0,0 +1,55 @@
+@import 'assets/variables';
+@import 'assets/mixins';
+
+.Cookie {
+  width: 100%;
+  position: fixed;
+  left: 50%;
+  max-height: 100%;
+  bottom: 0;
+  transform: translateX(-50%);
+  z-index: 10000;
+
+  &--hidden {
+   &__content__full-height {
+      position: inherit;
+      top: inherit;
+      bottom: inherit;
+      right: inherit;
+      left: inherit;
+    }
+  }
+
+  &__content {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &__full-height {
+      overflow-y: scroll;
+
+      @media #{$normal} {
+        height: auto;
+        overflow-y: unset;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      @media #{$tablet} {
+        flex-direction: row;
+      }
+
+      .Button {
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  &__category {
+    display: inline-block;
+    margin-bottom: 2rem;
+  }
+}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
@@ -21,13 +21,21 @@ function Query({
     loading
   } = useQuery(graphQuery, {
     variables
-  });
+  }); // In between searches, Searchkit will empty it's results, resulting
+  // in a re-render with an empty screen. Use a local state to prevent this.
+
+  const [dataLoaded, setDataLoaded] = useState(null);
+  useEffect(() => {
+    if (data) {
+      setDataLoaded(data);
+    }
+  }, [data]);
 
   if (!useRouting) {
-    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+    return /*#__PURE__*/React.createElement("div", null, children(dataLoaded, loading));
   }
 
-  return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
+  return /*#__PURE__*/React.createElement(SearchPage, null, children(dataLoaded, loading));
 }
 
 export default Query;

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

@@ -26,7 +26,8 @@ const SearchField = ({
     initialValues: {
       query: query
     },
-    displayRequiredIndicator: "required"
+    displayRequiredIndicator: "required",
+    enableReinitialize: true
   }, /*#__PURE__*/React.createElement(TextField, {
     fieldName: "query",
     title: "Search",

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import Button from '../../Button';
+
+const SearchLoadMore = ({
+  data,
+  label,
+  className
+}) => {
+  const api = useSearchkit();
+
+  if (!data) {
+    return null;
+  }
+
+  const setNextPage = () => {
+    if (data) {
+      api.setPage({
+        size: data.results.hits.page.size,
+        from: parseInt(data.results.hits.page.size) * (parseInt(data.results.hits.page.pageNumber) + 1)
+      });
+      api.search();
+    }
+  };
+
+  const currentPage = data.results.hits.page.pageNumber;
+  const lastPage = data.results.hits.page.totalPages;
+
+  if (currentPage + 1 >= lastPage) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: setNextPage
+  }, label));
+};
+
+export default SearchLoadMore;

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import usePrevious from '../../../hooks/usePrevious';
 
 const SearchResultItemDefault = ({
   item
@@ -11,17 +12,35 @@ const SearchResultHeaderDefault = ({
 const SearchResults = ({
   data,
   renderItem,
-  renderHeader
+  renderHeader,
+  appendResults = false
 }) => {
   const SearchResultItem = renderItem || SearchResultItemDefault;
   const SearchResultHeader = renderHeader || SearchResultHeaderDefault;
+  const [items, setItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(-1);
+  const previousPage = usePrevious(currentPage);
+  const previousItems = usePrevious(items);
+  useEffect(() => {
+    if (!appendResults) {
+      return;
+    }
+
+    if (data && previousPage !== undefined && data.results.hits.page.pageNumber !== previousPage) {
+      setItems([...previousItems, ...data.results.hits.items]);
+      setCurrentPage(data.results.hits.page.pageNumber);
+    }
+  }, [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
+  }));
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {
     data: data
-  }), data && data.results.hits.items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  })));
+  }), searchResultItems);
 };
 
 export default SearchResults;

package/dist/components/SearchKit/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import Query from './Query';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { SearchkitProvider, SearchkitClient } from '@searchkit/client';
@@ -24,19 +24,39 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children,
-  pageSize = 5,
-  useRouting = true
+  pageSize = 10,
+  useRouting = true,
+  defaultFilters = [],
+  defaultQuery = '',
+  children
 }) => {
-  const client = new ApolloClient({
-    uri: uri,
-    cache: new InMemoryCache()
-  });
-  const skClient = new SearchkitClient();
+  const client = useMemo(() => {
+    return new ApolloClient({
+      uri: uri,
+      cache: new InMemoryCache()
+    });
+  }, [uri]);
+  const skClient = useMemo(() => {
+    const skClient = new SearchkitClient();
+
+    if (!useRouting) {
+      skClient.updateBaseSearchState({
+        filters: defaultFilters,
+        query: defaultQuery,
+        page: {
+          size: pageSize,
+          from: 0
+        }
+      });
+    }
+
+    return skClient;
+  }, [useRouting, defaultFilters, defaultQuery, pageSize]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {
     client: client
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
-    client: skClient
+    client: skClient,
+    key: `${defaultQuery}-${defaultFilters.toString()}`
   }, /*#__PURE__*/React.createElement(Query, {
     query: query,
     useRouting: useRouting
@@ -45,6 +65,10 @@ const SearchKit = ({
 
 SearchKit.propTypes = {
   queryString: PropTypes.string,
-  uri: PropTypes.string
+  uri: PropTypes.string,
+  pageSize: PropTypes.number,
+  useRouting: PropTypes.bool,
+  defaultFilters: PropTypes.object,
+  defaultQuery: PropTypes.string
 };
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSearchkit } from '@searchkit/client';
 import classNames from 'classnames';
 import SearchKit from '.';
@@ -9,6 +9,7 @@ import SearchFacets from './SearchFacets';
 import SearchSelectedFilters from './SearchSelectedFilters';
 import SearchReset from './SearchReset';
 import SearchSorting from './SearchSorting';
+import SearchLoadMore from './SearchLoadMore';
 export default {
   title: 'Molecules/SearchKit'
 };
@@ -46,7 +47,7 @@ const query = `
         }
         query
       }
-      hits(page: $page, sortBy: "relevance") {
+      hits(page: $page) {
         sortedBy
         page {
           total
@@ -178,4 +179,69 @@ export const CustomFacets = () => {
   }), /*#__PURE__*/React.createElement(SearchPagination, {
     data: data
   })));
+};
+export const Test = () => {
+  const [q, setQ] = useState(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    onChange: e => setQ(e.target.value),
+    value: q
+  }), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'article'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'landing_page'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))));
+};
+export const LoadMore = () => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query // useRouting={false}
+    ,
+    pageSize: 5
+  }, (data, loading) => {
+    const toggleFilter = () => {
+      api.toggleFilter({
+        identifier: "type",
+        value: "22"
+      });
+      api.search();
+    };
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      onClick: toggleFilter
+    }, "Toggle"), /*#__PURE__*/React.createElement(SearchResults, {
+      data: data,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader,
+      append: true
+    }), /*#__PURE__*/React.createElement(SearchLoadMore, {
+      data: data
+    }));
+  });
 };

package/dist/components/WysiwygField/index.js

@@ -7,10 +7,17 @@ import Button from '../Button';
 
 const WysiwygField = ({
   html,
+  customElementHandler,
   ...props
 }) => {
   const parsedHtml = ReactHtmlParser(html, {
     transform: node => {
+      const customHandler = customElementHandler(node);
+
+      if (customHandler) {
+        return customHandler;
+      }
+
       switch (node.name) {
         case 'a':
           {
@@ -42,7 +49,12 @@ const WysiwygField = ({
   }, props), parsedHtml);
 };
 
-PropTypes.propTypes = {
-  html: PropTypes.string.isRequired
+WysiwygField.propTypes = {
+  html: PropTypes.string.isRequired,
+  customElementHandler: PropTypes.func
+};
+WysiwygField.defaultProps = {
+  html: '',
+  customElementHandler: () => {}
 };
 export default WysiwygField;

package/dist/components/WysiwygField/stories.js

@@ -6,4 +6,38 @@ export default {
 const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>HTML</a>.</p>";
 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>
+  <p>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.</p>
+`;
+export const CustomHandlers = () => /*#__PURE__*/React.createElement(WysiwygField, {
+  html: htmlCustomHandler,
+  customElementHandler: element => {
+    switch (element.name) {
+      case 'abbr':
+        {
+          console.log(element);
+          return /*#__PURE__*/React.createElement(Abbr, {
+            title: element.attribs.title
+          }, element.children[0].data);
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  }
 });

package/dist/hooks/useOnScreen.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export default function useOnScreen(ref) {
+  const [isIntersecting, setIntersecting] = useState(false);
+  const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+  useEffect(() => {
+    observer.observe(ref.current); // Remove the observer as soon as the component is unmounted
+
+    return () => observer.disconnect();
+  }, [observer, ref]);
+  return isIntersecting;
+}

package/dist/hooks/usePrevious.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export default function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef(); // Store current value in ref
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+
+  return ref.current;
+}
+;

package/dist/hooks/useScrollPosition.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  useEffect(() => {
+    const updatePosition = () => {
+      setScrollPosition(window.pageYOffset);
+    };
+
+    window.addEventListener('scroll', updatePosition);
+    updatePosition();
+    return () => window.removeEventListener('scroll', updatePosition);
+  }, []);
+  return scrollPosition;
+};
+
+export default useScrollPosition;

package/dist/hooks/useWindowDimensions.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const {
+    innerWidth: width,
+    innerHeight: height
+  } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowDimensions;
+}

package/dist/index.js

@@ -42,4 +42,10 @@ export { default as SearchSelectedFilters } from './components/SearchKit/SearchS
 export { default as SearchSorting } from './components/SearchKit/SearchSorting';
 export { default as SearchReset } from './components/SearchKit/SearchReset';
 export { default as SearchResults } from './components/SearchKit/SearchResults';
-export { default as SearchPagination } from './components/SearchKit/SearchPagination';
+export { default as SearchPagination } from './components/SearchKit/SearchPagination';
+export { default as SearchLoadMore } from './components/SearchKit/SearchLoadMore';
+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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.1.12",
+  "version": "2.2.1",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -35,34 +35,18 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@babel/cli": "^7.0.0-beta.44",
-    "@babel/helper-define-map": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/runtime": "^7.9.6",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^40.0.0",
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4.3.1",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
     "immutable": "^4.0.0-rc.15",
+    "js-cookie": "^3.0.1",
     "lottie-web": "^5.7.7",
     "mini-css-extract-plugin": "^1.4.1",
     "moment": "^2.29.1",
@@ -84,11 +68,10 @@
     "react-redux": "^7.2.4",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.1",
     "react-select": "^3.1.0",
     "react-share": "^4.3.1",
     "react-slick": "^0.27.14",
-    "react-test-renderer": "^16.13.1",
+    "react-use-cookie": "^1.3.0",
     "redux": "^4.0.5",
     "sass-loader": "^8.0.2",
     "slick-carousel": "^1.8.1"
@@ -115,7 +98,6 @@
     "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
-    "slick-carousel": "^1.8.1",
     "storybook-addon-export-stories": "^1.0.0"
   },
   "eslintConfig": {

package/dist/pages/api/graphql.js

@@ -1,25 +0,0 @@
-import { ApolloServer, gql } from 'apollo-server-micro';
-export const config = {
-  api: {
-    bodyParser: false
-  }
-};
-const typeDefs = [gql`
-    type Query {
-      root: String
-    }
-
-    type Mutation {
-      root: String
-    }
-  `];
-const server = new ApolloServer({
-  typeDefs,
-  resolvers: {},
-  introspection: true,
-  playground: true,
-  context: {}
-});
-export default server.createHandler({
-  path: '/api/graphql'
-});