@telus-uds/components-community.sticky 1.1.5 → 1.1.7

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 (7) hide show
  1. package/CHANGELOG.json +49 -1
  2. package/CHANGELOG.md +21 -2
  3. package/lib/Sticky.js +10 -4
  4. package/lib/styles.js +1 -1
  5. package/package.json +4 -4
  6. package/src/Sticky.jsx +7 -1
  7. package/src/styles.js +3 -0
package/CHANGELOG.json CHANGED
@@ -2,7 +2,55 @@
2
2
  "name": "@telus-uds/components-community.sticky",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 09 Jun 2023 00:18:16 GMT",
5
+ "date": "Wed, 14 Jun 2023 19:30:33 GMT",
6
+ "tag": "@telus-uds/components-community.sticky_v1.1.7",
7
+ "version": "1.1.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@telus-uds/components-community.sticky",
13
+ "comment": "Bump @telus-uds/components-web to v2.8.1",
14
+ "commit": "f3c8506da6e76c8696bf7358b78865f0dbca8d2f"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Wed, 14 Jun 2023 00:06:30 GMT",
21
+ "tag": "@telus-uds/components-community.sticky_v1.1.6",
22
+ "version": "1.1.6",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "117303309+yosefmaldo@users.noreply.github.com",
27
+ "package": "@telus-uds/components-community.sticky",
28
+ "commit": "b17224abcf2205561ac0d26ade6568d87b106c92",
29
+ "comment": "adding pristine behaviour when sticky variant is hidden"
30
+ },
31
+ {
32
+ "author": "beachball",
33
+ "package": "@telus-uds/components-community.sticky",
34
+ "comment": "Bump @telus-uds/components-base to v1.50.0",
35
+ "commit": "b17224abcf2205561ac0d26ade6568d87b106c92"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@telus-uds/components-community.sticky",
40
+ "comment": "Bump @telus-uds/system-theme-tokens to v2.32.0",
41
+ "commit": "b17224abcf2205561ac0d26ade6568d87b106c92"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@telus-uds/components-community.sticky",
46
+ "comment": "Bump @telus-uds/components-web to v2.8.0",
47
+ "commit": "b17224abcf2205561ac0d26ade6568d87b106c92"
48
+ }
49
+ ]
50
+ }
51
+ },
52
+ {
53
+ "date": "Fri, 09 Jun 2023 00:28:33 GMT",
6
54
  "tag": "@telus-uds/components-community.sticky_v1.1.5",
7
55
  "version": "1.1.5",
8
56
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @telus-uds/components-community.sticky
2
2
 
3
- This log was last generated on Fri, 09 Jun 2023 00:18:16 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 14 Jun 2023 19:30:33 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 1.1.7
8
+
9
+ Wed, 14 Jun 2023 19:30:33 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @telus-uds/components-web to v2.8.1
14
+
15
+ ## 1.1.6
16
+
17
+ Wed, 14 Jun 2023 00:06:30 GMT
18
+
19
+ ### Patches
20
+
21
+ - adding pristine behaviour when sticky variant is hidden (117303309+yosefmaldo@users.noreply.github.com)
22
+ - Bump @telus-uds/components-base to v1.50.0
23
+ - Bump @telus-uds/system-theme-tokens to v2.32.0
24
+ - Bump @telus-uds/components-web to v2.8.0
25
+
7
26
  ## 1.1.5
8
27
 
9
- Fri, 09 Jun 2023 00:18:16 GMT
28
+ Fri, 09 Jun 2023 00:28:33 GMT
10
29
 
11
30
  ### Patches
12
31
 
package/lib/Sticky.js CHANGED
@@ -77,15 +77,21 @@ const Sticky = _ref2 => {
77
77
 
78
78
  (_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
79
79
  (_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle('top', intersected);
80
+
81
+ if (intersected) {
82
+ var _stickyWrapperRef$cur3;
83
+
84
+ (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
85
+ }
80
86
  }, workWithViewport));
81
87
  }
82
88
 
83
89
  if (variant === 'alternate') {
84
90
  setObserver(createObserver(sentinelBottomRef, intersected => {
85
- var _stickyWrapperRef$cur3, _stickyWrapperRef$cur4;
91
+ var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
86
92
 
87
- (_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.toggle('sticky-mode', intersected);
88
- (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('bottom', intersected);
93
+ (_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
94
+ (_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
89
95
  }, workWithViewport));
90
96
  } // eslint-disable-next-line react-hooks/exhaustive-deps
91
97
 
@@ -95,7 +101,7 @@ const Sticky = _ref2 => {
95
101
  className: "sentinelTop",
96
102
  ref: sentinelTopRef
97
103
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, {
98
- className: variant,
104
+ className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
99
105
  ref: stickyWrapperRef,
100
106
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
101
107
  className: "sticky-element",
package/lib/styles.js CHANGED
@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
12
12
  const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
13
13
  displayName: "styles__StickyWrapper",
14
14
  componentId: "[object Object]__sc-160gk65-0"
15
- })(["top:0;&.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;top:0px;z-index:1;box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}&.hidden{animation:0.3s animateIn forwards;.sticky-element{animation:0.3s shadowIn forwards;}}}&.alternate{}&.hidden{position:sticky;pointerevents:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;.sticky-element{background:white;animation:0.6s shadowOut forwards;}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"]);
15
+ })(["top:0;&.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;top:0px;z-index:1;box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}&.hidden{animation:0.3s animateIn forwards;.sticky-element{animation:0.3s shadowIn forwards;}}}&.alternate{}&.hidden{position:sticky;pointerevents:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;animation:0.6s shadowOut forwards;}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"]);
16
16
 
17
17
  var _default = StickyWrapper;
18
18
  exports.default = _default;
package/package.json CHANGED
@@ -4,14 +4,14 @@
4
4
  "extends @telus-uds/browserslist-config"
5
5
  ],
6
6
  "dependencies": {
7
- "@telus-uds/components-base": "1.49.0",
7
+ "@telus-uds/components-base": "1.50.0",
8
8
  "@telus-uds/system-constants": "^1.2.1",
9
- "@telus-uds/system-theme-tokens": "^2.31.0",
9
+ "@telus-uds/system-theme-tokens": "^2.32.0",
10
10
  "prop-types": "^15.7.2",
11
11
  "styled-components": "^5.3.10"
12
12
  },
13
13
  "devDependencies": {
14
- "@telus-uds/components-web": "^2.7.0",
14
+ "@telus-uds/components-web": "^2.8.1",
15
15
  "@telus-uds/browserslist-config": "^1.0.5",
16
16
  "@testing-library/jest-dom": "^5.16.1",
17
17
  "@testing-library/react": "^13.3.0",
@@ -45,5 +45,5 @@
45
45
  "standard-engine": {
46
46
  "skip": true
47
47
  },
48
- "version": "1.1.5"
48
+ "version": "1.1.7"
49
49
  }
package/src/Sticky.jsx CHANGED
@@ -40,6 +40,9 @@ const Sticky = ({
40
40
  (intersected) => {
41
41
  stickyWrapperRef.current?.classList.toggle('sticky-mode', intersected)
42
42
  stickyWrapperRef.current?.classList.toggle('top', intersected)
43
+ if (intersected) {
44
+ stickyWrapperRef.current?.classList.remove('pristine')
45
+ }
43
46
  },
44
47
  workWithViewport
45
48
  )
@@ -63,7 +66,10 @@ const Sticky = ({
63
66
  return (
64
67
  <>
65
68
  <div className="sentinelTop" ref={sentinelTopRef} />
66
- <StickyWrapper className={variant} ref={stickyWrapperRef}>
69
+ <StickyWrapper
70
+ className={`${variant} ${variant === 'hidden' ? 'pristine' : ''}`}
71
+ ref={stickyWrapperRef}
72
+ >
67
73
  <div className="sticky-element">
68
74
  <Box vertical={vertical} horizontal={horizontal}>
69
75
  {children}
package/src/styles.js CHANGED
@@ -29,6 +29,9 @@ const StickyWrapper = styled.div`
29
29
  min-height: 0px;
30
30
  max-height: 0px;
31
31
  animation: 0.6s animateOut forwards;
32
+ &.pristine {
33
+ display: none;
34
+ }
32
35
  .sticky-element {
33
36
  background: white;
34
37
  animation: 0.6s shadowOut forwards;