@atlaskit/media-ui 22.3.4 → 22.3.5

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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/MediaInlineCard/Frame/styled.js +12 -4
  3. package/dist/cjs/MediaInlineCard/IconAndTitleLayout/index.js +3 -4
  4. package/dist/cjs/customMediaPlayer/index.js +1 -1
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/MediaInlineCard/Frame/styled.js +14 -6
  7. package/dist/es2019/MediaInlineCard/IconAndTitleLayout/index.js +3 -4
  8. package/dist/es2019/customMediaPlayer/index.js +1 -1
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/MediaInlineCard/Frame/styled.js +13 -5
  11. package/dist/esm/MediaInlineCard/IconAndTitleLayout/index.js +3 -4
  12. package/dist/esm/customMediaPlayer/index.js +1 -1
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/media-ui
2
2
 
3
+ ## 22.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`b8341366c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8341366c9a) - [ux] Add dark mode support for media inline card.
8
+
3
9
  ## 22.3.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/MediaInlineCard/Frame/styled.js CHANGED
@@ -9,9 +9,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
  var _constants = require("@atlaskit/theme/constants");
12
+ var _components = require("@atlaskit/theme/components");
12
13
  var _templateObject;
13
- var FONT_COLOR = "var(--ds-text, ".concat(_colors.N900, ")");
14
- var BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(_colors.N30A, ")");
15
14
  var selected = "\n cursor: pointer;\n box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), ";\n outline: none;\n user-select: none;\n border-color: transparent;\n &, :hover, :focus, :active {\n text-decoration: none;\n }\n");
16
15
  var isSelected = function isSelected(_ref) {
17
16
  var isSelected = _ref.isSelected;
@@ -34,7 +33,16 @@ var isSelected = function isSelected(_ref) {
34
33
  // NB: `padding` consistent with @mentions.
35
34
  // NB: `display: inline` required for `box-decoration-break` to work.
36
35
  // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
37
- var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n line-height: 16px;\n padding: 2px 4px 2px 4px;\n box-decoration-break: clone;\n display: inline;\n border-radius: ", "px;\n color: ", ";\n background-color: ", ";\n ", ";\n transition: 0.1s all ease-in-out;\n -moz-user-select: none;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), (0, _constants.borderRadius)(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
36
+ var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n line-height: 16px;\n padding: 2px 4px 2px 4px;\n box-decoration-break: clone;\n display: inline;\n border-radius: ", "px;\n color: ", ";\n background-color: ", ";\n ", ";\n transition: 0.1s all ease-in-out;\n -moz-user-select: none;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
37
+ light: "var(--ds-text, ".concat(_colors.N900, ")"),
38
+ dark: "var(--ds-text, ".concat(_colors.DN600, ")")
39
+ }), (0, _components.themed)({
40
+ light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
41
+ dark: "var(--ds-background-neutral, ".concat(_colors.DN80, ")")
42
+ }), function (props) {
38
43
  return isSelected(props);
39
- }, "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"));
44
+ }, (0, _components.themed)({
45
+ light: "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"),
46
+ dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN60, ")")
47
+ }));
40
48
  exports.Wrapper = Wrapper;
package/dist/cjs/MediaInlineCard/IconAndTitleLayout/index.js CHANGED
@@ -15,7 +15,6 @@ var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
15
15
  var _Icon = require("../Icon");
16
16
  var _styled = require("./styled");
17
17
  var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
18
- var _colors = require("@atlaskit/theme/colors");
19
18
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
20
19
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
21
20
  var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
@@ -94,9 +93,9 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
94
93
  _this$props2$testId = _this$props2.testId,
95
94
  testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
96
95
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
97
- style: {
98
- color: titleColor || "var(--ds-text, ".concat(_colors.N900, ")")
99
- }
96
+ style: titleColor ? {
97
+ color: titleColor
98
+ } : undefined
100
99
  }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, null, title)));
101
100
  }
102
101
  }]);
