@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.5

package/dist/components/Image/Picture/index.js

@@ -1,12 +1,10 @@
-function _extends() { _extends = Object.assign || 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 _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); }
 import React from 'react';
 import Immutable from 'immutable';
 import path from 'path';
 import mimeTypes from './data/ext-to-mime-types.json';
 import './style.scss';
 const FALLBACK_MIME_TYPE = 'image/jpg';
-
 const Picture = ({
   src,
   className,
@@ -29,26 +27,21 @@ const Picture = ({
     alt,
     title
   };
-
   const getImageExtension = url => {
     const sanitizedUrl = url.replace(/\?.*/, '');
     return path.extname(sanitizedUrl).toLowerCase();
   };
-
   const getMimeType = url => {
     const extension = getImageExtension(url);
     return mimeTypes[extension] ? mimeTypes[extension] : FALLBACK_MIME_TYPE;
   };
-
   const isValidImage = url => {
     if (!url) {
       return false;
     }
-
     const extension = getImageExtension(url);
     return Object.keys(mimeTypes).includes(extension);
   };
-
   if (Immutable.Iterable.isIterable(Immutable.fromJS(src))) {
     // Sources have to be defined in a descending order.
     // We sort them from best to worst quality.
@@ -61,20 +54,17 @@ const Picture = ({
       if (image !== false) {
         return image;
       }
-
       ;
       return null;
-    }); // Only render if all our image sources are valid
+    });
 
+    // Only render if all our image sources are valid
     const hasValidSources = sources.count() > 0;
-
     if (!hasValidSources) {
       return null;
     }
-
     const fallback = sources.valueSeq().first();
     let renderedSourcesWebP = [];
-
     if (includeWebP) {
       /* eslint-disable react/no-array-index-key */
       renderedSourcesWebP = sources.map((url, breakpoint) => {
@@ -87,9 +77,8 @@ const Picture = ({
         });
       }).valueSeq();
     }
-    /* eslint-disable react/no-array-index-key */
-
 
+    /* eslint-disable react/no-array-index-key */
     const renderedSources = sources.map((url, breakpoint) => /*#__PURE__*/React.createElement("source", {
       key: breakpoint,
       srcSet: url,
@@ -103,7 +92,6 @@ const Picture = ({
       src: fallback
     })));
   }
-
   if (src && isValidImage(src)) {
     if (includeWebP) {
       const webpUrl = src.replace(/\.(png|gif|jp(e?)g)/, '.webp');
@@ -120,17 +108,14 @@ const Picture = ({
         src: src
       })));
     }
-
     return /*#__PURE__*/React.createElement("img", _extends({}, attrs, {
       onLoad: e => onLoad(e),
       ref: imageRef,
       src: src
     }));
   }
-
   return null;
 };
-
 Picture.defaultProps = {
   onLoad: () => {}
 };

package/dist/components/Image/index.js

@@ -3,21 +3,17 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import LazyLoadWrapper from './LazyLoadWrapper';
 import Picture from './Picture';
-
 const Image = props => {
   const {
     lazyload
   } = props;
-
   if (lazyload) {
     return /*#__PURE__*/React.createElement(LazyLoadWrapper, {
       lazyload: lazyload
     }, /*#__PURE__*/React.createElement(Picture, props));
   }
-
   return /*#__PURE__*/React.createElement(Picture, props);
 };
