@atlaskit/smart-card 43.20.1 → 43.20.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 43.20.2
+
+### Patch Changes
+
+- [`370c2ca23ca71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/370c2ca23ca71) -
+  NAVX-2811 adding alt text to embed modal icon
+- [`bdcd4b4374105`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bdcd4b4374105) -
+  Minor improvements to how styles are applied.
+- Updated dependencies
+
 ## 43.20.1
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js

@@ -12,12 +12,12 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _ExpandedFrame = require("../../components/ExpandedFrame");
 var _ImageIcon = require("../../components/ImageIcon");
 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 containerStyles = null;
 var contentStyles = null;
-var descriptionStyles = null;
 var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
@@ -91,9 +91,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, image, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), /*#__PURE__*/_react.default.createElement("span", {
-    "data-testid": "".concat(testId, "-unresolved-description"),
-    className: (0, _runtime.ax)(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    align: "center",
+    testId: "".concat(testId, "-unresolved-description")
   }, description), button)));
 };
 var _default = exports.default = UnresolvedView;

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -12,12 +12,20 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _loadingSkeleton = require("../loading-skeleton");
 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 = {
   roundImg: "_2rko1rr0"
 };
+var messages = (0, _reactIntlNext.defineMessages)({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
@@ -34,6 +42,8 @@ var ImageIcon = function ImageIcon(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
 
   // If url changes, reset state
   (0, _react.useEffect)(function () {
@@ -67,7 +77,7 @@ var ImageIcon = function ImageIcon(_ref) {
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": "".concat(testId, "-image"),
-        alt: "",
+        alt: (0, _platformFeatureFlags.fg)('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width: width,
           height: height

package/dist/cjs/view/LinkUrl/index.js

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -4,11 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import Heading from '@atlaskit/heading';
 import LinkGlyph from '@atlaskit/icon/core/link';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
 const containerStyles = null;
 const contentStyles = null;
-const descriptionStyles = null;
 const imageStyles = null;
 const UnresolvedView = ({
   button,
@@ -83,9 +83,9 @@ const UnresolvedView = ({
   }, image, /*#__PURE__*/React.createElement(Heading, {
     size: "large",
     testId: `${testId}-unresolved-title`
-  }, title), /*#__PURE__*/React.createElement("span", {
-    "data-testid": `${testId}-unresolved-description`,
-    className: ax(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    align: "center",
+    testId: `${testId}-unresolved-description`
   }, description), button)));
 };
 export default UnresolvedView;

package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js

@@ -3,11 +3,19 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import ImageLoader from 'react-render-image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { LoadingSkeleton } from '../loading-skeleton';
 const styles = {
   roundImg: "_2rko1rr0"
 };
+const messages = defineMessages({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 const ImageIcon = ({
   defaultIcon,
   testId,
@@ -20,6 +28,9 @@ const ImageIcon = ({
   hideLoadingSkeleton = false
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
 
   // If url changes, reset state
   useEffect(() => {
@@ -51,7 +62,7 @@ const ImageIcon = ({
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": `${testId}-image`,
-        alt: "",
+        alt: fg('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width,
           height

package/dist/es2019/view/LinkUrl/index.js

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -4,11 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import Heading from '@atlaskit/heading';
 import LinkGlyph from '@atlaskit/icon/core/link';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
 var containerStyles = null;
 var contentStyles = null;
-var descriptionStyles = null;
 var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
@@ -82,9 +82,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, image, /*#__PURE__*/React.createElement(Heading, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), /*#__PURE__*/React.createElement("span", {
-    "data-testid": "".concat(testId, "-unresolved-description"),
-    className: ax(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    align: "center",
+    testId: "".concat(testId, "-unresolved-description")
   }, description), button)));
 };
 export default UnresolvedView;

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -4,11 +4,19 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import ImageLoader from 'react-render-image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { LoadingSkeleton } from '../loading-skeleton';
 var styles = {
   roundImg: "_2rko1rr0"
 };
+var messages = defineMessages({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
@@ -25,6 +33,8 @@ var ImageIcon = function ImageIcon(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
 
   // If url changes, reset state
   useEffect(function () {
@@ -58,7 +68,7 @@ var ImageIcon = function ImageIcon(_ref) {
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": "".concat(testId, "-image"),
-        alt: "",
+        alt: fg('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width: width,
           height: height

package/dist/esm/view/LinkUrl/index.js

@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.20.1",
+	"version": "43.20.2",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -240,6 +240,9 @@
 		"navx-2816-a11y-fix-smart-links-headings": {
 			"type": "boolean"
 		},
+		"navx-2811-smart-link-a11y-image-alt": {
+			"type": "boolean"
+		},
 		"navx-2185-smart-link-preview-modal-icon-role": {
 			"type": "boolean"
 		}