@atlaskit/avatar 21.3.5 → 21.3.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.3.7
+
+### Patch Changes
+
+- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+
+## 21.3.6
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
 ## 21.3.5
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.5";
+var packageVersion = "21.3.7";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarItem.js

@@ -24,14 +24,14 @@ var avatarItemStyles = (0, _react2.css)({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
     css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/cjs/IconWrapper.js

@@ -17,7 +17,7 @@ var iconWrapperStyles = (0, _react.css)({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/cjs/Skeleton.js

@@ -32,11 +32,12 @@ var radiusStyles = Object.entries(_constants.AVATAR_RADIUS).reduce(function (sty
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = (0, _react.css)({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.7",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.5";
+const packageVersion = "21.3.7";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/es2019/AvatarItem.js

@@ -12,7 +12,7 @@ const avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 const getStyles = (css, {
@@ -20,7 +20,7 @@ const getStyles = (css, {
   isInteractive,
   isDisabled
 }) =>
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
 css`
     align-items: center;
     background-color: ${backgroundColor};

package/dist/es2019/IconWrapper.js

@@ -11,7 +11,7 @@ const iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/es2019/Skeleton.js

@@ -23,12 +23,13 @@ const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size])
   return {
     ...styles,
     [key]: css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
       borderRadius: `${size}px`
     })
   };
 }, {});
 const defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 const strongOpacityStyles = css({
   opacity: 0.3

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.7",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.5";
+var packageVersion = "21.3.7";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/esm/AvatarItem.js

@@ -17,14 +17,14 @@ var avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
     css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/esm/IconWrapper.js

@@ -11,7 +11,7 @@ var iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/esm/Skeleton.js

@@ -28,11 +28,12 @@ var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3)
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = css({
   opacity: 0.3

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.7",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.5",
+  "version": "21.3.7",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -52,11 +52,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.8.0",
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
@@ -65,7 +63,6 @@
     "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "color-contrast-checker": "^1.5.0",
-    "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",

package/tmp/api-report-tmp.d.ts

@@ -1,170 +0,0 @@
-## API Report File for "@atlaskit/avatar"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { FC } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { MouseEventHandler } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import { RefAttributes } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-export const ACTIVE_SCALE_FACTOR = 0.9;
-
-// @public (undocumented)
-export type AppearanceType = 'circle' | 'square';
-
-// @public
-const Avatar: ForwardRefExoticComponent<AvatarPropTypes & RefAttributes<HTMLElement>>;
-export default Avatar;
-
-// @public (undocumented)
-export const AVATAR_RADIUS: AvatarSizeMap;
-
-// @public (undocumented)
-export const AVATAR_SIZES: AvatarSizeMap;
-
-// @public (undocumented)
-export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
-
-// @public
-export const AvatarItem: ForwardRefExoticComponent<AvatarItemProps & RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-export interface AvatarItemProps {
-    avatar: ReactNode;
-    backgroundColor?: string;
-    children?: (props: CustomAvatarItemProps) => ReactNode;
-    href?: string;
-    isDisabled?: boolean;
-    isTruncationDisabled?: boolean;
-    label?: string;
-    onClick?: AvatarClickEventHandler;
-    primaryText?: ReactNode;
-    secondaryText?: ReactNode;
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface AvatarPropTypes {
-    analyticsContext?: Record<string, any>;
-    appearance?: AppearanceType;
-    borderColor?: string;
-    children?: (props: CustomAvatarProps) => ReactNode;
-    href?: string;
-    isDisabled?: boolean;
-    label?: string;
-    name?: string;
-    onClick?: AvatarClickEventHandler;
-    presence?: (string & {}) | Omit<ReactNode, string> | PresenceType | null;
-    size?: SizeType;
-    src?: string;
-    stackIndex?: number;
-    status?: (string & {}) | Omit<ReactNode, string> | StatusType | null;
-    tabIndex?: number;
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    testId?: string;
-}
-
-// @public (undocumented)
-type AvatarSizeMap = Record<SizeType, number>;
-
-// @public (undocumented)
-export const BORDER_WIDTH = 2;
-
-// @public (undocumented)
-export interface CustomAvatarItemProps {
-    // (undocumented)
-    'aria-disabled'?: 'false' | 'true' | boolean | undefined;
-    'aria-label'?: string;
-    // (undocumented)
-    children: ReactNode;
-    // (undocumented)
-    className?: string;
-    // (undocumented)
-    href?: string;
-    // (undocumented)
-    onClick?: MouseEventHandler;
-    // (undocumented)
-    ref: Ref<HTMLElement>;
-    // (undocumented)
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface CustomAvatarProps {
-    'aria-label'?: string;
-    // (undocumented)
-    children: ReactNode;
-    // (undocumented)
-    className?: string;
-    // (undocumented)
-    href?: string;
-    // (undocumented)
-    onClick?: MouseEventHandler;
-    // (undocumented)
-    ref: Ref<HTMLElement>;
-    // (undocumented)
-    tabIndex?: number;
-    // (undocumented)
-    testId?: string;
-}
-
-// @public (undocumented)
-export type IndicatorSizeType = 'large' | 'medium' | 'small' | 'xlarge';
-
-// @public
-export const Presence: FC<PresenceProps>;
-
-// @public (undocumented)
-export interface PresenceProps {
-    borderColor?: string;
-    children?: ReactNode;
-    presence?: PresenceType;
-    testId?: string;
-}
-
-// @public (undocumented)
-export type PresenceType = 'busy' | 'focus' | 'offline' | 'online';
-
-// @public (undocumented)
-export type SizeType = 'large' | 'medium' | 'small' | 'xlarge' | 'xsmall' | 'xxlarge';
-
-// @public
-export const Skeleton: FC<SkeletonProps>;
-
-// @public (undocumented)
-export interface SkeletonProps {
-    // (undocumented)
-    appearance?: AppearanceType;
-    // (undocumented)
-    color?: string;
-    // (undocumented)
-    size?: SizeType;
-    // (undocumented)
-    weight?: 'normal' | 'strong';
-}
-
-// @public
-export const Status: FC<StatusProps>;
-
-// @public (undocumented)
-export interface StatusProps {
-    borderColor?: string;
-    children?: ReactNode;
-    status?: StatusType;
-}
-
-// @public (undocumented)
-export type StatusType = 'approved' | 'declined' | 'locked';
-
-// (No @packageDocumentation comment for this package)
-
-```