-
 Image.propTypes = {
   src: PropTypes.oneOfType([PropTypes.string, ImmutablePropTypes.map]).isRequired,
   lazyload: PropTypes.bool

package/dist/components/InlineMenu/index.js

@@ -1,18 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './style.scss';
-
 const InlineMenu = ({
   items,
   scrollToTopOffset
 }) => {
   const [scrollPosition, setSrollPosition] = useState(0);
-
   const handleScroll = () => {
     const position = window.pageYOffset;
     setSrollPosition(position);
   };
-
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
     return () => {
@@ -20,7 +17,6 @@ const InlineMenu = ({
     };
   }, []);
   if (!items) return null;
-
   const offset = el => {
     const rect = el.getBoundingClientRect();
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
@@ -30,7 +26,6 @@ const InlineMenu = ({
       left: rect.left + scrollLeft
     };
   };
-
   const handleClick = id => {
     const element = document.getElementById(id);
     if (!element) return null;
@@ -39,20 +34,17 @@ const InlineMenu = ({
       behavior: "smooth"
     });
   };
-
   const handleActiveState = (currentId, nextId, activeByDefault) => {
     const element = document.getElementById(currentId);
     const nextElement = document.getElementById(nextId);
     if (!element && activeByDefault) return true;
     if (!element) return null;
-
     if (!nextElement) {
       return scrollPosition > offset(element).top - (scrollToTopOffset + 10);
     } else {
       return (scrollPosition > offset(element).top - (scrollToTopOffset + 10) || activeByDefault) && scrollPosition < offset(nextElement).top - (scrollToTopOffset + 10);
     }
   };
-
   return /*#__PURE__*/React.createElement("nav", {
     className: "InlineMenu"
   }, /*#__PURE__*/React.createElement("ul", {
@@ -67,7 +59,6 @@ const InlineMenu = ({
     key: elementId
   }, menuItemName || 'missing menuItemName'))));
 };
-
 InlineMenu.defaultProps = {
   items: [],
   scrollToTopOffset: 0,

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

@@ -1,10 +1,8 @@
-function _extends() { _extends = Object.assign || 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 _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); }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './style.scss';
-
 const Container = ({
   className,
   fluid,
@@ -27,7 +25,6 @@ const Container = ({
     className: classes
   }, props), children);
 };
-
 Container.defaultProps = {
   small: false,
   large: false,

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

@@ -4,11 +4,9 @@ import './stories.scss';
 export default {
   title: 'Templates/Grid'
 };
-
 const Filler = () => /*#__PURE__*/React.createElement("div", {
   className: "Filler"
 });
-
 const Columns = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
@@ -78,7 +76,6 @@ const Columns = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
   class: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null))));
