From eaff4f402abe454f44814a381890cfe88ab8d708 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= <guilherme.araujo@maxxidata.com>
Date: Sat, 8 Apr 2023 19:05:19 -0300
Subject: [PATCH] feat: create section title component (#5237)

Co-authored-by: Wai.Tung <maledong_public@foxmail.com>
---
 .../__tests__/SectionTitle.test.tsx           | 17 +++++++++++++
 .../__snapshots__/SectionTitle.test.tsx.snap  | 17 +++++++++++++
 .../Common/SectionTitle/index.module.scss     | 13 ++++++++++
 .../Common/SectionTitle/index.stories.ts      |  9 +++++++
 components/Common/SectionTitle/index.tsx      | 25 +++++++++++++++++++
 5 files changed, 81 insertions(+)
 create mode 100644 components/Common/SectionTitle/__tests__/SectionTitle.test.tsx
 create mode 100644 components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
 create mode 100644 components/Common/SectionTitle/index.module.scss
 create mode 100644 components/Common/SectionTitle/index.stories.ts
 create mode 100644 components/Common/SectionTitle/index.tsx

diff --git a/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx b/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx
new file mode 100644
index 0000000000000..3ea1f85e93947
--- /dev/null
+++ b/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import SectionTitle from '..';
+
+describe('SectionTitle component', () => {
+  const mockData = ['home', 'previous', 'current'];
+
+  it('renders correctly with data', () => {
+    const { container } = render(<SectionTitle path={mockData} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('last item should be active', () => {
+    render(<SectionTitle path={mockData} />);
+    const active = screen.getByText(mockData[mockData.length - 1]);
+    expect(active).toHaveClass('active');
+  });
+});
diff --git a/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap b/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
new file mode 100644
index 0000000000000..b628f4982d33b
--- /dev/null
+++ b/components/Common/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionTitle component renders correctly with data 1`] = `
+<div>
+  <div
+    class="sectionTitle"
+  >
+    home / 
+    previous / 
+    <span
+      class="active"
+    >
+      current
+    </span>
+  </div>
+</div>
+`;
diff --git a/components/Common/SectionTitle/index.module.scss b/components/Common/SectionTitle/index.module.scss
new file mode 100644
index 0000000000000..018959b7515b0
--- /dev/null
+++ b/components/Common/SectionTitle/index.module.scss
@@ -0,0 +1,13 @@
+.sectionTitle,
+%section-title {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-overline);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--space-02);
+  line-height: var(--line-height-overline);
+  text-transform: uppercase;
+
+  .active {
+    color: var(--brand4);
+  }
+}
diff --git a/components/Common/SectionTitle/index.stories.ts b/components/Common/SectionTitle/index.stories.ts
new file mode 100644
index 0000000000000..02b12e4be7e28
--- /dev/null
+++ b/components/Common/SectionTitle/index.stories.ts
@@ -0,0 +1,9 @@
+import SectionTitle from './index';
+
+export default { component: SectionTitle };
+
+export const Default = {
+  args: {
+    path: ['home', 'previous', 'current'],
+  },
+};
diff --git a/components/Common/SectionTitle/index.tsx b/components/Common/SectionTitle/index.tsx
new file mode 100644
index 0000000000000..9ff2dee5ff74c
--- /dev/null
+++ b/components/Common/SectionTitle/index.tsx
@@ -0,0 +1,25 @@
+import styles from './index.module.scss';
+
+interface Props {
+  path: string[];
+}
+
+const SectionTitle = ({ path }: Props) => (
+  <div className={styles.sectionTitle}>
+    {path.map((item, index) => {
+      const isLast = index === path.length - 1;
+
+      if (isLast) {
+        return (
+          <span className={styles.active} key={item}>
+            {item}
+          </span>
+        );
+      }
+
+      return `${item} / `;
+    })}
+  </div>
+);
+
+export default SectionTitle;