@spaced-out/ui-design-system 0.1.48 → 0.1.50

package/.cspell/custom-words.txt

@@ -3,8 +3,8 @@ aditya-kaushal
 amet
 Anant
 argstable
-ashwini-sensehq
 Ashwini
+ashwini-sensehq
 atleast
 autodocs
 circlehollow
@@ -43,6 +43,7 @@ preminor
 prepatch
 progressbar
 proxysense
+rerouter
 rgba
 sbdocs
 Stapleton

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.50](https://github.com/spaced-out/ui-design-system/compare/v0.1.49...v0.1.50) (2023-09-15)
+
+
+### Features
+
+* external file deletion support for file upload ([32cf857](https://github.com/spaced-out/ui-design-system/commit/32cf857a9688c2a20b1214381caccde699c192c4))
+
+### [0.1.49](https://github.com/spaced-out/ui-design-system/compare/v0.1.48...v0.1.49) (2023-09-15)
+
+
+### Features
+
+* breadcrumbs component and link accessibility fixes ([#141](https://github.com/spaced-out/ui-design-system/issues/141)) ([609762e](https://github.com/spaced-out/ui-design-system/commit/609762e55cddb1a50fb56d17e4dcc31fdbcf1cd1))
+
 ### [0.1.48](https://github.com/spaced-out/ui-design-system/compare/v0.1.48-beta.1...v0.1.48) (2023-09-12)
 
 

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbLink = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _Link = require("../../Link");
+var _BreadcrumbLinkModule = _interopRequireDefault(require("./BreadcrumbLink.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const BreadcrumbLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    id,
+    className,
+    as,
+    underline = false,
+    isActive,
+    onClick,
+    href,
+    to,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Link.Link, _extends({}, props, {
+    to: to ?? href,
+    "data-testid": "BreadcrumbLink",
+    ref: ref,
+    as: as || 'subTitleExtraSmall',
+    underline: underline,
+    disabled: isActive,
+    className: (0, _classify.default)(_BreadcrumbLinkModule.default.breadcrumbLink, {
+      [_BreadcrumbLinkModule.default.active]: isActive ?? window.location.href.includes(to ?? href)
+    }, className),
+    onClick: e => {
+      onClick?.(e, id);
+    }
+  }));
+});
+exports.BreadcrumbLink = BreadcrumbLink;
+BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import type {LinkProps} from '../../Link';
+import {Link} from '../../Link';
+
+import css from './BreadcrumbLink.module.css';
+
+
+export type BreadcrumbLinkProps = {
+  ...LinkProps,
+  isActive?: boolean,
+  id: string,
+  onClick?: (SyntheticEvent<HTMLElement>, id: string) => mixed,
+  ...
+};
+
+export const BreadcrumbLink: React$AbstractComponent<
+  BreadcrumbLinkProps,
+  ?HTMLAnchorElement,
+> = React.forwardRef<BreadcrumbLinkProps, ?HTMLAnchorElement>(
+  (
+    {
+      id,
+      className,
+      as,
+      underline = false,
+      isActive,
+      onClick,
+      href,
+      to,
+      ...props
+    }: BreadcrumbLinkProps,
+    ref,
+  ) => (
+    <Link
+      {...props}
+      to={to ?? href}
+      data-testid="BreadcrumbLink"
+      ref={ref}
+      as={as || 'subTitleExtraSmall'}
+      underline={underline}
+      disabled={isActive}
+      className={classify(
+        css.breadcrumbLink,
+        {[css.active]: isActive ?? window.location.href.includes(to ?? href)},
+        className,
+      )}
+      onClick={(e) => {
+        onClick?.(e, id);
+      }}
+    />
+  ),
+);
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.module.css

@@ -0,0 +1,28 @@
+@value (
+  colorTextSecondary,
+  colorTextPrimary,
+  colorTextClickable
+) from '../../../styles/variables/_color.css';
+
+.breadcrumbLink {
+  display: flex;
+  color: colorTextSecondary;
+}
+
+.breadcrumbLink:hover {
+  color: colorTextClickable;
+}
+
+.breadcrumbLink:focus,
+.active {
+  color: colorTextPrimary;
+}
+
+.active {
+  pointer-events: none;
+  cursor: initial;
+}
+
+.active:hover {
+  color: colorTextPrimary;
+}

package/lib/components/Breadcrumbs/BreadcrumbLink/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BreadcrumbLink = require("./BreadcrumbLink");
+Object.keys(_BreadcrumbLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BreadcrumbLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BreadcrumbLink[key];
+    }
+  });
+});

package/lib/components/Breadcrumbs/BreadcrumbLink/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './BreadcrumbLink';

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumbs = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _BreadcrumbsModule = _interopRequireDefault(require("./Breadcrumbs.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BreadcrumbSeparator = () => /*#__PURE__*/React.createElement(_Icon.Icon, {
+  className: _BreadcrumbsModule.default.separator,
+  name: "chevron-right",
+  size: "small",
+  color: "secondary"
+});
+const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    children,
+    linkComponent
+  } = _ref;
+  const total = React.Children.count(children);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Breadcrumbs",
+    className: (0, _classify.default)(_BreadcrumbsModule.default.wrapper, classNames?.wrapper)
+  }, React.Children.map(children, (child, idx) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement(React.Fragment, {
+    key: `crumb-${idx}`
+  }, /*#__PURE__*/React.isValidElement(child) && child?.type?.displayName === 'BreadcrumbLink' ? /*#__PURE__*/React.cloneElement(child, {
+    linkComponent
+  }) : child, idx < total - 1 && /*#__PURE__*/React.createElement(BreadcrumbSeparator, {
+    "aria-hidden": true
+  }))));
+});
+exports.Breadcrumbs = Breadcrumbs;

package/lib/components/Breadcrumbs/Breadcrumbs.js.flow

@@ -0,0 +1,59 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import type {BaseLinkProps} from '../Link';
+
+import css from './Breadcrumbs.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type BreadcrumbsProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+};
+
+const BreadcrumbSeparator = (): React.Node => (
+  <Icon
+    className={css.separator}
+    name="chevron-right"
+    size="small"
+    color="secondary"
+  />
+);
+
+export const Breadcrumbs: React$AbstractComponent<
+  BreadcrumbsProps,
+  HTMLDivElement,
+> = React.forwardRef<BreadcrumbsProps, HTMLDivElement>(
+  ({classNames, children, linkComponent}: BreadcrumbsProps, ref) => {
+    const total = React.Children.count(children);
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Breadcrumbs"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {React.Children.map(children, (child, idx) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={`crumb-${idx}`}>
+            {/*add linkComponent to BreadcrumbLinks only,
+            otherwise return original element */}
+            {React.isValidElement(child) &&
+            child?.type?.displayName === 'BreadcrumbLink'
+              ? React.cloneElement(child, {linkComponent})
+              : child}
+
+            {/*Add Separator*/}
+            {idx < total - 1 && <BreadcrumbSeparator aria-hidden />}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  },
+);

package/lib/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,14 @@
+@value (
+  spaceSmall
+) from '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.separator {
+  margin-left: spaceSmall;
+  margin-right: spaceSmall;
+}

package/lib/components/Breadcrumbs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BreadcrumbLink = require("./BreadcrumbLink");
+Object.keys(_BreadcrumbLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BreadcrumbLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BreadcrumbLink[key];
+    }
+  });
+});
+var _Breadcrumbs = require("./Breadcrumbs");
+Object.keys(_Breadcrumbs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Breadcrumbs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Breadcrumbs[key];
+    }
+  });
+});

package/lib/components/Breadcrumbs/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './BreadcrumbLink';
+export * from './Breadcrumbs';

package/lib/components/Chip/Chip.js

@@ -53,7 +53,8 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.small]: size === 'small',
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
-      [_ChipModule.default.disabled]: disabled
+      [_ChipModule.default.disabled]: disabled,
+      [_ChipModule.default.noHoverState]: showStatusIndicator
     }, classNames?.wrapper),
     onClick: onClick
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {

package/lib/components/Chip/Chip.js.flow

@@ -91,6 +91,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
             [css.dismissable]: dismissable,
             [css.withIcon]: !!iconName && size !== 'small',
             [css.disabled]: disabled,
+            [css.noHoverState]: showStatusIndicator,
           },
           classNames?.wrapper,
         )}

package/lib/components/Chip/Chip.module.css

@@ -55,7 +55,11 @@
   background-color: colorNeutralLightest;
 }
 
-.primary:hover {
+.noHoverState {
+  cursor: initial;
+}
+
+.primary:not(.noHoverState):hover {
   background-color: colorNeutralLight;
 }
 
@@ -63,7 +67,7 @@
   background-color: colorInformationLightest;
 }
 
-.information:hover {
+.information:not(.noHoverState):hover {
   background-color: colorInformationLight;
 }
 
@@ -71,7 +75,7 @@
   background-color: colorSuccessLightest;
 }
 
-.success:hover {
+.success:not(.noHoverState):hover {
   background-color: colorSuccessLight;
 }
 
@@ -79,7 +83,7 @@
   background-color: colorWarningLightest;
 }
 
-.warning:hover {
+.warning:not(.noHoverState):hover {
   background-color: colorWarningLight;
 }
 
@@ -87,7 +91,7 @@
   background-color: colorDangerLightest;
 }
 
-.danger:hover {
+.danger:not(.noHoverState):hover {
   background-color: colorDangerLight;
 }
 
@@ -96,7 +100,7 @@
   background-color: colorFillNone;
 }
 
-.secondary:hover {
+.secondary:not(.noHoverState):hover {
   background-color: colorGrayLightest;
 }
 

package/lib/components/FileUpload/FileBlock/FileBlock.js.flow

@@ -18,7 +18,7 @@ type ClassNames = $ReadOnly<{
 export type FileBlockProps = {
   classNames?: ClassNames,
   fileObject: FileObject,
-  onFileRefreshClick?: (file: FileObject) => void,
+  onFileRefreshClick?: (file: FileObject) => mixed,
   handleFileClear?: (id: string) => mixed,
 };
 

package/lib/components/FileUpload/FileUpload.js

@@ -31,7 +31,8 @@ const FileUploadBase = (props, ref) => {
     onRejectedFilesDrop,
     onFileClear,
     onFileRefreshClick,
-    maxFiles = 1
+    maxFiles = 1,
+    handleFileDeletionExternally
   } = props;
 
   // Get file upload state from useFileUpload hook
@@ -62,6 +63,7 @@ const FileUploadBase = (props, ref) => {
     moveFileToProgress,
     moveFileToSuccess,
     moveFileToReject,
+    handleFileClear,
     setShowReUpload,
     validFiles,
     rejectedFiles,
@@ -95,7 +97,7 @@ const FileUploadBase = (props, ref) => {
   }, /*#__PURE__*/React.createElement(_FileBlock.FileBlock, {
     fileObject: fileObject,
     onFileRefreshClick: onFileRefreshClick,
-    handleFileClear: handleFileClear
+    handleFileClear: handleFileDeletionExternally ? onFileClear : handleFileClear
   })))));
 };
 const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);

package/lib/components/FileUpload/FileUpload.js.flow

@@ -23,8 +23,15 @@ type ClassNames = $ReadOnly<{
 
 export type FileProgress = number | 'indeterminate';
 
+type LocalFileProps = {
+  name?: string,
+  type?: string,
+  size?: number,
+  ...
+};
+
 export type FileObject = {
-  file: File,
+  file: File | LocalFileProps,
   id: string,
   reject?: boolean,
   rejectReason?: string,
@@ -53,6 +60,7 @@ export type FileUploadRef = {
   moveFileToSuccess: (id: string, successMessage?: string) => mixed,
   moveFileToReject: (id: string, rejectReason?: string) => mixed,
   setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+  handleFileClear: (id: string) => mixed,
   validFiles: Array<FileObject>,
   rejectedFiles: Array<FileObject>,
   files: Array<FileObject>,
@@ -66,12 +74,12 @@ export type FileUploadBaseProps = {
   disabled?: boolean,
 
   // File drop callbacks
-  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => void,
-  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => void,
+  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => mixed,
+  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => mixed,
 
   // File clear callbacks
-  onFileClear?: (id: string) => void,
-  onClear?: () => void,
+  onFileClear?: (id: string) => mixed,
+  onClear?: () => mixed,
 };
 
 export type FileUploadProps = {
@@ -83,9 +91,10 @@ export type FileUploadProps = {
   draggingInstruction?: React.Node,
   secondaryInstruction?: React.Node,
   required?: boolean,
+  handleFileDeletionExternally?: boolean,
 
   // File refresh callback
-  onFileRefreshClick?: (file: FileObject) => void,
+  onFileRefreshClick?: (file: FileObject) => mixed,
 };
 
 const FileUploadBase = (props: FileUploadProps, ref) => {
@@ -105,6 +114,7 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
     onFileClear,
     onFileRefreshClick,
     maxFiles = 1,
+    handleFileDeletionExternally,
   } = props;
 
   // Get file upload state from useFileUpload hook
@@ -135,6 +145,7 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
     moveFileToProgress,
     moveFileToSuccess,
     moveFileToReject,
+    handleFileClear,
     setShowReUpload,
     validFiles,
     rejectedFiles,
@@ -183,7 +194,9 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
               <FileBlock
                 fileObject={fileObject}
                 onFileRefreshClick={onFileRefreshClick}
-                handleFileClear={handleFileClear}
+                handleFileClear={
+                  handleFileDeletionExternally ? onFileClear : handleFileClear
+                }
               />
             </React.Fragment>
           ))}

package/lib/components/Link/Link.js

@@ -63,6 +63,8 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     underline = true,
     tabIndex = 0,
     disabled,
+    onClick,
+    linkComponent: LinkComponent = DefaultLink,
     ...props
   } = _ref;
   const linkRef = React.useRef(null);
@@ -72,14 +74,48 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       linkRef.current?.blur();
     }
   }, [disabled]);
-  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+  const handleClick = event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+
+  /**
+   * By spec anchor tag wont call onClick on enter key press when the element is focussed
+   * as a workaround we would need to listen to key press event and call onClick
+   * manually, one workaround to avoid this is to have empty href along with onClick
+   * but that would break accessibility
+   */
+  const handleKeyPress = event => {
+    if (event.key === 'Enter' && onClick) {
+      handleClick(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(LinkComponent, _extends({}, props, {
     tabIndex: disabled ? -1 : tabIndex,
     ref: linkRef,
     "data-testid": "Link",
     className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {
       [_typographyModule.default.underline]: underline,
       [_typographyModule.default.disabled]: disabled
-    }, className)
+    }, className),
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
   }), children);
 });
-exports.Link = Link;
+exports.Link = Link;
+const DefaultLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    href,
+    to,
+    ...props
+  } = _ref2;
+  const resolvedHref = to ?? href;
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    href: resolvedHref,
+    ref: ref
+  }), children);
+});

package/lib/components/Link/Link.js.flow

