@atlaskit/flag 14.5.1 → 14.5.4

package/dist/esm/internal/description.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+var descriptionStyles = css({
+  /* height is defined as 5 lines maximum by design */
+  maxHeight: 100,
+  overflow: 'auto',
+  wordWrap: 'break-word'
+});
+
+var Description = function Description(_ref) {
+  var color = _ref.color,
+      testId = _ref.testId,
+      children = _ref.children;
+  return jsx("div", {
+    style: {
+      color: color
+    },
+    css: descriptionStyles,
+    "data-testid": testId
+  }, children);
+};
+
+export default Description;

package/dist/esm/internal/dismiss-button.js

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx, css } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getFlagTextColor } from '../theme';
+var gridSize = getGridSize();
+var borderRadius = getBorderRadius();
+var dismissButtonStyles = css({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius: borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+var DismissButton = function DismissButton(_ref) {
+  var appearance = _ref.appearance,
+      onClick = _ref.onClick,
+      isBold = _ref.isBold,
+      isExpanded = _ref.isExpanded,
+      testId = _ref.testId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  var ButtonIcon = CrossIcon;
+  var buttonLabel = 'Dismiss';
+  var size = 'small';
+  var buttonTestId = testId && "".concat(testId, "-dismiss");
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && "".concat(testId, "-toggle");
+  }
+
+  return jsx(FocusRing, null, jsx("button", {
+    style: {
+      color: getFlagTextColor(appearance, mode)
+    },
+    css: dismissButtonStyles,
+    onClick: onClick,
+    "data-testid": buttonTestId,
+    type: "button",
+    "aria-expanded": isBold ? isExpanded : undefined
+  }, jsx(ButtonIcon, {
+    label: buttonLabel,
+    size: size
+  })));
+};
+
+export default /*#__PURE__*/memo(DismissButton);

package/dist/esm/{expander.js → internal/expander.js}

@@ -1,12 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize } from '@atlaskit/theme/constants';
 var paddingLeft = gridSize() * 5;
