@atlaskit/inline-message 11.1.4

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,11 @@
+# Inline message
+
+An inline message lets users know when important information is available or when an action is required.
+
+## Installation
+
+yarn add @atlaskit/inline-message
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/inline-message).

package/__perf__/default.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import InlineMessage from '../src';
+
+export default () => (
+  <div>
+    <InlineMessage
+      title="Inline Message Title Example"
+      secondaryText="Secondary Text"
+    >
+      <p>Primary and secondary text dialog</p>
+    </InlineMessage>
+  </div>
+);

package/constants/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/inline-message/constants",
+  "main": "../dist/cjs/constants.js",
+  "module": "../dist/esm/constants.js",
+  "module:es2019": "../dist/es2019/constants.js",
+  "types": "../dist/types/constants.d.ts"
+}

package/dist/cjs/components/inline-message/index.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("../../constants");
+
+var _messageIcon = _interopRequireDefault(require("../message-icon"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+var buttonContentsStyles = (0, _core.css)({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+var titleStyles = (0, _core.css)({
+  padding: "0 ".concat(_constants.itemSpacing, "px"),
+  fontWeight: 500
+});
+var textStyles = (0, _core.css)({
+  padding: "0 ".concat(_constants.itemSpacing, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var rootStyles = (0, _core.css)({
+  display: 'inline-block',
+  maxWidth: '100%',
+  '&:focus': {
+    outline: '1px solid'
+  },
+  '&:hover': {
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '[data-ds--inline-message--icon]': {
+      color: 'var(--icon-accent-color)'
+    },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '[data-ds--inline-message--button]': {
+      textDecoration: 'underline'
+    }
+  }
+});
+var titleColor = (0, _components.themed)({
+  light: colors.N600,
+  dark: colors.DN600
+});
+var textColor = (0, _components.themed)({
+  light: colors.N300,
+  dark: colors.DN100
+});
+var rootFocusColor = (0, _components.themed)('appearance', {
+  connectivity: {
+    light: colors.B500,
+    dark: colors.B200
+  },
+  confirmation: {
+    light: colors.G400,
+    dark: colors.G400
+  },
+  info: {
+    light: colors.P500,
+    dark: colors.P300
+  },
+  warning: {
+    light: colors.Y500,
+    dark: colors.Y500
+  },
+  error: {
+    light: colors.R500,
+    dark: colors.R500
+  }
+});
+var iconColor = (0, _components.themed)('appearance', {
+  connectivity: {
+    light: colors.B300,
+    dark: colors.B75
+  },
+  confirmation: {
+    light: colors.G200,
+    dark: colors.G200
+  },
+  info: {
+    light: colors.P200,
+    dark: colors.P200
+  },
+  warning: {
+    light: colors.Y200,
+    dark: colors.Y200
+  },
+  error: {
+    light: colors.R300,
+    dark: colors.R300
+  }
+});
+/**
+ * __Inline message__
+ *
+ * An inline message lets users know when important information is available or when an action is required.
+ *
+ * - [Examples](https://atlassian.design/components/inline-message/examples)
+ * - [Code](https://atlassian.design/components/inline-message/code)
+ * - [Usage](https://atlassian.design/components/inline-message/usage)
+ *
+ * @example
+ *
+ * ```jsx
+ * const Component = () => (
+ *   <InlineMessage
+ *    title="Inline Message Title Example"
+ *    secondaryText="Secondary Text"
+ *   >
+ *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
+ *   </InlineMessage>
+ * );
+ * ```
+ */
+
+var InlineMessage = function InlineMessage(_ref) {
+  var _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+      _ref$secondaryText = _ref.secondaryText,
+      secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'connectivity' : _ref$type,
+      children = _ref.children,
+      testId = _ref.testId,
+      iconLabel = _ref.iconLabel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var toggleDialog = (0, _react.useCallback)(function () {
+    setIsOpen(function (oldState) {
+      return !oldState;
+    });
+  }, [setIsOpen]);
+  var onCloseDialog = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, [setIsOpen]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("div", {
+    css: rootStyles,
+    style: {
+      outlineColor: rootFocusColor({
+        appearance: type,
+        theme: theme
+      }),
+      '--icon-accent-color': iconColor({
+        appearance: type,
+        theme: theme
+      })
+    },
+    "data-testid": testId
+  }, (0, _core.jsx)(_inlineDialog.default, {
+    onClose: onCloseDialog,
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    testId: testId && "".concat(testId, "--inline-dialog")
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    "data-ds--inline-message--button": true,
+    appearance: "subtle-link",
+    onClick: toggleDialog,
+    spacing: "none",
+    testId: testId && "".concat(testId, "--button")
+  }, (0, _core.jsx)("div", {
+    css: buttonContentsStyles
+  }, (0, _core.jsx)(_messageIcon.default, {
+    isOpen: isOpen,
+    appearance: type,
+    label: iconLabel
+  }), title && (0, _core.jsx)("span", {
+    style: {
+      color: titleColor({
+        theme: theme
+      })
+    },
+    css: titleStyles,
+    "data-testid": testId && "".concat(testId, "--title")
+  }, title), secondaryText && (0, _core.jsx)("span", {
+    style: {
+      color: textColor({
+        theme: theme
+      })
+    },
+    css: textStyles,
+    "data-testid": testId && "".concat(testId, "--text")
+  }, secondaryText)))));
+};
+
+var _default = InlineMessage;
+exports.default = _default;

package/dist/cjs/components/message-icon/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("../../constants");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+var iconColor = (0, _components.themed)('appearance', {
+  connectivity: {
+    light: colors.B400,
+    dark: colors.B100
+  },
+  confirmation: {
+    light: colors.G300,
+    dark: colors.G300
+  },
+  info: {
+    light: colors.P300,
+    dark: colors.P300
+  },
+  warning: {
+    light: colors.Y300,
+    dark: colors.Y300
+  },
+  error: {
+    light: colors.R400,
+    dark: colors.R400
+  }
+});
+var iconWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  alignItems: 'center',
+  flex: '0 0 auto',
+  color: 'var(--icon-color)'
+});
+var iconColorStyles = (0, _core.css)({
+  color: 'var(--icon-accent-color)'
+});
+/**
+ * __Selected icon__
+ *
+ * The selected icon is used as the primary interactive element for the dialog.
+ * Can be used with or without supporting text.
+ */
+
+var SelectedIcon = function SelectedIcon(_ref) {
+  var appearance = _ref.appearance,
+      isOpen = _ref.isOpen,
+      label = _ref.label;
+  var _typesMapping$appeara = _constants.typesMapping[appearance],
+      SelectedIcon = _typesMapping$appeara.icon,
+      defaultLabel = _typesMapping$appeara.defaultLabel;
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("span", {
+    "data-ds--inline-message--icon": true,
+    style: {
+      '--icon-color': iconColor({
+        appearance: appearance,
+        theme: theme
+      })
+    },
+    css: [iconWrapperStyles, isOpen && iconColorStyles]
+  }, (0, _core.jsx)(SelectedIcon, {
+    testId: "inline-message-icon",
+    label: label || defaultLabel,
+    size: "medium"
+  }));
+};
+
+var _default = SelectedIcon;
+exports.default = _default;

package/dist/cjs/constants.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typesMapping = exports.itemSpacing = void 0;
+
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
+var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var itemSpacing = (0, _constants.gridSize)() / 2;
+exports.itemSpacing = itemSpacing;
+var typesMapping = {
+  connectivity: {
+    icon: _warning.default,
+    defaultLabel: 'connectivity inline message'
+  },
+  confirmation: {
+    icon: _checkCircle.default,
+    defaultLabel: 'confirmation inline message'
+  },
+  info: {
+    icon: _info.default,
+    defaultLabel: 'info inline message'
+  },
+  warning: {
+    icon: _warning.default,
+    defaultLabel: 'warning inline message'
+  },
+  error: {
+    icon: _error.default,
+    defaultLabel: 'error inline message'
+  }
+};
+exports.typesMapping = typesMapping;

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _inlineMessage.default;
+  }
+});
+
+var _inlineMessage = _interopRequireDefault(require("./components/inline-message"));

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/inline-message",
+	"version": "11.1.4",
+	"sideEffects": false
+}

