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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Header/index.js +4 -4
  2. package/dist/components/MagicLine/index.js +78 -0
  3. package/dist/components/MagicLine/stories.js +51 -0
  4. package/dist/components/MagicLine/stories.scss +38 -0
  5. package/dist/components/{Header/AnimationWrapper → NavigationScroll}/index.js +6 -6
  6. package/dist/components/NavigationScroll/stories.js +10 -0
  7. package/dist/components/NavigationScroll/stories.scss +17 -0
  8. package/dist/components/{Header/AnimationWrapper → NavigationScroll}/style.scss +4 -5
  9. package/dist/helpers/useValueForCurrentViewPort.js +11 -11
  10. package/dist/index.js +2 -0
  11. package/package.json +21 -23
package/dist/components/Header/index.js CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import Container from '../Layout/Container';
4
4
  import Hamburger from '../Hamburger';
5
- import AnimationWrapper from './AnimationWrapper';
5
+ import NavigationScroll from '../NavigationScroll';
6
6
  import './style.scss';
7
7
 
8
8
  const Header = ({
@@ -33,7 +33,7 @@ const Header = ({
33
33
  });
34
34
  }
35
35
 
36
- const onUpdateAnimationWrapper = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
36
+ const onUpdateNavigationScroll = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
37
37
  const shouldUpdate = state.visible !== isVisible || state.reachedTop !== hasReachedTop || state.scrolledPastNavHeight !== scrolledPastNavHeight;
38
38
 
39
39
  if (shouldUpdate) {
@@ -66,8 +66,8 @@ const Header = ({
66
66
  }, /*#__PURE__*/React.createElement(Container, null, subMenu)));
67
67
 
68
68
  if (withAnimation) {
69
- return /*#__PURE__*/React.createElement(AnimationWrapper, {
70
- onUpdate: onUpdateAnimationWrapper,
69
+ return /*#__PURE__*/React.createElement(NavigationScroll, {
70
+ onUpdate: onUpdateNavigationScroll,
71
71
  hasBackground: true
72
72
  }, headerComponent);
73
73
  } else {
package/dist/components/MagicLine/index.js ADDED
@@ -0,0 +1,78 @@
1
+ import React, { useRef, useState, useEffect } from 'react';
2
+ import c from 'classnames';
3
+
4
+ const MagicLine = ({
5
+ activeClassName = "Menu__item--active",
6
+ children
7
+ }) => {
8
+ const magicLineParentRef = useRef(null);
9
+ const magicLineRef = useRef(null);
10
+ const currentActiveItem = useRef(null);
11
+ const [loaded, setLoaded] = useState(false);
12
+ const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
13
+
14
+ const setActiveItemInNavigation = value => {
15
+ if (value !== activeItemInNavigation) {
16
+ _setActiveItemInNavigation(value);
17
+ }
18
+ };
19
+
20
+ const MagicLineRefClasses = c('MagicLine__magic_line', {
21
+ 'MagicLine__magic_line--visible': activeItemInNavigation && loaded
22
+ });
23
+
24
+ const alignMagicLine = () => {
25
+ if (magicLineRef.current && currentActiveItem.current) {
26
+ const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
27
+ const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
28
+ magicLineRef.current.style.left = `${left}px`;
29
+ magicLineRef.current.style.right = `${right}px`;
30
+ setLoaded(true);
31
+ }
32
+ };
33
+
34
+ const hoverMagicLine = e => {
35
+ currentActiveItem.current = e.target;
36
+
37
+ _setActiveItemInNavigation(true);
38
+
39
+ alignMagicLine();
40
+ };
41
+
42
+ const setInitialMagicLine = () => {
43
+ currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
44
+
45
+ if (!currentActiveItem.current) {
46
+ _setActiveItemInNavigation(false);
47
+ }
48
+
49
+ alignMagicLine();
50
+ };
51
+
52
+ useEffect(() => {
53
+ const initialize = () => {
54
+ setInitialMagicLine();
55
+ };
56
+
57
+ const handleResize = () => {
58
+ alignMagicLine();
59
+ };
60
+
61
+ document.fonts.ready.then(initialize);
62
+ window.addEventListener('load', initialize);
63
+ window.addEventListener("resize", handleResize);
64
+ return () => {
65
+ window.removeEventListener('load', initialize);
66
+ window.removeEventListener("resize", handleResize);
67
+ };
68
+ }, []);
69
+ return /*#__PURE__*/React.createElement("div", {
70
+ ref: magicLineParentRef,
71
+ className: "MagicLine"
72
+ }, /*#__PURE__*/React.createElement("div", {
73
+ ref: magicLineRef,
74
+ className: MagicLineRefClasses
75
+ }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
76
+ };
77
+
78
+ export default MagicLine;
package/dist/components/MagicLine/stories.js ADDED
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import c from 'classnames';
3
+ import MagicLine from './';
4
+ import './stories.scss';
5
+ export default {
6
+ title: 'Molecules/MagicLine'
7
+ };
8
+ export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
9
+ const items = ["one", "two with a longer name", "three"];
10
+ return /*#__PURE__*/React.createElement("div", {
11
+ className: "Menu"
12
+ }, items.map(item => {
13
+ const active = item === "three";
14
+
15
+ if (active) {
16
+ setActiveItemInNavigation(true);
17
+ }
18
+
19
+ const classes = c('Menu__item', {
20
+ 'Menu__item--active': active
21
+ });
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ key: item,
24
+ className: classes,
25
+ onMouseEnter: e => {
26
+ hoverMagicLine(e);
27
+ },
28
+ onMouseLeave: e => {
29
+ setInitialMagicLine();
30
+ }
31
+ }, item);
32
+ }));
33
+ });
34
+ export const NoActiveItem = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
35
+ const items = ["one", "two with a longer name", "three"];
36
+ return /*#__PURE__*/React.createElement("div", {
37
+ className: "Menu"
38
+ }, items.map(item => {
39
+ const classes = c('Menu__item');
40
+ return /*#__PURE__*/React.createElement("div", {
41
+ key: item,
42
+ className: classes,
43
+ onMouseEnter: e => {
44
+ hoverMagicLine(e);
45
+ },
46
+ onMouseLeave: e => {
47
+ setInitialMagicLine();
48
+ }
49
+ }, item);
50
+ }));
51
+ });
package/dist/components/MagicLine/stories.scss ADDED
@@ -0,0 +1,38 @@
1
+ .Menu {
2
+ display: flex;
3
+ flex-direction: row;
4
+
5
+ &__item {
6
+ margin: 0 1rem;
7
+ padding: 0 1rem;
8
+ }
9
+ }
10
+
11
+ .MagicLine {
12
+ position: relative;
13
+
14
+ &__magic_line {
15
+ pointer-events: none;
16
+ position: absolute;
17
+ bottom: 0;
18
+ left: 0;
19
+ right: 100%;
20
+ padding: 0;
21
+ margin: 0;
22
+ background-color: red;
23
+ height: .2rem;
24
+ z-index: 1000000;
25
+ opacity: 0;
26
+
27
+ &--visible {
28
+ opacity: 1;
29
+ transition: left .3s cubic-bezier(0.64, 0.04, 0.35, 1),
30
+ right .3s cubic-bezier(0.64, 0.04, 0.35, 1),
31
+ opacity 0.3s .3s cubic-bezier(0.64, 0.04, 0.35, 1);
32
+ }
33
+ }
34
+
35
+ &:hover .MagicLine__magic_line {
36
+ opacity: 1;
37
+ }
38
+ }
package/dist/components/{Header/AnimationWrapper → NavigationScroll}/index.js RENAMED
@@ -3,7 +3,7 @@ import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import './style.scss';
5
5
 
