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';

src/icons/Article/ArticleIcon.tsx

@@ -0,0 +1,27 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ArticleIcon = ({
+  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="article-icon-svg"
+      {...props}
+    >
+      <path
+        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-8v-2h8v2zm0-4h-8v-2h8v2zm0-4h-8V7h8v2z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default ArticleIcon;

src/icons/Article/index.ts

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

src/icons/CheckCircleOutline/CheckCircleOutlineIcon.tsx

@@ -0,0 +1,27 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const CheckCircleOutlineIcon = ({
+  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="check-circle-outline-icon-svg"
+      {...props}
+    >
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-5.41 7.29-7.29 1.41 1.41L11 16l-4.29-4.29 1.41-1.41L11 14.17z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default CheckCircleOutlineIcon;

src/icons/CheckCircleOutline/index.ts

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

src/icons/ErrorOutline/ErrorOutlineIcon.tsx

@@ -0,0 +1,27 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ErrorOutlineIcon = ({
+  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="error-outline-icon-svg"
+      {...props}
+    >
+      <path
+        d="M11 15h2v2h-2zm0-8h2v6h-2zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default ErrorOutlineIcon;

src/icons/ErrorOutline/index.ts

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

src/icons/ExpandMore/ExpandMoreIcon.tsx

@@ -0,0 +1,24 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ExpandMoreIcon = ({
+  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="expand-more-icon-svg"
+      {...props}
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill={fill} />
+    </svg>
+  );
+};
+
+export default ExpandMoreIcon;

src/icons/ExpandMore/index.ts

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

src/icons/FolderRounded/FolderRoundedIcon.tsx

@@ -0,0 +1,27 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const FolderRoundedIcon = ({
+  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="folder-rounded-icon-svg"
+      {...props}
+    >
+      <path
+        d="M10 4c-0.55 0-1 0.45-1 1H4c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2V8c0-1.1-0.9-2-2-2h-8l-2-2z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default FolderRoundedIcon;

src/icons/FolderRounded/index.ts

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

src/icons/LockClockOutlinedIcon/LockClockOutlinedIcon.tsx

@@ -0,0 +1,31 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const LockClockOutlinedIcon = ({
+  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="lock-clock-outlined-icon-svg"
+      {...props}
+    >
+      <path
+        d="M6 20V10h12v1c.7 0 1.37.1 2 .29V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6.26c-.42-.6-.75-1.28-.97-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"
+        fill={fill}
+      />
+      <path
+        d="M18 13c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m1.65 7.35L17.5 18.2V15h1v2.79l1.85 1.85z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default LockClockOutlinedIcon;

src/icons/LockClockOutlinedIcon/index.ts

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

src/icons/SwapVert/SwapVertIcon.tsx

@@ -0,0 +1,24 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const SwapVertIcon = ({
+  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="swap-vert-icon-svg"
+      {...props}
+    >
+      <path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM8 7V13h2V7h3L9 3 5 7h3z" fill={fill} />
+    </svg>
+  );
+};
+
+export default SwapVertIcon;

src/icons/SwapVert/index.ts

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