Merge pull request #1301 from yamada-ui/feat/breadcrumb-ellipsis

feat(breadcrumbs): added ellipsis
yamada-ui · Apr 28, 2024 · 4e60d16 · 4e60d16
2 parents 169a760 + d5f9ce4
commit 4e60d16
Show file tree

Hide file tree

Showing 6 changed files with 1,954 additions and 1,870 deletions.
diff --git a/packages/components/breadcrumb/package.json b/packages/components/breadcrumb/package.json
@@ -47,7 +47,8 @@
   },
   "dependencies": {
     "@yamada-ui/core": "workspace:*",
-    "@yamada-ui/utils": "workspace:*"
+    "@yamada-ui/utils": "workspace:*",
+    "@yamada-ui/icon": "workspace:*"
   },
   "devDependencies": {
     "react": "^18.0.0",

diff --git a/packages/components/breadcrumb/src/breadcrumb.tsx b/packages/components/breadcrumb/src/breadcrumb.tsx
@@ -10,13 +10,15 @@ import {
   omitThemeProps,
   useMultiComponentStyle,
 } from "@yamada-ui/core"
+import { Icon } from "@yamada-ui/icon"
+import type { IconProps } from "@yamada-ui/icon"
 import { cx, createContext, getValidChildren } from "@yamada-ui/utils"
 import { cloneElement } from "react"
 
 const [BreadcrumbProvider, useBreadcrumb] = createContext<
   Record<string, CSSUIObject>
 >({
-  name: `BreadcrumbContext`,
+  name: "BreadcrumbContext",
   errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `,
 })
 
@@ -228,3 +230,37 @@ export const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, "span">(
     )
   },
 )
+
+type BreadcrumbEllipsisOptions = {}
+
+export type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions
+
+export const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, "span">(
+  ({ className, ...rest }, ref) => {
+    const styles = useBreadcrumb()
+
+    const css: CSSUIObject = {
+      ...styles.ellipsis,
+    }
+
+    return (
+      <Icon
+        ref={ref}
+        title="ellipsis"
+        className={cx("ui-breadcrumb__item__ellipsis", className)}
+        __css={css}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 24"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="10" cy="12" r="2" fill="currentColor" />
+        <circle cx="20" cy="12" r="2" fill="currentColor" />
+        <circle cx="30" cy="12" r="2" fill="currentColor" />
+      </Icon>
+    )
+  },
+)
diff --git a/packages/components/breadcrumb/src/index.ts b/packages/components/breadcrumb/src/index.ts
@@ -3,10 +3,12 @@ export {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
+  BreadcrumbEllipsis,
 } from "./breadcrumb"
 export type {
   BreadcrumbProps,
   BreadcrumbItemProps,
   BreadcrumbLinkProps,
   BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
 } from "./breadcrumb"
diff --git a/packages/components/breadcrumb/tests/breadcrumb.test.tsx b/packages/components/breadcrumb/tests/breadcrumb.test.tsx
@@ -1,5 +1,10 @@
 import { render, screen } from "@yamada-ui/test"
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "../src"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+} from "../src"
 
 describe("<Breadcrumb />", () => {
   test("renders breadcrumb correctly", () => {
@@ -21,7 +26,7 @@ describe("<Breadcrumb />", () => {
     )
   })
 
-  test("separator propertie is being passed accurately", () => {
+  test("separator property is being passed accurately", () => {
     render(
       <Breadcrumb separator="-">
         <BreadcrumbItem>
@@ -37,7 +42,7 @@ describe("<Breadcrumb />", () => {
     expect(separatorEle).toBeInTheDocument()
   })
 
-  test("isCurrentPage propertie is being passed accurately", () => {
+  test("isCurrentPage property is being passed accurately", () => {
     const { container } = render(
       <Breadcrumb separator="-">
         <BreadcrumbItem>
@@ -81,4 +86,21 @@ describe("<Breadcrumb />", () => {
     const currentPageLink = screen.getByText("Link 2")
     expect(currentPageLink.getAttribute("href")).toBeNull()
   })
+
+  test("renders breadcrumbEllipsis correctly", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Link 1</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>
+          <BreadcrumbLink href="#">Link 3</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>,
+    )
+    expect(screen.getByTitle("ellipsis")).toBeInTheDocument()
+  })
 })