6
- const AnimationWrapper = props => {
6
+ const NavigationScroll = props => {
7
7
  const node = useRef(null);
8
8
  const [state, setState] = useState({
9
9
  pos: 0,
@@ -71,8 +71,8 @@ const AnimationWrapper = props => {
71
71
  children,
72
72
  hasBackground
73
73
  } = props;
74
- const classes = classNames('AnimationWrapper', {
75
- 'AnimationWrapper--hasBackground': hasBackground,
74
+ const classes = classNames('NavigationScroll', {
75
+ 'NavigationScroll--hasBackground': hasBackground,
76
76
  's-scrolled-past-nav-height': scrolledPastNavHeight,
77
77
  's-reached-page-top': reachedTop,
78
78
  's-reached-page-bottom': reachedBottom
@@ -86,11 +86,11 @@ const AnimationWrapper = props => {
86
86
  }, children);
87
87
  };
88
88
 
89
- AnimationWrapper.propTypes = {
89
+ NavigationScroll.propTypes = {
90
90
  children: PropTypes.element.isRequired,
91
91
  onUpdate: PropTypes.func
92
92
  };
93
- AnimationWrapper.defaultProps = {
93
+ NavigationScroll.defaultProps = {
94
94
  onUpdate: () => {}
95
95
  };
96
- export default AnimationWrapper;
96
+ export default NavigationScroll;
package/dist/components/NavigationScroll/stories.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import c from 'classnames';
3
+ import NavigationScroll from './';
4
+ import './stories.scss';
5
+ export default {
6
+ title: 'Molecules/NavigationScroll'
7
+ };
8
+ export const Default = () => /*#__PURE__*/React.createElement("div", {
9
+ className: "NavigationScrollExample"
10
+ }, /*#__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 ADDED
@@ -0,0 +1,17 @@
1
+ .NavigationScrollExample {
2
+ min-height: 200vh;
3
+ background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
4
+ margin: -4rem;
5
+
6
+ nav {
7
+ background-color: grey;
8
+ display: flex;
9
+ flex-direction: row;
10
+ padding: 2rem;
11
+
12
+ & > div {
13
+ flex: 0 0 auto;
14
+ margin: 0 1rem;
15
+ }
16
+ }
17
+ }
package/dist/components/{Header/AnimationWrapper → NavigationScroll}/style.scss RENAMED
@@ -1,4 +1,4 @@
1
- @import '../../../styles/assets/variables';
1
+ @import '../../styles/assets/variables';
2
2
 
3
3
  @keyframes animation-wrapper--slide-down {
4
4
  from {
@@ -10,21 +10,20 @@
10
10
  }
11
11
  }
12
12
 
13
- .AnimationWrapper {
13
+ .NavigationScroll {
14
14
  position: fixed;
15
15
  top: 0;
16
16
  left: 0;
17
17
  width: 100%;
18
18
  display: block;
19
19
  z-index: $z-index-4;
20
- transition: 0.5s background ease-in-out;
20
+ transition: background-color 0.5s ease-in-out;
21
21
 
22
22
  &--hasBackground {
23
- background: white;
23
+ background-color: white;
24
24
 
25
25
  &.s-reached-page-bottom {
26
26
  animation: animation-wrapper--slide-down 0.3s $animation-timing--cubic-bezier;
27
27
  }
28
28
  }
29
29
  }
30
-
package/dist/helpers/useValueForCurrentViewPort.js CHANGED
@@ -14,17 +14,17 @@ export default function useValueForCurrentViewPort(val1, val2, val3, val4, val5)
14
14
  return;
15
15
  } // 768 & 992
16
16
  else if (width >= viewportContext.screenSizes.SCREEN_TABLET && width <= viewportContext.screenSizes.SCREEN_NORMAL) {
17
- setValueForCurrentViewPort(val2);
18
- return;
19
- } // 992 & 1240
20
- else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
21
- setValueForCurrentViewPort(val3);
22
- return;
23
- } // 1240 & 2000
24
- else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
25
- setValueForCurrentViewPort(val4);
26
- return;
27
- } // SCREEN_HUGE and larger
17
+ setValueForCurrentViewPort(val2);
18
+ return;
19
+ } // 992 & 1240
20
+ else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
21
+ setValueForCurrentViewPort(val3);
22
+ return;
23
+ } // 1240 & 2000
24
+ else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
25
+ setValueForCurrentViewPort(val4);
26
+ return;
27
+ } // SCREEN_HUGE and larger
28
28
 
29
29
 
30
30
  setValueForCurrentViewPort(val5);
package/dist/index.js CHANGED
@@ -12,6 +12,8 @@ export { default as Pagination } from './components/Pagination';
12
12
  export { default as QuickLayout } from './components/Layout/QuickLayout';
13
13
  export { default as Lottie } from './components/Lottie';
14
14
  export { default as LottieAnimationWithMousePosition } from './components/Lottie/LottieAnimationWithMousePosition';
15
+ export { default as MagicLine } from './components/MagicLine';
16
+ export { default as NavigationScroll } from './components/NavigationScroll';
15
17
  export { default as Image } from './components/Image';
16
18
  export { default as ImageBackground } from './components/Image/Background';
17
19
  export { default as InlineMenu } from './components/InlineMenu';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinc/uncinc-react-kitchen-sink",
3
- "version": "2.1.7",
3
+ "version": "2.1.11",
4
4
  "description": "Default React components that are easily extended.",
5
5
  "author": "uncinc",
6
6
  "license": "MIT",
@@ -35,13 +35,30 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@apollo/client": "^3.4.16",
38
+ "@babel/cli": "^7.0.0-beta.44",
39
+ "@babel/helper-define-map": "^7.14.5",
40
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
41
+ "@babel/runtime": "^7.9.6",
38
42
  "@elastic/datemath": "^5.0.3",
39
43
  "@elastic/eui": "^40.0.0",
40
44
  "@loadable/component": "^5.15.0",
41
45
  "@searchkit/client": "^3.0.0-canary.45",
42
46
  "@searchkit/elastic-ui": "^3.0.0-canary.45",
47
+ "@storybook/addon-actions": "^6.2.8",
48
+ "@storybook/addon-info": "^5.3.21",
49
+ "@storybook/addon-links": "^6.2.8",
50
+ "@storybook/addons": "^6.2.8",
51
+ "@storybook/react": "^6.2.8",
52
+ "@storybook/theming": "^6.2.8",
53
+ "@testing-library/jest-dom": "^4.2.4",
54
+ "@testing-library/react": "^9.3.2",
55
+ "@testing-library/user-event": "^7.1.2",
43
56
  "apollo-server-micro": "^3.4.0",
44
57
  "bootstrap": "^4.3.1",
58
+ "chai": "^4.2.0",
59
+ "cross-env": "^7.0.2",
60
+ "enzyme": "^3.11.0",
61
+ "enzyme-adapter-react-16": "^1.15.2",
45
62
  "fork-ts-checker-webpack-plugin-alt": "0.4.14",
46
63
  "formik": "^2.2.6",
47
64
  "graphql": "^15.7.0",
@@ -67,35 +84,16 @@
67
84
  "react-redux": "^7.2.4",
68
85
  "react-router": "5.2.0",
69
86
  "react-router-dom": "5.2.0",
87
+ "react-scripts": "3.4.1",
70
88
  "react-select": "^3.1.0",
71
89
  "react-share": "^4.3.1",
72
90
  "react-slick": "^0.27.14",
91
+ "react-test-renderer": "^16.13.1",
73
92
  "redux": "^4.0.5",
74
93
  "sass-loader": "^8.0.2",
75
- "slick-carousel": "^1.8.1"
76
- },
77
- "devDependencies": {
78
- "@babel/cli": "^7.0.0-beta.44",
79
- "@babel/helper-define-map": "^7.14.5",
80
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
81
- "@babel/runtime": "^7.9.6",
82
- "@storybook/addon-actions": "^6.2.8",
83
- "@storybook/addon-info": "^5.3.21",
84
- "@storybook/addon-links": "^6.2.8",
85
- "@storybook/addons": "^6.2.8",
86
- "@storybook/react": "^6.2.8",
87
- "@storybook/theming": "^6.2.8",
88
- "@testing-library/jest-dom": "^4.2.4",
89
- "@testing-library/react": "^9.3.2",
90
- "@testing-library/user-event": "^7.1.2",
91
- "chai": "^4.2.0",
92
- "cross-env": "^7.0.2",
93
- "enzyme": "^3.11.0",
94
- "enzyme-adapter-react-16": "^1.15.2",
95
- "react-scripts": "3.4.1",
96
- "react-test-renderer": "^16.13.1",
97
94
  "sinon": "^9.0.2",
98
95
  "sinon-chai": "^3.5.0",
96
+ "slick-carousel": "^1.8.1",
99
97
  "storybook-addon-export-stories": "^1.0.0"
100
98
  },
101
99
  "eslintConfig": {