Merge pull request #980 from FaheemOnHub/add/faheemonhub/newComponents

Add remaining icons and components from mui

Author: amitamrutiya

src/base/AlertTitle/AlertTitle.tsx

@@ -0,0 +1,10 @@
+import {
+  AlertTitle as MuiAlertTitle,
+  type AlertTitleProps as MuiAlertTitleProps
+} from '@mui/material';
+
+export function AlertTitle(props: MuiAlertTitleProps): JSX.Element {
+  return <MuiAlertTitle {...props} />;
+}
+
+export default AlertTitle;

src/base/AlertTitle/index.ts

@@ -0,0 +1,5 @@
+import { AlertTitleProps } from '@mui/material';
+import AlertTitle from './AlertTitle';
+
+export { AlertTitle };
+export type { AlertTitleProps };

src/base/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,11 @@
+import {
+  Breadcrumbs as MuiBreadcrumbs,
+  type BreadcrumbsProps as MuiBreadcrumbsProps
+} from '@mui/material';
+import React from 'react';
+
+const Breadcrumbs = React.forwardRef<HTMLDivElement, MuiBreadcrumbsProps>((props, ref) => {
+  return <MuiBreadcrumbs {...props} ref={ref} />;
+});
+
+export default Breadcrumbs;

src/base/Breadcrumbs/index.tsx

@@ -0,0 +1,5 @@
+import { BreadcrumbsProps } from '@mui/material';
+import Breadcrumbs from './Breadcrumbs';
+
+export { Breadcrumbs };
+export type { BreadcrumbsProps };

src/base/OutlinedInput/index.tsx

@@ -1,5 +1,6 @@
 import { OutlinedInputProps } from '@mui/material';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { OutlinedInput } from './OutlinedInput';
 
-export { OutlinedInput };
+export { OutlinedInput, outlinedInputClasses };
 export type { OutlinedInputProps };

src/base/Step/index.ts

@@ -1 +1,4 @@
+import { StepConnectorProps, stepConnectorClasses } from '@mui/material';
 export { Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper } from './Step';
+export { stepConnectorClasses };
+export type { StepConnectorProps };

src/base/Tooltip/index.tsx

@@ -1,5 +1,6 @@
 import { TooltipProps } from '@mui/material';
+import { tooltipClasses } from '@mui/material/Tooltip';
 import Tooltip from './Tooltip';
 
-export { Tooltip };
+export { Tooltip, tooltipClasses };
 export type { TooltipProps };

src/base/index.tsx

@@ -10,6 +10,7 @@ export * from './AvatarGroup';
 export * from './Backdrop';
 export * from './Badge';
 export * from './Box';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Card';

src/icons/ArrowDropDown/ArrowDropDownIcon.tsx

@@ -0,0 +1,24 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ArrowDropDownIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      data-testid="arrow-drop-down-icon-svg"
+      {...props}
+    >
+      <path d="M7 10l5 5 5-5z" fill={fill} />
+    </svg>
+  );
+};
+
+export default ArrowDropDownIcon;

src/icons/ArrowDropDown/index.ts

@@ -0,0 +1 @@
+export { default as ArrowDropDownIcon } from './ArrowDropDownIcon';