@atlaskit/onboarding 10.4.1 → 10.5.1

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 (49) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/components/modal.js +13 -16
  3. package/dist/cjs/components/spotlight-card.js +133 -100
  4. package/dist/cjs/components/spotlight-dialog.js +6 -18
  5. package/dist/cjs/components/spotlight-manager.js +8 -6
  6. package/dist/cjs/components/spotlight-target.js +4 -2
  7. package/dist/cjs/components/spotlight-transition.js +7 -3
  8. package/dist/cjs/components/spotlight.js +4 -4
  9. package/dist/cjs/components/theme.js +10 -0
  10. package/dist/cjs/components/use-spotlight.js +1 -7
  11. package/dist/cjs/styled/target.js +5 -3
  12. package/dist/cjs/version.json +1 -1
  13. package/dist/es2019/components/modal.js +6 -9
  14. package/dist/es2019/components/spotlight-card.js +120 -63
  15. package/dist/es2019/components/spotlight-dialog.js +8 -17
  16. package/dist/es2019/components/spotlight-manager.js +5 -5
  17. package/dist/es2019/components/spotlight-target.js +4 -2
  18. package/dist/es2019/components/spotlight-transition.js +6 -3
  19. package/dist/es2019/components/spotlight.js +4 -4
  20. package/dist/es2019/components/theme.js +10 -0
  21. package/dist/es2019/components/use-spotlight.js +1 -7
  22. package/dist/es2019/styled/target.js +5 -3
  23. package/dist/es2019/version.json +1 -1
  24. package/dist/esm/components/modal.js +13 -16
  25. package/dist/esm/components/spotlight-card.js +120 -90
  26. package/dist/esm/components/spotlight-dialog.js +6 -16
  27. package/dist/esm/components/spotlight-manager.js +5 -4
  28. package/dist/esm/components/spotlight-target.js +4 -2
  29. package/dist/esm/components/spotlight-transition.js +6 -3
  30. package/dist/esm/components/spotlight.js +4 -4
  31. package/dist/esm/components/theme.js +10 -0
  32. package/dist/esm/components/use-spotlight.js +1 -7
  33. package/dist/esm/styled/target.js +5 -3
  34. package/dist/esm/version.json +1 -1
  35. package/dist/types/components/modal.d.ts +6 -5
  36. package/dist/types/components/spotlight-card.d.ts +25 -7
  37. package/dist/types/components/spotlight-manager.d.ts +5 -3
  38. package/dist/types/components/spotlight-target.d.ts +4 -2
  39. package/dist/types/components/spotlight-transition.d.ts +4 -2
  40. package/dist/types/components/spotlight.d.ts +4 -4
  41. package/dist/types/components/theme.d.ts +8 -0
  42. package/dist/types/components/use-spotlight.d.ts +1 -7
  43. package/dist/types/styled/target.d.ts +5 -3
  44. package/package.json +5 -3
  45. package/report.api.md +406 -0
  46. package/dist/cjs/components/card.js +0 -160
  47. package/dist/es2019/components/card.js +0 -131
  48. package/dist/esm/components/card.js +0 -142
  49. package/dist/types/components/card.d.ts +0 -59