-
 export const Default = () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Columns, null));
 export const Small = () => /*#__PURE__*/React.createElement(Container, {
   small: true

package/dist/components/Layout/QuickLayout/Auto/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import c from 'classnames';
-
 const QuickLayoutAuto = ({
   children,
   min,
@@ -17,7 +16,6 @@ const QuickLayoutAuto = ({
     }
   }, children);
 };
-
 QuickLayoutAuto.defaultProps = {
   min: '150px',
   gap: '1rem'

package/dist/components/Layout/QuickLayout/Center/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const QuickLayoutCentered = ({
   children,
   className
@@ -11,5 +10,4 @@ const QuickLayoutCentered = ({
     className: classes
   }, children);
 };
-
 export default QuickLayoutCentered;

package/dist/components/Layout/QuickLayout/Clamp/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import c from 'classnames';
-
 const QuickLayoutClamp = ({
   children,
   min,
@@ -16,7 +15,6 @@ const QuickLayoutClamp = ({
     }
   }, children);
 };
-
 QuickLayoutClamp.defaultProps = {
   min: '1rem',
   value: '2.5vw',

package/dist/components/Layout/QuickLayout/Sidebar/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const QuickLayoutSidebar = ({
   children,
   min,
@@ -17,7 +16,6 @@ const QuickLayoutSidebar = ({
     }
   }, children);
 };
-
 QuickLayoutSidebar.defaultProps = {
   min: '2.5rem',
   max: '25%'

package/dist/components/Layout/QuickLayout/SpaceBetween/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const QuickLayoutSpaceBetween = ({
   children,
   gap,
@@ -17,7 +16,6 @@ const QuickLayoutSpaceBetween = ({
     }
   }, children);
 };
-
 QuickLayoutSpaceBetween.defaultProps = {
   gap: '2.5rem',
   items: '3'

package/dist/components/Layout/QuickLayout/Stack/index.js

@@ -1,9 +1,7 @@
-function _extends() { _extends = Object.assign || 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 _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); }
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const QuickLayoutStack = ({
   children,
   className,
@@ -14,5 +12,4 @@ const QuickLayoutStack = ({
     className: classes
   }, props), children);
 };
-
 export default QuickLayoutStack;

package/dist/components/Layout/QuickLayout/Wrap/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const QuickLayoutWrap = ({
   children,
   min,
@@ -21,7 +20,6 @@ const QuickLayoutWrap = ({
     }, child);
   }));
 };
-
 QuickLayoutWrap.defaultProps = {
   min: '2.5rem',
   stretched: true

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

@@ -6,7 +6,6 @@ import QuickLayoutStack from './Stack';
 import QuickLayoutAuto from './Auto';
 import QuickLayoutSpaceBetween from './SpaceBetween';
 import QuickLayoutClamp from './Clamp';
-
 const QuickLayout = ({
   type,
   children,
@@ -31,7 +30,6 @@ const QuickLayout = ({
      * @param {string} className - A classname to be added for extra control, if needed.
      * @param {boolean} stretched - if the children can stretch over the parent width.
      */
-
     case 'wrap':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutWrap, props, children);
@@ -46,7 +44,6 @@ const QuickLayout = ({
      * @param {string} className - A classname to be added for extra control, if needed.
      * @param {string} max - The maximal width of the sidebar.
      */
-
     case 'sidebar':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutSidebar, props, children);
@@ -60,7 +57,6 @@ const QuickLayout = ({
      *
      * @param {string} className - A classname to be added for extra control, if needed.
      */
-
     case 'stack':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutStack, props, children);
@@ -72,7 +68,6 @@ const QuickLayout = ({
      * @param {string} gap - The space between items.
      * @param {string} className - A classname to be added for extra control, if needed.
      */
-
     case 'auto':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutAuto, props, children);
@@ -88,7 +83,6 @@ const QuickLayout = ({
      *
      * @note Only use this when the amount of items is known to you. Use QuickLayoutAuto otherwise.
      */
-
     case 'spaceBetween':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutSpaceBetween, props, children);
@@ -101,19 +95,16 @@ const QuickLayout = ({
      * @param {string} max - The maximal font-size.
      * @param {string} className - A classname to be added for extra control, if needed.
      */
-
     case 'clamp':
       {
         return /*#__PURE__*/React.createElement(QuickLayoutClamp, props, children);
       }
-
     default:
       {
         return 'No type selected.';
       }
   }
 };
-
 QuickLayout.defaultProps = {
   type: ''
 };

package/dist/components/Lottie/LottieAnimation/index.js

@@ -15,10 +15,10 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   const refInternal = useRef(null);
   const lottieAnimation = ref || refInternal;
   const lottieId = id || (data ? data.nm : null);
+
   /*
    * Initial load of the Lottie animation
    */
-
   const loadAnimation = useCallback(() => {
     const {
       renderer,
@@ -43,59 +43,54 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
       autoplay: activateOnHover ? false : autoPlay,
       path
     });
-    onInit(lottieAnimation.current); // Set the default speed.
-
-    lottieAnimation.current.setSpeed(speed); // Play segments if we have them.
+    onInit(lottieAnimation.current);
 
+    // Set the default speed.
+    lottieAnimation.current.setSpeed(speed);
+    // Play segments if we have them.
     if (segments) {
       lottieAnimation.current.playSegments(segments);
-    } // If startPosition is defined use it as a starting frame, startPosition should be between 0 and 1.
-
-
+    }
+    // If startPosition is defined use it as a starting frame, startPosition should be between 0 and 1.
     if (startPosition) {
       const startingFrame = Math.round(lottieAnimation.current.totalFrames * startPosition);
       lottieAnimation.current.goToAndStop(startingFrame, true);
     }
   }, [data, lottieAnimation, lottieId, props]);
+
   /*
    * Reverse direction on Mouse enter.
    */
-
   const onMouseEnter = e => {
     const {
       activateOnHover
     } = props;
-
     if (activateOnHover) {
       lottieAnimation.current.setDirection(DIRECTION_FORWARD);
       lottieAnimation.current.play();
     }
   };
+
   /*
    * Reverse direction on Mouse leave
    */
-
-
   const onMouseLeave = () => {
     const {
       activateOnHover
     } = props;
-
     if (activateOnHover) {
       lottieAnimation.current.setDirection(DIRECTION_BACKWARDS);
       lottieAnimation.current.play();
     }
   };
+
   /*
    * Toggle the animation on click
    */
-
-
   const onClick = () => {
     const {
       pauseOnClick
     } = props;
-
     if (pauseOnClick) {
       if (lottieAnimation.current.isPaused) {
         lottieAnimation.current.play();
@@ -103,9 +98,9 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
         lottieAnimation.current.pause();
       }
     }
-  }; // Init the Lottie animation.
-
+  };
 
+  // Init the Lottie animation.
   useEffect(() => {
     const {
       onDestroy

package/dist/components/Lottie/LottieAnimationWithMousePosition.js

@@ -1,36 +1,36 @@
-function _extends() { _extends = Object.assign || 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 _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); }
 import React, { useRef } from 'react';
 import Lottie from './';
 import Ola from "ola";
-
 const LottieAnimationWithMousePosition = ({
   olaTime,
   ...props
 }) => {
   // Create our own ref that we pass to the component so that we can use lottie functions.
-  const ref = useRef(null); // Create an Ola instance for frame interpolation.
+  const ref = useRef(null);
 
+  // Create an Ola instance for frame interpolation.
   const interpolatedFrame = Ola(0, olaTime);
+
   /*
    * Follow mouse position for animation on Mouse move.
    */
-
   const onMouseMove = e => {
     if (ref && ref.current) {
       // Determine the mouse position relative to the current Lottie.
       const clientRect = ref.current.wrapper.getBoundingClientRect();
       const mousePositionRelative = e.type === 'touchmove' ? (e.touches[0].clientX - clientRect.left) / clientRect.width : (e.clientX - clientRect.left) / clientRect.width;
-      const lottiePosition = Math.max(0, Math.min(1, mousePositionRelative)); // Round the frame, clamp it, and pass it to Ola for frame interpolation.
+      const lottiePosition = Math.max(0, Math.min(1, mousePositionRelative));
 
+      // Round the frame, clamp it, and pass it to Ola for frame interpolation.
       const rawFrame = Math.round(ref.current.totalFrames * lottiePosition);
       const frame = Math.min(ref.current.totalFrames - 1, Math.max(1, rawFrame));
-      interpolatedFrame.set(frame); // Go to the frame we just calculated using the Ola value.
+      interpolatedFrame.set(frame);
 
+      // Go to the frame we just calculated using the Ola value.
       ref.current.goToAndStop(interpolatedFrame.value, true);
     }
   };
-
   return /*#__PURE__*/React.createElement("div", {
     onMouseMove: onMouseMove,
     onTouchMove: onMouseMove
@@ -38,5 +38,4 @@ const LottieAnimationWithMousePosition = ({
     ref: ref
   }, props)));
 };
-
 export default LottieAnimationWithMousePosition;

package/dist/components/Lottie/index.js

@@ -1,9 +1,9 @@
-function _extends() { _extends = Object.assign || 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 _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); }
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component'; // Lazy-load Lottie animations with a delay.
+import loadable from '@loadable/component';
 
+// Lazy-load Lottie animations with a delay.
 const Lottie = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     delay

package/dist/components/Lottie/stories.js

@@ -5,32 +5,37 @@ import exampleLottie from '../../assets/lottie/example.json';
 import exampleLottieEspero from '../../assets/lottie/data.json';
 export default {
   title: 'Atoms/Lottie'
-}; // Default animation
+};
 
+// Default animation
 export const DefaultAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
   id: "example",
   data: exampleLottie,
   onInit: lottie => console.log(lottie)
-}); // Animation active on hover
+});
 
+// Animation active on hover
 export const activateOnHoverAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
   data: exampleLottie,
   activateOnHover: true
-}); // Animation plays on mouse position
+});
 
+// Animation plays on mouse position
 export const playAnimationOnMousePosition = () => /*#__PURE__*/React.createElement(LottieAnimationWithMousePosition, {
   loop: false,
   autoplay: false,
   data: exampleLottieEspero,
   olaTime: 100,
   startPosition: 0.5
-}); // Pause animation on click
+});
 
