feat: create section title component (#5237)

Co-authored-by: Wai.Tung <[email protected]>

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');
+  });
+});

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>
+`;

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);
+  }
+}

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'],
+  },
+};

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;