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

package/dist/components/InlineMenu/stories.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require("."));
-var _Header = _interopRequireDefault(require("../Header"));
-require("./stories.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
-  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(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
-};
-Default.args = defaultArgs;

package/dist/components/InlineMenu/stories.scss

@@ -1,10 +0,0 @@
-.paragraph {
-  background: white;
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: black;
-  color: white;
-  margin-bottom: 300px;
-}

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

@@ -1,102 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require("."));
-require("./stories.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
-  title: 'Templates/Container',
-  component: _.default,
-  parameters: {
-    docs: {
-      description: {
-        component: '`import { Container } from "@uncinc/uncinc-react-kitchen-sink";`'
-      }
-    }
-  }
-};
-exports.default = _default;
-var Filler = function Filler() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "Filler"
-  });
-};
-var Columns = function Columns() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-6"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-6"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-4"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-4"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-4"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-3"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-3"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-3"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-3"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-2"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-1"
-  }, /*#__PURE__*/_react.default.createElement(Filler, null))));
-};
-var Default = function Default(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, args, /*#__PURE__*/_react.default.createElement(Columns, null));
-};
-exports.Default = Default;

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

@@ -1,21 +0,0 @@
-.Filler {
-  background-color: #efefef;
-  width: 100%;
-  height: 50px;
-  margin-bottom: 20px;
-}
-
-.box {
-  font-size: 2rem;
-  padding: 1rem;
-  display: grid;
-  place-items: center;
-  border-radius: 1rem;
-  border-style: dashed;
-  color: white;
-  height: 150px;
-
-  &__full-height {
-    height: 100%;
-  }
-}

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

@@ -1,112 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Wrap = exports.Stack = exports.SpaceBetween = exports.Sidebar = exports.Clamp = exports.Center = exports.Auto = exports.AspectRatio = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
-  title: 'Templates/QuickLayout',
-  component: _.default,
-  parameters: {
-    docs: {
-      description: {
-        component: '`import { QuickLayout } from "@uncinc/uncinc-react-kitchen-sink";`'
-      }
-    }
-  }
-};
-exports.default = _default;
-var Center = function Center(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box turqoise"
-  }, "Wow, i'm centered!"));
-};
-exports.Center = Center;
-var Wrap = function Wrap(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "wrap",
-    min: "150px",
-    stretched: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box box__full-height sunflower"
-  }, "1"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box box__full-height midnightblue"
-  }, "2"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box box__full-height belizehole"
-  }, "3"));
-};
-exports.Wrap = Wrap;
-var Sidebar = function Sidebar(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "sidebar"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box box__full-height amethyst"
-  }, "Sidebar"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box box__full-height sunflower"
-  }, "Body"));
-};
-exports.Sidebar = Sidebar;
-var Stack = function Stack(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "stack"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box  box__full-height turqoise"
-  }, "Navigation!"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box  box__full-height pomegranate"
-  }, "Body!"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box  box__full-height belizehole"
-  }, "Footer!"));
-};
-exports.Stack = Stack;
-var Auto = function Auto(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "auto",
-    gap: "1rem ",
-    min: "150px"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box turqoise"
-  }, "1"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box pomegranate"
-  }, "2"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box turqoise"
-  }, "3"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box belizehole"
-  }, "4"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box amethyst"
-  }, "5"));
-};
-exports.Auto = Auto;
-var SpaceBetween = function SpaceBetween(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "spaceBetween",
-    gap: "1rem",
-    items: "3"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "box sunflower"
-  }, "Box 1"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box midnightblue"
-  }, "Box 2"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "box belizehole"
-  }, "Box 3"));
-};
-exports.SpaceBetween = SpaceBetween;
-var Clamp = function Clamp(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
-    type: "clamp",
-    min: "2rem",
-    value: "2.5vw",
-    max: "20rem"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent urna lectus, condimentum eu neque ut, hendrerit scelerisque lorem. Aenean vehicula eleifend porta. Suspendisse viverra fermentum urna quis rhoncus. Nam lacinia risus vel purus vestibulum semper. Curabitur rutrum nisl consequat dui pretium, vel dapibus libero venenatis. Praesent non imperdiet ipsum. Suspendisse non enim mattis, blandit nunc et, suscipit magna. Duis eu blandit elit. Fusce rhoncus, augue ut pretium accumsan, quam dolor laoreet nisl, eu faucibus mi massa vulputate enim.");
-};
-exports.Clamp = Clamp;
-var AspectRatio = function AspectRatio(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Coming ", /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://caniuse.com/mdn-css_properties_aspect-ratio"
-  }, "soon...")), /*#__PURE__*/_react.default.createElement("div", null));
-};
-exports.AspectRatio = AspectRatio;

