@uncinc/uncinc-react-kitchen-sink 2.2.13 → 2.2.16

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/Button/stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from './';
+import './stories.scss';
 export default {
   title: 'Atoms/Button'
 };

package/dist/components/Button/stories.scss

@@ -1,45 +1,43 @@
 @import '../../styles/assets/variables';
 
 .Button {
-  &.Button--styled {
-    display: inline-block;
-    border-radius: 5px;
-    text-decoration: none;
-    text-align: center;
-    cursor: pointer;
+  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;
+  &--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);
-      }
+    &: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;
+  &--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;
-      }
+    &:hover {
+      background-color: #f1f1f1;
+    }
+    &:disabled {
+      font-family: inherit;
+      opacity: .5;
     }
   }
 }

package/dist/components/Button/style.scss

@@ -2,42 +2,7 @@
 
 .Button {
   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/index.js

@@ -11,13 +11,19 @@ import './style.scss';
 const CookieCompliancePopup = props => {
   const {
     className,
-    cookieLevels,
     children,
     manualText,
     agreeText,
+    disagreeText,
+    showDisagree,
+    onAgree,
     onDisagree,
+    cookieLevels,
     cookieOptions,
-    cookieDomain
+    cookieDomain,
+    defaultValues,
+    manualHeader,
+    manualButtonClassname
   } = 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.
@@ -30,14 +36,16 @@ const CookieCompliancePopup = props => {
 
   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: false,
-    statistieken: false,
-    marketing: false
+  const [hidden, setHidden] = useState(didConsent !== null);
+  const categories = cookieLevels.map(item => {
+    return item.value;
   });
+  const defaultState = categories.reduce((prev, category) => {
+    prev[category] = typeof defaultValues[category] !== undefined ? defaultValues[category] : true;
+    return prev;
+  }, {}); // Default choices for select, this way we can locally manage the state of the form.
+
+  const [choicesSelected, setChoicesSelected] = useState(defaultState);
   useEffect(() => {
     if (hidden) {
       setHiddenInternal(true);
@@ -61,7 +69,7 @@ const CookieCompliancePopup = props => {
   // and also sets the accepted categories in CookieAgreedCategories.
 
 
-  const onAgree = choices => {
+  const _onAgree = choices => {
     const selectedChoices = Object.keys(choices).filter(key => {
       return choices[key];
     });
@@ -84,18 +92,37 @@ const CookieCompliancePopup = props => {
 
     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, {
+    categories.forEach(category => {
+      value[category] = true;
+    }, {});
+    Cookies.set('cookie-consent', JSON.stringify(value), {
       expires: 365,
       domain: cookieDomain
     });
+    onAgree(choices);
+  };
+
+  const _onDisagree = () => {
+    setDidConsent('0', cookieOptions);
+    Cookies.set('cookie-agreed-categories', JSON.stringify([]), {
+      expires: 365,
+      domain: cookieDomain
+    });
+    const timestamp = Math.round(new Date().getTime() / 1000);
+    const value = {
+      ver: 1,
+      utc: timestamp,
+      region: 'nl'
+    };
+    Cookies.set('cookie-consent', JSON.stringify(value), {
+      expires: 365,
+      domain: cookieDomain
+    });
+    onDisagree();
   }; // This function is fired when the accept button is pressed.
   // Also has eventual support for a false case.
 
@@ -103,9 +130,9 @@ const CookieCompliancePopup = props => {
   const onConsent = value => {
     return () => {
       if (value === true) {
-        onAgree(choicesSelected);
+        _onAgree(choicesSelected);
       } else {
-        onDisagree();
+        _onDisagree();
       }
     };
   }; // This function sets the value of the checkmark in the form state.
@@ -168,8 +195,11 @@ const CookieCompliancePopup = props => {
     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",
+  }, agreeText), showDisagree && /*#__PURE__*/React.createElement("button", {
+    className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-disagree ${manualButtonClassname}`,
+    onClick: onConsent(false)
+  }, disagreeText), /*#__PURE__*/React.createElement("button", {
+    className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-agree ${manualButtonClassname}`,
     onClick: e => {
       displayConsentChoices(e);
     }
@@ -177,7 +207,9 @@ const CookieCompliancePopup = props => {
     className: "Cookie__content__message"
   }, /*#__PURE__*/React.createElement("div", {
     className: "Cookie__checkboxes-container row"
-  }, renderChoices())), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-12"
+  }, manualHeader), renderChoices())), /*#__PURE__*/React.createElement("div", {
     className: "Cookie__content__buttons"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "Button--cta",
@@ -188,9 +220,40 @@ const CookieCompliancePopup = props => {
 export default CookieCompliancePopup;
 CookieCompliancePopup.defaultProps = {
   agreeText: 'Accepteren',
+  disagreeText: 'Alles weigeren',
   manualText: 'Zelf instellen',
+  manualHeader: () => {},
+  onAgree: () => {},
   onDisagree: () => {},
-  cookieLevels: [],
+  showDisagree: false,
+  manualButtonClassname: "icon-after icon-chevron-right icon-variant-2",
+  cookieLevels: [{
+    value: "necessary",
+    label: 'Benodigd',
+    description: "",
+    disabled: true
+  }, {
+    value: "voorkeuren",
+    label: "Voorkeuren",
+    description: "",
+    disabled: false
+  }, {
+    value: "statistieken",
+    label: "Statistieken",
+    description: "",
+    disabled: false
+  }, {
+    value: "marketing",
+    label: "Marketing",
+    description: "",
+    disabled: false
+  }],
+  defaultValues: {
+    necessary: true,
+    voorkeuren: false,
+    statistieken: false,
+    marketing: false
+  },
   cookieDomain: null,
   cookieOptions: {
     days: 365,
@@ -200,8 +263,11 @@ CookieCompliancePopup.defaultProps = {
 CookieCompliancePopup.propTypes = {
   agreeText: PropTypes.string,
   manualText: PropTypes.string,
+  manualHeader: PropTypes.func,
+  manualButtonClassname: PropTypes.string,
+  onAgree: PropTypes.func,
   onDisagree: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
+  showDisagree: PropTypes.bool,
   cookieLevels: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,

package/dist/components/Cookie/stories.js

@@ -7,7 +7,15 @@ export default {
 export const Default = () => /*#__PURE__*/React.createElement(Cookie, {
   agreeText: 'Accepteren',
   manualText: 'Zelf instellen',
+  onAgree: choices => console.log("User agreed to", choices),
+  onDisagree: () => console.log("User did NOT agree")
+}, /*#__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."));
+export const Advanced = () => /*#__PURE__*/React.createElement(Cookie, {
+  agreeText: 'Accepteren',
+  manualText: 'Zelf instellen',
+  showDisagree: true,
   onDisagree: () => {},
+  manualButtonClassname: "",
   cookieLevels: [{
     value: "necessary",
     label: "Noodzakelijk",
@@ -23,10 +31,11 @@ export const Default = () => /*#__PURE__*/React.createElement(Cookie, {
     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
-  }]
+  }],
+  defaultValues: {
+    necessary: true,
+    voorkeuren: true,
+    statistieken: true
+  },
+  manualHeader: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Manual choice"), /*#__PURE__*/React.createElement("p", null, "You have a choice."))
 }, /*#__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/style.scss

@@ -45,6 +45,15 @@
       .Button {
         margin-right: 1rem;
       }
+
+      .Cookie__content__buttons__manual {
+        border: none;
+        background: none;
+        font-size: inherit;
+        font-family: inherit;
+        padding: 0;
+        margin-right: 1rem;
+      }
     }
   }
 

package/dist/pages/api/graphql.js

@@ -0,0 +1,25 @@
+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'
+});

package/package.json

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

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;