@atlaskit/section-message 6.3.1 → 6.3.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/section-message.js +6 -8
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/section-message.js +6 -7
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/section-message.js +6 -7
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/internal/appearance-icon.d.ts +1 -1
  9. package/dist/types-ts4.0/internal/appearance-icon.d.ts +1 -1
  10. package/package.json +5 -5
  11. package/report.api.md +20 -81
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/section-message
2
2
 
3
+ ## 6.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7c6009de2f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c6009de2f1) - [ux] Updates the visual appearance to match the legacy light mode palette.
8
+ - [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
9
+ - Updated dependencies
10
+
3
11
  ## 6.3.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/section-message.js CHANGED
@@ -15,8 +15,6 @@ var _dsExplorations = require("@atlaskit/ds-explorations");
15
15
 
16
16
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
17
17
 
18
- var _colors = require("@atlaskit/theme/colors");
19
-
20
18
  var _appearanceIcon = require("./internal/appearance-icon");
21
19
 
22
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,8 +52,8 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
54
52
 
55
53
  return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
56
54
  as: "section",
57
- backgroundColor: [appearanceMap[appearance], secondaryColor],
58
- padding: "sp-200",
55
+ backgroundColor: appearanceMap[appearance],
56
+ padding: "scale.200",
59
57
  borderRadius: "normal",
60
58
  testId: testId,
61
59
  ref: ref,
@@ -63,7 +61,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
63
61
  wordBreak: 'break-word'
64
62
  }
65
63
  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Inline, {
66
- gap: "sp-200"
64
+ gap: "scale.200"
67
65
  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
68
66
  UNSAFE_style: {
69
67
  margin: '-2px 0'
@@ -73,7 +71,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
73
71
  primaryColor: primaryColor,
74
72
  secondaryColor: secondaryColor
75
73
  })), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Stack, {
76
- gap: "sp-100",
74
+ gap: "scale.100",
77
75
  testId: testId && "".concat(testId, "--content")
78
76
  }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
79
77
  as: "h2",
@@ -82,9 +80,9 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
82
80
  flexWrap: "wrap",
83
81
  testId: testId && "".concat(testId, "--actions"),
84
82
  divider: /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, {
85
- color: ['subtle', _colors.N500]
83
+ color: "subtle"
86
84
  }, "\xB7"),
87
- gap: "sp-75"
85
+ gap: "scale.075"
88
86
  }, actionsArray))));
89
87
  });
90
88
  var appearanceMap = {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "6.3.1",
3
+ "version": "6.3.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/section-message.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import React, { forwardRef } from 'react';
3
3
  import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
4
4
  import Heading from '@atlaskit/heading';
5
- import { N500 } from '@atlaskit/theme/colors';
6
5
  import { getAppearanceIconStyles } from './internal/appearance-icon';
7
6
 
8
7
  /**
@@ -31,8 +30,8 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
31
30
  const actionsArray = React.Children.toArray(actionElements);
32
31
  return /*#__PURE__*/React.createElement(Box, {
33
32
  as: "section",
34
- backgroundColor: [appearanceMap[appearance], secondaryColor],
35
- padding: "sp-200",
33
+ backgroundColor: appearanceMap[appearance],
34
+ padding: "scale.200",
36
35
  borderRadius: "normal",
37
36
  testId: testId,
38
37
  ref: ref,
@@ -40,7 +39,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
40
39
  wordBreak: 'break-word'
41
40
  }
42
41
  }, /*#__PURE__*/React.createElement(Inline, {
43
- gap: "sp-200"
42
+ gap: "scale.200"
44
43
  }, /*#__PURE__*/React.createElement(Box, {
45
44
  UNSAFE_style: {
46
45
  margin: '-2px 0'
@@ -50,7 +49,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
50
49
  primaryColor: primaryColor,
51
50
  secondaryColor: secondaryColor
52
51
  })), /*#__PURE__*/React.createElement(Stack, {
53
- gap: "sp-100",
52
+ gap: "scale.100",
54
53
  testId: testId && `${testId}--content`
55
54
  }, !!title && /*#__PURE__*/React.createElement(Heading, {
56
55
  as: "h2",
@@ -59,9 +58,9 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
59
58
  flexWrap: "wrap",
60
59
  testId: testId && `${testId}--actions`,
61
60
  divider: /*#__PURE__*/React.createElement(Text, {
62
- color: ['subtle', N500]
61
+ color: "subtle"
63
62
  }, "\xB7"),
64
- gap: "sp-75"
63
+ gap: "scale.075"
65
64
  }, actionsArray))));
66
65
  });
