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

package/dist/components/Form/Email/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/Email',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormEmail } 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 Email = function Email() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Email = function Email(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Email address",
     required: true,
     description: "This is a test input.",
@@ -26,6 +38,6 @@ var Email = function Email() {
       }
       return error;
     }
-  }));
+  }, args));
 };
 exports.Email = Email;

package/dist/components/Form/Number/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/Number',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormNumber } 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 Number = function Number() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Number = function Number(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Amount",
     required: true,
     min: 1,
@@ -29,6 +41,6 @@ var Number = function Number() {
       }
       return error;
     }
-  }));
+  }, args));
 };
 exports.Number = Number;

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

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

package/dist/components/Form/Select/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/Select',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormSelect } 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 Select = function Select() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Select = function Select(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -36,11 +48,11 @@ var Select = function Select() {
     onChange: function onChange(e) {
       console.log(e);
     }
-  }));
+  }, args));
 };
 exports.Select = Select;
-var SelectMultiple = function SelectMultiple() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var SelectMultiple = function SelectMultiple(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -65,6 +77,6 @@ var SelectMultiple = function SelectMultiple() {
     onChange: function onChange(e) {
       console.log(e);
     }
-  }));
+  }, args));
 };
 exports.SelectMultiple = SelectMultiple;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TextField = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -65,5 +65,6 @@ var TextField = function TextField(props) {
     disabled: disabled
   })));
 };
+exports.TextField = TextField;
 var _default = (0, _withMapping.default)(TextField);
 exports.default = _default;

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

@@ -6,20 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TextField = 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 }; }
 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/TextField',
+  component: _.TextField,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormTextField } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+      initialValues: {
+        firstname: ''
+      },
+      displayRequiredIndicator: "required"
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var TextField = function TextField(props) {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, _extends({}, props, {
-    initialValues: {
-      firstname: ''
-    },
-    displayRequiredIndicator: "required"
-  }), /*#__PURE__*/_react.default.createElement(_.default, {
+var TextField = function TextField(args) {
+  return /*#__PURE__*/_react.default.createElement(_.TextField, _extends({
     title: "First name",
     required: true,
     description: "This is a test input.",
@@ -35,6 +46,6 @@ var TextField = function TextField(props) {
     onChange: function onChange(e) {
       return console.log(e.target.value);
     }
-  }));
+  }, args));
 };
 exports.TextField = TextField;

package/dist/components/Form/Textarea/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/Textarea',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { FormTextarea } 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 Textarea = function Textarea() {
-  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
+var Textarea = function Textarea(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     title: "Your message",
     required: true,
     description: "This is a test input.",
@@ -26,6 +38,6 @@ var Textarea = function Textarea() {
       }
       return error;
     }
-  }));
+  }, args));
 };
 exports.Textarea = Textarea;

package/dist/components/Hamburger/index.js

@@ -9,11 +9,12 @@ require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Hamburger = function Hamburger(_ref) {
   var onClick = _ref.onClick,
-    numberOfLines = _ref.numberOfLines;
+    numberOfLines = _ref.numberOfLines,
+    showMenuLabel = _ref.showMenuLabel;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "Hamburger",
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, showMenuLabel && /*#__PURE__*/_react.default.createElement("span", {
     className: "title"
   }, "Menu"), /*#__PURE__*/_react.default.createElement("div", {
     className: "hamburger-menu"
@@ -27,7 +28,8 @@ var Hamburger = function Hamburger(_ref) {
 };
 Hamburger.defaultProps = {
   onClick: function onClick() {},
-  numberOfLines: 3
+  numberOfLines: 3,
+  showMenuLabel: true
 };
 var _default = Hamburger;
 exports.default = _default;

package/dist/components/Hamburger/stories.js

@@ -14,10 +14,18 @@ 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: 'Atoms/Hamburger'
+  title: 'Atoms/Hamburger',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Hamburger } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Default = function Default() {
+var Default = function Default(args) {
   var _React$useState = _react.default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     active = _React$useState2[0],
@@ -32,7 +40,7 @@ var Default = function Default() {
   }));
 };
 exports.Default = Default;
-var TwoLines = function TwoLines() {
+var TwoLines = function TwoLines(args) {
   var _React$useState3 = _react.default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     active = _React$useState4[0],

package/dist/components/Header/stories.js

@@ -8,43 +8,52 @@ 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: 'Organisms/Header'
+  title: 'Organisms/Header',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Header } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 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({
     logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
     menu: /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Our work"), /*#__PURE__*/_react.default.createElement("li", null, "About us"), /*#__PURE__*/_react.default.createElement("li", null, "Contact")))
-  });
+  }, args));
 };
 exports.Default = Default;
