@atlaskit/section-message 10.2.6 → 10.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/section-message
 
+## 10.3.0
+
+### Minor Changes
+
+- [`c54a2220ddbac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c54a2220ddbac) -
+  Add iconLabel for localized status icon labels
+
 ## 10.2.6
 
 ### Patch Changes

package/dist/cjs/internal/appearance-icon.js

@@ -41,14 +41,14 @@ var appearanceIconSchema = {
     primaryIconColor: "var(--ds-icon-discovery, #AF59E1)"
   }
 };
-function getAppearanceIconStyles(appearance, icon) {
+function getAppearanceIconStyles(appearance, icon, iconLabel) {
   var appearanceIconStyles = appearanceIconSchema[appearance] || appearanceIconSchema.information;
   var AppearanceIcon = function AppearanceIcon(_ref) {
     var primaryColor = _ref.primaryColor;
     return /*#__PURE__*/_react.default.createElement(appearanceIconStyles.Icon, {
       color: primaryColor,
       spacing: "spacious",
-      label: appearance
+      label: iconLabel !== null && iconLabel !== void 0 ? iconLabel : appearance
     });
   };
   var Icon = icon || AppearanceIcon;

package/dist/cjs/section-message-action.js

@@ -1,4 +1,4 @@
-/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -14,7 +14,8 @@ var _runtime = require("@compiled/react/runtime");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _css = require("@atlaskit/css");
 var _link = _interopRequireDefault(require("@atlaskit/link/link"));
-var _compiled = require("@atlaskit/primitives/compiled");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _pressable = require("@atlaskit/primitives/compiled/pressable");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   common: "_11c8fhey",
@@ -51,14 +52,14 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       }, children));
     }
     if (onClick) {
-      return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+      return /*#__PURE__*/React.createElement(_pressable.Pressable, {
         testId: testId,
         onClick: onClick,
         xcss: (0, _css.cx)(styles.common, styles.pressable),
         ref: ref
       }, children);
     }
-    return /*#__PURE__*/React.createElement(_compiled.Box, {
+    return /*#__PURE__*/React.createElement(_box.Box, {
       as: "span",
       testId: testId,
       xcss: styles.common,

package/dist/cjs/section-message.js

@@ -1,4 +1,4 @@
-/* section-message.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,7 +15,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
-var _compiled = require("@atlaskit/primitives/compiled");
+var _inline = require("@atlaskit/primitives/compiled/inline");
+var _stack = require("@atlaskit/primitives/compiled/stack");
 var _appearanceIcon = require("./internal/appearance-icon");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var sectionMessageStyles = {
@@ -52,6 +53,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$headingLevel = _ref.headingLevel,
     headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
+    iconLabel = _ref.iconLabel,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
     testId = _ref.testId;
@@ -63,7 +65,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onDismiss === null || onDismiss === void 0 || onDismiss();
     setDismissed(true);
   }, [onDismiss]);
-  var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon),
+  var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon, iconLabel),
     primaryColor = _getAppearanceIconSty.primaryIconColor,
     secondaryColor = _getAppearanceIconSty.backgroundColor,
     Icon = _getAppearanceIconSty.Icon;
@@ -73,7 +75,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId,
     ref: ref,
     className: (0, _runtime.ax)([sectionMessageStyles.container, appearanceStyles[appearance]])
-  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
+  }, /*#__PURE__*/React.createElement(_inline.Inline, {
     space: "space.200",
     alignBlock: "stretch"
   }, /*#__PURE__*/React.createElement("div", {
@@ -86,7 +88,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     color: primaryColor,
     spacing: "spacious"
-  })), /*#__PURE__*/React.createElement(_compiled.Stack, {
+  })), /*#__PURE__*/React.createElement(_stack.Stack, {
     space: "space.100",
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
@@ -95,7 +97,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([sectionMessageStyles.content])
-  }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(_compiled.Inline, {
+  }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(_inline.Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),
     separator: "\xB7",
@@ -109,7 +111,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return (
       /*#__PURE__*/
       // Only use a listitem role if more than one action is present
-      React.createElement(_compiled.Inline, {
+      React.createElement(_inline.Inline, {
         role: actionsArray.length > 1 ? 'listitem' : undefined,
         key: id
       }, action)

package/dist/es2019/internal/appearance-icon.js

@@ -31,14 +31,14 @@ const appearanceIconSchema = {
     primaryIconColor: "var(--ds-icon-discovery, #AF59E1)"
   }
 };
-export function getAppearanceIconStyles(appearance, icon) {
+export function getAppearanceIconStyles(appearance, icon, iconLabel) {
   const appearanceIconStyles = appearanceIconSchema[appearance] || appearanceIconSchema.information;
   const AppearanceIcon = ({
     primaryColor
   }) => /*#__PURE__*/React.createElement(appearanceIconStyles.Icon, {
     color: primaryColor,
     spacing: "spacious",
-    label: appearance
+    label: iconLabel !== null && iconLabel !== void 0 ? iconLabel : appearance
   });
   const Icon = icon || AppearanceIcon;
   return {

package/dist/es2019/section-message-action.js

@@ -1,4 +1,4 @@
-/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./section-message-action.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -6,7 +6,8 @@ import { forwardRef, Fragment, memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
 import Link from '@atlaskit/link/link';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Pressable } from '@atlaskit/primitives/compiled/pressable';
 const styles = {
   common: "_11c8fhey",
   anchor: "_k48pi7a9",

package/dist/es2019/section-message.js

@@ -1,4 +1,4 @@
-/* section-message.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./section-message.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -6,7 +6,8 @@ import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
 import IconButton from '@atlaskit/button/icon/button';
 import Heading from '@atlaskit/heading/heading';
 import CrossIcon from '@atlaskit/icon/core/cross';
-import { Inline, Stack } from '@atlaskit/primitives/compiled';
+import { Inline } from '@atlaskit/primitives/compiled/inline';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 const sectionMessageStyles = {
   container: "_2rko1mok _1rjcpxbi _18zrpxbi _1nmz1hna",
@@ -40,6 +41,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(({
   title,
   headingLevel = 'h2',
   icon,
+  iconLabel,
   isDismissible,
   onDismiss,
   testId
@@ -53,7 +55,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(({
     primaryIconColor: primaryColor,
     backgroundColor: secondaryColor,
     Icon
-  } = getAppearanceIconStyles(appearance, icon);
+  } = getAppearanceIconStyles(appearance, icon, iconLabel);
   const actionElements = actions && actions.type === Fragment ? actions.props.children : actions;
   const actionsArray = Children.toArray(actionElements);
   return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {

package/dist/esm/internal/appearance-icon.js

@@ -34,14 +34,14 @@ var appearanceIconSchema = {
     primaryIconColor: "var(--ds-icon-discovery, #AF59E1)"
   }
 };
-export function getAppearanceIconStyles(appearance, icon) {
+export function getAppearanceIconStyles(appearance, icon, iconLabel) {
   var appearanceIconStyles = appearanceIconSchema[appearance] || appearanceIconSchema.information;
   var AppearanceIcon = function AppearanceIcon(_ref) {
     var primaryColor = _ref.primaryColor;
     return /*#__PURE__*/React.createElement(appearanceIconStyles.Icon, {
       color: primaryColor,
       spacing: "spacious",
-      label: appearance
+      label: iconLabel !== null && iconLabel !== void 0 ? iconLabel : appearance
     });
   };
   var Icon = icon || AppearanceIcon;

package/dist/esm/section-message-action.js

@@ -1,4 +1,4 @@
-/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message-action.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./section-message-action.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -6,7 +6,8 @@ import { forwardRef, Fragment, memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
 import Link from '@atlaskit/link/link';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Pressable } from '@atlaskit/primitives/compiled/pressable';
 var styles = {
   common: "_11c8fhey",
   anchor: "_k48pi7a9",

package/dist/esm/section-message.js

@@ -1,4 +1,4 @@
-/* section-message.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* section-message.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./section-message.compiled.css";
 import * as React from 'react';
@@ -7,7 +7,8 @@ import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
 import IconButton from '@atlaskit/button/icon/button';
 import Heading from '@atlaskit/heading/heading';
 import CrossIcon from '@atlaskit/icon/core/cross';
-import { Inline, Stack } from '@atlaskit/primitives/compiled';
+import { Inline } from '@atlaskit/primitives/compiled/inline';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 var sectionMessageStyles = {
   container: "_2rko1mok _1rjcpxbi _18zrpxbi _1nmz1hna",
@@ -43,6 +44,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$headingLevel = _ref.headingLevel,
     headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
+    iconLabel = _ref.iconLabel,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
     testId = _ref.testId;
@@ -54,7 +56,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDismiss === null || onDismiss === void 0 || onDismiss();
     setDismissed(true);
   }, [onDismiss]);
-  var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon),
+  var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon, iconLabel),
     primaryColor = _getAppearanceIconSty.primaryIconColor,
     secondaryColor = _getAppearanceIconSty.backgroundColor,
     Icon = _getAppearanceIconSty.Icon;

package/dist/types/internal/appearance-icon.d.ts

@@ -1,6 +1,6 @@
 import React, { type ComponentType } from 'react';
 import type { Appearance, SectionMessageProps } from '../types';
-export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
+export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon'], iconLabel: SectionMessageProps['iconLabel']): {
     Icon: React.ElementType<any, keyof React.JSX.IntrinsicElements> | (({ primaryColor }: {
         primaryColor: string;
     }) => React.JSX.Element);

package/dist/types/types.d.ts

@@ -39,6 +39,10 @@ interface BaseSectionMessageProps {
      * to see how to provide this icon.
      */
     icon?: React.ElementType;
+    /**
+     * Accessible label for the status icon. Use your internationalization library to provide a localized string.
+     */
+    iconLabel?: string;
     /**
      * Displays a dismiss button, that allows the user to dismiss the message.
      * It will be removed from the DOM immediately and will not be re-rendered.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "10.2.6",
+	"version": "10.3.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,15 +34,15 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^25.4.0",
+		"@atlaskit/button": "^25.8.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.7.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^20.0.0",
+		"@atlaskit/tokens": "^20.11.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -52,11 +52,11 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/analytics-next": "^12.5.0",
+		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/code": "^20.0.0",
-		"@atlaskit/docs": "^12.2.0",
+		"@atlaskit/docs": "^12.3.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/form": "^18.0.0",
+		"@atlaskit/form": "^18.3.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",