package/dist/components/Lottie/stories.js

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.playAnimationOnMousePosition = exports.pauseOnClickAnimation = exports.default = exports.activateOnHoverAnimation = exports.PathLoad = exports.DefaultAnimation = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require("."));
-var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./LottieAnimationWithMousePosition"));
-var _example = _interopRequireDefault(require("../../assets/lottie/example.json"));
-var _data = _interopRequireDefault(require("../../assets/lottie/data.json"));
-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/Lottie',
-  component: _.default,
-  parameters: {
-    docs: {
-      description: {
-        component: '`import { Lottie, LottieAnimationWithMousePosition } from "@uncinc/uncinc-react-kitchen-sink";`'
-      }
-    }
-  }
-}; // Default animation
-exports.default = _default;
-var DefaultAnimation = function DefaultAnimation(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    id: "example",
-    data: _example.default,
-    onInit: function onInit(lottie) {
-      return console.log(lottie);
-    }
-  }, args));
-};
-
-// Animation active on hover
-exports.DefaultAnimation = DefaultAnimation;
-var activateOnHoverAnimation = function activateOnHoverAnimation(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    data: _example.default,
-    activateOnHover: true
-  }, args));
-};
-
-// Animation plays on mouse position
-exports.activateOnHoverAnimation = activateOnHoverAnimation;
-var playAnimationOnMousePosition = function playAnimationOnMousePosition(args) {
-  return /*#__PURE__*/_react.default.createElement(_LottieAnimationWithMousePosition.default, _extends({
-    loop: false,
-    autoplay: false,
-    data: _data.default,
-    olaTime: 100,
-    startPosition: 0.5
-  }, args));
-};
-
-// Pause animation on click
-exports.playAnimationOnMousePosition = playAnimationOnMousePosition;
-var pauseOnClickAnimation = function pauseOnClickAnimation(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    data: _example.default,
-    pauseOnClick: true
-  }, args));
-};
-
-// Via path load
-exports.pauseOnClickAnimation = pauseOnClickAnimation;
-var PathLoad = function PathLoad(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
-    path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
-  }, args));
-};
-exports.PathLoad = PathLoad;

package/dist/components/MagicLine/stories.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoActiveItem = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ = _interopRequireDefault(require("."));
-require("./stories.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
-  title: 'Molecules/MagicLine',
-  component: _.default,
-  parameters: {
-    docs: {
-      description: {
-        component: '`import { MagicLine } from "@uncinc/uncinc-react-kitchen-sink";`'
-      }
-    }
-  }
-};
-exports.default = _default;
-var Default = function Default(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, args, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
-    var items = ['one', 'two with a longer name', 'three'];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "Menu"
-    }, items.map(function (item) {
-      var active = item === 'three';
-      if (active) {
-        setActiveItemInNavigation(true);
-      }
-      var classes = (0, _classnames.default)('Menu__item', {
-        'Menu__item--active': active
-      });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item,
-        className: classes,
-        onMouseEnter: function onMouseEnter(e) {
-          hoverMagicLine(e);
-        },
-        onMouseLeave: function onMouseLeave(e) {
-          setInitialMagicLine();
-        }
-      }, item);
-    }));
-  });
-};
-exports.Default = Default;
-var NoActiveItem = function NoActiveItem(args) {
-  return /*#__PURE__*/_react.default.createElement(_.default, args, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
-    var items = ['one', 'two with a longer name', 'three'];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "Menu"
-    }, items.map(function (item) {
-      var classes = (0, _classnames.default)('Menu__item');
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item,
-        className: classes,
-        onMouseEnter: function onMouseEnter(e) {
-          hoverMagicLine(e);
-        },
-        onMouseLeave: function onMouseLeave(e) {
-          setInitialMagicLine();
-        }
-      }, item);
-    }));
-  });
-};
-exports.NoActiveItem = NoActiveItem;

package/dist/components/MagicLine/stories.scss

@@ -1,38 +0,0 @@
-.Menu {
-  display: flex;
-  flex-direction: row;
-
-  &__item {
-    margin: 0 1rem;
-    padding: 0 1rem;
-  }
-}
-
-.MagicLine {
-  position: relative;
-
-  &__magic_line {
-    pointer-events: none;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 100%;
-    padding: 0;
-    margin: 0;
-    background-color: red;
-    height: .2rem;
-    z-index: 1000000;
-    opacity: 0;
-
-    &--visible {
-      opacity: 1;
-      transition: left .3s cubic-bezier(0.64, 0.04, 0.35, 1),
-                  right .3s cubic-bezier(0.64, 0.04, 0.35, 1),
-                  opacity 0.3s .3s cubic-bezier(0.64, 0.04, 0.35, 1);
-    }
-  }
-
-  &:hover .MagicLine__magic_line {
-    opacity: 1;
-  }
-}

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

@@ -1,19 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./types").MediaPlayerProps>;
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const LocalVideo: (args: any) => React.JSX.Element;
-export declare const LocalAudio: (args: any) => React.JSX.Element;
-export declare const Youtube: (args: any) => React.JSX.Element;
-export declare const Vimeo: (args: any) => React.JSX.Element;
-export declare const WithCaptions: (args: any) => React.JSX.Element;
-export declare const Advanced: (args: any) => React.JSX.Element;