Build

(cherry picked from commit e9e62a134e2e81bbca5860597b213e1bc11b3bd6)

Breadcrumsb types

(cherry picked from commit cf0efda19f5a5a43d56f9c2d41aff8d05a52c163)

Added custom styling capability to mds

(cherry picked from commit 9b589cc02eb906b7e39fa8f2a31ac168ceba4ba5)

dist/cjs/types/components/ActionsList/ActionsList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionsListProps } from "./ActionsList.types";
+declare const ActionsList: FC<ActionsListProps>;
+export default ActionsList;

dist/cjs/types/components/ActionsList/ActionsList.types.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface ActionItem {
+  action: () => void;
+  label: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  tooltip: string;
+}
+export interface ActionsListProps {
+  sx?: CSSObject;
+  items: ActionItem[];
+  title: React.ReactNode;
+}
+export interface ActionsListPanelProps {
+  sx?: CSSObject;
+}
+export interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon: React.ReactNode;
+}

dist/cjs/types/components/ActionsList/ObjectActionButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionButtonProps } from "./ActionsList.types";
+declare const ObjectActionButton: FC<ActionButtonProps>;
+export default ObjectActionButton;

dist/cjs/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+export default Breadcrumbs;

dist/cjs/types/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions?: React.ReactNode;
+  goBackFunction: () => void;
+}
+export interface BreadcrumbsContainerProps {
+  sx?: CSSObject;
+}

dist/cjs/types/components/DataTable/DataTable.types.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
 export interface ItemActions {
   label?: string;
   type: string | any;
@@ -59,11 +60,13 @@ export interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
 }
 export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   customPaperHeight?: string | number;
   noBackground?: boolean;
