@digital-ai/dot-components 2.10.0 → 2.10.2

package/CHANGE_LOG.md

@@ -1,5 +1,29 @@
 # 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)
+
+**Fixed bugs:**
+
+- D-25690: DotRadioButtons missing name prop [\#1530](https://github.com/digital-ai/dot-components/pull/1530) ([ryangamble](https://github.com/ryangamble))
+
 ## [2.10.0](https://www.npmjs.com/package/@digital-ai/dot-components) (06/22/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.9.0...2.10.0)
@@ -565,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)
 
@@ -577,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)
@@ -851,6 +875,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.8.0...1.8.1)
 
+**Fixed bugs:**
+
+- D-19803: Fix DotDrawer regression [\#980](https://github.com/digital-ai/dot-components/pull/980) ([selsemore](https://github.com/selsemore))
+
 **Misc:**
 
 - S-76846: NX major upgrade to `13.7.3` [\#952](https://github.com/digital-ai/dot-components/pull/952) ([CWSites](https://github.com/CWSites))
@@ -866,7 +894,6 @@
 
 **Fixed bugs:**
 
-- D-19803: Fix DotDrawer regression [\#980](https://github.com/digital-ai/dot-components/pull/980) ([selsemore](https://github.com/selsemore))
 - D-19722: `Table`: Fix Storybook issues by refactoring Table's story. [\#974](https://github.com/digital-ai/dot-components/pull/974) ([dmiletic85](https://github.com/dmiletic85))
 - D-19713: Do not show alert banner close button if onClose not provided [\#973](https://github.com/digital-ai/dot-components/pull/973) ([selsemore](https://github.com/selsemore))
 
@@ -1171,7 +1198,6 @@
 - D-18997: when specified width of sidebar, it should be applied properly [\#737](https://github.com/digital-ai/dot-components/pull/737) ([CWSites](https://github.com/CWSites))
 - D-18986: update app toolbar to be dense by default [\#735](https://github.com/digital-ai/dot-components/pull/735) ([CWSites](https://github.com/CWSites))
 - D-18985: update menu list to be content-box sizing [\#734](https://github.com/digital-ai/dot-components/pull/734) ([CWSites](https://github.com/CWSites))
-- D-18963: add ariaLabel to sidebar collapse button [\#731](https://github.com/digital-ai/dot-components/pull/731) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1189,6 +1215,7 @@
 
 **Fixed bugs:**
 
+- D-18963: add ariaLabel to sidebar collapse button [\#731](https://github.com/digital-ai/dot-components/pull/731) ([CWSites](https://github.com/CWSites))
 - D-18979: export `Tooltip` component [\#729](https://github.com/digital-ai/dot-components/pull/729) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -1421,6 +1448,7 @@
 - Upload of commit icon [\#575](https://github.com/digital-ai/dot-components/pull/575) ([BojanKocijan](https://github.com/BojanKocijan))
 - S-76321: Remove PB-related code from dot-components repo [\#570](https://github.com/digital-ai/dot-components/pull/570) ([dmiletic85](https://github.com/dmiletic85))
 - Issue \#562: Fix EmptyState behavior when no imageSrc prop is passed [\#568](https://github.com/digital-ai/dot-components/pull/568) ([selsemore](https://github.com/selsemore))
+- Issue \#566: Fix DotPill console warning message [\#567](https://github.com/digital-ai/dot-components/pull/567) ([selsemore](https://github.com/selsemore))
 - Navigation rail improvements [\#565](https://github.com/digital-ai/dot-components/pull/565) ([dmiletic85](https://github.com/dmiletic85))
 - New icons 27 5 2021 [\#564](https://github.com/digital-ai/dot-components/pull/564) ([BojanKocijan](https://github.com/BojanKocijan))
 - Add isUnderToolbar property to Sidebar for use beneath AppToolbar [\#560](https://github.com/digital-ai/dot-components/pull/560) ([selsemore](https://github.com/selsemore))

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;
@@ -6406,6 +6414,7 @@ const DotRadioGroup = ({
       disabled: optionDisabled || disableGroup,
       label: optionLabel,
       labelPlacement: _labelPlacement,
+      name: name,
       size: _size,
       value: optionValue
     }, optionValue);
@@ -8273,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);
@@ -9614,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;
 
@@ -6971,6 +6980,7 @@
           disabled: optionDisabled || disableGroup,
           label: optionLabel,
           labelPlacement: labelPlacement,
+          name: name,
           size: size,
           value: optionValue
         }, optionValue);
@@ -8994,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);
@@ -10466,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.0",
+  "version": "2.10.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [