@uncinc/uncinc-react-kitchen-sink 2.1.7 → 2.1.8

package/dist/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import Container from '../Layout/Container';
 import Hamburger from '../Hamburger';
-import AnimationWrapper from './AnimationWrapper';
+import NavigationScroll from '../NavigationScroll';
 import './style.scss';
 
 const Header = ({
@@ -33,7 +33,7 @@ const Header = ({
     });
   }
 
-  const onUpdateAnimationWrapper = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
+  const onUpdateNavigationScroll = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
     const shouldUpdate = state.visible !== isVisible || state.reachedTop !== hasReachedTop || state.scrolledPastNavHeight !== scrolledPastNavHeight;
 
     if (shouldUpdate) {
@@ -66,8 +66,8 @@ const Header = ({
   }, /*#__PURE__*/React.createElement(Container, null, subMenu)));
 
   if (withAnimation) {
-    return /*#__PURE__*/React.createElement(AnimationWrapper, {
-      onUpdate: onUpdateAnimationWrapper,
+    return /*#__PURE__*/React.createElement(NavigationScroll, {
+      onUpdate: onUpdateNavigationScroll,
       hasBackground: true
     }, headerComponent);
   } else {

package/dist/components/MagicLine/index.js

@@ -0,0 +1,70 @@
+import React, { useRef, useState, useEffect } from 'react';
+import c from 'classnames';
+
+const MagicLine = ({
+  activeClassName = "Menu__item--active",
+  children
+}) => {
+  const magicLineParentRef = useRef(null);
+  const magicLineRef = useRef(null);
+  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;
+      const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
+      magicLineRef.current.style.left = `${left}px`;
+      magicLineRef.current.style.right = `${right}px`;
+      setLoaded(true);
+    }
+  };
+
+  const hoverMagicLine = e => {
+    currentActiveItem.current = e.target;
+    alignMagicLine();
+  };
+
+  const setInitialMagicLine = () => {
+    currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
+    alignMagicLine();
+  };
+
+  useEffect(() => {
+    const initialize = () => {
+      setInitialMagicLine();
+    };
+
+    const handleResize = () => {
+      alignMagicLine();
+    };
+
+    document.fonts.ready.then(initialize);
+    window.addEventListener('load', initialize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener('load', initialize);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: magicLineParentRef,
+    className: "MagicLine"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: magicLineRef,
+    className: MagicLineRefClasses
+  }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
+};
+
+export default MagicLine;

package/dist/components/MagicLine/stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import c from 'classnames';
+import MagicLine from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/MagicLine'
+};
+export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
+  const items = ["one", "two with a longer name", "three"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Menu"
+  }, items.map(item => {
+    const active = item === "three";
+
+    if (active) {
+      setActiveItemInNavigation(true);
+    }
+
+    const classes = c('Menu__item', {
+      'Menu__item--active': active
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: classes,
+      onMouseEnter: e => {
+        hoverMagicLine(e);
+      },
+      onMouseLeave: e => {
+        setInitialMagicLine();
+      }
+    }, item);
+  }));
+});

package/dist/components/MagicLine/stories.scss

@@ -0,0 +1,38 @@
+.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/{Header/AnimationWrapper → NavigationScroll}/index.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import './style.scss';
 
-const AnimationWrapper = props => {
+const NavigationScroll = props => {
   const node = useRef(null);
   const [state, setState] = useState({
     pos: 0,
@@ -71,8 +71,8 @@ const AnimationWrapper = props => {
     children,
     hasBackground
   } = props;
-  const classes = classNames('AnimationWrapper', {
-    'AnimationWrapper--hasBackground': hasBackground,
+  const classes = classNames('NavigationScroll', {
+    'NavigationScroll--hasBackground': hasBackground,
     's-scrolled-past-nav-height': scrolledPastNavHeight,
     's-reached-page-top': reachedTop,
     's-reached-page-bottom': reachedBottom
@@ -86,11 +86,11 @@ const AnimationWrapper = props => {
   }, children);
 };
 
-AnimationWrapper.propTypes = {
+NavigationScroll.propTypes = {
   children: PropTypes.element.isRequired,
   onUpdate: PropTypes.func
 };
-AnimationWrapper.defaultProps = {
+NavigationScroll.defaultProps = {
   onUpdate: () => {}
 };
-export default AnimationWrapper;
+export default NavigationScroll;

package/dist/components/NavigationScroll/stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import c from 'classnames';
+import NavigationScroll from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/NavigationScroll'
+};
+export const Default = () => /*#__PURE__*/React.createElement("div", {
+  className: "NavigationScrollExample"
+}, /*#__PURE__*/React.createElement(NavigationScroll, null, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("div", null, "one"), /*#__PURE__*/React.createElement("div", null, "two"), /*#__PURE__*/React.createElement("div", null, "three"))));

package/dist/components/NavigationScroll/stories.scss

@@ -0,0 +1,17 @@
+.NavigationScrollExample {
+  min-height: 200vh;
+  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+  margin: -4rem;
+
+  nav {
+    background-color: grey;
+    display: flex;
+    flex-direction: row;
+    padding: 2rem;
+
+    & > div {
+      flex: 0 0 auto;
+      margin: 0 1rem;
+    }
+  }
+}

package/dist/components/{Header/AnimationWrapper → NavigationScroll}/style.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/assets/variables';
+@import '../../styles/assets/variables';
 
 @keyframes animation-wrapper--slide-down {
   from {
@@ -10,21 +10,20 @@
   }
 }
 
-.AnimationWrapper {
+.NavigationScroll {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: block;
   z-index: $z-index-4;
-  transition: 0.5s background ease-in-out;
+  transition: background-color 0.5s ease-in-out;
 
   &--hasBackground {
-    background: white;
+    background-color: white;
 
     &.s-reached-page-bottom {
       animation: animation-wrapper--slide-down 0.3s $animation-timing--cubic-bezier;
     }
   }
 }
-

package/dist/index.js

@@ -12,6 +12,8 @@ export { default as Pagination } from './components/Pagination';
 export { default as QuickLayout } from './components/Layout/QuickLayout';
 export { default as Lottie } from './components/Lottie';
 export { default as LottieAnimationWithMousePosition } from './components/Lottie/LottieAnimationWithMousePosition';
+export { default as MagicLine } from './components/MagicLine';
+export { default as NavigationScroll } from './components/NavigationScroll';
 export { default as Image } from './components/Image';
 export { default as ImageBackground } from './components/Image/Background';
 export { default as InlineMenu } from './components/InlineMenu';

package/package.json

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