+  sx?: CSSObject;
 }
 export interface IActionButton {
   label?: string;

dist/cjs/types/components/LoginWrapper/LoginWrapper.types.d.ts

@@ -6,5 +6,5 @@ export interface LoginWrapperProps {
   formFooter?: ReactNode;
   promoHeader?: ReactNode;
   promoInfo?: ReactNode;
-  disableAnimation?: boolean;
+  backgroundAnimation?: boolean;
 }

dist/cjs/types/components/SimpleHeader/SimpleHeader.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { SimpleHeaderProps } from "./SimpleHeader.types";
+declare const SimpleHeader: FC<SimpleHeaderProps>;
+export default SimpleHeader;

dist/cjs/types/components/SimpleHeader/SimpleHeader.types.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface SimpleHeaderProps {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  sx?: CSSObject;
+}
+export interface SimpleHeaderContainerProps {
+  sx?: CSSObject;
+}

dist/cjs/types/components/ThemeHandler/ThemeHandler.types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
+import { ThemeDefinitionProps } from "../../global/global.types";
 export interface ThemeHandlerProps {
   darkMode?: boolean;
+  customTheme?: ThemeDefinitionProps;
   children: ReactNode;
 }

dist/cjs/types/components/index.d.ts

@@ -20,6 +20,9 @@ export { default as FormLayout } from "./FormLayout/FormLayout";
 export { default as PageLayout } from "./PageLayout/PageLayout";
 export { default as MainContainer } from "./MainContainer/MainContainer";
 export { default as InputBox } from "./InputBox/InputBox";
+export { default as Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
+export { default as ActionsList } from "./ActionsList/ActionsList";
+export { default as SimpleHeader } from "./SimpleHeader/SimpleHeader";
 export * from "./Icons";
 export * from "./Icons/SidebarMenus";
 export * from "./Icons/FileIcons";

dist/cjs/types/global/global.types.d.ts

@@ -0,0 +1,109 @@
+export interface ButtonThemeProps {
+  border: string;
+  text: string;
+  background: string;
+  iconColor: string;
+}
+export interface ButtonThemeStatesProps {
+  enabled: ButtonThemeProps;
+  disabled: ButtonThemeProps;
+  hover: ButtonThemeProps;
+  pressed: ButtonThemeProps;
+}
+export interface LoginPageThemeProps {
+  formBG: string;
+  bgFilter: string;
+  promoBG: string;
+  promoHeader: string;
+  promoText: string;
+  footerElements: string;
+  footerDivider: string;
+}
+export interface PageHeaderThemeProps {
+  background: string;
+  border: string;
+  color: string;
+}
+export interface TooltipThemeProps {
+  background: string;
+  color: string;
+}
+export interface CommonInputThemeProps {
+  labelColor: string;
+  checkBoxBorder: string;
+  checkBoxColor: string;
+}
+export interface IconButtonThemeProps {
+  buttonBG: string;
+  activeBG: string;
+  hoverBG: string;
+  disabledBG: string;
+  color: string;
+}
+export interface DataTableThemeProps {
+  border: string;
+  disabledBorder: string;
+  disabledBG: string;
+  selected: string;
+  deletedDisabled: string;
+  hoverColor: string;
+}
+export interface BackLinkThemeProps {
+  color: string;
+  arrow: string;
+  hover: string;
+}
+export interface InputBoxThemeProps {
+  border: string;
+  hoverBorder: string;
+  color: string;
+  backgroundColor: string;
+  error: string;
+}
+export interface BreadcrumbsBackStyle {
+  border: string;
+  backgroundColor: string;
+}
+export interface BreadcrumbsThemeProps {
+  border: string;
+  backgroundColor: string;
+  linksColor: string;
+  backButton: BreadcrumbsBackStyle;
+  textColor: string;
+}
+export interface ActionsListThemeProps {
+  titleColor: string;
+  containerBorderColor: string;
+  backgroundColor: string;
+  optionsTextColor: string;
+  optionsBorder: string;
+  optionsHoverTextColor: string;
+  disabledOptionsTextColor: string;
+}
+export interface ThemeDefinitionProps {
+  bgColor: string;
+  fontColor: string;
+  borderColor: string;
+  bulletColor: string;
+  logoColor: string;
+  logoLabelColor: string;
+  logoLabelInverse: string;
+  loaderColor: string;
+  boxBackground: string;
+  buttons: {
+    regular: ButtonThemeStatesProps;
+    callAction: ButtonThemeStatesProps;
+    secondary: ButtonThemeStatesProps;
+    text: ButtonThemeStatesProps;
+  };
+  login: LoginPageThemeProps;
+  pageHeader: PageHeaderThemeProps;
+  tooltip: TooltipThemeProps;
+  commonInput: CommonInputThemeProps;
+  iconButton: IconButtonThemeProps;
+  dataTable: DataTableThemeProps;
+  backLink: BackLinkThemeProps;
+  inputBox: InputBoxThemeProps;
+  breadcrumbs: BreadcrumbsThemeProps;
+  actionsList: ActionsListThemeProps;
+}

dist/cjs/types/global/themes.d.ts

@@ -1,3 +1,4 @@
+import { ThemeDefinitionProps } from "./global.types";
 export declare const lightColors: {
   white: string;
   sectionOneBG: string;
@@ -41,6 +42,13 @@ export declare const lightColors: {
   backLinkColor: string;
   backLinkArrow: string;
   backLinkHover: string;
+  commonLinkColor: string;
+  breadcrumbsBackground: string;
+  breadcrumbsBackBorder: string;
+  breadcrumbsText: string;
+  actionsListBorder: string;
+  disabledActionsColor: string;
+  optionTextColor: string;
 };
 export declare const darkColors: {
   dark: string;
@@ -86,337 +94,5 @@ export declare const darkColors: {
   backLinkArrow: string;
   backLinkHover: string;
 };
-export declare const lightTheme: {
-  bgColor: string;
-  fontColor: string;
-  borderColor: string;
-  bulletColor: string;
-  logoColor: string;
-  logoLabelColor: string;
-  logoLabelInverse: string;
-  loaderColor: string;
-  boxBackground: string;
-  buttons: {
-    regular: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    callAction: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    secondary: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    text: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-  };
-  login: {
-    formBG: string;
-    bgFilter: string;
-    promoBG: string;
-    promoHeader: string;
-    promoText: string;
-    footerElements: string;
-    footerDivider: string;
-  };
-  pageHeader: {
-    background: string;
-    border: string;
-    color: string;
-  };
-  tooltip: {
-    background: string;
-    color: string;
-  };
-  commonInput: {
-    labelColor: string;
-    checkBoxBorder: string;
-    checkBoxColor: string;
-  };
-  iconButton: {
-    buttonBG: string;
-    activeBG: string;
-    hoverBG: string;
-    disabledBG: string;
-    color: string;
-  };
-  dataTable: {
-    border: string;
-    disabledBorder: string;
-    disabledBG: string;
-    selected: string;
-    deletedDisabled: string;
-    hoverColor: string;
-  };
-  backLink: {
-    color: string;
-    arrow: string;
-    hover: string;
-  };
-  inputBox: {
-    border: string;
-    hoverBorder: string;
-    color: string;
-    backgroundColor: string;
-    error: string;
-  };
-};
-export declare const darkTheme: {
-  bgColor: string;
-  fontColor: string;
-  borderColor: string;
-  bulletColor: string;
-  logoColor: string;
-  logoLabelColor: string;
-  logoLabelInverse: string;
-  loaderColor: string;
-  boxBackground: string;
-  buttons: {
-    regular: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    callAction: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    secondary: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    text: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-  };
-  login: {
-    formBG: string;
-    promoBG: string;
-    bgFilter: string;
-    promoHeader: string;
-    promoText: string;
-    footerElements: string;
-    footerDivider: string;
-  };
-  pageHeader: {
-    background: string;
-    border: string;
-    color: string;
-  };
-  tooltip: {
-    background: string;
-    color: string;
-  };
-  commonInput: {
-    labelColor: string;
-    checkBoxBorder: string;
-    checkBoxColor: string;
-  };
-  iconButton: {
-    buttonBG: string;
-    activeBG: string;
-    hoverBG: string;
-    disabledBG: string;
-    color: string;
-  };
-  dataTable: {
-    border: string;
-    disabledBorder: string;
-    disabledBG: string;
-    selected: string;
-    deletedDisabled: string;
-    hoverColor: string;
-  };
-  backLink: {
-    color: string;
-    arrow: string;
-    hover: string;
-  };
-  inputBox: {
-    border: string;
-    hoverBorder: string;
-    color: string;
-    backgroundColor: string;
-    error: string;
-  };
-};
+export declare const lightTheme: ThemeDefinitionProps;
+export declare const darkTheme: ThemeDefinitionProps;

dist/esm/types/components/ActionsList/ActionsList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionsListProps } from "./ActionsList.types";
+declare const ActionsList: FC<ActionsListProps>;
+export default ActionsList;

dist/esm/types/components/ActionsList/ActionsList.types.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface ActionItem {
+  action: () => void;
+  label: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  tooltip: string;
+}
+export interface ActionsListProps {
+  sx?: CSSObject;
+  items: ActionItem[];
+  title: React.ReactNode;
+}
+export interface ActionsListPanelProps {
+  sx?: CSSObject;
+}
+export interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon: React.ReactNode;
+}

dist/esm/types/components/ActionsList/ObjectActionButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionButtonProps } from "./ActionsList.types";
+declare const ObjectActionButton: FC<ActionButtonProps>;
+export default ObjectActionButton;

dist/esm/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+export default Breadcrumbs;

dist/esm/types/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions?: React.ReactNode;
+  goBackFunction: () => void;
+}
+export interface BreadcrumbsContainerProps {
+  sx?: CSSObject;
+}

dist/esm/types/components/DataTable/DataTable.types.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
 export interface ItemActions {
   label?: string;
   type: string | any;
@@ -59,11 +60,13 @@ export interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
 }
 export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   customPaperHeight?: string | number;
   noBackground?: boolean;
+  sx?: CSSObject;
 }
 export interface IActionButton {
   label?: string;

dist/esm/types/components/LoginWrapper/LoginWrapper.types.d.ts

@@ -6,5 +6,5 @@ export interface LoginWrapperProps {
   formFooter?: ReactNode;
   promoHeader?: ReactNode;
   promoInfo?: ReactNode;
-  disableAnimation?: boolean;
+  backgroundAnimation?: boolean;
 }

dist/esm/types/components/SimpleHeader/SimpleHeader.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { SimpleHeaderProps } from "./SimpleHeader.types";
+declare const SimpleHeader: FC<SimpleHeaderProps>;
+export default SimpleHeader;

dist/esm/types/components/SimpleHeader/SimpleHeader.types.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CSSObject } from "styled-components";
+export interface SimpleHeaderProps {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  sx?: CSSObject;
+}
+export interface SimpleHeaderContainerProps {
+  sx?: CSSObject;
+}

dist/esm/types/components/ThemeHandler/ThemeHandler.types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
+import { ThemeDefinitionProps } from "../../global/global.types";
 export interface ThemeHandlerProps {
   darkMode?: boolean;
+  customTheme?: ThemeDefinitionProps;
   children: ReactNode;
 }

dist/esm/types/components/index.d.ts