@@ -1,131 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
-
3
- /** @jsx jsx */
4
- import React from 'react';
5
- import { css, jsx } from '@emotion/core';
6
- import Button from '@atlaskit/button/custom-theme-button';
7
- import { createTheme, useGlobalTheme } from '@atlaskit/theme/components';
8
- import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
9
- import { h600 } from '@atlaskit/theme/typography';
10
- import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
11
- const gridSize = getGridSize(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
12
-
13
- const lightH600Styles = css(h600({
14
- theme: {
15
- mode: 'light'
16
- }
17
- })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
18
-
19
- const darkH600Styles = css(h600({
20
- theme: {
21
- mode: 'dark'
22
- }
23
- }));
24
- const Container = /*#__PURE__*/React.forwardRef(({
25
- children,
26
- theme,
27
- ...props
28
- }, ref) => // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
29
- jsx("div", _extends({
30
- css: theme,
31
- ref: ref
32
- }, props), children));
33
- const bodyStyles = css({
34
- display: 'flex',
35
- padding: `${gridSize * 2}px ${gridSize * 2.5}px`,
36
- flexDirection: 'column'
37
- }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
38
-
39
- const headingStyles = css({
40
- color: 'inherit'
41
- });
42
- const defaultHeaderStyles = css({
43
- display: 'flex',
44
- paddingBottom: `${gridSize}px`,
45
- alignItems: 'baseline',
46
- justifyContent: 'space-between'
47
- });
48
-
49
- const DefaultHeader = ({
50
- children
51
- }) => jsx("div", {
52
- css: defaultHeaderStyles
53
- }, children);
54
-
55
- const defaultFooterStyles = css({
56
- display: 'flex',
57
- paddingTop: `${gridSize}px`,
58
- alignItems: 'center',
59
- justifyContent: 'space-between'
60
- });
61
-
62
- const DefaultFooter = ({
63
- children
64
- }) => jsx("div", {
65
- css: defaultFooterStyles
66
- }, children);
67
-
68
- const Theme = createTheme(() => ({
69
- container: {
70
- overflow: 'auto',
71
- borderRadius: `${borderRadius()}px`,
72
- height: 'fit-content',
73
- zIndex: `${layers.spotlight() + 1}`
74
- }
75
- }));
76
- /**
77
- * __Card__
78
- *
79
- * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
80
- *
81
- * @internal
82
- */
83
-
84
- const Card = /*#__PURE__*/React.forwardRef(({
85
- actions = [],
86
- actionsBeforeElement,
87
- children,
88
- components = {},
89
- image,
90
- heading,
91
- headingAfterElement,
92
- theme,
93
- testId
94
- }, ref) => {
95
- const {
96
- Header = DefaultHeader,
97
- Footer = DefaultFooter
98
- } = components;
99
- const {
100
- mode
101
- } = useGlobalTheme();
102
- return jsx(Theme.Provider, {
103
- value: theme
104
- }, jsx(Theme.Consumer, null, ({
105
- container
106
- }) => {
107
- return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
108
- jsx(Container, {
109
- theme: container,
110
- ref: ref,
111
- "data-testid": testId
112
- }, typeof image === 'string' ? jsx("img", {
113
- src: image,
114
- alt: ""
115
- }) : image, jsx("div", {
116
- css: bodyStyles
117
- }, heading || headingAfterElement ? jsx(Header, null, jsx("h4", {
118
- css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
119
- }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
120
- text,
121
- key,
122
- ...rest
123
- }, idx) => {
124
- return jsx(DialogActionItem, {
125
- key: key || (typeof text === 'string' ? text : `${idx}`)
126
- }, jsx(Button, rest, text));
127
- }))) : null))
128
- );
129
- }));
130
- });
131
- export default Card;
@@ -1,142 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["children", "theme"],
4
- _excluded2 = ["text", "key"];
5
-
6
- /** @jsx jsx */
7
- import React from 'react';
8
- import { css, jsx } from '@emotion/core';
9
- import Button from '@atlaskit/button/custom-theme-button';
10
- import { createTheme, useGlobalTheme } from '@atlaskit/theme/components';
11
- import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
12
- import { h600 } from '@atlaskit/theme/typography';
13
- import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
14
- var gridSize = getGridSize(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
15
-
16
- var lightH600Styles = css(h600({
17
- theme: {
18
- mode: 'light'
19
- }
20
- })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
21
-
22
- var darkH600Styles = css(h600({
23
- theme: {
24
- mode: 'dark'
25
- }
26
- }));
27
- var Container = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
28
- var children = _ref.children,
29
- theme = _ref.theme,
30
- props = _objectWithoutProperties(_ref, _excluded);
31
-
32
- return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
33
- jsx("div", _extends({
34
- css: theme,
35
- ref: ref
36
- }, props), children)
37
- );
38
- });
39
- var bodyStyles = css({
40
- display: 'flex',
41
- padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
42
- flexDirection: 'column'
43
- }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
44
-
45
- var headingStyles = css({
46
- color: 'inherit'
47
- });
48
- var defaultHeaderStyles = css({
49
- display: 'flex',
50
- paddingBottom: "".concat(gridSize, "px"),
51
- alignItems: 'baseline',
52
- justifyContent: 'space-between'
53
- });
54
-
55
- var DefaultHeader = function DefaultHeader(_ref2) {
56
- var children = _ref2.children;
57
- return jsx("div", {
58
- css: defaultHeaderStyles
59
- }, children);
60
- };
61
-
62
- var defaultFooterStyles = css({
63
- display: 'flex',
64
- paddingTop: "".concat(gridSize, "px"),
65
- alignItems: 'center',
66
- justifyContent: 'space-between'
67
- });
68
-
69
- var DefaultFooter = function DefaultFooter(_ref3) {
70
- var children = _ref3.children;
71
- return jsx("div", {
72
- css: defaultFooterStyles
73
- }, children);
74
- };
75
-
76
- var Theme = createTheme(function () {
77
- return {
78
- container: {
79
- overflow: 'auto',
80
- borderRadius: "".concat(borderRadius(), "px"),
81
- height: 'fit-content',
82
- zIndex: "".concat(layers.spotlight() + 1)
83
- }
84
- };
85
- });
86
- /**
87
- * __Card__
88
- *
89
- * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
90
- *
91
- * @internal
92
- */
93
-
94
- var Card = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
95
- var _ref4$actions = _ref4.actions,
96
- actions = _ref4$actions === void 0 ? [] : _ref4$actions,
97
- actionsBeforeElement = _ref4.actionsBeforeElement,
98
- children = _ref4.children,
99
- _ref4$components = _ref4.components,
100
- components = _ref4$components === void 0 ? {} : _ref4$components,
101
- image = _ref4.image,
102
- heading = _ref4.heading,
103
- headingAfterElement = _ref4.headingAfterElement,
104
- theme = _ref4.theme,
105
- testId = _ref4.testId;
106
- var _components$Header = components.Header,
107
- Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
108
- _components$Footer = components.Footer,
109
- Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
110
-
111
- var _useGlobalTheme = useGlobalTheme(),
112
- mode = _useGlobalTheme.mode;
113
-
114
- return jsx(Theme.Provider, {
115
- value: theme
116
- }, jsx(Theme.Consumer, null, function (_ref5) {
117
- var container = _ref5.container;
118
- return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
119
- jsx(Container, {
120
- theme: container,
121
- ref: ref,
122
- "data-testid": testId
123
- }, typeof image === 'string' ? jsx("img", {
124
- src: image,
125
- alt: ""
126
- }) : image, jsx("div", {
127
- css: bodyStyles
128
- }, heading || headingAfterElement ? jsx(Header, null, jsx("h4", {
129
- css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
130
- }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref6, idx) {
131
- var text = _ref6.text,
132
- key = _ref6.key,
133
- rest = _objectWithoutProperties(_ref6, _excluded2);
134
-
135
- return jsx(DialogActionItem, {
136
- key: key || (typeof text === 'string' ? text : "".concat(idx))
137
- }, jsx(Button, rest, text));
138
- }))) : null))
139
- );
140
- }));
141
- });
142
- export default Card;
@@ -1,59 +0,0 @@
1
- /** @jsx jsx */
2
- import React, { ComponentType, ReactNode } from 'react';
3
- import { ThemeProp } from '@atlaskit/theme/components';
4
- import { Actions } from '../types';
5
- export interface CardTokens {
6
- container: Record<string, string | undefined>;
7
- }
8
- interface CardProps {
9
- /**
10
- * Buttons to render in the footer
11
- */
12
- actions?: Actions;
13
- /**
14
- * An optional element rendered to the left of the footer actions
15
- */
16
- actionsBeforeElement?: ReactNode;
17
- /**
18
- * The content of the card
19
- */
20
- children?: ReactNode;
21
- /**
22
- * The container elements rendered by the component
23
- */
24
- components?: {
25
- Header?: ComponentType<any>;
26
- Footer?: ComponentType<any>;
27
- };
28
- /**
29
- * The heading to be rendered above the body
30
- */
31
- heading?: ReactNode;
32
- /**
33
- * An optional element rendered to the right of the heading
34
- */
35
- headingAfterElement?: ReactNode;
36
- /**
37
- * The image to render above the heading. Can be a url or a Node.
38
- */
39
- image?: string | ReactNode;
40
- /**
41
- * The theme of the card
42
- */
43
- theme?: ThemeProp<CardTokens, {}>;
44
- /**
45
- * A `testId` prop is provided for specified elements,
46
- * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
47
- * serving as a hook for automated tests.
48
- */
49
- testId?: string;
50
- }
51
- /**
52
- * __Card__
53
- *
54
- * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
55
- *
56
- * @internal
57
- */
58
- declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
59
- export default Card;