feat(tabs)!: add tabs component

Add a new Tabs and VerticalTabs (plural)
component and removes the Tab and VerticalTab
components.
I does not make sense to give the user the ability
to use Tabs individually, so instead we created
a wrapper component which takes the tabs as options
instead.

This will also make our PRC => Fluent conversion
easier because Fluent has a wrapper component
that handles all the clicking and switching logic.

BREAKING CHANGE: replaces Tab and VerticalTab components
with Tabs and VerticalTabs components.

Author: lekoaf

packages/core/src/Tab/index.tsx

@@ -326,11 +326,19 @@ export interface TabProps<T> extends InternalTabBaseProps<T> {
   readonly markerOffset?: HorizontalTabMarkerOffset
 }
 
-export function Tab<T>({
-  markerOffset = 'bottom',
-  ...props
-}: TabProps<T>): JSX.Element {
-  return <InternalTab<T> {...props} markerOffset={markerOffset} />
+export function Tabs<T>({
+  tabs,
+}: {
+  readonly tabs: ReadonlyArray<TabProps<T>>
+}): JSX.Element {
+  return (
+    <>
+      {tabs.map((props, i) => {
+        const markerOffset = props.markerOffset ?? 'bottom'
+        return <InternalTab<T> key={i} {...props} markerOffset={markerOffset} />
+      })}
+    </>
+  )
 }
 
 /**
@@ -340,9 +348,17 @@ export interface VerticalTabProps<T> extends InternalTabBaseProps<T> {
   readonly markerOffset?: VerticalTabMarkerOffset
 }
 
-export function VerticalTab<T>({
-  markerOffset = 'right',
-  ...props
-}: VerticalTabProps<T>): JSX.Element {
-  return <InternalTab<T> {...props} markerOffset={markerOffset} />
+export function VerticalTabs<T>({
+  tabs,
+}: {
+  readonly tabs: ReadonlyArray<VerticalTabProps<T>>
+}): JSX.Element {
+  return (
+    <>
+      {tabs.map((props, i) => {
+        const markerOffset = props.markerOffset ?? 'right'
+        return <InternalTab<T> key={i} {...props} markerOffset={markerOffset} />
+      })}
+    </>
+  )
 }

packages/docs/src/mdx/coreComponents/Tab.mdx

@@ -1,17 +1,16 @@
 export const meta = {
-  name: 'Tab',
-  route: '/components/tab',
+  name: 'Tabs',
+  route: '/components/tabs',
   menu: 'Components',
 }
 
 import styled from 'styled-components'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import {
-  Tab,
-  VerticalTab,
-  TabBase,
   Typography,
   Paper,
+  Tabs,
+  VerticalTabs,
 } from 'practical-react-components-core'
 import {
   HomeIcon,
@@ -98,21 +97,31 @@ export const TabPaper = styled(Paper)`
 export const DemoComponent = ({}) => {
   const [selectedHTab, setSelectedHTab] = useState('1')
   const [selectedVTab, setSelectedVTab] = useState('1')
+  const hTabs = useMemo(() => {
+    return HTABS.map(tab => ({
+      id: tab.id,
+      label: tab.label,
+      icon: tab.icon,
+      selected: tab.id === selectedHTab,
+      onSelect: setSelectedHTab,
+      className: 'my-tab',
+    }))
+  }, [selectedHTab, setSelectedHTab])
+  const vTabs = useMemo(() => {
+    return HTABS.map(tab => ({
+      id: tab.id,
+      label: tab.label,
+      icon: tab.icon,
+      selected: tab.id === selectedVTab,
+      onSelect: setSelectedVTab,
+      className: 'my-tab',
+    }))
+  }, [selectedVTab, setSelectedVTab])
   return (
     <>
       <ExamplePaper space={true}>
         <HorizontalTabContainer>
-          {HTABS.map(tab => (
-            <Tab
-              key={tab.id}
-              id={tab.id}
-              label={tab.label}
-              icon={tab.icon}
-              selected={tab.id === selectedHTab}
-              onSelect={setSelectedHTab}
-              className="my-tab"
-            />
-          ))}
+          <Tabs tabs={hTabs} />
         </HorizontalTabContainer>
         <Container show={selectedHTab === '1'}>
           <TabPaper space={true}>
@@ -131,17 +140,7 @@ export const DemoComponent = ({}) => {
       <ExamplePaper space={true}>
         <VContainer>
           <VerticalTabContainer>
-            {VTABS.map(tab => (
-              <VerticalTab
-                key={tab.id}
-                id={tab.id}
-                label={tab.label}
-                icon={tab.icon}
-                selected={tab.id === selectedVTab}
-                onSelect={setSelectedVTab}
-                disabled={tab.disabled}
-              />
-            ))}
+            <VerticalTabs tabs={vTabs} />
           </VerticalTabContainer>
           <Container show={selectedVTab === '1'}>
             <TabPaper space={true}>
@@ -166,12 +165,20 @@ export const DemoComponent = ({}) => {
 ## Basic usage
 
 ```typescript type="live"
-<Tab
-  id="id1"
-  label="Home"
-  icon={HomeIcon}
-  selected={true}
-  onSelect={() => {}}
+<Tabs
+  tabs={[
+    {
+      id: '1',
+      label: 'Home',
+      icon: HomeIcon,
+    },
+  ].map(tab => ({
+    id: tab.id,
+    label: tab.label,
+    icon: tab.icon,
+    selected: tab.id === '1',
+    onSelect: () => {},
+  }))}
 />
 ```
 
@@ -181,4 +188,4 @@ Tab forwards all unknown props to the base native `<div>` component. See
 [`<div>` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) for more
 details on which additional props that are available.
 
-<Props of="Tab" />
+<Props of="Tabs" />

packages/ui-tests/src/coreComponents/Tab.cypress.tsx

@@ -1,11 +1,10 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { DeviceIcon } from 'practical-react-components-icons'
-import { Tab } from 'practical-react-components-core'
+import { Tabs } from 'practical-react-components-core'
 
 export const meta = {
-  name: 'Tab',
-  route: '/components/tab',
+  name: 'Tabs',
+  route: '/components/tabs',
   menu: '',
 }
 
@@ -25,7 +24,6 @@ const HTABS = [
   {
     id: '1',
     label: 'Large device',
-    icon: DeviceIcon,
   },
   {
     id: '2',
@@ -36,20 +34,22 @@ const HTABS = [
 const Test = () => {
   const [selectedTab, setSelectedTab] = useState('none')
 
+  const hTabs = useMemo(() => {
+    return HTABS.map(tab => {
+      return {
+        id: tab.id,
+        label: tab.label,
+        selected: tab.id === selectedTab,
+        onSelect: setSelectedTab,
+        'data-cy': `my-tab-${tab.id}`,
+      }
+    })
+  }, [selectedTab, setSelectedTab])
+
   return (
     <>
       <HorizontalTabContainer>
-        {HTABS.map(tab => (
-          <Tab
-            key={tab.id}
-            id={tab.id}
-            label={tab.label}
-            icon={tab.icon}
-            selected={tab.id === selectedTab}
-            onSelect={setSelectedTab}
-            data-cy={`my-tab-${tab.id}`}
-          />
-        ))}
+        <Tabs tabs={hTabs} />
       </HorizontalTabContainer>
       <Container data-cy="container1" show={selectedTab === '1'}>
         <p>Content 1</p>

packages/ui-tests/src/coreComponents/Tab.spec.ts

@@ -5,7 +5,7 @@ context('Tab', () => {
   const tab2El = '[data-cy*=my-tab-2]'
 
   before(() => {
-    cy.visit('http://localhost:9009/#/components/tab')
+    cy.visit('http://localhost:9009/#/components/tabs')
   })
 
   it('no tab selected, containers should not be visible', () => {