@@ -20,6 +20,9 @@ export { default as FormLayout } from "./FormLayout/FormLayout";
 export { default as PageLayout } from "./PageLayout/PageLayout";
 export { default as MainContainer } from "./MainContainer/MainContainer";
 export { default as InputBox } from "./InputBox/InputBox";
+export { default as Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
+export { default as ActionsList } from "./ActionsList/ActionsList";
+export { default as SimpleHeader } from "./SimpleHeader/SimpleHeader";
 export * from "./Icons";
 export * from "./Icons/SidebarMenus";
 export * from "./Icons/FileIcons";

dist/esm/types/global/global.types.d.ts

@@ -0,0 +1,109 @@
+export interface ButtonThemeProps {
+  border: string;
+  text: string;
+  background: string;
+  iconColor: string;
+}
+export interface ButtonThemeStatesProps {
+  enabled: ButtonThemeProps;
+  disabled: ButtonThemeProps;
+  hover: ButtonThemeProps;
+  pressed: ButtonThemeProps;
+}
+export interface LoginPageThemeProps {
+  formBG: string;
+  bgFilter: string;
+  promoBG: string;
+  promoHeader: string;
+  promoText: string;
+  footerElements: string;
+  footerDivider: string;
+}
+export interface PageHeaderThemeProps {
+  background: string;
+  border: string;
+  color: string;
+}
+export interface TooltipThemeProps {
+  background: string;
+  color: string;
+}
+export interface CommonInputThemeProps {
+  labelColor: string;
+  checkBoxBorder: string;
+  checkBoxColor: string;
+}
+export interface IconButtonThemeProps {
+  buttonBG: string;
+  activeBG: string;
+  hoverBG: string;
+  disabledBG: string;
+  color: string;
+}
+export interface DataTableThemeProps {
+  border: string;
+  disabledBorder: string;
+  disabledBG: string;
+  selected: string;
+  deletedDisabled: string;
+  hoverColor: string;
+}
+export interface BackLinkThemeProps {
+  color: string;
+  arrow: string;
+  hover: string;
+}
+export interface InputBoxThemeProps {
+  border: string;
+  hoverBorder: string;
+  color: string;
+  backgroundColor: string;
+  error: string;
+}
+export interface BreadcrumbsBackStyle {
+  border: string;
+  backgroundColor: string;
+}
+export interface BreadcrumbsThemeProps {
+  border: string;
+  backgroundColor: string;
+  linksColor: string;
+  backButton: BreadcrumbsBackStyle;
+  textColor: string;
+}
+export interface ActionsListThemeProps {
+  titleColor: string;
+  containerBorderColor: string;
+  backgroundColor: string;
+  optionsTextColor: string;
+  optionsBorder: string;
+  optionsHoverTextColor: string;
+  disabledOptionsTextColor: string;
+}
+export interface ThemeDefinitionProps {
+  bgColor: string;
+  fontColor: string;
+  borderColor: string;
+  bulletColor: string;
+  logoColor: string;
+  logoLabelColor: string;
+  logoLabelInverse: string;
+  loaderColor: string;
+  boxBackground: string;
+  buttons: {
+    regular: ButtonThemeStatesProps;
+    callAction: ButtonThemeStatesProps;
+    secondary: ButtonThemeStatesProps;
+    text: ButtonThemeStatesProps;
+  };
+  login: LoginPageThemeProps;
+  pageHeader: PageHeaderThemeProps;
+  tooltip: TooltipThemeProps;
+  commonInput: CommonInputThemeProps;
+  iconButton: IconButtonThemeProps;
+  dataTable: DataTableThemeProps;
+  backLink: BackLinkThemeProps;
+  inputBox: InputBoxThemeProps;
+  breadcrumbs: BreadcrumbsThemeProps;
+  actionsList: ActionsListThemeProps;
+}

dist/esm/types/global/themes.d.ts

@@ -1,3 +1,4 @@
+import { ThemeDefinitionProps } from "./global.types";
 export declare const lightColors: {
   white: string;
   sectionOneBG: string;
@@ -41,6 +42,13 @@ export declare const lightColors: {
   backLinkColor: string;
   backLinkArrow: string;
   backLinkHover: string;
+  commonLinkColor: string;
+  breadcrumbsBackground: string;
+  breadcrumbsBackBorder: string;
+  breadcrumbsText: string;
+  actionsListBorder: string;
+  disabledActionsColor: string;
+  optionTextColor: string;
 };
 export declare const darkColors: {
   dark: string;
@@ -86,337 +94,5 @@ export declare const darkColors: {
   backLinkArrow: string;
   backLinkHover: string;
 };
-export declare const lightTheme: {
-  bgColor: string;
-  fontColor: string;
-  borderColor: string;
-  bulletColor: string;
-  logoColor: string;
-  logoLabelColor: string;
-  logoLabelInverse: string;
-  loaderColor: string;
-  boxBackground: string;
-  buttons: {
-    regular: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    callAction: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    secondary: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    text: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-  };
-  login: {
-    formBG: string;
-    bgFilter: string;
-    promoBG: string;
-    promoHeader: string;
-    promoText: string;
-    footerElements: string;
-    footerDivider: string;
-  };
-  pageHeader: {
-    background: string;
-    border: string;
-    color: string;
-  };
-  tooltip: {
-    background: string;
-    color: string;
-  };
-  commonInput: {
-    labelColor: string;
-    checkBoxBorder: string;
-    checkBoxColor: string;
-  };
-  iconButton: {
-    buttonBG: string;
-    activeBG: string;
-    hoverBG: string;
-    disabledBG: string;
-    color: string;
-  };
-  dataTable: {
-    border: string;
-    disabledBorder: string;
-    disabledBG: string;
-    selected: string;
-    deletedDisabled: string;
-    hoverColor: string;
-  };
-  backLink: {
-    color: string;
-    arrow: string;
-    hover: string;
-  };
-  inputBox: {
-    border: string;
-    hoverBorder: string;
-    color: string;
-    backgroundColor: string;
-    error: string;
-  };
-};
-export declare const darkTheme: {
-  bgColor: string;
-  fontColor: string;
-  borderColor: string;
-  bulletColor: string;
-  logoColor: string;
-  logoLabelColor: string;
-  logoLabelInverse: string;
-  loaderColor: string;
-  boxBackground: string;
-  buttons: {
-    regular: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    callAction: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    secondary: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-    text: {
-      enabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      disabled: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      hover: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-      pressed: {
-        border: string;
-        text: string;
-        background: string;
-        iconColor: string;
-      };
-    };
-  };
-  login: {
-    formBG: string;
-    promoBG: string;
-    bgFilter: string;
-    promoHeader: string;
-    promoText: string;
-    footerElements: string;
-    footerDivider: string;
-  };
-  pageHeader: {
-    background: string;
-    border: string;
-    color: string;
-  };
-  tooltip: {
-    background: string;
-    color: string;
-  };
-  commonInput: {
-    labelColor: string;
-    checkBoxBorder: string;
-    checkBoxColor: string;
-  };
-  iconButton: {
-    buttonBG: string;
-    activeBG: string;
-    hoverBG: string;
-    disabledBG: string;
-    color: string;
-  };
-  dataTable: {
-    border: string;
-    disabledBorder: string;
-    disabledBG: string;
-    selected: string;
-    deletedDisabled: string;
-    hoverColor: string;
-  };
-  backLink: {
-    color: string;
-    arrow: string;
-    hover: string;
-  };
-  inputBox: {
-    border: string;
-    hoverBorder: string;
-    color: string;
-    backgroundColor: string;
-    error: string;
-  };
-};
+export declare const lightTheme: ThemeDefinitionProps;
+export declare const darkTheme: ThemeDefinitionProps;

dist/mds.d.ts

@@ -8,8 +8,119 @@ import React, {
 import * as styled_components from "styled-components";
 import { CSSObject, CSSProperties } from "styled-components";
 
+interface ButtonThemeProps {
+  border: string;
+  text: string;
+  background: string;
+  iconColor: string;
+}
+interface ButtonThemeStatesProps {
+  enabled: ButtonThemeProps;
+  disabled: ButtonThemeProps;
+  hover: ButtonThemeProps;
+  pressed: ButtonThemeProps;
+}
+interface LoginPageThemeProps {
+  formBG: string;
+  bgFilter: string;
+  promoBG: string;
+  promoHeader: string;
+  promoText: string;
+  footerElements: string;
+  footerDivider: string;
+}
+interface PageHeaderThemeProps {
+  background: string;
+  border: string;
+  color: string;
+}
+interface TooltipThemeProps {
+  background: string;
+  color: string;
+}
+interface CommonInputThemeProps {
+  labelColor: string;
+  checkBoxBorder: string;
+  checkBoxColor: string;
+}
+interface IconButtonThemeProps {
+  buttonBG: string;
+  activeBG: string;
+  hoverBG: string;
+  disabledBG: string;
+  color: string;
+}
+interface DataTableThemeProps {
+  border: string;
+  disabledBorder: string;
+  disabledBG: string;
+  selected: string;
+  deletedDisabled: string;
+  hoverColor: string;
+}
+interface BackLinkThemeProps {
+  color: string;
+  arrow: string;
+  hover: string;
+}
+interface InputBoxThemeProps {
+  border: string;
+  hoverBorder: string;
+  color: string;
+  backgroundColor: string;
+  error: string;
+}
+interface BreadcrumbsBackStyle {
+  border: string;
+  backgroundColor: string;
+}
+interface BreadcrumbsThemeProps {
+  border: string;
+  backgroundColor: string;
+  linksColor: string;
+  backButton: BreadcrumbsBackStyle;
+  textColor: string;
+}
+interface ActionsListThemeProps {
+  titleColor: string;
+  containerBorderColor: string;
+  backgroundColor: string;
+  optionsTextColor: string;
+  optionsBorder: string;
+  optionsHoverTextColor: string;
+  disabledOptionsTextColor: string;
+}
+interface ThemeDefinitionProps {
+  bgColor: string;
+  fontColor: string;
+  borderColor: string;
+  bulletColor: string;
+  logoColor: string;
+  logoLabelColor: string;
+  logoLabelInverse: string;
+  loaderColor: string;
+  boxBackground: string;
+  buttons: {
+    regular: ButtonThemeStatesProps;
+    callAction: ButtonThemeStatesProps;
+    secondary: ButtonThemeStatesProps;
+    text: ButtonThemeStatesProps;
+  };
+  login: LoginPageThemeProps;
+  pageHeader: PageHeaderThemeProps;
+  tooltip: TooltipThemeProps;
+  commonInput: CommonInputThemeProps;
+  iconButton: IconButtonThemeProps;
+  dataTable: DataTableThemeProps;
+  backLink: BackLinkThemeProps;
+  inputBox: InputBoxThemeProps;
+  breadcrumbs: BreadcrumbsThemeProps;
+  actionsList: ActionsListThemeProps;
+}
+
 interface ThemeHandlerProps {
   darkMode?: boolean;
+  customTheme?: ThemeDefinitionProps;
   children: ReactNode;
 }
 
@@ -96,7 +207,7 @@ interface LoginWrapperProps {
   formFooter?: ReactNode;
   promoHeader?: ReactNode;
   promoInfo?: ReactNode;
-  disableAnimation?: boolean;
+  backgroundAnimation?: boolean;
 }
 
 declare const LoginWrapper: FC<LoginWrapperProps>;
@@ -210,6 +321,7 @@ interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
 }
 
 declare const DataTable: FC<DataTableProps>;
@@ -292,6 +404,38 @@ interface InputBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 declare const InputBox: FC<InputBoxProps>;
 
+interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions?: React.ReactNode;
+  goBackFunction: () => void;
+}
+
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+
+interface ActionItem {
+  action: () => void;
+  label: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  tooltip: string;
+}
+interface ActionsListProps {
+  sx?: CSSObject;
+  items: ActionItem[];
+  title: React.ReactNode;
+}
+
+declare const ActionsList: FC<ActionsListProps>;
+
+interface SimpleHeaderProps {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  sx?: CSSObject;
+}
+
+declare const SimpleHeader: FC<SimpleHeaderProps>;
+
 declare const EditorThemeSwitchIcon: (
   props: SVGProps<SVGSVGElement>
 ) => JSX.Element;
@@ -878,6 +1022,7 @@ export {
   AccessRuleIcon,
   AccountIcon$1 as AccountIcon,
   AccountsMenuIcon,
+  ActionsList,
   AddAccessRuleIcon,
   AddFolderIcon,
   AddIcon,
@@ -902,6 +1047,7 @@ export {
   Box,
   BoxArrowDown,
   BoxArrowUp,
+  Breadcrumbs,
   BucketEncryptionIcon,
   BucketQuotaIcon,
   BucketReplicationIcon,
@@ -1088,6 +1234,7 @@ export {
   ServiceAccountsIcon,
   SettingsIcon,
   ShareIcon,
+  SimpleHeader,
   SpeedtestIcon,
   StandardLightLogo,
   StarIcon,

src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -20,7 +20,7 @@ import { CSSObject } from "styled-components";
 export interface BreadcrumbsProps {
   sx?: CSSObject;
   children: React.ReactNode;
-  additionalOptions: React.ReactNode;
+  additionalOptions?: React.ReactNode;
   goBackFunction: () => void;
 }
 

src/components/DataTable/DataTable.stories.tsx

@@ -213,3 +213,62 @@ CustomPaperHeight.args = {
     },
   ],
 };
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sx: {
+    backgroundColor: "#f09",
+    color: "#fff",
+  },
+};
+
+export const WithSortIndicators = Template.bind({});
+WithSortIndicators.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+  ],
+  columns: [
+    { label: "Column1", elementKey: "field1", width: 200 },
+    { label: "Column2", elementKey: "field2", width: 100 },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortConfig: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    triggerSort: () => {
+      alert("sort triggered");
+    },
+  },
+};

