@digital-ai/dot-components 1.21.0 → 1.21.1

package/CHANGE_LOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.21.1](https://github.com/digital-ai/dot-components/tree/1.21.1) (08/31/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.21.0...1.21.1)
+
+**Features:**
+
+- Add focus state on Avatar With Tooltip component [\#1246](https://github.com/digital-ai/dot-components/issues/1246)
+- D-22238 Add focus state for Avatar With Tooltip [\#1248](https://github.com/digital-ai/dot-components/pull/1248) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87031: Extended DotPill props to support account list changes [\#1247](https://github.com/digital-ai/dot-components/pull/1247) ([ryangamble](https://github.com/ryangamble))
+
 ## [1.21.0](https://github.com/digital-ai/dot-components/tree/1.21.0) (08/22/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.20.0...1.21.0)

package/index.esm.js

@@ -1328,6 +1328,7 @@ const DotAvatar = ({
   imageSrc,
   onClick,
   size: _size = 'medium',
+  tabIndex: _tabIndex = 0,
   text: _text = alt,
   type: _type = 'image',
   tooltip,
@@ -1359,6 +1360,7 @@ const DotAvatar = ({
       onClick: event => onClick ? onClick(event) : null,
       src: _type === 'image' ? imageSrc : null,
       style: style,
+      tabIndex: tooltip ? _tabIndex : undefined,
       variant: _variant
     }, {
       children: jsx(AvatarContent, {
@@ -6475,7 +6477,7 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$l, ({
+}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$l, ({
   backgroundcolor
 }) => {
   return backgroundcolor ? backgroundcolor : theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200];
@@ -6483,30 +6485,40 @@ const StyledPill = styled(Chip).withConfig({
   labelcolor
 }) => {
   return labelcolor ? labelcolor : theme.palette.layer.n700;
+}, ({
+  bordercolor
+}) => {
+  return bordercolor ? bordercolor : theme.palette.layer.n700;
 }, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0));
 
 const DotPill = ({
   ariaLabel,
   backgroundcolor,
+  bordercolor,
   className,
   'data-testid': dataTestId,
+  icon,
   label,
   labelcolor,
   size: _size = 'medium',
-  status: _status = 'default'
+  status: _status = 'default',
+  variant: _variant = 'default'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$l, className, _status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
+    bordercolor: bordercolor,
     backgroundcolor: backgroundcolor,
     classes: {
       root: rootClasses
     },
     clickable: false,
     "data-testid": dataTestId,
+    icon: icon,
     label: label,
     labelcolor: labelcolor,
-    size: _size
+    size: _size,
+    variant: _variant
   }, void 0);
 };
 

package/index.umd.js

@@ -1473,13 +1473,15 @@
           onClick = _a.onClick,
           _c = _a.size,
           size = _c === void 0 ? 'medium' : _c,
-          _d = _a.text,
-          text = _d === void 0 ? alt : _d,
-          _e = _a.type,
-          type = _e === void 0 ? 'image' : _e,
+          _d = _a.tabIndex,
+          tabIndex = _d === void 0 ? 0 : _d,
+          _e = _a.text,
+          text = _e === void 0 ? alt : _e,
+          _f = _a.type,
+          type = _f === void 0 ? 'image' : _f,
           tooltip = _a.tooltip,
-          _f = _a.variant,
-          variant = _f === void 0 ? 'circular' : _f,
+          _g = _a.variant,
+          variant = _g === void 0 ? 'circular' : _g,
           style = _a.style;
       var rootClasses = useStylesWithRootClass(rootClassName$T, className);
 
@@ -1508,6 +1510,7 @@
           },
           src: type === 'image' ? imageSrc : null,
           style: style,
+          tabIndex: tooltip ? tabIndex : undefined,
           variant: variant
         }, {
           children: jsxRuntime.jsx(AvatarContent, {
@@ -6998,12 +7001,15 @@
       componentId: "l7oxi2-0"
     })(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "])), rootClassName$l, function (_a) {
+      return styled.css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "])), rootClassName$l, function (_a) {
         var backgroundcolor = _a.backgroundcolor;
         return backgroundcolor ? backgroundcolor : theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200];
       }, function (_a) {
         var labelcolor = _a.labelcolor;
         return labelcolor ? labelcolor : theme.palette.layer.n700;
+      }, function (_a) {
+        var bordercolor = _a.bordercolor;
+        return bordercolor ? bordercolor : theme.palette.layer.n700;
       }, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0);
     });
     var templateObject_1$l, templateObject_2$l;
@@ -7011,26 +7017,33 @@
     var DotPill = function DotPill(_a) {
       var ariaLabel = _a.ariaLabel,
           backgroundcolor = _a.backgroundcolor,
+          bordercolor = _a.bordercolor,
           className = _a.className,
           dataTestId = _a["data-testid"],
+          icon = _a.icon,
           label = _a.label,
           labelcolor = _a.labelcolor,
           _b = _a.size,
           size = _b === void 0 ? 'medium' : _b,
           _c = _a.status,
-          status = _c === void 0 ? 'default' : _c;
+          status = _c === void 0 ? 'default' : _c,
+          _d = _a.variant,
+          variant = _d === void 0 ? 'default' : _d;
       var rootClasses = useStylesWithRootClass(rootClassName$l, className, status);
       return jsxRuntime.jsx(StyledPill, {
         "aria-label": ariaLabel,
+        bordercolor: bordercolor,
         backgroundcolor: backgroundcolor,
         classes: {
           root: rootClasses
         },
         clickable: false,
         "data-testid": dataTestId,
+        icon: icon,
         label: label,
         labelcolor: labelcolor,
-        size: size
+        size: size,
+        variant: variant
       }, void 0);
     };
 

package/lib/components/avatar/Avatar.d.ts

@@ -21,6 +21,8 @@ export interface AvatarProps extends CommonProps {
     size?: AvatarSize;
     /** To be used to override styles inline */
     style?: CSSProperties;
+    /** tab order for the avatar */
+    tabIndex?: number;
     /** The text to be displayed. Only the first 2 letters will be displayed. */
     text?: string;
     /** Tooltip for avatar */
@@ -30,4 +32,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;
+export declare const DotAvatar: ({ alt, ariaLabel, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;

package/lib/components/pill/Pill.d.ts

@@ -1,10 +1,15 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type PillSize = 'small' | 'medium';
 export declare type PillStatus = 'success' | 'error' | 'warning' | 'in-progress' | 'default';
+export declare type PillVariant = 'default' | 'outlined';
 export interface PillProps extends CommonProps {
     /** Background color for the pill, ignored if 'status' is not 'default' */
     backgroundcolor?: string;
+    /** Border color for the pill, ignored if 'status' is not 'default' */
+    bordercolor?: string;
+    /** The icon for the pill */
+    icon?: ReactElement;
     /** The text for the pill. */
     label: string;
     /** Label color for the pill, ignored if 'status' is not 'default' */
@@ -13,5 +18,7 @@ export interface PillProps extends CommonProps {
     size?: PillSize;
     /** Determines the status of the pill component */
     status?: PillStatus;
+    /** Determines the variant of the pill 'default' or 'outlined' */
+    variant?: PillVariant;
 }
-export declare const DotPill: ({ ariaLabel, backgroundcolor, className, "data-testid": dataTestId, label, labelcolor, size, status, }: PillProps) => JSX.Element;
+export declare const DotPill: ({ ariaLabel, backgroundcolor, bordercolor, className, "data-testid": dataTestId, icon, label, labelcolor, size, status, variant, }: PillProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [