#41_Breadcrumbs

SAKANA7 · Oct 21, 2022 · 5d0e72e · 5d0e72e
1 parent 03a470b
commit 5d0e72e
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ To install it, run:
   yarn add sagu-ui
 ```
 
-_styled-componets are required_
+_styled-components are required_
 
 ## Usage
 

diff --git a/src/packages/Breadcrumb/index.tsx b/src/packages/Breadcrumb/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import * as S from './styles'
+
+export type BreadcrumbProps = {
+  separator?: string
+  children: React.ReactNode
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  separator = '/',
+  children
+}) => {
+  // Wrap all items in li tag
+  const allItems = React.Children.toArray(children)
+    .filter((child) => React.isValidElement(child))
+    .map((child, index) => <li key={`breadcrumb-item-${index}`}>{child}</li>)
+
+  return (
+    <S.Breadcrumb>
+      {allItems.map((item, index) =>
+        index !== 0
+          ? [
+              <S.BreadcrumbItem key={`breadcrumb-separator-${index}`}>
+                {separator}
+              </S.BreadcrumbItem>,
+              item
+            ]
+          : item
+      )}
+    </S.Breadcrumb>
+  )
+}
+
+export default Breadcrumb
diff --git a/src/packages/Breadcrumb/stories.tsx b/src/packages/Breadcrumb/stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Meta } from '@storybook/react/types-6-0'
+import Breadcrumb from '.'
+import NavLink from '../NavLink'
+import TextContent from '../TextContent'
+import { BreadcrumbItem } from './styles'
+
+export default {
+  title: 'Breadcrumb',
+  component: Breadcrumb
+} as Meta
+
+const Template = (args) => (
+  <Breadcrumb {...args}>
+    <BreadcrumbItem>
+      <NavLink size="small" href="#">
+        Link 1
+      </NavLink>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+      <NavLink size="small" href="#">
+        Link 2
+      </NavLink>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+      <TextContent value="Link 3" style={{ padding: '0 1.6rem' }} />
+    </BreadcrumbItem>
+  </Breadcrumb>
+)
+
+export const Default = Template.bind({})
+
+export const Custom = Template.bind({})
+Custom.args = {
+  separator: '>'
+}
diff --git a/src/packages/Breadcrumb/styles.ts b/src/packages/Breadcrumb/styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const Breadcrumb = styled.ul`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  list-style: none;
+`
+
+export const BreadcrumbItem = styled.li`
+  margin: 0 0.5rem;
+`
diff --git a/src/packages/Breadcrumb/test.tsx b/src/packages/Breadcrumb/test.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from '../../utils/testUtils'
+import Breadcrumb from '.'
+
+describe('<Breadcrumb>', () => {
+  it('Should render the breadcrumb', () => {
+    const { container } = render(
+      <Breadcrumb>
+        <a href="#">Link 1</a>
+        <a href="#">Link 2</a>
+        <a href="#">Link 3</a>
+      </Breadcrumb>
+    )
+    expect(container).toBeInTheDocument()
+    expect(container.querySelectorAll('li').length).toBe(5)
+  })
+})