-var ForceHamburger = function ForceHamburger() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+var ForceHamburger = function ForceHamburger(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     forceHamburger: true,
     logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
     menu: /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Our work"), /*#__PURE__*/_react.default.createElement("li", null, "About us"), /*#__PURE__*/_react.default.createElement("li", null, "Contact")))
-  });
+  }, args));
 };
 exports.ForceHamburger = ForceHamburger;
-var WithoutMenu = function WithoutMenu() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+var WithoutMenu = function WithoutMenu(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
     menu: null
-  });
+  }, args));
 };
 exports.WithoutMenu = WithoutMenu;
-var WithAnimation = function WithAnimation() {
+var WithAnimation = function WithAnimation(args) {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '2000px',
       background: '#eee'
     }
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({
     withAnimation: true,
     logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
     menu: /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Our work"), /*#__PURE__*/_react.default.createElement("li", null, "About us"), /*#__PURE__*/_react.default.createElement("li", null, "Contact"))),
     subMenu: /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Sub menu item"), /*#__PURE__*/_react.default.createElement("li", null, "Sub menu item"), /*#__PURE__*/_react.default.createElement("li", null, "Sub menu item")))
-  }));
+  }, args)));
 };
 exports.WithAnimation = WithAnimation;

package/dist/components/Image/stories.js

@@ -9,14 +9,26 @@ var _ = _interopRequireDefault(require("."));
 var _Background = _interopRequireDefault(require("./Background"));
 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/Image'
+  title: 'Atoms/Image',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Image, ImageBackground } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "ImageWrapper"
+    }, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ImageWrapper"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "ImageWrapper__image"
   }, /*#__PURE__*/_react.default.createElement(_.default, {
     src: "https://dummyimage.com/400x400/000/fff.jpg",
@@ -39,51 +51,43 @@ var Default = function Default() {
   })));
 };
 exports.Default = Default;
-var Responsive = function Responsive() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ImageWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
+var Responsive = function Responsive(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     src: {
       400: 'https://dummyimage.com/400x400/000/fff.gif',
       600: 'https://dummyimage.com/600x400/f2788f/fff.png',
       1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
     },
     alt: "Image 1"
-  }));
+  }, args));
 };
 exports.Responsive = Responsive;
-var BackgroundImage = function BackgroundImage() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ImageWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_Background.default, {
+var BackgroundImage = function BackgroundImage(args) {
+  return /*#__PURE__*/_react.default.createElement(_Background.default, _extends({
     src: "https://dummyimage.com/600x400/000/fff.jpg",
     alt: "Image 1"
-  }));
+  }, args));
 };
 exports.BackgroundImage = BackgroundImage;
-var BackgroundImageResponsive = function BackgroundImageResponsive() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ImageWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_Background.default, {
+var BackgroundImageResponsive = function BackgroundImageResponsive(args) {
+  return /*#__PURE__*/_react.default.createElement(_Background.default, _extends({
     src: {
       400: 'https://dummyimage.com/400x400/000/fff.gif',
       600: 'https://dummyimage.com/600x400/f2788f/fff.png',
       1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
     },
     alt: "Image 1"
-  }));
+  }, args));
 };
 exports.BackgroundImageResponsive = BackgroundImageResponsive;