package/dist/cjs/customMediaPlayer/index.js CHANGED
@@ -50,7 +50,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
50
50
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
51
51
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
52
52
  var packageName = "@atlaskit/media-ui";
53
- var packageVersion = "22.3.4";
53
+ var packageVersion = "22.3.5";
54
54
  var MEDIUM_VIDEO_MAX_WIDTH = 400;
55
55
  var SMALL_VIDEO_MAX_WIDTH = 160;
56
56
  var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.3.4",
3
+ "version": "22.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/MediaInlineCard/Frame/styled.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import styled from '@emotion/styled';
2
- import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
2
+ import { B300, N30A, N40A, DN80, DN60, N900, DN600 } from '@atlaskit/theme/colors';
3
3
  import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
4
- const FONT_COLOR = `var(--ds-text, ${N900})`;
5
- const BACKGROUND_COLOR = `var(--ds-background-neutral, ${N30A})`;
4
+ import { themed } from '@atlaskit/theme/components';
6
5
  const selected = `
7
6
  cursor: pointer;
8
7
  box-shadow: 0 0 0 1px ${`var(--ds-border-selected, ${B300})`};
@@ -41,14 +40,23 @@ export const Wrapper = styled.span`
41
40
  box-decoration-break: clone;
42
41
  display: inline;
43
42
  border-radius: ${akBorderRadius()}px;
44
- color: ${FONT_COLOR};
45
- background-color: ${BACKGROUND_COLOR};
43
+ color: ${themed({
44
+ light: `var(--ds-text, ${N900})`,
45
+ dark: `var(--ds-text, ${DN600})`
46
+ })};
47
+ background-color: ${themed({
48
+ light: `var(--ds-background-neutral, ${N30A})`,
49
+ dark: `var(--ds-background-neutral, ${DN80})`
50
+ })};
46
51
  ${props => isSelected(props)};
47
52
  transition: 0.1s all ease-in-out;
48
53
  -moz-user-select: none;
49
54
  cursor: pointer;
50
55
 
51
56
  &:hover {
52
- background-color: ${`var(--ds-background-neutral-hovered, ${N40A})`};
57
+ background-color: ${themed({
58
+ light: `var(--ds-background-neutral-hovered, ${N40A})`,
59
+ dark: `var(--ds-background-neutral-hovered, ${DN60})`
60
+ })};
53
61
  }
