@telus-uds/components-community.sticky 1.1.35 → 1.2.0

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 (8) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/lib/Sticky.js +20 -2
  3. package/lib/styles.js +4 -3
  4. package/lib-module/Sticky.js +20 -2
  5. package/lib-module/styles.js +2 -2
  6. package/package.json +3 -3
  7. package/src/Sticky.jsx +21 -2
  8. package/src/styles.js +41 -13
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @telus-uds/components-community.sticky
2
2
 
3
- This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 27 Nov 2023 21:13:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 1.2.0
8
+
9
+ Mon, 27 Nov 2023 21:13:27 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - Add shadow and position props to the Sticky element (stephanie.galata@telus.com)
14
+ - Bump @telus-uds/components-base to v1.70.0
15
+ - Bump @telus-uds/components-web to v2.25.1
16
+
7
17
  ## 1.1.35
8
18
 
9
- Sat, 18 Nov 2023 02:25:11 GMT
19
+ Sat, 18 Nov 2023 02:32:49 GMT
10
20
 
11
21
  ### Patches
12
22
 
package/lib/Sticky.js CHANGED
@@ -48,8 +48,15 @@ const Sticky = _ref2 => {
48
48
  lg: 0,
49
49
  xl: 0
50
50
  },
51
- workWithViewport = true
51
+ workWithViewport = true,
52
+ position = 'top',
53
+ shadow = true
52
54
  } = _ref2;
55
+ // Position "bottom" does not support the "hidden" variant.
56
+ if (variant === 'hidden' && position === 'bottom') {
57
+ // eslint-disable-next-line no-param-reassign
58
+ variant = 'default';
59
+ }
53
60
  const sentinelTopRef = (0, _react.useRef)();
54
61
  const sentinelBottomRef = (0, _react.useRef)();
55
62
  const stickyWrapperRef = (0, _react.useRef)();
@@ -85,6 +92,8 @@ const Sticky = _ref2 => {
85
92
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.default, {
86
93
  className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
87
94
  ref: stickyWrapperRef,
95
+ shadow: shadow,
96
+ position: position,
88
97
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
89
98
  className: "sticky-element",
90
99
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
@@ -119,7 +128,16 @@ Sticky.propTypes = {
119
128
  * Sticky accepts any content as children.
120
129
  */
121
130
  children: _propTypes.default.node.isRequired,
122
- variant: _propTypes.default.oneOf(['default', 'alternate', 'hidden'])
131
+ variant: _propTypes.default.oneOf(['default', 'alternate', 'hidden']),
132
+ /**
133
+ * Sets whether sticky component is stuck to top or bottom of page.
134
+ * Note: Position "bottom" does not support the "hidden" variant.
135
+ */
136
+ position: _propTypes.default.oneOf(['top', 'bottom']),
137
+ /**
138
+ * Adds shadow to sticky component.
139
+ */
140
+ shadow: _propTypes.default.bool
123
141
  };
124
142
  var _default = Sticky;
125
143
  exports.default = _default;
package/lib/styles.js CHANGED
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
7
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
9
10
  const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
10
11
  displayName: "styles__StickyWrapper",
11
12
  componentId: "[object Object]__sc-160gk65-0"
12
- })(["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);}}"]);
13
+ })(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events: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);}}"], props => props.position === 'top' ? (0, _styledComponents.css)(["top:0;"]) : (0, _styledComponents.css)(["bottom:0;"]), props => props.position === 'top' && (0, _styledComponents.css)(["top:0px;"]), props => props.position === 'bottom' && (0, _styledComponents.css)(["bottom:0px;"]), props => props.shadow && (0, _styledComponents.css)(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && (0, _styledComponents.css)([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && (0, _styledComponents.css)(["animation:0.6s shadowOut forwards;"]));
13
14
  var _default = StickyWrapper;
14
15
  exports.default = _default;
package/lib-module/Sticky.js CHANGED
@@ -41,8 +41,15 @@ const Sticky = _ref2 => {
41
41
  lg: 0,
42
42
  xl: 0
43
43
  },
