@uncinc/uncinc-react-kitchen-sink 2.6.0 → 2.6.3

package/dist/components/AbbreviationAnnotation/stories.js

@@ -8,27 +8,25 @@ var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
 var _default = {
   title: 'Atoms/AbbreviationAnnotation',
-  component: _.default
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { AbbreviationAnnotation } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  component: _.default,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, ", /*#__PURE__*/_react.default.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.default.createElement("p", null, "Donec feugiat, nunc vitae euismod", /*#__PURE__*/_react.default.createElement(Story, null), "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.default.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."));
+  }]
 };
 exports.default = _default;
 var Default = function Default(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, ", /*#__PURE__*/_react.default.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.default.createElement("p", null, "Donec feugiat, nunc vitae euismod", /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    abbreviationTitle: function abbreviationTitle(html) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, html, /*#__PURE__*/_react.default.createElement("i", {
-        className: "icon icon-arrow icon-right"
-      }));
-    },
-    abbreviationContent: function abbreviationContent(html) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
-        className: "icon icon-arrow icon-content"
-      }), /*#__PURE__*/_react.default.createElement("div", null, html));
-    }
-  }, args)), "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.default.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."));
+  return /*#__PURE__*/_react.default.createElement(_.default, args);
 };
 exports.Default = Default;
 var defaultArgs = {

package/dist/components/Accordion/stories.js

@@ -10,10 +10,18 @@ var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
 var _AccordionItemVariant = _interopRequireDefault(require("./AccordionItemVariant"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Atoms/Accordion'
+  title: 'Atoms/Accordion',
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Accordion, AccordionItem, AccordionItemVariant } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  component: _AccordionItem.default
 };
 exports.default = _default;
-var Default = function Default() {
+var Default = function Default(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement(_AccordionItem.default, {
     title: "Plain text item",
     content: "First item content"
@@ -26,7 +34,7 @@ var Default = function Default() {
   }));
 };
 exports.Default = Default;
-var withVariant = function withVariant() {
+var withVariant = function withVariant(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement(_AccordionItemVariant.default, {
     title: "Plain text item",
     content: "<p>Second item <strong>content</strong> that containts <em>HTML</em>.</p>"

package/dist/components/ApiAutocomplete/stories.js

@@ -7,12 +7,21 @@ exports.default = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 var _default = {
-  title: 'Organisms/Autocomplete'
+  title: 'Organisms/Autocomplete',
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { ApiAutocomplete } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  component: _.default
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     endpoint: "http://nldoet.devinc.eu/autocomplete/json",
     renderItem: function renderItem(item) {
       console.log(item);
@@ -24,6 +33,6 @@ var Default = function Default() {
     inputProps: {
       label: 'test'
     }
-  });
+  }, args));
 };
 exports.Default = Default;

package/dist/components/Button/stories.js

@@ -11,6 +11,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 var _default = {
   component: _.Button,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Button } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
   title: 'Atoms/Button'
 };
 exports.default = _default;

package/dist/components/CallToAction/stories.d.ts

@@ -2,6 +2,13 @@ import React from 'react';
 import './style.scss';
 declare const _default: {
     component: React.FC<import(".").CallToActionProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     title: string;
 };
 export default _default;

package/dist/components/CallToAction/stories.js

@@ -11,6 +11,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 var _default = {
   component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { CallToAction } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
   title: 'Molecules/CallToAction'
 };
 exports.default = _default;

package/dist/components/Cookie/stories.js

@@ -21,6 +21,13 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = {
   title: 'Organisms/Cookie',
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Cookie } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
   component: _.default
 };
 exports.default = _default;
@@ -88,4 +95,13 @@ var Advanced = function Advanced(args) {
     manualHeader: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Manual choice"), /*#__PURE__*/_react.default.createElement("p", null, "You have a choice."))
   }, args), /*#__PURE__*/_react.default.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/_react.default.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."));
 };
-exports.Advanced = Advanced;
+exports.Advanced = Advanced;
+var defaultParameters = {
+  docs: {
+    story: {
+      height: '500px'
+    }
+  }
+};
+Default.parameters = defaultParameters;
+Advanced.parameters = defaultParameters;

package/dist/components/Dialog/DialogHookStory/index.js

