@times-components/sticky 0.3.4 → 0.3.8
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 +32 -0
- package/package.json +7 -8
- package/sticky.showcase.web.js +0 -475
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.3.8](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.3.7...@times-components/sticky@0.3.8) (2022-01-04)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/sticky
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.3.7](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.3.6...@times-components/sticky@0.3.7) (2021-12-02)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @times-components/sticky
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [0.3.6](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.3.5...@times-components/sticky@0.3.6) (2021-11-25)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @times-components/sticky
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [0.3.5](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.3.4...@times-components/sticky@0.3.5) (2021-08-09)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @times-components/sticky
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [0.3.4](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.3.3...@times-components/sticky@0.3.4) (2021-07-05)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @times-components/sticky
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/sticky",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.8",
|
|
4
4
|
"description": "Attach children to viewport on scroll (web only)",
|
|
5
5
|
"main": "dist/sticky",
|
|
6
6
|
"dev": "src/sticky",
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
"prettier:diff": "prettier --list-different '**/*.*'",
|
|
11
11
|
"lint": "eslint . && stylelint . && yarn prettier:diff && yarn depcheck",
|
|
12
12
|
"test:web": "jest --config='./__tests__/web/jest.config.js'",
|
|
13
|
-
"test:all": "yarn test:web --coverage",
|
|
14
13
|
"prepublishOnly": "yarn transpile && yarn bundle",
|
|
15
14
|
"cleanup-dist": "rm -rf dist",
|
|
16
15
|
"transpile": "yarn cleanup-dist && babel src -d dist",
|
|
@@ -42,11 +41,11 @@
|
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
43
|
"@babel/core": "7.4.4",
|
|
45
|
-
"@times-components/eslint-config-thetimes": "0.8.
|
|
46
|
-
"@times-components/jest-configurator": "2.7.
|
|
47
|
-
"@times-components/storybook": "4.1.
|
|
48
|
-
"@times-components/styleguide": "3.38.
|
|
49
|
-
"@times-components/webpack-configurator": "2.0.
|
|
44
|
+
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
45
|
+
"@times-components/jest-configurator": "2.7.4",
|
|
46
|
+
"@times-components/storybook": "4.1.69",
|
|
47
|
+
"@times-components/styleguide": "3.38.25",
|
|
48
|
+
"@times-components/webpack-configurator": "2.0.29",
|
|
50
49
|
"babel-jest": "24.8.0",
|
|
51
50
|
"babel-loader": "8.0.5",
|
|
52
51
|
"eslint": "5.9.0",
|
|
@@ -75,5 +74,5 @@
|
|
|
75
74
|
"publishConfig": {
|
|
76
75
|
"access": "public"
|
|
77
76
|
},
|
|
78
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "841903b1aa0dbb196756002eb8f269555aa13516"
|
|
79
78
|
}
|
package/sticky.showcase.web.js
DELETED
|
@@ -1,475 +0,0 @@
|
|
|
1
|
-
/* eslint-env browser */
|
|
2
|
-
import React from "react";
|
|
3
|
-
import styled, { css } from "styled-components";
|
|
4
|
-
import { createScopedGlobalStyle } from "@times-components/storybook";
|
|
5
|
-
import { breakpoints } from "@times-components/styleguide";
|
|
6
|
-
import Sticky, {
|
|
7
|
-
STICKY_CLASS_NAME,
|
|
8
|
-
StickyProvider,
|
|
9
|
-
selectors,
|
|
10
|
-
computeProgressStyles,
|
|
11
|
-
mediaQuery
|
|
12
|
-
} from "./src/sticky";
|
|
13
|
-
|
|
14
|
-
const Styles = createScopedGlobalStyle`
|
|
15
|
-
.bar {
|
|
16
|
-
height: 30px;
|
|
17
|
-
background: red;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.bar:not(.fixed) {
|
|
21
|
-
margin: 30px auto;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.container,
|
|
25
|
-
.sticky-content {
|
|
26
|
-
margin: 0 auto;
|
|
27
|
-
max-width: 400px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.container {
|
|
31
|
-
padding: 10px;
|
|
32
|
-
overflow: hidden;
|
|
33
|
-
position: relative;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.bar.${STICKY_CLASS_NAME} {
|
|
37
|
-
background: blue;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.fixed {
|
|
41
|
-
position: fixed;
|
|
42
|
-
background: yellow;
|
|
43
|
-
left: 0;
|
|
44
|
-
width: 100%;
|
|
45
|
-
top: 0;
|
|
46
|
-
z-index: 1;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.with-fixed .container {
|
|
50
|
-
margin-top: 30px;
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
const ScrollProgressBar = styled.div`
|
|
55
|
-
height: 200px;
|
|
56
|
-
background: red;
|
|
57
|
-
margin: 30px auto;
|
|
58
|
-
|
|
59
|
-
${selectors.sticky(css`
|
|
60
|
-
background: blue;
|
|
61
|
-
`)} ${computeProgressStyles(
|
|
62
|
-
progress => css`
|
|
63
|
-
opacity: ${1 - progress};
|
|
64
|
-
`
|
|
65
|
-
)};
|
|
66
|
-
`;
|
|
67
|
-
|
|
68
|
-
export default {
|
|
69
|
-
children: [
|
|
70
|
-
{
|
|
71
|
-
component: () => (
|
|
72
|
-
<StickyProvider>
|
|
73
|
-
<Styles />
|
|
74
|
-
<div className="container">
|
|
75
|
-
<h2>Scroll down…</h2>
|
|
76
|
-
<p>
|
|
77
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
78
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
79
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
80
|
-
qui reiciendis, sunt vel vitae?
|
|
81
|
-
</p>
|
|
82
|
-
<Sticky className="bar">
|
|
83
|
-
<div className="sticky-content">Content</div>
|
|
84
|
-
</Sticky>
|
|
85
|
-
<p>
|
|
86
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
87
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
88
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
89
|
-
qui reiciendis, sunt vel vitae?
|
|
90
|
-
</p>
|
|
91
|
-
<p>
|
|
92
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
93
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
94
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
95
|
-
qui reiciendis, sunt vel vitae?
|
|
96
|
-
</p>
|
|
97
|
-
<p>
|
|
98
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
99
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
100
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
101
|
-
qui reiciendis, sunt vel vitae?
|
|
102
|
-
</p>
|
|
103
|
-
<p>
|
|
104
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
105
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
106
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
107
|
-
qui reiciendis, sunt vel vitae?
|
|
108
|
-
</p>
|
|
109
|
-
<p>
|
|
110
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
111
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
112
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
113
|
-
qui reiciendis, sunt vel vitae?
|
|
114
|
-
</p>
|
|
115
|
-
<p>
|
|
116
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
117
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
118
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
119
|
-
qui reiciendis, sunt vel vitae?
|
|
120
|
-
</p>
|
|
121
|
-
<p>
|
|
122
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
123
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
124
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
125
|
-
qui reiciendis, sunt vel vitae?
|
|
126
|
-
</p>
|
|
127
|
-
<p>
|
|
128
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
129
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
130
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
131
|
-
qui reiciendis, sunt vel vitae?
|
|
132
|
-
</p>
|
|
133
|
-
<p>
|
|
134
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
135
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
136
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
137
|
-
qui reiciendis, sunt vel vitae?
|
|
138
|
-
</p>
|
|
139
|
-
<p>
|
|
140
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
141
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
142
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
143
|
-
qui reiciendis, sunt vel vitae?
|
|
144
|
-
</p>
|
|
145
|
-
<p>
|
|
146
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
147
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
148
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
149
|
-
qui reiciendis, sunt vel vitae?
|
|
150
|
-
</p>
|
|
151
|
-
<p>
|
|
152
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
153
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
154
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
155
|
-
qui reiciendis, sunt vel vitae?
|
|
156
|
-
</p>
|
|
157
|
-
<p>
|
|
158
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
159
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
160
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
161
|
-
qui reiciendis, sunt vel vitae?
|
|
162
|
-
</p>
|
|
163
|
-
</div>
|
|
164
|
-
</StickyProvider>
|
|
165
|
-
),
|
|
166
|
-
name: "Sticky without fixed sibling",
|
|
167
|
-
type: "story"
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
component: () => (
|
|
171
|
-
<div className="with-fixed">
|
|
172
|
-
<Styles />
|
|
173
|
-
<div className="bar fixed" />
|
|
174
|
-
<StickyProvider className="container">
|
|
175
|
-
<h2>Scroll down…</h2>
|
|
176
|
-
<p>
|
|
177
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
178
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
179
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
180
|
-
qui reiciendis, sunt vel vitae?
|
|
181
|
-
</p>
|
|
182
|
-
<Sticky className="bar">
|
|
183
|
-
<div className="sticky-content">Content</div>
|
|
184
|
-
</Sticky>
|
|
185
|
-
<p>
|
|
186
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
187
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
188
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
189
|
-
qui reiciendis, sunt vel vitae?
|
|
190
|
-
</p>
|
|
191
|
-
<p>
|
|
192
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
193
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
194
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
195
|
-
qui reiciendis, sunt vel vitae?
|
|
196
|
-
</p>
|
|
197
|
-
<p>
|
|
198
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
199
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
200
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
201
|
-
qui reiciendis, sunt vel vitae?
|
|
202
|
-
</p>
|
|
203
|
-
<p>
|
|
204
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
205
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
206
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
207
|
-
qui reiciendis, sunt vel vitae?
|
|
208
|
-
</p>
|
|
209
|
-
<p>
|
|
210
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
211
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
212
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
213
|
-
qui reiciendis, sunt vel vitae?
|
|
214
|
-
</p>
|
|
215
|
-
<p>
|
|
216
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
217
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
218
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
219
|
-
qui reiciendis, sunt vel vitae?
|
|
220
|
-
</p>
|
|
221
|
-
<p>
|
|
222
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
223
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
224
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
225
|
-
qui reiciendis, sunt vel vitae?
|
|
226
|
-
</p>
|
|
227
|
-
<p>
|
|
228
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
229
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
230
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
231
|
-
qui reiciendis, sunt vel vitae?
|
|
232
|
-
</p>
|
|
233
|
-
<p>
|
|
234
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
235
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
236
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
237
|
-
qui reiciendis, sunt vel vitae?
|
|
238
|
-
</p>
|
|
239
|
-
<p>
|
|
240
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
241
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
242
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
243
|
-
qui reiciendis, sunt vel vitae?
|
|
244
|
-
</p>
|
|
245
|
-
<p>
|
|
246
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
247
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
248
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
249
|
-
qui reiciendis, sunt vel vitae?
|
|
250
|
-
</p>
|
|
251
|
-
<p>
|
|
252
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
253
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
254
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
255
|
-
qui reiciendis, sunt vel vitae?
|
|
256
|
-
</p>
|
|
257
|
-
<p>
|
|
258
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
259
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
260
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
261
|
-
qui reiciendis, sunt vel vitae?
|
|
262
|
-
</p>
|
|
263
|
-
</StickyProvider>
|
|
264
|
-
</div>
|
|
265
|
-
),
|
|
266
|
-
name: "Sticky with fixed sibling",
|
|
267
|
-
type: "story"
|
|
268
|
-
},
|
|
269
|
-
{
|
|
270
|
-
component: () => (
|
|
271
|
-
<div className="with-fixed">
|
|
272
|
-
<Styles />
|
|
273
|
-
<div className="bar fixed" />
|
|
274
|
-
<StickyProvider className="container">
|
|
275
|
-
<h2>Scroll down…</h2>
|
|
276
|
-
<p>
|
|
277
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
278
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
279
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
280
|
-
qui reiciendis, sunt vel vitae?
|
|
281
|
-
</p>
|
|
282
|
-
<Sticky Component={ScrollProgressBar}>
|
|
283
|
-
<div className="sticky-content">Content</div>
|
|
284
|
-
</Sticky>
|
|
285
|
-
<p>
|
|
286
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
287
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
288
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
289
|
-
qui reiciendis, sunt vel vitae?
|
|
290
|
-
</p>
|
|
291
|
-
<p>
|
|
292
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
293
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
294
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
295
|
-
qui reiciendis, sunt vel vitae?
|
|
296
|
-
</p>
|
|
297
|
-
<p>
|
|
298
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
299
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
300
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
301
|
-
qui reiciendis, sunt vel vitae?
|
|
302
|
-
</p>
|
|
303
|
-
<p>
|
|
304
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
305
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
306
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
307
|
-
qui reiciendis, sunt vel vitae?
|
|
308
|
-
</p>
|
|
309
|
-
<p>
|
|
310
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
311
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
312
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
313
|
-
qui reiciendis, sunt vel vitae?
|
|
314
|
-
</p>
|
|
315
|
-
<p>
|
|
316
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
317
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
318
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
319
|
-
qui reiciendis, sunt vel vitae?
|
|
320
|
-
</p>
|
|
321
|
-
<p>
|
|
322
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
323
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
324
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
325
|
-
qui reiciendis, sunt vel vitae?
|
|
326
|
-
</p>
|
|
327
|
-
<p>
|
|
328
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
329
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
330
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
331
|
-
qui reiciendis, sunt vel vitae?
|
|
332
|
-
</p>
|
|
333
|
-
<p>
|
|
334
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
335
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
336
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
337
|
-
qui reiciendis, sunt vel vitae?
|
|
338
|
-
</p>
|
|
339
|
-
<p>
|
|
340
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
341
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
342
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
343
|
-
qui reiciendis, sunt vel vitae?
|
|
344
|
-
</p>
|
|
345
|
-
<p>
|
|
346
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
347
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
348
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
349
|
-
qui reiciendis, sunt vel vitae?
|
|
350
|
-
</p>
|
|
351
|
-
<p>
|
|
352
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
353
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
354
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
355
|
-
qui reiciendis, sunt vel vitae?
|
|
356
|
-
</p>
|
|
357
|
-
<p>
|
|
358
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
359
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
360
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
361
|
-
qui reiciendis, sunt vel vitae?
|
|
362
|
-
</p>
|
|
363
|
-
</StickyProvider>
|
|
364
|
-
</div>
|
|
365
|
-
),
|
|
366
|
-
name: "Sticky with scroll progress",
|
|
367
|
-
type: "story"
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
component: () => {
|
|
371
|
-
const shouldBeSticky = mediaQuery(`(max-width: ${breakpoints.wide}px)`);
|
|
372
|
-
|
|
373
|
-
return (
|
|
374
|
-
<div className="with-fixed">
|
|
375
|
-
<Styles />
|
|
376
|
-
<div className="bar fixed" />
|
|
377
|
-
<StickyProvider className="container">
|
|
378
|
-
<h2>Scroll down…</h2>
|
|
379
|
-
<p>
|
|
380
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
381
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
382
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
383
|
-
qui reiciendis, sunt vel vitae?
|
|
384
|
-
</p>
|
|
385
|
-
<Sticky className="bar" shouldBeSticky={shouldBeSticky}>
|
|
386
|
-
<div className="sticky-content">Content</div>
|
|
387
|
-
</Sticky>
|
|
388
|
-
<p>
|
|
389
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
390
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
391
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
392
|
-
qui reiciendis, sunt vel vitae?
|
|
393
|
-
</p>
|
|
394
|
-
<p>
|
|
395
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
396
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
397
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
398
|
-
qui reiciendis, sunt vel vitae?
|
|
399
|
-
</p>
|
|
400
|
-
<p>
|
|
401
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
402
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
403
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
404
|
-
qui reiciendis, sunt vel vitae?
|
|
405
|
-
</p>
|
|
406
|
-
<p>
|
|
407
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
408
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
409
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
410
|
-
qui reiciendis, sunt vel vitae?
|
|
411
|
-
</p>
|
|
412
|
-
<p>
|
|
413
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
414
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
415
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
416
|
-
qui reiciendis, sunt vel vitae?
|
|
417
|
-
</p>
|
|
418
|
-
<p>
|
|
419
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
420
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
421
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
422
|
-
qui reiciendis, sunt vel vitae?
|
|
423
|
-
</p>
|
|
424
|
-
<p>
|
|
425
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
426
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
427
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
428
|
-
qui reiciendis, sunt vel vitae?
|
|
429
|
-
</p>
|
|
430
|
-
<p>
|
|
431
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
432
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
433
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
434
|
-
qui reiciendis, sunt vel vitae?
|
|
435
|
-
</p>
|
|
436
|
-
<p>
|
|
437
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
438
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
439
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
440
|
-
qui reiciendis, sunt vel vitae?
|
|
441
|
-
</p>
|
|
442
|
-
<p>
|
|
443
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
444
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
445
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
446
|
-
qui reiciendis, sunt vel vitae?
|
|
447
|
-
</p>
|
|
448
|
-
<p>
|
|
449
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
450
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
451
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
452
|
-
qui reiciendis, sunt vel vitae?
|
|
453
|
-
</p>
|
|
454
|
-
<p>
|
|
455
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
456
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
457
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
458
|
-
qui reiciendis, sunt vel vitae?
|
|
459
|
-
</p>
|
|
460
|
-
<p>
|
|
461
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet
|
|
462
|
-
assumenda autem dolorem dolores eligendi error ipsam itaque
|
|
463
|
-
laborum odit officia perspiciatis praesentium provident quaerat
|
|
464
|
-
qui reiciendis, sunt vel vitae?
|
|
465
|
-
</p>
|
|
466
|
-
</StickyProvider>
|
|
467
|
-
</div>
|
|
468
|
-
);
|
|
469
|
-
},
|
|
470
|
-
name: "Sticky with fixed sibling & media query",
|
|
471
|
-
type: "story"
|
|
472
|
-
}
|
|
473
|
-
],
|
|
474
|
-
name: "Primitives/Sticky"
|
|
475
|
-
};
|