@atlaskit/spotlight 0.10.7 → 0.10.9
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 +12 -0
- package/constellation/index/examples.mdx +11 -3
- package/constellation/index/props.mdx +53 -6
- package/dist/cjs/controllers/context.js +1 -1
- package/dist/cjs/ui/actions/index.js +1 -1
- package/dist/cjs/ui/body/index.js +1 -1
- package/dist/cjs/ui/card/caret/index.js +1 -1
- package/dist/cjs/ui/card/index.js +1 -1
- package/dist/cjs/ui/controls/index.js +1 -1
- package/dist/cjs/ui/dismiss-control/index.js +1 -1
- package/dist/cjs/ui/footer/index.js +1 -1
- package/dist/cjs/ui/header/index.js +1 -1
- package/dist/cjs/ui/headline/index.js +1 -1
- package/dist/cjs/ui/media/index.js +1 -1
- package/dist/cjs/ui/popover-content/index.js +1 -1
- package/dist/cjs/ui/popover-provider/index.js +1 -1
- package/dist/cjs/ui/popover-target/index.js +1 -1
- package/dist/cjs/ui/primary-action/index.js +1 -1
- package/dist/cjs/ui/primary-link/index.js +1 -1
- package/dist/cjs/ui/secondary-action/index.js +1 -1
- package/dist/cjs/ui/secondary-link/index.js +1 -1
- package/dist/cjs/ui/show-more-control/index.js +1 -1
- package/dist/cjs/ui/step-count/index.js +1 -1
- package/dist/es2019/controllers/context.js +1 -1
- package/dist/es2019/ui/actions/index.js +1 -1
- package/dist/es2019/ui/body/index.js +1 -1
- package/dist/es2019/ui/card/caret/index.js +1 -1
- package/dist/es2019/ui/card/index.js +1 -1
- package/dist/es2019/ui/controls/index.js +1 -1
- package/dist/es2019/ui/dismiss-control/index.js +1 -1
- package/dist/es2019/ui/footer/index.js +1 -1
- package/dist/es2019/ui/header/index.js +1 -1
- package/dist/es2019/ui/headline/index.js +1 -1
- package/dist/es2019/ui/media/index.js +1 -1
- package/dist/es2019/ui/popover-content/index.js +1 -1
- package/dist/es2019/ui/popover-provider/index.js +1 -1
- package/dist/es2019/ui/popover-target/index.js +1 -1
- package/dist/es2019/ui/primary-action/index.js +1 -1
- package/dist/es2019/ui/primary-link/index.js +1 -1
- package/dist/es2019/ui/secondary-action/index.js +1 -1
- package/dist/es2019/ui/secondary-link/index.js +1 -1
- package/dist/es2019/ui/show-more-control/index.js +1 -1
- package/dist/es2019/ui/step-count/index.js +1 -1
- package/dist/esm/controllers/context.js +1 -1
- package/dist/esm/ui/actions/index.js +1 -1
- package/dist/esm/ui/body/index.js +1 -1
- package/dist/esm/ui/card/caret/index.js +1 -1
- package/dist/esm/ui/card/index.js +1 -1
- package/dist/esm/ui/controls/index.js +1 -1
- package/dist/esm/ui/dismiss-control/index.js +1 -1
- package/dist/esm/ui/footer/index.js +1 -1
- package/dist/esm/ui/header/index.js +1 -1
- package/dist/esm/ui/headline/index.js +1 -1
- package/dist/esm/ui/media/index.js +1 -1
- package/dist/esm/ui/popover-content/index.js +1 -1
- package/dist/esm/ui/popover-provider/index.js +1 -1
- package/dist/esm/ui/popover-target/index.js +1 -1
- package/dist/esm/ui/primary-action/index.js +1 -1
- package/dist/esm/ui/primary-link/index.js +1 -1
- package/dist/esm/ui/secondary-action/index.js +1 -1
- package/dist/esm/ui/secondary-link/index.js +1 -1
- package/dist/esm/ui/show-more-control/index.js +1 -1
- package/dist/esm/ui/step-count/index.js +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -8,7 +8,7 @@ import MultipleStepsExample from '../../examples/constellation/multiple-steps';
|
|
|
8
8
|
import MediaExample from '../../examples/constellation/media';
|
|
9
9
|
import ControlsExample from '../../examples/constellation/controls';
|
|
10
10
|
import MotionExample from '../../examples/constellation/motion';
|
|
11
|
-
import
|
|
11
|
+
import ActionsExample from '../../examples/constellation/actions';
|
|
12
12
|
|
|
13
13
|
## Single step
|
|
14
14
|
|
|
@@ -62,11 +62,19 @@ create smooth 'enter' or 'exit' transitions.
|
|
|
62
62
|
|
|
63
63
|
<Example Component={MotionExample} packageName="@atlaskit/spotlight" />
|
|
64
64
|
|
|
65
|
-
##
|
|
65
|
+
## Actions
|
|
66
|
+
|
|
67
|
+
### Buttons
|
|
68
|
+
|
|
69
|
+
When the primary or secondary control should perform an in-app action (e.g. dismiss, advance to the
|
|
70
|
+
next step, or complete a flow), use `SpotlightPrimaryAction` and `SpotlightSecondaryAction`. They
|
|
71
|
+
accept an `onClick` handler and render as buttons.
|
|
72
|
+
|
|
73
|
+
### Links
|
|
66
74
|
|
|
67
75
|
When the primary or secondary control should navigate to a URL instead of performing an action, use
|
|
68
76
|
`SpotlightPrimaryLink` and `SpotlightSecondaryLink`. They mirror the appearance of
|
|
69
77
|
`SpotlightPrimaryAction` and `SpotlightSecondaryAction` but render as links (e.g. "Get started",
|
|
70
78
|
"Learn more").
|
|
71
79
|
|
|
72
|
-
<Example Component={
|
|
80
|
+
<Example Component={ActionsExample} packageName="@atlaskit/spotlight" />
|
|
@@ -15,7 +15,9 @@ props:
|
|
|
15
15
|
- SpotlightHeadline
|
|
16
16
|
- SpotlightMedia
|
|
17
17
|
- SpotlightPrimaryAction
|
|
18
|
+
- SpotlightPrimaryLink
|
|
18
19
|
- SpotlightSecondaryAction
|
|
20
|
+
- SpotlightSecondaryLink
|
|
19
21
|
- SpotlightShowMoreControl
|
|
20
22
|
- SpotlightStepCount
|
|
21
23
|
- PopoverContent
|
|
@@ -23,6 +25,18 @@ props:
|
|
|
23
25
|
- PopoverTarget
|
|
24
26
|
---
|
|
25
27
|
|
|
28
|
+
## PopoverContent props
|
|
29
|
+
|
|
30
|
+
<TSMorphProps exportName="PopoverContent" packageName="@atlaskit/spotlight" />
|
|
31
|
+
|
|
32
|
+
## PopoverProvider props
|
|
33
|
+
|
|
34
|
+
<TSMorphProps exportName="PopoverProvider" packageName="@atlaskit/spotlight" />
|
|
35
|
+
|
|
36
|
+
## PopoverTarget props
|
|
37
|
+
|
|
38
|
+
<TSMorphProps exportName="PopoverTarget" packageName="@atlaskit/spotlight" />
|
|
39
|
+
|
|
26
40
|
## SpotlightCard props
|
|
27
41
|
|
|
28
42
|
<TSMorphProps exportName="SpotlightCard" packageName="@atlaskit/spotlight" />
|
|
@@ -63,10 +77,18 @@ props:
|
|
|
63
77
|
|
|
64
78
|
<TSMorphProps exportName="SpotlightPrimaryAction" packageName="@atlaskit/spotlight" />
|
|
65
79
|
|
|
80
|
+
## SpotlightPrimaryLink props
|
|
81
|
+
|
|
82
|
+
<TSMorphProps exportName="SpotlightPrimaryLink" packageName="@atlaskit/spotlight" />
|
|
83
|
+
|
|
66
84
|
## SpotlightSecondaryAction props
|
|
67
85
|
|
|
68
86
|
<TSMorphProps exportName="SpotlightSecondaryAction" packageName="@atlaskit/spotlight" />
|
|
69
87
|
|
|
88
|
+
## SpotlightSecondaryLink props
|
|
89
|
+
|
|
90
|
+
<TSMorphProps exportName="SpotlightSecondaryLink" packageName="@atlaskit/spotlight" />
|
|
91
|
+
|
|
70
92
|
## SpotlightShowMoreControl props
|
|
71
93
|
|
|
72
94
|
<TSMorphProps exportName="SpotlightShowMoreControl" packageName="@atlaskit/spotlight" />
|
|
@@ -75,14 +97,39 @@ props:
|
|
|
75
97
|
|
|
76
98
|
<TSMorphProps exportName="SpotlightStepCount" packageName="@atlaskit/spotlight" />
|
|
77
99
|
|
|
78
|
-
##
|
|
100
|
+
## usePreloadMedia
|
|
79
101
|
|
|
80
|
-
|
|
102
|
+
A hook that preloads media (video or image) files so they are cached by the browser before being
|
|
103
|
+
rendered. Once loaded, the browser cache will be used when the actual media element is displayed.
|
|
104
|
+
This improves perceived performance when showing spotlight cards with media.
|
|
81
105
|
|
|
82
|
-
|
|
106
|
+
### Supported MIME types
|
|
83
107
|
|
|
84
|
-
|
|
108
|
+
- `video/mp4`
|
|
109
|
+
- `video/webm`
|
|
110
|
+
- `video/ogg`
|
|
111
|
+
- `video/mpeg`
|
|
112
|
+
- `video/x-matroska`
|
|
113
|
+
- `image/jpeg`
|
|
114
|
+
- `image/png`
|
|
115
|
+
- `image/gif`
|
|
116
|
+
- `image/webp`
|
|
117
|
+
- `image/svg+xml`
|
|
85
118
|
|
|
86
|
-
|
|
119
|
+
### Example
|
|
87
120
|
|
|
88
|
-
|
|
121
|
+
```tsx
|
|
122
|
+
import { SpotlightMedia, usePreloadMedia } from '@atlaskit/spotlight';
|
|
123
|
+
import Image from '@atlaskit/image';
|
|
124
|
+
import imageSrc from './assets/image.png'
|
|
125
|
+
|
|
126
|
+
//...
|
|
127
|
+
|
|
128
|
+
usePreloadMedia(imageSrc, { mimetype: 'video/mp4' });
|
|
129
|
+
|
|
130
|
+
// ...
|
|
131
|
+
|
|
132
|
+
</SpotlightMedia>
|
|
133
|
+
<Image src={imageSrc} alt='description' />
|
|
134
|
+
</SpotlightMedia>
|
|
135
|
+
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* context.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* context.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import { createContext, useId, useRef, useState } from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* context.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* context.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import * as React from 'react';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/spotlight",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.9",
|
|
4
4
|
"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
"atlaskit:src": "src/index.tsx",
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/browser-apis": "^0.0.1",
|
|
36
|
-
"@atlaskit/button": "^23.
|
|
36
|
+
"@atlaskit/button": "^23.10.0",
|
|
37
37
|
"@atlaskit/css": "^0.19.0",
|
|
38
|
-
"@atlaskit/ds-lib": "^
|
|
38
|
+
"@atlaskit/ds-lib": "^6.0.0",
|
|
39
39
|
"@atlaskit/heading": "^5.3.0",
|
|
40
|
-
"@atlaskit/icon": "^
|
|
40
|
+
"@atlaskit/icon": "^32.0.0",
|
|
41
41
|
"@atlaskit/image": "^3.0.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
43
43
|
"@atlaskit/popper": "^7.1.0",
|
|
44
44
|
"@atlaskit/primitives": "^18.0.0",
|
|
45
|
-
"@atlaskit/tokens": "^11.
|
|
45
|
+
"@atlaskit/tokens": "^11.1.0",
|
|
46
46
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
|
-
"@compiled/react": "^0.
|
|
48
|
+
"@compiled/react": "^0.20.0",
|
|
49
49
|
"bind-event-listener": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@af/accessibility-testing": "workspace:^",
|
|
56
56
|
"@af/integration-testing": "workspace:^",
|
|
57
57
|
"@af/visual-regression": "workspace:^",
|
|
58
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
58
|
+
"@atlaskit/dropdown-menu": "^16.6.0",
|
|
59
59
|
"@atlaskit/ssr": "workspace:^",
|
|
60
60
|
"@atlassian/a11y-jest-testing": "^0.10.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|