+// Pause animation on click
 export const pauseOnClickAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
   data: exampleLottie,
   pauseOnClick: true
-}); // Via path load
+});
 
+// Via path load
 export const PathLoad = () => /*#__PURE__*/React.createElement(Lottie, {
   path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
 });

package/dist/components/MagicLine/index.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
 import c from 'classnames';
-
 const MagicLine = ({
   activeClassName = "Menu__item--active",
   children
@@ -10,17 +9,14 @@ const MagicLine = ({
   const currentActiveItem = useRef(null);
   const [loaded, setLoaded] = useState(false);
   const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
-
   const setActiveItemInNavigation = value => {
     if (value !== activeItemInNavigation) {
       _setActiveItemInNavigation(value);
     }
   };
-
   const MagicLineRefClasses = c('MagicLine__magic_line', {
     'MagicLine__magic_line--visible': activeItemInNavigation && loaded
   });
-
   const alignMagicLine = () => {
     if (magicLineRef.current && currentActiveItem.current) {
       const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
@@ -30,34 +26,25 @@ const MagicLine = ({
       setLoaded(true);
     }
   };
-
   const hoverMagicLine = e => {
     currentActiveItem.current = e.target;
-
     _setActiveItemInNavigation(true);
-
     alignMagicLine();
   };
-
   const setInitialMagicLine = () => {
     currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
-
     if (!currentActiveItem.current) {
       _setActiveItemInNavigation(false);
     }
-
     alignMagicLine();
   };
-
   useEffect(() => {
     const initialize = () => {
       setInitialMagicLine();
     };
-
     const handleResize = () => {
       alignMagicLine();
     };
-
     document.fonts.ready.then(initialize);
     window.addEventListener('load', initialize);
     window.addEventListener("resize", handleResize);
@@ -74,5 +61,4 @@ const MagicLine = ({
     className: MagicLineRefClasses
   }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
 };
-
 export default MagicLine;

package/dist/components/MagicLine/stories.js

@@ -11,11 +11,9 @@ export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (
     className: "Menu"
   }, items.map(item => {
     const active = item === "three";
-
     if (active) {
       setActiveItemInNavigation(true);
     }
-
     const classes = c('Menu__item', {
       'Menu__item--active': active
     });