67
66
  const appearanceMap = {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "6.3.1",
3
+ "version": "6.3.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/section-message.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import React, { forwardRef } from 'react';
3
3
  import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
4
4
  import Heading from '@atlaskit/heading';
5
- import { N500 } from '@atlaskit/theme/colors';
6
5
  import { getAppearanceIconStyles } from './internal/appearance-icon';
7
6
 
8
7
  /**
@@ -32,8 +31,8 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
32
31
  var actionsArray = React.Children.toArray(actionElements);
33
32
  return /*#__PURE__*/React.createElement(Box, {
34
33
  as: "section",
35
- backgroundColor: [appearanceMap[appearance], secondaryColor],
36
- padding: "sp-200",
34
+ backgroundColor: appearanceMap[appearance],
35
+ padding: "scale.200",
37
36
  borderRadius: "normal",
38
37
  testId: testId,
39
38
  ref: ref,
@@ -41,7 +40,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
41
40
  wordBreak: 'break-word'
42
41
  }
43
42
  }, /*#__PURE__*/React.createElement(Inline, {
44
- gap: "sp-200"
43
+ gap: "scale.200"
45
44
  }, /*#__PURE__*/React.createElement(Box, {
46
45
  UNSAFE_style: {
47
46
  margin: '-2px 0'
@@ -51,7 +50,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
51
50
  primaryColor: primaryColor,
52
51
  secondaryColor: secondaryColor
53
52
  })), /*#__PURE__*/React.createElement(Stack, {
54
- gap: "sp-100",
53
+ gap: "scale.100",
55
54
  testId: testId && "".concat(testId, "--content")
56
55
  }, !!title && /*#__PURE__*/React.createElement(Heading, {
57
56
  as: "h2",
@@ -60,9 +59,9 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
60
59
  flexWrap: "wrap",
61
60
  testId: testId && "".concat(testId, "--actions"),
62
61
  divider: /*#__PURE__*/React.createElement(Text, {
63
- color: ['subtle', N500]
62
+ color: "subtle"
64
63
  }, "\xB7"),
65
- gap: "sp-75"
64
+ gap: "scale.075"
66
65
  }, actionsArray))));
67
66
  });
68
67
  var appearanceMap = {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "6.3.1",
3
+ "version": "6.3.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/internal/appearance-icon.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare const appearanceIconSchema: {
9
9
  [key in Appearance]: AppearanceIconSchema;
10
10
  };
11
11
  export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
12
- Icon: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
12
+ Icon: "symbol" | "object" | "head" | "link" | "source" | "body" | "path" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
13
13
  backgroundColor: string;
14
14
  primaryIconColor: string;
15
15
  };
package/dist/types-ts4.0/internal/appearance-icon.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare const appearanceIconSchema: {
9
9
  [key in Appearance]: AppearanceIconSchema;
10
10
  };
11
11
  export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
12
- Icon: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
12
+ Icon: "symbol" | "object" | "head" | "link" | "source" | "body" | "path" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
13
13
  backgroundColor: string;
14
14
  primaryIconColor: string;
15
15
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "6.3.1",
3
+ "version": "6.3.2",
4
4
  "description": "A section message is used to alert users to a particular section of the screen.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,9 +38,9 @@
38
38
  ".": "./src/index.tsx"
39
39
  },
40
40
  "dependencies": {
41
- "@atlaskit/button": "^16.3.0",
41
+ "@atlaskit/button": "^16.4.0",
42
42
  "@atlaskit/codemod-utils": "^4.1.0",
43
- "@atlaskit/ds-explorations": "^0.1.0",
43
+ "@atlaskit/ds-explorations": "^1.0.0",
44
44
  "@atlaskit/heading": "^0.1.13",
45
45
  "@atlaskit/icon": "^21.11.0",
46
46
  "@atlaskit/theme": "^12.2.0",
@@ -55,7 +55,7 @@
55
55
  "@atlaskit/code": "^14.4.0",
56
56
  "@atlaskit/docs": "*",
57
57
  "@atlaskit/ds-lib": "^2.1.0",
58
- "@atlaskit/range": "^6.1.0",
58
+ "@atlaskit/range": "^7.0.0",
59
59
  "@atlaskit/ssr": "*",
60
60
  "@atlaskit/visual-regression": "*",
61
61
  "@atlaskit/webdriver-runner": "*",
@@ -82,7 +82,7 @@
82
82
  ],
83
83
  "analytics": "analytics-next",
84
84
  "styling": [
85
- "static"
85
+ "emotion"
86
86
  ],
87
87
  "design-tokens": "spacing",
88
88
  "theming": "tokens",