src/components/DataTable/DataTable.tsx

@@ -31,7 +31,7 @@ import {
 } from "./DataTable.utils";
 
 const DataTableWrapper = styled.div<DataTableWrapperProps>(
-  ({ theme, customPaperHeight, disabled, noBackground }) => ({
+  ({ theme, customPaperHeight, disabled, noBackground, sx }) => ({
     display: "flex",
     overflow: "auto",
     flexDirection: "column",
@@ -149,6 +149,12 @@ const DataTableWrapper = styled.div<DataTableWrapperProps>(
       "&:first-of-type": {
         marginLeft: 10,
       },
+      "& svg": {
+        width: 12,
+        height: 12,
+        marginRight: 5,
+        alignSelf: "flex-end",
+      },
     },
     "& .ReactVirtualized__Table__rowColumn": {
       marginRight: 10,
@@ -198,6 +204,7 @@ const DataTableWrapper = styled.div<DataTableWrapperProps>(
       left: 0,
       top: 3,
     },
+    ...sx,
   })
 );
 
@@ -236,11 +243,12 @@ const DataTable: FC<DataTableProps> = ({
   onSelectAll,
   rowStyle,
   parentClassName = "",
+  sx,
 }) => {
   /* TODO: Enable Columns Selection Capability
-        const [columnSelectorOpen, setColumnSelectorOpen] = useState<boolean>(false);
-        const [anchorEl, setAnchorEl] = React.useState<any>(null);
-    */
+          const [columnSelectorOpen, setColumnSelectorOpen] = useState<boolean>(false);
+          const [anchorEl, setAnchorEl] = React.useState<any>(null);
+      */
   const rowIDField = idField || "";
 
   const findView = itemActions
@@ -268,70 +276,71 @@ const DataTable: FC<DataTableProps> = ({
 
   /* TODO: Enable Columns Selection Capability
 
-            const openColumnsSelector = (event: { currentTarget: any }) => {
-                setColumnSelectorOpen(!columnSelectorOpen);
-                setAnchorEl(event.currentTarget);
-            };
+              const openColumnsSelector = (event: { currentTarget: any }) => {
+                  setColumnSelectorOpen(!columnSelectorOpen);
+                  setAnchorEl(event.currentTarget);
+              };
 
-            const closeColumnSelector = () => {
-                setColumnSelectorOpen(false);
-                setAnchorEl(null);
-            };
+              const closeColumnSelector = () => {
+                  setColumnSelectorOpen(false);
+                  setAnchorEl(null);
+              };
 
 
-              const columnsSelection = (columns: IColumns[]) => {
-                return (
-                  <Fragment>
-                    <IconButton
-                      aria-describedby={"columnsSelector"}
-                      color="primary"
-                      onClick={openColumnsSelector}
-                      size="large"
-                    >
-                      <ViewColumnIcon />
-                    </IconButton>
-                    <Popover
-                      anchorEl={anchorEl}
-                      id={"columnsSelector"}
-                      open={columnSelectorOpen}
-                      anchorOrigin={{
-                        vertical: "bottom",
-                        horizontal: "left",
-                      }}
-                      transformOrigin={{
-                        vertical: "top",
-                        horizontal: "left",
-                      }}
-                      onClose={closeColumnSelector}
-                    >
-                      <div className={classes.shownColumnsLabel}>Shown Columns</div>
-                      <div className={classes.popoverContent}>
-                        {columns.map((column: IColumns) => {
-                          return (
-                            <Checkbox
-                              key={`tableColumns-${column.label}`}
-                              label={column.label}
-                              checked={columnsShown.includes(column.elementKey!)}
-                              onChange={(e) => {
-                                onColumnChange(column.elementKey!, e.target.checked);
-                              }}
-                              id={`chbox-${column.label}`}
-                              name={`chbox-${column.label}`}
-                              value={column.label}
-                            />
-                          );
-                        })}
-                      </div>
-                    </Popover>
-                  </Fragment>
-                );
-              };*/
+                const columnsSelection = (columns: IColumns[]) => {
+                  return (
+                    <Fragment>
+                      <IconButton
+                        aria-describedby={"columnsSelector"}
+                        color="primary"
+                        onClick={openColumnsSelector}
+                        size="large"
+                      >
+                        <ViewColumnIcon />
+                      </IconButton>
+                      <Popover
+                        anchorEl={anchorEl}
+                        id={"columnsSelector"}
+                        open={columnSelectorOpen}
+                        anchorOrigin={{
+                          vertical: "bottom",
+                          horizontal: "left",
+                        }}
+                        transformOrigin={{
+                          vertical: "top",
+                          horizontal: "left",
+                        }}
+                        onClose={closeColumnSelector}
+                      >
+                        <div className={classes.shownColumnsLabel}>Shown Columns</div>
+                        <div className={classes.popoverContent}>
+                          {columns.map((column: IColumns) => {
+                            return (
+                              <Checkbox
+                                key={`tableColumns-${column.label}`}
+                                label={column.label}
+                                checked={columnsShown.includes(column.elementKey!)}
+                                onChange={(e) => {
+                                  onColumnChange(column.elementKey!, e.target.checked);
+                                }}
+                                id={`chbox-${column.label}`}
+                                name={`chbox-${column.label}`}
+                                value={column.label}
+                              />
+                            );
+                          })}
+                        </div>
+                      </Popover>
+                    </Fragment>
+                  );
+                };*/
 
   return (
     <Grid item xs={12} className={parentClassName}>
       <DataTableWrapper
         className={`${noBackground ? "noBackground" : ""}`}
         customPaperHeight={customPaperHeight}
+        sx={sx}
       >
         {isLoading && (
           <Grid container className={"loadingBox"}>

src/components/DataTable/DataTable.types.ts

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { HTMLAttributes } from "react";
+import { CSSObject } from "styled-components";
 
 export interface ItemActions {
   label?: string;
@@ -80,12 +81,14 @@ export interface DataTableProps {
     index: number;
   }) => "deleted" | "" | React.CSSProperties;
   parentClassName?: string;
+  sx?: CSSObject;
 }
 
 export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   customPaperHeight?: string | number;
   noBackground?: boolean;
+  sx?: CSSObject;
 }
 
 export interface IActionButton {

src/components/InputBox/InputBox.tsx

@@ -61,38 +61,41 @@ const InputBase = styled.input<InputBoxProps>(({ theme, error }) => {
   };
 });
 
-const InputContainer = styled.div<InputContainerProps>(({ theme, error }) => ({
-  display: "flex",
-  flexGrow: 1,
-  width: "100%",
-  "& .errorText": {
-    fontSize: 12,
-    color: get(theme, "inputBox.error", "#C51B3F"),
-    marginTop: 3,
-  },
-  "& .textBoxContainer": {
-    width: "100%",
-    flexGrow: 1,
-    position: "relative",
-    minWidth: 160,
-  },
-  "& .tooltipContainer": {
-    marginLeft: 5,
+const InputContainer = styled.div<InputContainerProps>(
+  ({ theme, error, sx }) => ({
     display: "flex",
-    alignItems: "center",
-    "& .min-icon": {
-      width: 13,
+    flexGrow: 1,
+    width: "100%",
+    "& .errorText": {
+      fontSize: 12,
+      color: get(theme, "inputBox.error", "#C51B3F"),
+      marginTop: 3,
     },
-  },
-  "& .overlayAction": {
-    position: "absolute",
-    right: 5,
-    top: 6,
-  },
-  "& .inputLabel": {
-    marginBottom: error ? 18 : 0,
-  },
-}));
+    "& .textBoxContainer": {
+      width: "100%",
+      flexGrow: 1,
+      position: "relative",
+      minWidth: 160,
+    },
+    "& .tooltipContainer": {
+      marginLeft: 5,
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 13,
+      },
+    },
+    "& .overlayAction": {
+      position: "absolute",
+      right: 5,
+      top: 6,
+    },
+    "& .inputLabel": {
+      marginBottom: error ? 18 : 0,
+    },
+    ...sx,
+  })
+);
 
 const InputBox: FC<InputBoxProps> = ({
   id,