Feature/tab bar 2

cookbook-react/src/recipes/tab-bars/tab-bar-1/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tab-bar-1 match snapshot  1`] = `
+<div>
+  <div
+    class="tab-bar-container"
+    id="tab-bar-1"
+  >
+    <div
+      class="tab-bar-wrapper"
+    >
+      <span
+        class="selector selected-null"
+      />
+      <div
+        class="tabs"
+      >
+        <button
+          class="option"
+          type="button"
+        >
+          Sección 1
+        </button>
+        <button
+          class="option"
+          type="button"
+        >
+          Sección 2
+        </button>
+        <button
+          class="option"
+          type="button"
+        >
+          Sección 3
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

cookbook-react/src/recipes/tab-bars/tab-bar-1/index.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TabBar from './index';
+
+describe('Tab-bar-1', () => {
+  const options = [
+    { id: 1, label: 'Sección 1' },
+    { id: 2, label: 'Sección 2' },
+    { id: 3, label: 'Sección 3' }
+  ];
+
+  test('match snapshot ', () => {
+    const { container } = render(<TabBar options={options} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('select second tab', () => {
+    render(<TabBar options={options} />);
+    const tabElement = screen.getByText('Sección 2');
+
+    userEvent.click(tabElement);
+
+    expect(tabElement).toHaveClass('selected');
+  });
+});

cookbook-react/src/recipes/tab-bars/tab-bar-2/__snapshots__/tab-bar-2.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test tab-bar component match to the snapshot 1`] = `
+<div>
+  <div
+    class="tabsContainer"
+  >
+    <label
+      class="radioLabel"
+      for="tab-1"
+    >
+      <i
+        class="icon :D"
+        role="icon-1"
+      />
+      <input
+        class="tabInput"
+        id="tab-1"
+        name="tab"
+        type="radio"
+        value="1"
+      />
+      Primera tab
+    </label>
+    <label
+      class="radioLabel"
+      for="tab-2"
+    >
+      <i
+        class="icon :C"
+        role="icon-2"
+      />
+      <input
+        class="tabInput"
+        id="tab-2"
+        name="tab"
+        type="radio"
+        value="2"
+      />
+      Segunda tab
+    </label>
+  </div>
+</div>
+`;

cookbook-react/src/recipes/tab-bars/tab-bar-2/cookbook.json

@@ -0,0 +1,11 @@
+{
+    "thumbnail": {
+      "type": "iframe",
+      "url": "https://cookbook-react.now.sh/?category=tab-bars&component=tab-bar-2&compact=true"
+    },
+    "detail": {
+      "type": "iframe",
+      "url": "https://cookbook-react.now.sh/?category=tab-bars&component=tab-bar-2&compact=true"
+    }
+  }
+

cookbook-react/src/recipes/tab-bars/tab-bar-2/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cn from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface Tab {
+  icon?: string;
+  label?: string;
+  id: number;
+}
+
+interface Props {
+  tabs?: Tab[];
+  active?: null | number;
+  handleChange: (id: number) => void;
+}
+
+function TabBar({ tabs, active, handleChange }: Props) {
+  return (
+    <div className={styles.tabsContainer}>
+      {tabs?.map((tab) => (
+        <label
+          htmlFor={`tab-${tab.id}`}
+          key={tab.id}
+          className={cn(styles.radioLabel, {
+            [styles.active]: tab.id === active
+          })}
+        >
+          {tab.icon && <i role={`icon-${tab.id}`} className={cn(styles.icon, tab.icon)} />}
+          <input
+            type="radio"
+            id={`tab-${tab.id}`}
+            name="tab"
+            checked={active === tab.id}
+            className={styles.tabInput}
+            value={tab.id}
+            onChange={() => handleChange(tab.id)}
+          />
+          {tab.label}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export default TabBar;
+
+TabBar.defaultProps = {
+  active: null,
+  tabs: [
+    { id: 1, label: 'Primera tab', icon: '' },
+    { id: 2, label: 'Segunda tab', icon: '' }
+  ]
+};

cookbook-react/src/recipes/tab-bars/tab-bar-2/styles.module.scss

@@ -0,0 +1,39 @@
+$color-blue: #003DD5;
+$color-black: #000;
+$color-white: #FFF;
+$text-color: #525256;
+$tabs: 2;
+$height: 40px;
+$width: ( 60 / $tabs ) * 1%;
+
+.tabs-container {
+  display: flex;
+  justify-content: space-evenly;
+
+  .radio-label {
+    align-items: center;
+    border-radius: 40px;
+    color: $text-color;
+    cursor: pointer;
+    display: flex;
+    font-weight: 600;
+    flex: 0 0 $width;
+    height: $height;
+    justify-content: center;
+    transition: background-color 0.5s ease;
+
+    .icon {
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    .tab-input {
+      display: none;
+    }
+
+    &.active {
+      background-color: $color-blue;
+      color: $color-white;
+    }
+  }
+}

cookbook-react/src/recipes/tab-bars/tab-bar-2/tab-bar-2.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TabBar from './index';
+
+const tabs = [
+  { id: 1, label: 'Primera tab', icon: ':D' },
+  { id: 2, label: 'Segunda tab', icon: ':C' }
+];
+const active = null;
+const handleChange = jest.fn();
+
+describe('test tab-bar component', () => {
+  test('match to the snapshot', () => {
+    const { container } = render(<TabBar tabs={tabs} active={active} handleChange={handleChange} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('call handleChange function with the tab id', () => {
+    render(<TabBar tabs={tabs} active={active} handleChange={handleChange} />);
+    userEvent.click(screen.getByLabelText('Primera tab'));
+    expect(handleChange).toHaveBeenCalledWith(1);
+  });
+
+  test('show first tab icon', () => {
+    render(<TabBar tabs={tabs} active={active} handleChange={handleChange} />);
+    const icon = screen.getByRole('icon-1');
+    expect(icon).toBeInTheDocument();
+  });
+
+  test('select second tab', () => {
+    render(<TabBar tabs={tabs} active={active} handleChange={handleChange} />);
+    const tabElement = screen.getByLabelText('Segunda tab') as HTMLInputElement;
+    fireEvent.change(tabElement, { target: { value: 2 } });
+    expect(tabElement.value).toBe('2');
+  });
+});