package/report.api.md CHANGED
@@ -1,6 +1,10 @@
1
- ## API Report File for "@atlaskit/section-message".
1
+ ## API Report File for "@atlaskit/section-message"
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ <!--
6
+ Generated API Report version: 2.0
7
+ -->
4
8
 
5
9
  [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
6
10
 
@@ -9,109 +13,44 @@ import { default as React_2 } from 'react';
9
13
  import type { ReactElement } from 'react';
10
14
  import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
11
15
 
12
- /**
13
- * Appearance determines the icon and background color pairing indicating the message type
14
- */
15
- export declare type Appearance =
16
+ // @public
17
+ export type Appearance =
16
18
  | 'information'
17
19
  | 'warning'
18
20
  | 'error'
19
21
  | 'success'
20
22
  | 'discovery';
21
23
 
22
- /**
23
- * __Section message__
24
- *
25
- * A section message is used to alert users to a particular section of the screen.
26
- *
27
- * - [Examples](https://atlassian.design/components/section-message/examples)
28
- * - [Code](https://atlassian.design/components/section-message/code)
29
- * - [Usage](https://atlassian.design/components/section-message/usage)
30
- */
31
- declare const SectionMessage: React_2.ForwardRefExoticComponent<
24
+ // @public
25
+ const SectionMessage: React_2.ForwardRefExoticComponent<
32
26
  SectionMessageProps & React_2.RefAttributes<HTMLElement>
33
27
  >;
34
28
  export default SectionMessage;
35
29
 
36
- /**
37
- * __Section message action__
38
- *
39
- * A section message action is designed to work with the `action` prop from
40
- * `SectionMessage`. It renders either a button or a link depending on whether
41
- * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
42
- *
43
- * - [Examples](https://atlassian.design/components/section-message/examples#actions)
44
- */
45
- export declare const SectionMessageAction: React_2.NamedExoticComponent<SectionMessageActionProps>;
30
+ // @public
31
+ export const SectionMessageAction: React_2.NamedExoticComponent<SectionMessageActionProps>;
46
32
 
47
- export declare interface SectionMessageActionProps {
48
- /**
49
- * The text that needs to be displayed for section message action.
50
- */
33
+ // @public (undocumented)
34
+ export interface SectionMessageActionProps {
51
35
  children: React.ReactNode;
52
- /**
53
- * A custom link component. This prop is designed to allow a custom link
54
- * component to be passed to the rendered link button. The
55
- * intended use-case is for when a custom router component such as react router
56
- * is being used within the application.
57
- *
58
- * This component will only be used if a href prop is passed.
59
- */
36
+ href?: string;
60
37
  linkComponent?: React.ComponentType<any>;
61
- /**
62
- * Click handler which will be attached to the rendered link button. The second argument can be used to
63
- * track analytics data. See the tutorial in the analytics-next package for details.
64
- */
65
38
  onClick?: (
66
39
  e: React.MouseEvent<HTMLElement>,
67
40
  analyticsEvent: UIAnalyticsEvent,
68
41
  ) => void;
69
- /**
70
- * The URL that the rendered link button will point to.
71
- */
72
- href?: string;
73
- /**
74
- * A `testId` prop is a unique string that appears as a data attribute `data-testid`
75
- * in the rendered code, serving as a hook for automated tests.
76
- */
77
42
  testId?: string;
78
43
  }
79
44
 
80
- export declare interface SectionMessageProps {
81
- /**
82
- * The appearance styling to use for the section message.
83
- */
45
+ // @public (undocumented)
46
+ export interface SectionMessageProps {
47
+ actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
84
48
  appearance?: Appearance;
85
- /**
86
- * The main content of the section message. This accepts a react node, although
87
- * we recommend that this should be a paragraph.
88
- */
89
49
  children: React.ReactNode;
90
- /**
91
- * The heading of the section message.
92
- */
93
- title?: string;
94
- /**
95
- * Actions for the user to take after reading the section message. Accepts a ReactElement
96
- * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
97
- * Middle dots are automatically added between multiple link buttons, so no elements
98
- * should be present between multiple actions.
99
- *
100
- * In general, avoid using more than two actions.
101
- */
102
- actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
103
- /**
104
- * An Icon component to be rendered instead of the default icon for the component.
105
- * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
106
- * to see how to provide this icon.
107
- */
108
50
  icon?: React.ElementType;
109
- /**
110
- * A `testId` prop is a unique string that appears as a data attribute `data-testid`
111
- * in the rendered code, serving as a hook for automated tests.
112
- */
113
51
  testId?: string;
52
+ title?: string;
114
53
  }
115
54
 
116
- export {};
55
+ // (No @packageDocumentation comment for this package)
117
56
  ```