54
62
  `;
package/dist/es2019/MediaInlineCard/IconAndTitleLayout/index.js CHANGED
@@ -3,7 +3,6 @@ import ImageLoader from 'react-render-image';
3
3
  import { Icon } from '../Icon';
4
4
  import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
5
5
  import LinkIcon from '@atlaskit/icon/glyph/link';
6
- import { N900 } from '@atlaskit/theme/colors';
7
6
  export class IconAndTitleLayout extends React.Component {
8
7
  renderAtlaskitIcon() {
9
8
  const {
@@ -69,9 +68,9 @@ export class IconAndTitleLayout extends React.Component {
69
68
  testId = 'media-inline-card-icon-and-title'
70
69
  } = this.props;
71
70
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
72
- style: {
73
- color: titleColor || `var(--ds-text, ${N900})`
74
- }
71
+ style: titleColor ? {
72
+ color: titleColor
73
+ } : undefined
75
74
  }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
76
75
  }
77
76
  }
package/dist/es2019/customMediaPlayer/index.js CHANGED
@@ -34,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
34
34
  import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
35
35
  import { getControlsWrapperClassName } from './getControlsWrapperClassName';
36
36
  const packageName = "@atlaskit/media-ui";
37
- const packageVersion = "22.3.4";
37
+ const packageVersion = "22.3.5";
38
38
  const MEDIUM_VIDEO_MAX_WIDTH = 400;
39
39
  const SMALL_VIDEO_MAX_WIDTH = 160;
40
40
  const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.3.4",
3
+ "version": "22.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/MediaInlineCard/Frame/styled.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
2
  var _templateObject;
3
3
  import styled from '@emotion/styled';
4
- import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
4
+ import { B300, N30A, N40A, DN80, DN60, N900, DN600 } from '@atlaskit/theme/colors';
5
5
  import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
6
- var FONT_COLOR = "var(--ds-text, ".concat(N900, ")");
7
- var BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(N30A, ")");
6
+ import { themed } from '@atlaskit/theme/components';
8
7
  var selected = "\n cursor: pointer;\n box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")"), ";\n outline: none;\n user-select: none;\n border-color: transparent;\n &, :hover, :focus, :active {\n text-decoration: none;\n }\n");
9
8
  var isSelected = function isSelected(_ref) {
10
9
  var isSelected = _ref.isSelected;
@@ -27,6 +26,15 @@ var isSelected = function isSelected(_ref) {
27
26
  // NB: `padding` consistent with @mentions.
28
27
  // NB: `display: inline` required for `box-decoration-break` to work.
29
28
  // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
30
- export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n line-height: 16px;\n padding: 2px 4px 2px 4px;\n box-decoration-break: clone;\n display: inline;\n border-radius: ", "px;\n color: ", ";\n background-color: ", ";\n ", ";\n transition: 0.1s all ease-in-out;\n -moz-user-select: none;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), akBorderRadius(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
29
+ export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n line-height: 16px;\n padding: 2px 4px 2px 4px;\n box-decoration-break: clone;\n display: inline;\n border-radius: ", "px;\n color: ", ";\n background-color: ", ";\n ", ";\n transition: 0.1s all ease-in-out;\n -moz-user-select: none;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), akBorderRadius(), themed({
30
+ light: "var(--ds-text, ".concat(N900, ")"),
31
+ dark: "var(--ds-text, ".concat(DN600, ")")
32
+ }), themed({
33
+ light: "var(--ds-background-neutral, ".concat(N30A, ")"),
34
+ dark: "var(--ds-background-neutral, ".concat(DN80, ")")
35
+ }), function (props) {
31
36
  return isSelected(props);
32
- }, "var(--ds-background-neutral-hovered, ".concat(N40A, ")"));
37
+ }, themed({
38
+ light: "var(--ds-background-neutral-hovered, ".concat(N40A, ")"),
39
+ dark: "var(--ds-background-neutral-hovered, ".concat(DN60, ")")
40
+ }));
package/dist/esm/MediaInlineCard/IconAndTitleLayout/index.js CHANGED
@@ -10,7 +10,6 @@ import ImageLoader from 'react-render-image';
10
10
  import { Icon } from '../Icon';
11
11
  import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
12
12
  import LinkIcon from '@atlaskit/icon/glyph/link';
13
- import { N900 } from '@atlaskit/theme/colors';
14
13
  export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
15
14
  _inherits(IconAndTitleLayout, _React$Component);
16
15
  var _super = _createSuper(IconAndTitleLayout);
@@ -87,9 +86,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
87
86
  _this$props2$testId = _this$props2.testId,
88
87
  testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
89
88
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
90
- style: {
91
- color: titleColor || "var(--ds-text, ".concat(N900, ")")
92
- }
89
+ style: titleColor ? {
90
+ color: titleColor
91
+ } : undefined
93
92
  }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
94
93
  }
95
94
  }]);
package/dist/esm/customMediaPlayer/index.js CHANGED
@@ -44,7 +44,7 @@ import Tooltip from '@atlaskit/tooltip';
44
44
  import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
45
45
  import { getControlsWrapperClassName } from './getControlsWrapperClassName';
46
46
  var packageName = "@atlaskit/media-ui";
47
- var packageVersion = "22.3.4";
47
+ var packageVersion = "22.3.5";
48
48
  var MEDIUM_VIDEO_MAX_WIDTH = 400;
49
49
  var SMALL_VIDEO_MAX_WIDTH = 160;
50
50
  var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.3.4",
3
+ "version": "22.3.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.3.4",
3
+ "version": "22.3.5",
4
4
  "description": "Includes common components and utilities used by other media packages",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"