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

package/dist/components/Button/stories.scss

@@ -0,0 +1,45 @@
+@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/Cookie/Checkbox/style.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../../styles/assets/mixins';
+@import '../../../styles/assets/variables';
 
 // Radio's and checkboxes
 input[type='checkbox'],

package/dist/components/Cookie/stories.scss

@@ -1,6 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
-
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 @keyframes fade-out-and-transform {
   0% {

package/dist/components/Cookie/style.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 .Cookie {
   width: 100%;

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

@@ -30,6 +30,32 @@ function Checkbox(props) {
       'icon-checkmark': true,
       'icon-variant-1': checked
     });
+
+    if (props.value === '__other__') {
+      const inputClasses = c({
+        hidden: !field.value.includes('__other__')
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes
+      }, /*#__PURE__*/React.createElement("label", {
+        htmlFor: name
+      }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
+        name: props.name,
+        value: value,
+        type: "checkbox",
+        id: name,
+        checked: checked,
+        disabled: disabled,
+        className: className
+      })), props.otherLabel), /*#__PURE__*/React.createElement("textarea", {
+        placeholder: props.otherPlaceholder,
+        className: inputClasses,
+        onChange: e => {
+          form.setFieldValue(`${props.name}--other`, e.target.value);
+        }
+      }));
+    }
+
     return /*#__PURE__*/React.createElement("label", {
       className: classes,
       htmlFor: name
@@ -39,18 +65,6 @@ function Checkbox(props) {
       type: "checkbox",
       id: name,
       checked: checked,
-      onChange: e => {
-        const set = new Set(field.value);
-
-        if (set.has(value)) {
-          set.delete(value);
-        } else {
-          set.add(value);
-        }
-
-        form.setFieldValue(field.name, Array.from(set));
-        form.setFieldTouched(field.name, true);
-      },
       disabled: disabled,
       className: className
     })), props.label);
@@ -72,7 +86,9 @@ const Checkboxes = props => {
     displayRequiredIndicator,
     className,
     wrapperClassName,
-    disabled = false
+    disabled = false,
+    otherLabel,
+    otherPlaceholder
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: c("Checkboxes", wrapperClassName),
@@ -96,7 +112,9 @@ const Checkboxes = props => {
       value: value,
       placeholder: placeholder,
       validate: validation,
-      disabled: disabled
+      disabled: disabled,
+      otherLabel: otherLabel,
+      otherPlaceholder: otherPlaceholder
     });
   }));
 };

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

@@ -10,7 +10,8 @@ export const Checkboxes = props => {
   return /*#__PURE__*/React.createElement(FormikWrapper, _extends({}, props, {
     initialValues: {
       'poison': []
-    }
+    },
+    onSubmit: values => console.log(values)
   }), /*#__PURE__*/React.createElement(FormikCheckboxes, {
     title: "Pick your poison",
     required: true,
@@ -20,7 +21,8 @@ export const Checkboxes = props => {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
-      whisky: 'Whisk(e)y'
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
     },
     validation: value => {
       let error;
@@ -30,6 +32,10 @@ export const Checkboxes = props => {
       }
 
       return error;
-    }
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
   }));
 };

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

@@ -10,7 +10,8 @@ export const RadioButtons = props => {
   return /*#__PURE__*/React.createElement(FormikWrapper, _extends({}, props, {
     initialValues: {
       'poison': null
-    }
+    },
+    onSubmit: values => console.log(values)
   }), /*#__PURE__*/React.createElement(FormikRadio, {
     title: "Pick your poison",
     required: true,
@@ -20,7 +21,8 @@ export const RadioButtons = props => {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
-      whisky: 'Whisk(e)y'
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
     },
     validation: value => {
       let error;
@@ -30,6 +32,10 @@ export const RadioButtons = props => {
       }
 
       return error;
-    }
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
   }));
 };

package/dist/components/NavigationScroll/index.js

@@ -14,7 +14,6 @@ const NavigationScroll = props => {
   });
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
-    handleScroll();
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };

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

@@ -27,7 +27,12 @@ const SearchResults = ({
     }
 
     if (data && previousPage !== undefined && data.results.hits.page.pageNumber !== previousPage) {
-      setItems([...previousItems, ...data.results.hits.items]);
+      if (typeof previousItems === 'undefined') {
+        setItems([...data.results.hits.items]);
+      } else {
+        setItems([...previousItems, ...data.results.hits.items]);
+      }
+
       setCurrentPage(data.results.hits.page.pageNumber);
     }
   }, [data, previousPage, previousItems, appendResults]);

package/dist/components/SearchKit/index.js

@@ -28,7 +28,8 @@ const SearchKit = ({
   useRouting = true,
   defaultFilters = [],
   defaultQuery = '',
-  children
+  children,
+  defaultSorting = 'relevance'
 }) => {
   const client = useMemo(() => {
     return new ApolloClient({
@@ -46,12 +47,13 @@ const SearchKit = ({
         page: {
           size: pageSize,
           from: 0
-        }
+        },
+        sortBy: defaultSorting
       });
     }
 
     return skClient;
-  }, [useRouting, defaultFilters, defaultQuery, pageSize]);
+  }, [useRouting, defaultFilters, defaultQuery, pageSize, defaultSorting]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {
     client: client
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
@@ -69,6 +71,7 @@ SearchKit.propTypes = {
   pageSize: PropTypes.number,
   useRouting: PropTypes.bool,
   defaultFilters: PropTypes.object,
-  defaultQuery: PropTypes.string
+  defaultQuery: PropTypes.string,
+  defaultSorting: PropTypes.string
 };
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -239,7 +239,7 @@ export const LoadMore = () => {
       data: data,
       renderItem: SearchItem,
       renderHeader: SearchHeader,
-      append: true
+      appendResults: true
     }), /*#__PURE__*/React.createElement(SearchLoadMore, {
       data: data
     }));

package/dist/components/Share/stories.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 $facebook: #3b5998;
 $twitter: #00aced;

package/dist/components/WysiwygField/stories.scss

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

package/dist/helpers/makeSafeForCSS.js

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

package/package.json

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

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'
-});