[TAIK-2276] - Add tabs panel component (#57)

* Bump Storybook to 6.3.1

* Add react-responsive-tabs package

* Add tabs-panel component

* Improve styling

* Add declare module

* Update types/react-responsive-tabs.d.ts

Co-authored-by: krzwc <[email protected]>

* Update react-responsive-tabs.d.ts

Co-authored-by: krzwc <[email protected]>

package.json

@@ -65,13 +65,13 @@
   "devDependencies": {
     "@babel/core": "^7.13.8",
     "@size-limit/preset-small-lib": "^4.10.0",
-    "@storybook/addon-a11y": "^6.2.8",
-    "@storybook/addon-controls": "^6.2.8",
-    "@storybook/addon-essentials": "^6.2.8",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
+    "@storybook/addon-a11y": "^6.3.1",
+    "@storybook/addon-controls": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.1",
+    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addons": "^6.3.1",
+    "@storybook/react": "^6.3.1",
+    "@storybook/theming": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.7",
@@ -108,6 +108,7 @@
     "polished": "^4.1.1",
     "react-paginate": "^7.1.3",
     "react-responsive-carousel": "^3.2.18",
+    "react-responsive-tabs": "^4.4.1",
     "react-select": "^4.3.1",
     "styled-components": "^5.2.1"
   }

src/organisms/tabs-panel/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Tabs from 'react-responsive-tabs';
+import * as Styles from './styles';
+
+export type Tab = {
+  title: string;
+  renderer: React.ReactNode;
+};
+
+export interface TabsPanelProps {
+  unmountOnExit?: boolean;
+  selectedTabKey?: number;
+  beforeChange?: () => {};
+  onChange?: () => {};
+  tabs: Tab[];
+}
+
+const TabsPanel = (props: TabsPanelProps) => {
+  const {
+    unmountOnExit = true,
+    selectedTabKey = 0,
+    beforeChange,
+    onChange,
+    tabs,
+  } = props;
+
+  const getTabs = () => {
+    return tabs.map((tab, index) => ({
+      key: index,
+      tabClassName: 'tab',
+      panelClassName: 'panel',
+      title: tab.title,
+      getContent: () => tab.renderer,
+    }));
+  };
+
+  return (
+    <Styles.Wrapper>
+      <Tabs
+        transform={false}
+        unmountOnExit={unmountOnExit}
+        selectedTabKey={selectedTabKey}
+        beforeChange={beforeChange}
+        onChange={onChange}
+        items={getTabs()}
+      />
+    </Styles.Wrapper>
+  );
+};
+
+export default TabsPanel;

src/organisms/tabs-panel/stories/tabs-panel.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { TabsPanelProps } from '..';
+import TabsPanel from '..';
+
+export default {
+  title: 'Design System/Organisms/Navigation',
+  component: TabsPanel,
+  argTypes: {},
+};
+
+const tabs = [
+  {
+    title: 'Ordinary Supermen',
+    renderer: (
+      <div>
+        There is no strife, no prejudice, no national conflict in outer space as
+        yet. Its hazards are hostile to us all. Its conquest deserves the best
+        of all mankind, and its opportunity for peaceful cooperation many never
+        come again. But why, some say, the moon? Why choose this as our goal?
+        And they may well ask why climb the highest mountain? Why, 35 years ago,
+        fly the Atlantic? Why does Rice play Texas?
+      </div>
+    ),
+  },
+  {
+    title: 'Friends and Rivals',
+    renderer: (
+      <div>
+        We choose to go to the moon. We choose to go to the moon in this decade
+        and do the other things, not because they are easy, but because they are
+        hard, because that goal will serve to organize and measure the best of
+        our energies and skills, because that challenge is one that we are
+        willing to accept, one we are unwilling to postpone, and one which we
+        intend to win, and the others, too.
+      </div>
+    ),
+  },
+  {
+    title: 'Landing the Eagle',
+    renderer: (
+      <div>
+        It is for these reasons that I regard the decision last year to shift
+        our efforts in space from low to high gear as among the most important
+        decisions that will be made during my incumbency in the office of the
+        Presidency.
+      </div>
+    ),
+  },
+  {
+    title: 'The Explorers',
+    renderer: (
+      <div>
+        In the last 24 hours we have seen facilities now being created for the
+        greatest and most complex exploration in man's history. We have felt the
+        ground shake and the air shattered by the testing of a Saturn C-1
+        booster rocket, many times as powerful as the Atlas which launched John
+        Glenn, generating power equivalent to 10,000 automobiles with their
+        accelerators on the floor. We have seen the site where the F-1 rocket
+        engines, each one as powerful as all eight engines of the Saturn
+        combined, will be clustered together to make the advanced Saturn
+        missile, assembled in a new building to be built at Cape Canaveral as
+        tall as a 48 story structure, as wide as a city block, and as long as
+        two lengths of this field.
+      </div>
+    ),
+  },
+  {
+    title: 'The Shuttle',
+    renderer: (
+      <div>
+        Spaceflight will never tolerate carelessness, incapacity, and neglect.
+        Somewhere, somehow, we screwed up. It could have been in design, build,
+        or test. Whatever it was, we should have caught it. We were too gung ho
+        about the schedule and we locked out all of the problems we saw each day
+        in our work.
+      </div>
+    ),
+  },
+  {
+    title: 'A Home in Space',
+    renderer: (
+      <div>
+        When you leave this meeting today you will go to your office and the
+        first thing you will do there is to write ‘Tough and Competent’ on your
+        blackboards. It will never be erased. Each day when you enter the room
+        these words will remind you of the price paid by Grissom, White, and
+        Chaffee. These words are the price of admission to the ranks of Mission
+        Control.
+      </div>
+    ),
+  },
+];
+
+export const TabsPanelComponent = (args: TabsPanelProps) => {
+  return <TabsPanel {...args} />;
+};
+
+TabsPanelComponent.storyName = 'Tabs Panel';
+TabsPanelComponent.args = {
+  unmountOnExit: true,
+  selectedTabKey: 0,
+  tabs: tabs,
+};

src/organisms/tabs-panel/styles.tsx

@@ -0,0 +1,160 @@
+import styled from 'styled-components';
+import { rem, lighten } from 'polished';
+import { colors } from '../../ions/variables';
+
+const { normal, info } = colors;
+
+export const Wrapper = styled.div`
+  .tab {
+    border-color: ${lighten(0.4, info)};
+
+    &[aria-selected='true'] {
+      border-bottom: 0;
+    }
+
+    &[aria-selected='false'] {
+      background-color: ${lighten(0.45, info)};
+      color: ${info};
+      transition-duration: 0.3s;
+
+      &:hover {
+        color: ${normal};
+      }
+    }
+
+    &:first-child {
+      border-top-left-radius: 6px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 6px;
+    }
+  }
+
+  .panel {
+    border-radius: 0 6px 6px 6px;
+    border-color: ${lighten(0.4, info)};
+    padding: ${rem('30px')};
+  }
+
+  .RRT__container {
+    position: relative;
+  }
+
+  .RRT__tabs {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .RRT__accordion {
+    flex-direction: column;
+  }
+
+  .RRT__tab {
+    background: #eee;
+    border-style: solid;
+    border-color: #ddd;
+    border-width: 1px 1px 1px 0;
+    cursor: pointer;
+    z-index: 1;
+    white-space: nowrap;
+    padding: 0.7em 1em;
+  }
+
+  .RRT__tab:focus {
+    outline: 0;
+    background-color: #e6e6e6;
+  }
+
+  .RRT__accordion .RRT__tab {
+    border-left-width: 1px;
+  }
+
+  .RRT__tab--first {
+    border-left-width: 1px;
+  }
+
+  .RRT__tab--selected {
+    background: #fff;
+    border-color: #ddd #ddd #fff;
+  }
+
+  .RRT__tab--selected:focus {
+    background-color: #fff;
+  }
+
+  .RRT__tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .RRT__tab:focus {
+    z-index: 2;
+  }
+
+  .RRT__tab--selected .RRT__removable {
+    position: relative;
+  }
+
+  .RRT__tab--selected .RRT__removable-text {
+    margin-right: 10px;
+  }
+
+  .RRT__tab--selected .RRT__removable-icon {
+    position: absolute;
+    font-size: 18px;
+    right: 0.5em;
+    top: 0.2em;
+  }
+
+  .RRT__panel {
+    margin-top: -1px;
+    padding: 1em;
+    border: 1px solid #ddd;
+  }
+
+  .RRT__panel--hidden {
+    display: none;
+  }
+
+  .RRT__accordion .RRT__panel {
+    margin-top: 0;
+  }
+
+  .RRT__showmore {
+    background: #eee;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    z-index: 1;
+    white-space: nowrap;
+    margin-left: -1px;
+    position: relative;
+  }
+
+  .RRT__showmore--selected {
+    background: white;
+    border-bottom: none;
+  }
+
+  .RRT__showmore-label {
+    padding: 0.7em 1em;
+    position: relative;
+    bottom: -1px;
+    z-index: 1;
+  }
+
+  .RRT__showmore-label--selected {
+    background-color: #eee;
+  }
+
+  .RRT__showmore-list {
+    position: absolute;
+    right: -1px;
+    top: 100%;
+    display: none;
+  }
+
+  .RRT__showmore-list--opened {
+    display: block;
+  }
+`;

types/react-responsive-tabs.d.ts

@@ -0,0 +1 @@
+declare module 'react-responsive-tabs';