@digital-ai/dot-components 2.10.1 → 2.10.2

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.10.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.1...2.10.2)
+
+**Fixed bugs:**
+
+- D-25823: adjust breadcrumb & link styles to match latest figma [\#1539](https://github.com/digital-ai/dot-components/pull/1539) ([CWSites](https://github.com/CWSites))
+- D-25822: Remove improper capitalization of `onclick` [\#1538](https://github.com/digital-ai/dot-components/pull/1538) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
+- S-91989: remove default aria-label, add link label to missing link [\#1536](https://github.com/digital-ai/dot-components/pull/1536) ([CWSites](https://github.com/CWSites))
+- S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
+- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
+
 ## [2.10.1](https://www.npmjs.com/package/@digital-ai/dot-components) (06/29/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.0...2.10.1)
@@ -175,7 +191,6 @@
 **Fixed bugs:**
 
 - D-24672: update icon alignment in sidebar [\#1436](https://github.com/digital-ai/dot-components/pull/1436) ([CWSites](https://github.com/CWSites))
-- D-24483: Do not hide the backdrop [\#1423](https://github.com/digital-ai/dot-components/pull/1423) ([jmcnally](https://github.com/jmcnally))
 
 ## [2.6.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/05/2023)
 
@@ -203,6 +218,10 @@
 
 - S-90953: `DatePicker` component [\#1411](https://github.com/digital-ai/dot-components/pull/1411) ([dmiletic85](https://github.com/dmiletic85))
 
+**Fixed bugs:**
+
+- D-24483: Do not hide the backdrop [\#1423](https://github.com/digital-ai/dot-components/pull/1423) ([jmcnally](https://github.com/jmcnally))
+
 **Misc:**
 
 - resolve build issues with vsm-hub demo [\#1424](https://github.com/digital-ai/dot-components/pull/1424) ([CWSites](https://github.com/CWSites))
@@ -236,7 +255,6 @@
 
 - D-24317 Fix height on InlineEdit [\#1414](https://github.com/digital-ai/dot-components/pull/1414) ([angel-git](https://github.com/angel-git))
 - D-24419 `InlineEdit` show tooltip on readonly as well [\#1413](https://github.com/digital-ai/dot-components/pull/1413) ([angel-git](https://github.com/angel-git))
-- D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
 
 ## [2.5.1](https://www.npmjs.com/package/@digital-ai/dot-components) (03/14/2023)
 
@@ -257,6 +275,7 @@
 
 **Fixed bugs:**
 
+- D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
 - D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
 - Issue \#1271: Updates to `AutoComplete` sizing with `dense` and `size` props [\#1395](https://github.com/digital-ai/dot-components/pull/1395) ([CWSites](https://github.com/CWSites))
 
@@ -516,6 +535,7 @@
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -546,7 +566,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -570,7 +589,6 @@
 **Fixed bugs:**
 
 - D-20378: update input margin to account for helper text [\#1212](https://github.com/digital-ai/dot-components/pull/1212) ([CWSites](https://github.com/CWSites))
-- D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
 
 ## [1.19.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2022)
 
@@ -582,6 +600,7 @@
 - D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
 - D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
 - D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
+- D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
 - D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
 
 ## [1.19.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2022)
@@ -937,6 +956,7 @@
 
 **Fixed bugs:**
 
+- D-19415: `1.6.0` - Sidebar links broken, import was moved [\#926](https://github.com/digital-ai/dot-components/pull/926) ([dmiletic85](https://github.com/dmiletic85))
 - D-19390: `Autocomplete` doesn't have `dot-input` class [\#924](https://github.com/digital-ai/dot-components/pull/924) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.6.0](https://www.npmjs.com/package/@digital-ai/dot-components) (01/03/2022)
@@ -949,7 +969,6 @@
 
 **Fixed bugs:**
 
-- D-19415: `1.6.0` - Sidebar links broken, import was moved [\#926](https://github.com/digital-ai/dot-components/pull/926) ([dmiletic85](https://github.com/dmiletic85))
 - D-19382: `DynamicForm`: `isRequired` with value of `false` is not respected [\#919](https://github.com/digital-ai/dot-components/pull/919) ([dmiletic85](https://github.com/dmiletic85))
 - D-19381: `Storybook`: issue while clicking on `Docs` page of `Menu` component [\#917](https://github.com/digital-ai/dot-components/pull/917) ([dmiletic85](https://github.com/dmiletic85))
 - D-19379: `DynamicForm` doesn't export all types [\#915](https://github.com/digital-ai/dot-components/pull/915) ([dmiletic85](https://github.com/dmiletic85))
@@ -1092,6 +1111,7 @@
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
 - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
+- S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
 
 **Fixed bugs:**
 
@@ -1109,10 +1129,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.3.2...1.3.3)
 
-**Features:**
-
-- S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
-
 **Fixed bugs:**
 
 - D-19069: `AutoComplete` z-index not behaving as expected [\#793](https://github.com/digital-ai/dot-components/pull/793) ([CWSites](https://github.com/CWSites))

package/index.esm.js

@@ -1825,7 +1825,7 @@ const rootClassName$_ = 'dot-link';
 const StyledLink = styled(Link).withConfig({
   displayName: "Linkstyles__StyledLink",
   componentId: "sc-1lpmaww-0"
-})(["", ""], () => css(["&.", "{cursor:pointer;&:hover:not(.MuiLink-underlineHover){text-decoration:none;}}"], rootClassName$_));
+})(["", ""], () => css(["&.", "{cursor:pointer;&:hover.MuiLink-underlineHover{text-decoration:none;}}"], rootClassName$_));
 
 const DotLink = ({
   ariaLabel,
@@ -1842,9 +1842,15 @@ const DotLink = ({
   tabIndex: _tabIndex = 0,
   target,
   tooltip,
-  underline
+  underline: _underline = 'always'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  useEffect(() => {
+    // Include a console warning if the link is not a string and no ariaLabel is provided
+    if (!isString$1(children) && !ariaLabel) {
+      console.warn(`a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text`);
+    }
+  }, []);
   const handleKeyPress = event => {
     if (onClick && event.key === 'Enter') {
       event.preventDefault();
@@ -1870,7 +1876,7 @@ const DotLink = ({
       role: _ariaRole,
       tabIndex: _tabIndex,
       target: target,
-      underline: underline
+      underline: _underline
     }, {
       children: children
     }), void 0)
@@ -4209,6 +4215,7 @@ const DotAppToolbar = ({
       className: "dot-branding"
     }, {
       children: [jsx(DotLink, Object.assign({
+        ariaLabel: "Digital.ai Logo",
         className: "primary-logo",
         "data-testid": "primary-logo",
         href: _primaryLogoHref
@@ -4220,6 +4227,7 @@ const DotAppToolbar = ({
           children: jsx(ForwardRef, {}, void 0)
         }), void 0)
       }), void 0), displayAppLogo && jsx(DotLink, Object.assign({
+        ariaLabel: "Application Logo",
         href: _appLogoHref,
         "data-testid": "app-logo"
       }, {
@@ -4759,7 +4767,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[700], theme.spacing(0.5, 2), theme.palette.grey[700]));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -8274,16 +8282,21 @@ const DotBodyCell = ({
           iconSize: "small",
           onClick: () => onActionMenuTrigger(wrapperRef.current, value),
           size: "small"
-        }, void 0) : value.map((item, index) => jsx(DotIconButton, {
-          className: "dot-table-action-icon",
-          "data-testid": item.dataTestId,
-          disabled: item.disabled,
-          iconId: item.iconId,
-          iconSize: "small",
-          onClick: item.onclick,
-          size: "small",
-          tooltip: item.tooltip
-        }, `${cellKey}-icon-${index}`))
+        }, void 0) : value.map((item, index) => {
+          if (item.onclick) {
+            console.warn('The onclick property is deprecated, please use onClick instead');
+          }
+          return jsx(DotIconButton, {
+            className: "dot-table-action-icon",
+            "data-testid": item.dataTestId,
+            disabled: item.disabled,
+            iconId: item.iconId,
+            iconSize: "small",
+            onClick: item.onClick || item.onclick,
+            size: "small",
+            tooltip: item.tooltip
+          }, `${cellKey}-icon-${index}`);
+        })
       }), void 0);
     }
     return getFormattedTableCellValue(value, typography);
@@ -9615,6 +9628,11 @@ const DotLinearProgress = ({
   variant: _variant = 'indeterminate'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$2, className);
+  useEffect(() => {
+    if (!ariaLabel) {
+      console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
+    }
+  }, []);
   return jsx(StyledLinearProgress, {
     "aria-label": ariaLabel,
     classes: {

package/index.umd.js

@@ -2064,7 +2064,7 @@
       displayName: "Linkstyles__StyledLink",
       componentId: "sc-1lpmaww-0"
     })(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$_);
+      return styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover.MuiLink-underlineHover {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover.MuiLink-underlineHover {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$_);
     });
     var templateObject_1$13, templateObject_2$$;
 
@@ -2087,8 +2087,15 @@
         tabIndex = _e === void 0 ? 0 : _e,
         target = _a.target,
         tooltip = _a.tooltip,
-        underline = _a.underline;
+        _f = _a.underline,
+        underline = _f === void 0 ? 'always' : _f;
       var rootClasses = useStylesWithRootClass(rootClassName$_, className);
+      React.useEffect(function () {
+        // Include a console warning if the link is not a string and no ariaLabel is provided
+        if (!isString$1(children) && !ariaLabel) {
+          console.warn("a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text");
+        }
+      }, []);
       var handleKeyPress = function handleKeyPress(event) {
         if (onClick && event.key === 'Enter') {
           event.preventDefault();
@@ -4637,6 +4644,7 @@
           className: "dot-branding"
         }, {
           children: [jsxRuntime.jsx(DotLink, __assign({
+            ariaLabel: "Digital.ai Logo",
             className: "primary-logo",
             "data-testid": "primary-logo",
             href: primaryLogoHref
@@ -4648,6 +4656,7 @@
               children: jsxRuntime.jsx(ForwardRef, {}, void 0)
             }), void 0)
           }), void 0), displayAppLogo && jsxRuntime.jsx(DotLink, __assign({
+            ariaLabel: "Application Logo",
             href: appLogoHref,
             "data-testid": "app-logo"
           }, {
@@ -5239,7 +5248,7 @@
       componentId: "sc-7cg374-1"
     })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[700], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
     var templateObject_1$I, templateObject_2$F, templateObject_3$9, templateObject_4$7;
 
@@ -8995,13 +9004,16 @@
               },
               size: "small"
             }, void 0) : value.map(function (item, index) {
+              if (item.onclick) {
+                console.warn('The onclick property is deprecated, please use onClick instead');
+              }
               return jsxRuntime.jsx(DotIconButton, {
                 className: "dot-table-action-icon",
                 "data-testid": item.dataTestId,
                 disabled: item.disabled,
                 iconId: item.iconId,
                 iconSize: "small",
-                onClick: item.onclick,
+                onClick: item.onClick || item.onclick,
                 size: "small",
                 tooltip: item.tooltip
               }, cellKey + "-icon-" + index);
@@ -10467,6 +10479,11 @@
         _b = _a.variant,
         variant = _b === void 0 ? 'indeterminate' : _b;
       var rootClasses = useStylesWithRootClass(rootClassName$2, className);
+      React.useEffect(function () {
+        if (!ariaLabel) {
+          console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
+        }
+      }, []);
       return jsxRuntime.jsx(StyledLinearProgress, {
         "aria-label": ariaLabel,
         classes: {

package/lib/components/table/Table.data.d.ts

@@ -4,7 +4,7 @@ export declare const actionItemArray: {
     actions: {
         children: JSX.Element;
         key: string;
-        onclick: () => void;
+        onClick: () => void;
     }[];
 }[];
 export declare const actionCol: {
@@ -18,7 +18,7 @@ export declare const tableData: {
             actions: {
                 children: JSX.Element;
                 key: string;
-                onclick: () => void;
+                onClick: () => void;
             }[];
         }[];
         type: string;

package/package.json

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