@@ -9,36 +9,28 @@ var _uuid = require("uuid");
 var _useDialog2 = _interopRequireDefault(require("../../../hooks/useDialog"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var DialogHookStory = function DialogHookStory(args) {
+  var _useDialog = (0, _useDialog2.default)(),
+    openDialog = _useDialog.openDialog,
+    DialogComponent = _useDialog.DialogComponent;
+  var uuid = (0, _uuid.v4)();
   var Content = function Content() {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "I've been created using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This hook provides you with:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "title"), " - a header element, or any element, really (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook instead."));
   };
   var title = function title() {
     return /*#__PURE__*/_react.default.createElement("h2", null, "I'm a Dialog!");
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, _toConsumableArray(Array(3)).map(function () {
-    var _useDialog = (0, _useDialog2.default)(),
-      openDialog = _useDialog.openDialog,
-      DialogComponent = _useDialog.DialogComponent;
-    var uuid = (0, _uuid.v4)();
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      type: "button",
-      onClick: openDialog
-    }, "Open a dialog"), /*#__PURE__*/_react.default.createElement(DialogComponent, _extends({
-      id: uuid,
-      title: title,
-      showCloseButton: true,
-      closeButtonText: "Click here to close me.",
-      showCloseIcon: true,
-      closeIcon: "icon-cross"
-    }, args), /*#__PURE__*/_react.default.createElement(Content, null)));
-  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: openDialog
+  }, "Open a dialog"), /*#__PURE__*/_react.default.createElement(DialogComponent, _extends({
+    id: uuid,
+    title: title,
+    showCloseButton: true,
+    closeButtonText: "Click here to close me.",
+    showCloseIcon: true,
+    closeIcon: "icon-cross"
+  }, args), /*#__PURE__*/_react.default.createElement(Content, null))));
 };
 exports.DialogHookStory = DialogHookStory;
 var _default = DialogHookStory;

package/dist/components/Dialog/stories.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.Override = exports.Helpers = exports.Default = void 0;
 var _DialogHookStory = _interopRequireDefault(require("./DialogHookStory"));
 var _DialogHelpersStory = _interopRequireDefault(require("./DialogHelpersStory"));
 var _DialogOverrideStory = _interopRequireDefault(require("./DialogOverrideStory"));
@@ -15,7 +14,9 @@ var _default = {
   component: _.default
 };
 exports.default = _default;
-var Default = function Default(args) {
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Here, you see the Dialog implemented using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook. Use the story code as a reference."), /*#__PURE__*/_react.default.createElement(_DialogHookStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "This is the dialog implemented by using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook. This offers some more flexibility."), /*#__PURE__*/_react.default.createElement(_DialogHelpersStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "You can also disable the ", /*#__PURE__*/_react.default.createElement("code", null, "useClickOutside"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "useEscape"), " hooks."), /*#__PURE__*/_react.default.createElement(_DialogOverrideStory.default, null));
-};
-exports.Default = Default;
+var Default = _DialogHookStory.default;
+exports.Default = Default;
+var Helpers = _DialogHelpersStory.default;
+exports.Helpers = Helpers;
+var Override = _DialogOverrideStory.default;
+exports.Override = Override;

package/dist/components/Download/stories.d.ts

@@ -2,6 +2,13 @@ import React from 'react';
 import './stories.scss';
 declare const _default: {
     title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     component: React.FC<import(".").DownloadProps>;
 };
 export default _default;

package/dist/components/Download/stories.js

@@ -11,6 +11,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 var _default = {
   title: 'Molecules/Download',
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Download } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
   component: _.default
 };
 exports.default = _default;

package/dist/components/FontSizeSwitcher/stories.js

@@ -7,19 +7,28 @@ exports.default = exports.IncrementMode = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 var _default = {
-  title: 'Molecules/FontSizeSwitcher'
+  title: 'Molecules/FontSizeSwitcher',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FontSizeSwitcher } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
     defaultSize: 0
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("p", null, "And some text.")));
+  }, args)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("p", null, "And some text.")));
 };
 exports.Default = Default;
-var IncrementMode = function IncrementMode() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var IncrementMode = function IncrementMode(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
     incrementMode: true
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("p", null, "And some text.")));
+  }, args)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Header"), /*#__PURE__*/_react.default.createElement("p", null, "And some text.")));
 };
 exports.IncrementMode = IncrementMode;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Checkbox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -66,6 +66,7 @@ var Checkbox = function Checkbox(props) {
     })), title);
   }));
 };
+exports.Checkbox = Checkbox;
 Checkbox.defaultProps = {
   onChange: function onChange() {}
 };

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

@@ -6,18 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Checkbox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
-var _ = _interopRequireDefault(require("."));
+var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Molecules/Form'
+  title: 'Molecules/Form/Checkbox',
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormCheckbox } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  component: _.Checkbox,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+      initialValues: {
+        'agreed_with_statement': false
+      }
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var Checkbox = function Checkbox() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
-    initialValues: {
-      'agreed_with_statement': false
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
+var Checkbox = function Checkbox(args) {
+  return /*#__PURE__*/_react.default.createElement(_.Checkbox, {
     title: "I agree with the statement",
     required: true,
     description: "By checking the above box, you agree with the statement.",
@@ -32,6 +43,6 @@ var Checkbox = function Checkbox() {
     onChange: function onChange(e) {
       console.log('change', e);
     }
-  }));
+  });
 };
 exports.Checkbox = Checkbox;

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

@@ -10,18 +10,29 @@ var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 var _default = {
-  title: 'Molecules/Form'
+  title: 'Molecules/Form/Checkboxes',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormCheckboxes } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+      initialValues: {
+        'poison': []
+      },
+      onSubmit: function onSubmit(values) {
+        return console.log(values);
+      }
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var Checkboxes = function Checkboxes(props) {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, _extends({}, props, {
-    initialValues: {
-      'poison': []
-    },
-    onSubmit: function onSubmit(values) {
-      return console.log(values);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_.default, {
+var Checkboxes = function Checkboxes(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Pick your poison",
     required: true,
     description: "Please select your poison.",
@@ -41,9 +52,6 @@ var Checkboxes = function Checkboxes(props) {
       return error;
     },
     otherLabel: "Anders"
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    type: "submit",
-    value: "Verzenden"
-  }));
+  }, args));
 };
 exports.Checkboxes = Checkboxes;

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

@@ -8,12 +8,24 @@ var _react = _interopRequireDefault(require("react"));
 var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 var _default = {
-  title: 'Molecules/Form'
+  title: 'Molecules/Form/Date',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormDate } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var Date = function Date() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Date = function Date(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Date",
     required: true,
     description: "This is a test input.",
@@ -26,6 +38,6 @@ var Date = function Date() {
       }
       return error;
     }
-  }));
+  }, args));
 };
 exports.Date = Date;

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

@@ -8,12 +8,24 @@ var _react = _interopRequireDefault(require("react"));
 var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 var _default = {
-  title: 'Molecules/Form'
+  title: 'Molecules/Form/DatePicker',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormDatePicker } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var DatePicker = function DatePicker() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var DatePicker = function DatePicker(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Date",
     required: true,
     description: "This is a test input.",
@@ -26,6 +38,6 @@ var DatePicker = function DatePicker() {
       }
       return error;
     }
-  }));
+  }, args));
 };
 exports.DatePicker = DatePicker;

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

@@ -11,6 +11,7 @@ var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -18,25 +19,40 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = {
-  title: 'Molecules/Form'
+  title: 'Molecules/Form/DateSelect',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormDateSelect } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+      initialValues: {
+        dateSelect: date
+      },
+      validateOnBlur: true,
+      displayRequiredIndicator: "required",
+      onSubmit: function onSubmit(values, form) {
+        form.setSubmitting(false);
+        setDate(values.dateSelect);
+      }
+    }, /*#__PURE__*/_react.default.createElement(Story, null), /*#__PURE__*/_react.default.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/_react.default.createElement("input", {
+      className: "submitButton",
+      type: "submit",
+      value: "Pick date"
+    }));
+  }]
 };
 exports.default = _default;
-var DateSelect = function DateSelect() {
-  var _useState = (0, _react.useState)(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
-    initialValues: {
-      dateSelect: date
-    },
-    validateOnBlur: true,
-    displayRequiredIndicator: "required",
-    onSubmit: function onSubmit(values, form) {
-      form.setSubmitting(false);
-      setDate(values.dateSelect);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
+var DateSelect = function DateSelect(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Pick a date",
     fieldName: "dateSelect",
     required: true,
@@ -45,10 +61,6 @@ var DateSelect = function DateSelect() {
     yearPlaceholder: "Year",
     requiredError: "Please fill all fields.",
     notValidError: "That's not a valid date."
-  }), /*#__PURE__*/_react.default.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/_react.default.createElement("input", {
-    className: "submitButton",
-    type: "submit",
-    value: "Pick date"
-  }));
+  }, args));
 };
 exports.DateSelect = DateSelect;