@telus-uds/components-community.sticky 2.1.1 → 2.1.3
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.
- package/CHANGELOG.md +23 -2
- package/lib/styles.js +111 -5
- package/package.json +4 -4
- package/src/styles.js +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-community.sticky
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 2.1.3
|
|
8
|
+
|
|
9
|
+
Fri, 10 Jan 2025 21:41:25 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @telus-uds/components-base to v2.4.0
|
|
14
|
+
- Bump @telus-uds/components-web to v3.3.0
|
|
15
|
+
- Bump @telus-uds/system-theme-tokens to v3.3.0
|
|
16
|
+
|
|
17
|
+
## 2.1.2
|
|
18
|
+
|
|
19
|
+
Thu, 19 Dec 2024 05:02:20 GMT
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- `styled-components` may break SSR in Next.js Pages Router app (shahzaibkhalidmalik@outlook.com)
|
|
24
|
+
- Bump @telus-uds/components-base to v2.3.0
|
|
25
|
+
- Bump @telus-uds/components-web to v3.2.1
|
|
26
|
+
- Bump @telus-uds/system-theme-tokens to v3.2.0
|
|
27
|
+
|
|
7
28
|
## 2.1.1
|
|
8
29
|
|
|
9
|
-
Fri, 06 Dec 2024 02:03
|
|
30
|
+
Fri, 06 Dec 2024 02:06:03 GMT
|
|
10
31
|
|
|
11
32
|
### Patches
|
|
12
33
|
|
package/lib/styles.js
CHANGED
|
@@ -1,6 +1,112 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
1
|
+
import { styledComponents } from '@telus-uds/components-web';
|
|
2
|
+
const {
|
|
3
|
+
styled,
|
|
4
|
+
css
|
|
5
|
+
} = styledComponents;
|
|
6
|
+
const StickyWrapper = styled.div`
|
|
7
|
+
${props => props.position === 'top' ? css`
|
|
8
|
+
top: 0;
|
|
9
|
+
` : css`
|
|
10
|
+
bottom: 0;
|
|
11
|
+
`}
|
|
12
|
+
|
|
13
|
+
&.sticky-mode {
|
|
14
|
+
&.alternate,
|
|
15
|
+
&.default {
|
|
16
|
+
position: -webkit-sticky;
|
|
17
|
+
position: sticky;
|
|
18
|
+
z-index: 1;
|
|
19
|
+
${props => props.position === 'top' && css`
|
|
20
|
+
top: 0px;
|
|
21
|
+
`}
|
|
22
|
+
${props => props.position === 'bottom' && css`
|
|
23
|
+
bottom: 0px;
|
|
24
|
+
`}
|
|
25
|
+
${props => props.shadow && css`
|
|
26
|
+
box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
|
|
27
|
+
`}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.hidden {
|
|
31
|
+
animation: 0.3s animateIn forwards;
|
|
32
|
+
${props => props.shadow && css`
|
|
33
|
+
.sticky-element {
|
|
34
|
+
animation: 0.3s shadowIn forwards;
|
|
35
|
+
}
|
|
36
|
+
`}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
&.alternate {
|
|
40
|
+
}
|
|
41
|
+
&.hidden {
|
|
42
|
+
position: sticky;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
height: 0px;
|
|
45
|
+
min-height: 0px;
|
|
46
|
+
max-height: 0px;
|
|
47
|
+
animation: 0.6s animateOut forwards;
|
|
48
|
+
&.pristine {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
.sticky-element {
|
|
52
|
+
background: white;
|
|
53
|
+
${props => props.shadow && css`
|
|
54
|
+
animation: 0.6s shadowOut forwards;
|
|
55
|
+
`}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sticky-element {
|
|
60
|
+
background: #ffffff;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes animateIn {
|
|
64
|
+
from {
|
|
65
|
+
height: 0%;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
transform: translateY(-100vh);
|
|
68
|
+
opacity: 0;
|
|
69
|
+
z-index: -1;
|
|
70
|
+
}
|
|
71
|
+
to {
|
|
72
|
+
height: 100%;
|
|
73
|
+
pointer-events: all;
|
|
74
|
+
transform: translateY(0);
|
|
75
|
+
opacity: 1;
|
|
76
|
+
z-index: 1;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
@keyframes animateOut {
|
|
80
|
+
from {
|
|
81
|
+
height: 100%;
|
|
82
|
+
pointer-events: all;
|
|
83
|
+
transform: translateY(0);
|
|
84
|
+
opacity: 1;
|
|
85
|
+
z-index: 1;
|
|
86
|
+
}
|
|
87
|
+
to {
|
|
88
|
+
height: 0%;
|
|
89
|
+
pointer-events: none;
|
|
90
|
+
transform: translateY(-100vh);
|
|
91
|
+
opacity: 0;
|
|
92
|
+
z-index: -1;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
@keyframes shadowIn {
|
|
96
|
+
from {
|
|
97
|
+
box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0);
|
|
98
|
+
}
|
|
99
|
+
to {
|
|
100
|
+
box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@keyframes shadowOut {
|
|
104
|
+
from {
|
|
105
|
+
box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0.08);
|
|
106
|
+
}
|
|
107
|
+
to {
|
|
108
|
+
box-shadow: 0px 7px 4px -3px rgb(0, 0, 0, 0);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
6
112
|
export default StickyWrapper;
|
package/package.json
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
"extends @telus-uds/browserslist-config"
|
|
6
6
|
],
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@telus-uds/components-base": "^2.
|
|
8
|
+
"@telus-uds/components-base": "^2.4.0",
|
|
9
|
+
"@telus-uds/components-web": "^3.3.0",
|
|
9
10
|
"@telus-uds/system-constants": "^2.0.0",
|
|
10
|
-
"@telus-uds/system-theme-tokens": "^3.
|
|
11
|
+
"@telus-uds/system-theme-tokens": "^3.3.0",
|
|
11
12
|
"lodash.throttle": "^4.1.1",
|
|
12
13
|
"prop-types": "^15.7.2",
|
|
13
14
|
"styled-components": "^5.3.10"
|
|
14
15
|
},
|
|
15
16
|
"devDependencies": {
|
|
16
|
-
"@telus-uds/components-web": "^3.2.0",
|
|
17
17
|
"@telus-uds/browserslist-config": "^1.0.5",
|
|
18
18
|
"@testing-library/jest-dom": "^5.16.1",
|
|
19
19
|
"@testing-library/react": "^13.3.0",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"standard-engine": {
|
|
52
52
|
"skip": true
|
|
53
53
|
},
|
|
54
|
-
"version": "2.1.
|
|
54
|
+
"version": "2.1.3"
|
|
55
55
|
}
|