44
- workWithViewport = true
44
+ workWithViewport = true,
45
+ position = 'top',
46
+ shadow = true
45
47
  } = _ref2;
48
+ // Position "bottom" does not support the "hidden" variant.
49
+ if (variant === 'hidden' && position === 'bottom') {
50
+ // eslint-disable-next-line no-param-reassign
51
+ variant = 'default';
52
+ }
46
53
  const sentinelTopRef = useRef();
47
54
  const sentinelBottomRef = useRef();
48
55
  const stickyWrapperRef = useRef();
@@ -78,6 +85,8 @@ const Sticky = _ref2 => {
78
85
  }), /*#__PURE__*/_jsx(StickyWrapper, {
79
86
  className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
80
87
  ref: stickyWrapperRef,
88
+ shadow: shadow,
89
+ position: position,
81
90
  children: /*#__PURE__*/_jsx("div", {
82
91
  className: "sticky-element",
83
92
  children: /*#__PURE__*/_jsx(Box, {
@@ -112,6 +121,15 @@ Sticky.propTypes = {
112
121
  * Sticky accepts any content as children.
113
122
  */
114
123
  children: PropTypes.node.isRequired,
115
- variant: PropTypes.oneOf(['default', 'alternate', 'hidden'])
124
+ variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
125
+ /**
126
+ * Sets whether sticky component is stuck to top or bottom of page.
127
+ * Note: Position "bottom" does not support the "hidden" variant.
128
+ */
129
+ position: PropTypes.oneOf(['top', 'bottom']),
130
+ /**
131
+ * Adds shadow to sticky component.
132
+ */
133
+ shadow: PropTypes.bool
116
134
  };
117
135
  export default Sticky;
package/lib-module/styles.js CHANGED
@@ -1,6 +1,6 @@
1
- import styled from 'styled-components';
1
+ import styled, { css } from 'styled-components';
2
2
  const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
3
3
  displayName: "styles__StickyWrapper",
4
4
  componentId: "[object Object]__sc-160gk65-0"
5
- })(["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);}}"]);
5
+ })(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events: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);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
6
6
  export default StickyWrapper;
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.69.0",
7
+ "@telus-uds/components-base": "1.70.0",
8
8
  "@telus-uds/system-constants": "^1.3.0",
9
9
  "@telus-uds/system-theme-tokens": "^2.46.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.25.0",
14
+ "@telus-uds/components-web": "^2.25.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.35"
48
+ "version": "1.2.0"
49
49
  }
package/src/Sticky.jsx CHANGED
@@ -23,8 +23,16 @@ const Sticky = ({
23
23
  variant = 'default',
24
24
  vertical = { xs: 0, sm: 0, lg: 0, xl: 0 },
25
25
  horizontal = { xs: 0, sm: 0, lg: 0, xl: 0 },
26
- workWithViewport = true
26
+ workWithViewport = true,
27
+ position = 'top',
28
+ shadow = true
27
29
  }) => {
30
+ // Position "bottom" does not support the "hidden" variant.
31
+ if (variant === 'hidden' && position === 'bottom') {
32
+ // eslint-disable-next-line no-param-reassign
33
+ variant = 'default'
34
+ }
35
+
28
36
  const sentinelTopRef = useRef()
29
37
  const sentinelBottomRef = useRef()
30
38
  const stickyWrapperRef = useRef()
@@ -69,6 +77,8 @@ const Sticky = ({
69
77
  <StickyWrapper
70
78
  className={`${variant} ${variant === 'hidden' ? 'pristine' : ''}`}
71
79
  ref={stickyWrapperRef}
80
+ shadow={shadow}
81
+ position={position}
72
82
  >
73
83
  <div className="sticky-element">
74
84
  <Box vertical={vertical} horizontal={horizontal}>
@@ -101,7 +111,16 @@ Sticky.propTypes = {
101
111
  * Sticky accepts any content as children.
102
112
  */
103
113
  children: PropTypes.node.isRequired,
104
- variant: PropTypes.oneOf(['default', 'alternate', 'hidden'])
114
+ variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
115
+ /**
116
+ * Sets whether sticky component is stuck to top or bottom of page.
117
+ * Note: Position "bottom" does not support the "hidden" variant.
118
+ */
119
+ position: PropTypes.oneOf(['top', 'bottom']),
120
+ /**
121
+ * Adds shadow to sticky component.
122
+ */
123
+ shadow: PropTypes.bool
105
124
  }
106
125
 
107
126
  export default Sticky
package/src/styles.js CHANGED
@@ -1,30 +1,54 @@
1
- import styled from 'styled-components'
1
+ import styled, { css } from 'styled-components'
2
2
 
3
3
  const StickyWrapper = styled.div`
4
- top: 0;
4
+ ${(props) =>
5
+ props.position === 'top'
6
+ ? css`
7
+ top: 0;
8
+ `
9
+ : css`
10
+ bottom: 0;
11
+ `}
5
12
 
6
13
  &.sticky-mode {
7
14
  &.alternate,
8
15
  &.default {
9
16
  position: -webkit-sticky;
10
17
  position: sticky;
11
- top: 0px;
12
18
  z-index: 1;
13
- box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
19
+ ${(props) =>
20
+ props.position === 'top' &&
21
+ css`
22
+ top: 0px;
23
+ `}
24
+ ${(props) =>
25
+ props.position === 'bottom' &&
26
+ css`
27
+ bottom: 0px;
28
+ `}
29
+ ${(props) =>
30
+ props.shadow &&
31
+ css`
32
+ box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
33
+ `}
14
34
  }
15
35
 
16
36
  &.hidden {
17
37
  animation: 0.3s animateIn forwards;
18
- .sticky-element {
19
- animation: 0.3s shadowIn forwards;
20
- }
38
+ ${(props) =>
39
+ props.shadow &&
40
+ css`
41
+ .sticky-element {
42
+ animation: 0.3s shadowIn forwards;
43
+ }
44
+ `}
21
45
  }
22
46
  }
23
47
  &.alternate {
24
48
  }
25
49
  &.hidden {
26
50
  position: sticky;
27
- pointerevents: none;
51
+ pointer-events: none;
28
52
  height: 0px;
29
53
  min-height: 0px;
30
54
  max-height: 0px;
@@ -34,7 +58,11 @@ const StickyWrapper = styled.div`
34
58
  }
35
59
  .sticky-element {
36
60
  background: white;
37
- animation: 0.6s shadowOut forwards;
61
+ ${(props) =>
62
+ props.shadow &&
63
+ css`
64
+ animation: 0.6s shadowOut forwards;
65
+ `}
38
66
  }
39
67
  }
40
68
 
@@ -45,14 +73,14 @@ const StickyWrapper = styled.div`
45
73
  @keyframes animateIn {
46
74
  from {
47
75
  height: 0%;
48
- pointerevents: none;
76
+ pointer-events: none;
49
77
  transform: translateY(-100vh);
50
78
  opacity: 0;
51
79
  z-index: -1;
52
80
  }
53
81
  to {
54
82
  height: 100%;
55
- pointerevents: all;
83
+ pointer-events: all;
56
84
  transform: translateY(0);
57
85
  opacity: 1;
58
86
  z-index: 1;
@@ -61,14 +89,14 @@ const StickyWrapper = styled.div`
61
89
  @keyframes animateOut {
62
90
  from {
63
91
  height: 100%;
64
- pointerevents: all;
92
+ pointer-events: all;
65
93
  transform: translateY(0);
66
94
  opacity: 1;
67
95
  z-index: 1;
68
96
  }
69
97
  to {
70
98
  height: 0%;
71
- pointerevents: none;
99
+ pointer-events: none;
72
100
  transform: translateY(-100vh);
73
101
  opacity: 0;
74
102
  z-index: -1;