package/dist/es2019/components/inline-message/index.js

@@ -0,0 +1,182 @@
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import InlineDialog from '@atlaskit/inline-dialog';
+import * as colors from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { itemSpacing } from '../../constants';
+import MessageIcon from '../message-icon';
+const buttonContentsStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+const titleStyles = css({
+  padding: `0 ${itemSpacing}px`,
+  fontWeight: 500
+});
+const textStyles = css({
+  padding: `0 ${itemSpacing}px`,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const rootStyles = css({
+  display: 'inline-block',
+  maxWidth: '100%',
+  '&:focus': {
+    outline: '1px solid'
+  },
+  '&:hover': {
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '[data-ds--inline-message--icon]': {
+      color: 'var(--icon-accent-color)'
+    },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '[data-ds--inline-message--button]': {
+      textDecoration: 'underline'
+    }
+  }
+});
+const titleColor = themed({
+  light: colors.N600,
+  dark: colors.DN600
+});
+const textColor = themed({
+  light: colors.N300,
+  dark: colors.DN100
+});
+const rootFocusColor = themed('appearance', {
+  connectivity: {
+    light: colors.B500,
+    dark: colors.B200
+  },
+  confirmation: {
+    light: colors.G400,
+    dark: colors.G400
+  },
+  info: {
+    light: colors.P500,
+    dark: colors.P300
+  },
+  warning: {
+    light: colors.Y500,
+    dark: colors.Y500
+  },
+  error: {
+    light: colors.R500,
+    dark: colors.R500
+  }
+});
+const iconColor = themed('appearance', {
+  connectivity: {
+    light: colors.B300,
+    dark: colors.B75
+  },
+  confirmation: {
+    light: colors.G200,
+    dark: colors.G200
+  },
+  info: {
+    light: colors.P200,
+    dark: colors.P200
+  },
+  warning: {
+    light: colors.Y200,
+    dark: colors.Y200
+  },
+  error: {
+    light: colors.R300,
+    dark: colors.R300
+  }
+});
+/**
+ * __Inline message__
+ *
+ * An inline message lets users know when important information is available or when an action is required.
+ *
+ * - [Examples](https://atlassian.design/components/inline-message/examples)
+ * - [Code](https://atlassian.design/components/inline-message/code)
+ * - [Usage](https://atlassian.design/components/inline-message/usage)
+ *
+ * @example
+ *
+ * ```jsx
+ * const Component = () => (
+ *   <InlineMessage
+ *    title="Inline Message Title Example"
+ *    secondaryText="Secondary Text"
+ *   >
+ *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
+ *   </InlineMessage>
+ * );
+ * ```
+ */
+
+const InlineMessage = ({
+  placement = 'bottom-start',
+  secondaryText = '',
+  title = '',
+  type = 'connectivity',
+  children,
+  testId,
+  iconLabel
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleDialog = useCallback(() => {
+    setIsOpen(oldState => !oldState);
+  }, [setIsOpen]);
+  const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const theme = useGlobalTheme();
+  return jsx("div", {
+    css: rootStyles,
+    style: {
+      outlineColor: rootFocusColor({
+        appearance: type,
+        theme
+      }),
+      '--icon-accent-color': iconColor({
+        appearance: type,
+        theme
+      })
+    },
+    "data-testid": testId
+  }, jsx(InlineDialog, {
+    onClose: onCloseDialog,
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    testId: testId && `${testId}--inline-dialog`
+  }, jsx(Button, {
+    "data-ds--inline-message--button": true,
+    appearance: "subtle-link",
+    onClick: toggleDialog,
+    spacing: "none",
+    testId: testId && `${testId}--button`
+  }, jsx("div", {
+    css: buttonContentsStyles
+  }, jsx(MessageIcon, {
+    isOpen: isOpen,
+    appearance: type,
+    label: iconLabel
+  }), title && jsx("span", {
+    style: {
+      color: titleColor({
+        theme
+      })
+    },
+    css: titleStyles,
+    "data-testid": testId && `${testId}--title`
+  }, title), secondaryText && jsx("span", {
+    style: {
+      color: textColor({
+        theme
+      })
+    },
+    css: textStyles,
+    "data-testid": testId && `${testId}--text`
+  }, secondaryText)))));
+};
+
+export default InlineMessage;