@telus-uds/components-community.sticky 2.1.0 → 2.1.2
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 +22 -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,32 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-community.sticky
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 2.1.2
|
|
8
|
+
|
|
9
|
+
Thu, 19 Dec 2024 04:54:39 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- `styled-components` may break SSR in Next.js Pages Router app (shahzaibkhalidmalik@outlook.com)
|
|
14
|
+
- Bump @telus-uds/components-base to v2.3.0
|
|
15
|
+
- Bump @telus-uds/components-web to v3.2.1
|
|
16
|
+
- Bump @telus-uds/system-theme-tokens to v3.2.0
|
|
17
|
+
|
|
18
|
+
## 2.1.1
|
|
19
|
+
|
|
20
|
+
Fri, 06 Dec 2024 02:06:03 GMT
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @telus-uds/components-base to v2.2.0
|
|
25
|
+
- Bump @telus-uds/components-web to v3.2.0
|
|
26
|
+
|
|
7
27
|
## 2.1.0
|
|
8
28
|
|
|
9
|
-
Mon, 02 Dec 2024 20:
|
|
29
|
+
Mon, 02 Dec 2024 20:29:27 GMT
|
|
10
30
|
|
|
11
31
|
### Minor changes
|
|
12
32
|
|
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.3.0",
|
|
9
|
+
"@telus-uds/components-web": "^3.2.1",
|
|
9
10
|
"@telus-uds/system-constants": "^2.0.0",
|
|
10
|
-
"@telus-uds/system-theme-tokens": "^3.
|
|
11
|
+
"@telus-uds/system-theme-tokens": "^3.2.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.1.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.2"
|
|
55
55
|
}
|