@@ -57,23 +57,52 @@ export const ANCHOR_TARGET = Object.freeze({
 
 export type AnchorTarget = $Values<typeof ANCHOR_TARGET>;
 
-export type LinkProps = {
-  color?: ColorTypes,
+export type BaseLinkProps = {
   children: React.Node,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  tabIndex?: number,
+  disabled?: boolean,
   className?: string,
   as?: LinkAs,
   rel?: AnchorRel,
-  underline?: boolean,
   target?: AnchorTarget,
+  /**
+   * IMPORTANT: If you are using `to` make sure to provide link component from your router
+   * if you want to prevent full page reloads in a Single Page Application (SPA).
+   *
+   * Using `href` in anchor tags causes the browser to navigate to a new URL,
+   * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
+   * user experience without such reloads.
+   *
+   * To achieve client-side navigation and prevent page reloads, use client-side routing libraries
+   * (e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
+   * to handle navigation within your SPA. These components work without triggering full page reloads
+   * and maintain the SPA's performance and user experience.
+   *
+   */
+  to?: string,
   href?: string,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  tabIndex?: number,
-  disabled?: boolean,
   ...
 };
 
-export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
-  React.forwardRef<LinkProps, HTMLAnchorElement>(
+export type LinkProps = {
+  ...BaseLinkProps,
+  color?: ColorTypes,
+  underline?: boolean,
+  /**
+   * Provide your router's link component
+   *
+   * import {Link} from 'src/rerouter';
+   * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
+   *
+   * <GenesisLink linkComponent={Link} to="/pages" />
+   */
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+  ...
+};
+
+export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
+  React.forwardRef<LinkProps, ?HTMLAnchorElement>(
     (
       {
         color = TEXT_COLORS.clickable,
@@ -83,6 +112,8 @@ export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
         underline = true,
         tabIndex = 0,
         disabled,
+        onClick,
+        linkComponent: LinkComponent = DefaultLink,
         ...props
       }: LinkProps,
       ref,
@@ -95,8 +126,29 @@ export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
         }
       }, [disabled]);
 
+      const handleClick = (event: SyntheticEvent<HTMLElement>) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+
+        onClick?.(event);
+      };
+
+      /**
+       * By spec anchor tag wont call onClick on enter key press when the element is focussed
+       * as a workaround we would need to listen to key press event and call onClick
+       * manually, one workaround to avoid this is to have empty href along with onClick
+       * but that would break accessibility
+       */
+      const handleKeyPress = (event) => {
+        if (event.key === 'Enter' && onClick) {
+          handleClick(event);
+        }
+      };
+
       return (
-        <a
+        <LinkComponent
           {...props}
           tabIndex={disabled ? -1 : tabIndex}
           ref={linkRef}
@@ -111,9 +163,23 @@ export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
             },
             className,
           )}
+          onClick={handleClick}
+          onKeyPress={handleKeyPress}
         >
           {children}
-        </a>
+        </LinkComponent>
       );
     },
   );
+
+const DefaultLink = React.forwardRef<BaseLinkProps, HTMLAnchorElement>(
+  ({children, href, to, ...props}, ref) => {
+    const resolvedHref = to ?? href;
+
+    return (
+      <a {...props} href={resolvedHref} ref={ref}>
+        {children}
+      </a>
+    );
+  },
+);

package/lib/components/index.js

@@ -47,6 +47,17 @@ Object.keys(_Banner).forEach(function (key) {
     }
   });
 });
+var _Breadcrumbs = require("./Breadcrumbs");
+Object.keys(_Breadcrumbs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Breadcrumbs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Breadcrumbs[key];
+    }
+  });
+});
 var _Button = require("./Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Badge';
 export * from './Banner';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './ButtonDropdown';
 export * from './ButtonTabs';

package/lib/utils/helpers/helpers.js

@@ -21,7 +21,8 @@ const range = (start, end) => {
   }, (_, i) => start + i);
 };
 exports.range = range;
-const convertFileSize = fileSize => {
+const convertFileSize = function () {
+  let fileSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   let sizeInBytes = fileSize;
   // Check if the file size is less than 1024
   if (sizeInBytes < 0) {

package/lib/utils/helpers/helpers.js.flow

@@ -15,7 +15,7 @@ export const range = (start: number, end: number): Array<number> => {
   return Array.from({length}, (_, i) => start + i);
 };
 
-export const convertFileSize = (fileSize: number): string => {
+export const convertFileSize = (fileSize: number = 0): string => {
   let sizeInBytes = fileSize;
   // Check if the file size is less than 1024
   if (sizeInBytes < 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {