added breadcrumb component

deepfence_frontend/packages/ui-components/package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-label": "^1.0.0",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tabs": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",

deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { HiChevronDoubleRight, HiHome } from 'react-icons/hi';
+
+import { Breadcrumb, BreadcrumbLink } from './Breadcrumb';
+
+export default {
+  title: 'Components/BreadCrumb',
+  component: Breadcrumb,
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Link = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <a href="/test" className={className}>
+    {children}
+  </a>
+);
+
+const Template: ComponentStory<typeof Breadcrumb> = ({ separator }) => (
+  <Breadcrumb separator={separator}>
+    <BreadcrumbLink asChild icon={<HiHome />}>
+      <Link>Link One</Link>
+    </BreadcrumbLink>
+    <BreadcrumbLink asChild>
+      <Link>Link Two</Link>
+    </BreadcrumbLink>
+    <BreadcrumbLink asChild>
+      <Link>Link Three</Link>
+    </BreadcrumbLink>
+  </Breadcrumb>
+);
+
+export const BreadCrumbComponent = Template.bind({});
+
+BreadCrumbComponent.args = {
+  separator: <HiChevronDoubleRight />,
+};

deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,90 @@
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cx from 'classnames';
+import React from 'react';
+import { IconContext } from 'react-icons';
+import { HiChevronRight } from 'react-icons/hi';
+import { twMerge } from 'tailwind-merge';
+
+import { Typography } from '../typography/Typography';
+
+type BreadcrumbLinkType = {
+  asChild: boolean;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  isLast?: boolean;
+  separator?: React.ReactNode;
+};
+
+type BreadCrumbType = {
+  children: React.ReactNode[];
+  separator?: React.ReactNode;
+};
+
+export function BreadcrumbLink({
+  asChild,
+  children,
+  icon,
+  isLast,
+  separator,
+}: BreadcrumbLinkType) {
+  const Comp = asChild ? Slot : 'span';
+  return (
+    <Comp
+      className={twMerge(
+        cx(
+          `inline-flex items-center leading-[21px] item-center`,
+          'focus:outline-none focus:ring-1 focus:ring-blue-600 dark:focus:ring-blue-800',
+          `text-gray-700 dark:text-gray-400 ${Typography.size.sm}`,
+          {
+            [`text-gray-500 dark:text-gray-300`]: isLast,
+          },
+        ),
+      )}
+    >
+      {icon && (
+        <IconContext.Provider
+          value={{
+            className: 'mr-[18px] w-[16px] h-[16px]',
+          }}
+        >
+          {icon}
+        </IconContext.Provider>
+      )}
+      <Slottable>{children}</Slottable>
+
+      {!isLast && (
+        <IconContext.Provider
+          value={{
+            className: 'mx-[23px]',
+          }}
+        >
+          {separator ? separator : <HiChevronRight />}
+        </IconContext.Provider>
+      )}
+    </Comp>
+  );
+}
+
+export const Breadcrumb = ({ children, separator }: BreadCrumbType) => {
+  const childrenEl = React.Children.map<React.ReactNode, React.ReactNode>(
+    children,
+    function (child: React.ReactNode, index) {
+      const isLast = index === children.length - 1;
+
+      if (!React.isValidElement<BreadcrumbLinkType>(child)) {
+        return child;
+      }
+
+      let elementChild: React.ReactElement<BreadcrumbLinkType> = child;
+      if (child.props.children) {
+        elementChild = React.cloneElement<BreadcrumbLinkType>(elementChild, {
+          separator,
+          isLast,
+          ...child.props,
+        });
+      }
+      return elementChild;
+    },
+  );
+  return <div className="flex items-center">{childrenEl}</div>;
+};

deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx

@@ -46,7 +46,7 @@ const ModalHeader: FC<{ title?: string }> = ({ title }) => {
           'text-gray-400 hover:text-gray-900 dark:hover:text-white',
           'hover:bg-gray-200 dark:hover:bg-gray-600',
           'absolute right-3.5 inline-flex items-center justify-center p-1',
-          'focus:outline-none focus:ring-1 foucs:ring-blue-800',
+          'focus:outline-none focus:ring-1 focus:ring-blue-600 dark:focus:ring-blue-800',
           {
             'top-[22px]': title,
             'top-[10px]': !title,

deepfence_frontend/packages/ui-components/src/components/modal/SlidingModal.tsx

@@ -44,7 +44,7 @@ const ModalHeader: FC<{ title?: string }> = ({ title }) => {
           'text-gray-400 hover:text-gray-900 dark:hover:text-white',
           'hover:bg-gray-200 dark:hover:bg-gray-600',
           'absolute right-3.5 inline-flex items-center justify-center p-1',
-          'focus:outline-none focus:ring-1 foucs:ring-blue-800',
+          'focus:outline-none focus:ring-1 focus:ring-blue-600 dark:focus:ring-blue-800',
           {
             'top-[22px]': title,
             'top-[8px]': !title,

deepfence_frontend/packages/ui-components/src/components/pagination/Pagination.tsx

@@ -35,7 +35,7 @@ const PageButton = memo(
             'px-3 py-1.5 border-r border-y border-gray-300 dark:border-gray-700',
             'hover:bg-gray-100 hover:text-gray-700',
             'dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:text-white',
-            'focus:outline-none focus:ring-1 focus:ring-inset foucs:ring-blue-600',
+            'focus:outline-none focus:ring-1 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-800',
           ),
           className,
         )}

deepfence_frontend/packages/ui-components/src/main.ts

@@ -1,5 +1,6 @@
 import './index.css';
 
+export { Breadcrumb, BreadcrumbLink } from './components/breadcrumb/Breadcrumb';
 export { default as Button } from './components/button/Button';
 export { default as IconButton } from './components/button/IconButton';
 export { Card } from './components/card/Card';