-var ImageResponsiveFail = function ImageResponsiveFail() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ImageWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
+var ImageResponsiveFail = function ImageResponsiveFail(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
     src: {
       400: null,
       600: 'https://dummyimage.com/600x400/f2788f/fff.png',
       1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
     },
     alt: "Image 1"
-  }));
+  }, args));
 };
 exports.ImageResponsiveFail = ImageResponsiveFail;

package/dist/components/InlineMenu/stories.js

@@ -10,59 +10,72 @@ var _Header = _interopRequireDefault(require("../Header"));
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Molecules/InlineMenu'
+  title: 'Molecules/InlineMenu',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { InlineMenu } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        background: '#eee',
+        paddingTop: 200
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Header.default, {
+      logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
+      withAnimation: true,
+      menu: /*#__PURE__*/_react.default.createElement("nav", null, "Mooi menuutje"),
+      subMenu: /*#__PURE__*/_react.default.createElement(Story, null)
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-1"
+    }, "Content van paragraaf 1"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-2"
+    }, "Content van paragraaf 2"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-3"
+    }, "Content van paragraaf 3"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-4"
+    }, "Content van paragraaf 4"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-5"
+    }, "Content van paragraaf 5"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "paragraph",
+      id: "paragraph-6"
+    }, "Content van paragraaf 6"));
+  }]
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      background: '#eee',
-      paddingTop: 200
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Header.default, {
-    logo: /*#__PURE__*/_react.default.createElement("div", null, "LOGO"),
-    withAnimation: true,
-    menu: /*#__PURE__*/_react.default.createElement("nav", null, "Mooi menuutje"),
-    subMenu: /*#__PURE__*/_react.default.createElement(_.default, {
-      items: [{
-        menuItemName: 'Paragraaf 1',
-        elementId: 'paragraph-1'
-      }, {
-        menuItemName: 'Paragraaf 2',
-        elementId: 'paragraph-2'
-      }, {
-        menuItemName: 'Paragraaf 3',
-        elementId: 'paragraph-3'
-      }, {
-        menuItemName: 'Paragraaf 4',
-        elementId: 'paragraph-4'
-      }, {
-        menuItemName: 'Paragraaf 5',
-        elementId: 'paragraph-5'
-      }, {
-        menuItemName: 'Paragraaf 6',
-        elementId: 'paragraph-6'
-      }],
-      scrollToTopOffset: 100
-    })
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-1"
-  }, "Content van paragraaf 1"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-2"
-  }, "Content van paragraaf 2"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-3"
-  }, "Content van paragraaf 3"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-4"
-  }, "Content van paragraaf 4"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-5"
-  }, "Content van paragraaf 5"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "paragraph",
-    id: "paragraph-6"
-  }, "Content van paragraaf 6"));
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, args);
+};
+exports.Default = Default;
+var defaultArgs = {
+  items: [{
+    menuItemName: 'Paragraaf 1',
+    elementId: 'paragraph-1'
+  }, {
+    menuItemName: 'Paragraaf 2',
+    elementId: 'paragraph-2'
+  }, {
+    menuItemName: 'Paragraaf 3',
+    elementId: 'paragraph-3'
+  }, {
+    menuItemName: 'Paragraaf 4',
+    elementId: 'paragraph-4'
+  }, {
+    menuItemName: 'Paragraaf 5',
+    elementId: 'paragraph-5'
+  }, {
+    menuItemName: 'Paragraaf 6',
+    elementId: 'paragraph-6'
+  }],
+  scrollToTopOffset: 100
 };
-exports.Default = Default;
+Default.args = defaultArgs;

package/dist/components/Layout/Container/stories.js

@@ -10,7 +10,14 @@ require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: 'Templates/Container',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Container } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Filler = function Filler() {