@atlaskit/inline-message 11.1.4

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

@@ -0,0 +1,72 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import * as colors from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { typesMapping } from '../../constants';
+const iconColor = 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
+  }
+});
+const iconWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flex: '0 0 auto',
+  color: 'var(--icon-color)'
+});
+const iconColorStyles = 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.
+ */
+
+const SelectedIcon = ({
+  appearance,
+  isOpen,
+  label
+}) => {
+  const {
+    [appearance]: {
+      icon: SelectedIcon,
+      defaultLabel
+    }
+  } = typesMapping;
+  const theme = useGlobalTheme();
+  return jsx("span", {
+    "data-ds--inline-message--icon": true,
+    style: {
+      '--icon-color': iconColor({
+        appearance,
+        theme
+      })
+    },
+    css: [iconWrapperStyles, isOpen && iconColorStyles]
+  }, jsx(SelectedIcon, {
+    testId: "inline-message-icon",
+    label: label || defaultLabel,
+    size: "medium"
+  }));
+};
+
+export default SelectedIcon;

package/dist/es2019/constants.js

@@ -0,0 +1,28 @@
+import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import InfoIcon from '@atlaskit/icon/glyph/info';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { gridSize } from '@atlaskit/theme/constants';
+export const itemSpacing = gridSize() / 2;
+export const typesMapping = {
+  connectivity: {
+    icon: WarningIcon,
+    defaultLabel: 'connectivity inline message'
+  },
+  confirmation: {
+    icon: CheckCircleIcon,
+    defaultLabel: 'confirmation inline message'
+  },
+  info: {
+    icon: InfoIcon,
+    defaultLabel: 'info inline message'
+  },
+  warning: {
+    icon: WarningIcon,
+    defaultLabel: 'warning inline message'
+  },
+  error: {
+    icon: ErrorIcon,
+    defaultLabel: 'error inline message'
+  }
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default } from './components/inline-message';

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

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

@@ -0,0 +1,196 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @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';
+var buttonContentsStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+var titleStyles = css({
+  padding: "0 ".concat(itemSpacing, "px"),
+  fontWeight: 500
+});
+var textStyles = css({
+  padding: "0 ".concat(itemSpacing, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var 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'
+    }
+  }
+});
+var titleColor = themed({
+  light: colors.N600,
+  dark: colors.DN600
+});
+var textColor = themed({
+  light: colors.N300,
+  dark: colors.DN100
+});
+var 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
+  }
+});
+var 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>
+ * );
+ * ```
+ */
+
+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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var toggleDialog = useCallback(function () {
+    setIsOpen(function (oldState) {
+      return !oldState;
+    });
+  }, [setIsOpen]);
+  var onCloseDialog = useCallback(function () {
+    return setIsOpen(false);
+  }, [setIsOpen]);
+  var theme = useGlobalTheme();
+  return jsx("div", {
+    css: rootStyles,
+    style: {
+      outlineColor: rootFocusColor({
+        appearance: type,
+        theme: theme
+      }),
+      '--icon-accent-color': iconColor({
+        appearance: type,
+        theme: theme
+      })
+    },
+    "data-testid": testId
+  }, jsx(InlineDialog, {
+    onClose: onCloseDialog,
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    testId: testId && "".concat(testId, "--inline-dialog")
+  }, jsx(Button, {
+    "data-ds--inline-message--button": true,
+    appearance: "subtle-link",
+    onClick: toggleDialog,
+    spacing: "none",
+    testId: testId && "".concat(testId, "--button")
+  }, jsx("div", {
+    css: buttonContentsStyles
+  }, jsx(MessageIcon, {
+    isOpen: isOpen,
+    appearance: type,
+    label: iconLabel
+  }), title && jsx("span", {
+    style: {
+      color: titleColor({
+        theme: theme
+      })
+    },
+    css: titleStyles,
+    "data-testid": testId && "".concat(testId, "--title")
+  }, title), secondaryText && jsx("span", {
+    style: {
+      color: textColor({
+        theme: theme
+      })
+    },
+    css: textStyles,
+    "data-testid": testId && "".concat(testId, "--text")
+  }, secondaryText)))));
+};
+
+export default InlineMessage;

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

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import * as colors from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { typesMapping } from '../../constants';
+var iconColor = 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 = css({
+  display: 'flex',
+  alignItems: 'center',
+  flex: '0 0 auto',
+  color: 'var(--icon-color)'
+});
+var iconColorStyles = 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 = typesMapping[appearance],
+      SelectedIcon = _typesMapping$appeara.icon,
+      defaultLabel = _typesMapping$appeara.defaultLabel;
+  var theme = useGlobalTheme();
+  return jsx("span", {
+    "data-ds--inline-message--icon": true,
+    style: {
+      '--icon-color': iconColor({
+        appearance: appearance,
+        theme: theme
+      })
+    },
+    css: [iconWrapperStyles, isOpen && iconColorStyles]
+  }, jsx(SelectedIcon, {
+    testId: "inline-message-icon",
+    label: label || defaultLabel,
+    size: "medium"
+  }));
+};
+
+export default SelectedIcon;

package/dist/esm/constants.js

@@ -0,0 +1,28 @@
+import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import InfoIcon from '@atlaskit/icon/glyph/info';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { gridSize } from '@atlaskit/theme/constants';
+export var itemSpacing = gridSize() / 2;
+export var typesMapping = {
+  connectivity: {
+    icon: WarningIcon,
+    defaultLabel: 'connectivity inline message'
+  },
+  confirmation: {
+    icon: CheckCircleIcon,
+    defaultLabel: 'confirmation inline message'
+  },
+  info: {
+    icon: InfoIcon,
+    defaultLabel: 'info inline message'
+  },
+  warning: {
+    icon: WarningIcon,
+    defaultLabel: 'warning inline message'
+  },
+  error: {
+    icon: ErrorIcon,
+    defaultLabel: 'error inline message'
+  }
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default } from './components/inline-message';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

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

package/dist/types/components/inline-message/index.d.ts

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import type { IconAppearance, InlineDialogPlacement } from '../../types';
+interface InlineMessageProps {
+    /**
+     * The elements to be displayed by the inline dialog.
+     */
+    children?: ReactNode;
+    /**
+     * The placement to be passed to the inline dialog. Determines where around
+     * the text the dialog is displayed.
+     */
+    placement?: InlineDialogPlacement;
+    /**
+     * Text to display second.
+     */
+    secondaryText?: ReactNode;
+    /**
+     * Text to display first, bolded for emphasis.
+     */
+    title?: ReactNode;
+    /**
+     * Set the icon to be used before the title. Options are: connectivity,
+     * confirmation, info, warning, and error.
+     */
+    type?: IconAppearance;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     *
+     * As inline message is composed of different components, we passed down the testId to the sub component you want to test:
+     * - testId to identify the inline message component.
+     * - testId--inline-dialog to get the content of the actual component.
+     * - testId--button to click on the actual component.
+     * - testId--title to get the title of the actual component.
+     * - testId--text to get the text of the actual component.
+     */
+    testId?: string;
+    /**
+     * Text to be used as label for the button icon. Can be used to provide useful information for users with screen readers when there is no title and/or secondaryText
+     */
+    iconLabel?: string;
+}
+/**
+ * __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>
+ * );
+ * ```
+ */
+declare const InlineMessage: FC<InlineMessageProps>;
+export default InlineMessage;