+var expanderStyles = css({
+  display: 'flex',
+  minWidth: 0,
+  maxHeight: 0,
+  padding: "0 0 0 ".concat(paddingLeft, "px"),
+  justifyContent: 'center',
+  flex: '1 1 100%',
+  flexDirection: 'column',
+  transition: "max-height 0.3s"
+});
+var expandedStyles = css({
+  maxHeight: 150
+});
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -17,7 +26,7 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
   return jsx("div", {
     "aria-hidden": !isExpanded,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        max-height: ", "px;\n        transition: max-height 0.3s;\n        display: flex;\n        flex: 1 1 100%;\n        flex-direction: column;\n        justify-content: center;\n        min-width: 0;\n        padding: 0 0 0 ", "px;\n      "])), isExpanded ? 150 : 0, paddingLeft),
+    css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && "".concat(testId, "-expander")
   }, jsx(ExitingPersistence, {
     appear: true

package/dist/esm/internal/index.js

@@ -0,0 +1,4 @@
+export { default as Title } from './title';
+export { default as Description } from './description';
+export { default as Expander } from './expander';
+export { default as DismissButton } from './dismiss-button';

package/dist/esm/internal/title.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+var titleStyles = css({
+  padding: "0 0 0 16px",
+  flex: 1,
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var Title = function Title(_ref) {
+  var color = _ref.color,
+      children = _ref.children;
+  return jsx("span", {
+    style: {
+      color: color
+    },
+    css: titleStyles
+  }, children);
+};
+
+export default Title;

package/dist/esm/theme.js

@@ -1,72 +1,72 @@
 import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 var flagBackgroundColor = {
   error: {
-    light: "var(--ds-background-overlay, ".concat(R400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(R300, ")")
+    light: "var(--ds-surface-overlay, ".concat(R400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(R300, ")")
   },
   info: {
-    light: "var(--ds-background-overlay, ".concat(N500, ")"),
-    dark: "var(--ds-background-overlay, ".concat(N500, ")")
+    light: "var(--ds-surface-overlay, ".concat(N500, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(N500, ")")
   },
   normal: {
-    light: "var(--ds-background-overlay, ".concat(N0, ")"),
-    dark: "var(--ds-background-overlay, ".concat(DN50, ")")
+    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
   },
   success: {
-    light: "var(--ds-background-overlay, ".concat(G400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(G300, ")")
+    light: "var(--ds-surface-overlay, ".concat(G400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(G300, ")")
   },
   warning: {
-    light: "var(--ds-background-overlay, ".concat(Y200, ")"),
-    dark: "var(--ds-background-overlay, ".concat(Y300, ")")
+    light: "var(--ds-surface-overlay, ".concat(Y200, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(Y300, ")")
   }
 };
 export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
 };
-export var flagBorderColor = "var(--ds-background-overlay, ".concat(N60A, ")");
+export var flagBorderColor = "var(--ds-surface-overlay, ".concat(N60A, ")");
 var flagIconColor = {
   error: {
-    light: "var(--ds-iconBorder-danger, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-danger, ".concat(DN40, ")")
+    light: "var(--ds-icon-danger, ".concat(N0, ")"),
+    dark: "var(--ds-icon-danger, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-iconBorder-discovery, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-discovery, ".concat(DN600, ")")
+    light: "var(--ds-icon-discovery, ".concat(N0, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(DN600, ")")
   },
   normal: {
-    light: "var(--ds-iconBorder-brand, ".concat(N500, ")"),
-    dark: "var(--ds-iconBorder-brand, ".concat(DN600, ")")
+    light: "var(--ds-icon-brand, ".concat(N500, ")"),
+    dark: "var(--ds-icon-brand, ".concat(DN600, ")")
   },
   success: {
-    light: "var(--ds-iconBorder-success, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-success, ".concat(DN40, ")")
+    light: "var(--ds-icon-success, ".concat(N0, ")"),
+    dark: "var(--ds-icon-success, ".concat(DN40, ")")
   },
   warning: {
-    light: "var(--ds-iconBorder-warning, ".concat(N700, ")"),
-    dark: "var(--ds-iconBorder-warning, ".concat(DN40, ")")
+    light: "var(--ds-icon-warning, ".concat(N700, ")"),
+    dark: "var(--ds-icon-warning, ".concat(DN40, ")")
   }
 };
 var flagTextColor = {
   error: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   normal: {
-    light: "var(--ds-text-highEmphasis, ".concat(N500, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text, ".concat(N500, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   success: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   warning: {
-    light: "var(--ds-text-highEmphasis, ".concat(N700, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N700, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   }
 };
 export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
@@ -80,24 +80,24 @@ export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
 export var flagShadowColor = N50A;
 var flagFocusRingColor = {
   error: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   info: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   normal: {
-    light: "var(--ds-border-focus, ".concat(B100, ")"),
-    dark: "var(--ds-border-focus, ".concat(B100, ")")
+    light: "var(--ds-border-focused, ".concat(B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(B100, ")")
   },
   success: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   warning: {
-    light: "var(--ds-border-focus, ".concat(N200, ")"),
-    dark: "var(--ds-border-focus, ".concat(N200, ")")
+    light: "var(--ds-border-focused, ".concat(N200, ")"),
+    dark: "var(--ds-border-focused, ".concat(N200, ")")
   }
 };
 export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
@@ -106,46 +106,46 @@ export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mo
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   info: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   warning: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   normal: {
-    light: "var(--ds-background-subtleNeutral-resting, none)",
-    dark: "var(--ds-background-subtleNeutral-resting, none)"
+    light: "var(--ds-background-neutral, none)",
+    dark: "var(--ds-background-neutral, none)"
   }
 };
 var actionColor = {
   success: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   error: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   warning: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N700, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(N700, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   normal: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(B100, ")")
+    light: "var(--ds-text-subtle, ".concat(B400, ")"),
+    dark: "var(--ds-text-subtle, ".concat(B100, ")")
   }
 };
 export var getActionBackground = function getActionBackground(appearance, mode) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.5.1",
+	"version": "14.5.4",
 	"sideEffects": false
 }

package/dist/types/flag-actions.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { ComponentType } from 'react';
-import { CustomThemeButtonProps } from '@atlaskit/button/types';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { ActionsType, AppearanceTypes } from './types';
+import type { ComponentType } from 'react';
+import type { CustomThemeButtonProps } from '@atlaskit/button/types';
+import type { ThemeModes } from '@atlaskit/theme/types';
+import type { ActionsType, AppearanceTypes } from './types';
 declare type Props = {
     appearance: AppearanceTypes;
     actions: ActionsType;

package/dist/types/flag-group.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactElement } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-declare type Props = {
+declare type FlagGroupProps = {
     /** ID attribute used for DOM selection. */
     id?: string;
     /** Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`). */
@@ -23,5 +23,5 @@ declare type FlagGroupAPI = {
 };
 export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
 export declare function useFlagGroup(): FlagGroupAPI;
-declare const FlagGroup: (props: Props) => JSX.Element;
+declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
 export default FlagGroup;

package/dist/types/flag.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { FlagProps } from './types';
+import type { FlagProps } from './types';
 declare const Flag: (props: FlagProps) => JSX.Element;
 export default Flag;

package/dist/types/internal/description.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface DescriptionProps {
+    testId?: string;
+    color: string;
+}
+declare const Description: FC<DescriptionProps>;
+export default Description;

package/dist/types/internal/dismiss-button.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AppearanceTypes } from '../types';
+interface DismissButtonProps {
+    appearance: AppearanceTypes;
+    onClick: (...args: any) => void;
+    isExpanded: boolean;
+    isBold: boolean;
+    testId?: string;
+}
+declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
+export default _default;

package/dist/types/internal/expander.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { FC } from 'react';
+declare type ExpanderProps = {
+    isExpanded: boolean;
+    testId?: string;
+};
+declare const Expander: FC<ExpanderProps>;
+export default Expander;

package/dist/types/internal/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Title } from './title';
+export { default as Description } from './description';
+export { default as Expander } from './expander';
+export { default as DismissButton } from './dismiss-button';

package/dist/types/internal/title.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface TitleProps {
+    color: string;
+}
+declare const Title: FC<TitleProps>;
+export default Title;

package/dist/types/theme.d.ts

@@ -1,7 +1,7 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { AppearanceTypes } from './types';
 export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor: "var(--ds-background-overlay)";
+export declare const flagBorderColor: "var(--ds-surface-overlay)";
 export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.5.1",
+  "version": "14.5.4",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,12 +24,15 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -71,7 +74,8 @@
       ],
       "deprecation": "no-deprecated-imports",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
     }
   },

package/dist/types/expander.d.ts

@@ -1,9 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-declare type Props = {
-    children: ReactNode;
-    isExpanded: boolean;
-    testId?: string;
-};
-declare const Expander: ({ children, isExpanded, testId }: Props) => JSX.Element;
-export default Expander;

package/expander/package.json

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