@clayui/tabs 3.45.0 → 3.52.0

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/tabs`
+
+Tabs organize similar content together into individual sections in the same page.
+
+-   [Documentation](https://clayui.com/docs/components/tabs.html)
+-   [Changelog](./CHANGELOG.md)
+-   [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/tabs
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

package/lib/index.d.ts

@@ -2,7 +2,9 @@ import React from 'react';
 import Content from './Content';
 import Item from './Item';
 import TabPane from './TabPane';
+export declare type DisplayType = null | 'basic' | 'underline';
 interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+    displayType?: DisplayType;
     justified?: boolean;
     modern?: boolean;
 }

package/lib/index.js

@@ -15,7 +15,7 @@ var _Item = _interopRequireDefault(require("./Item"));
 
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
-var _excluded = ["children", "className", "justified", "modern"];
+var _excluded = ["children", "className", "displayType", "justified", "modern"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,6 +28,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ClayTabs = function ClayTabs(_ref) {
   var children = _ref.children,
       className = _ref.className,
+      displayType = _ref.displayType,
       justified = _ref.justified,
       _ref$modern = _ref.modern,
       modern = _ref$modern === void 0 ? true : _ref$modern,
@@ -35,9 +36,13 @@ var ClayTabs = function ClayTabs(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("ul", _extends({
     className: (0, _classnames.default)('nav', {
-      'nav-justified': justified,
+      'nav-justified': justified
+    }, !displayType ? {
       'nav-tabs': !modern,
       'nav-underline': modern
+    } : {
+      'nav-tabs': displayType === 'basic',
+      'nav-underline': displayType === 'underline'
     }, className),
     role: "tablist"
   }, otherProps), children);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tabs",
-	"version": "3.45.0",
+	"version": "3.52.0",
 	"description": "ClayTabs component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -26,7 +26,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.45.0",
+		"@clayui/shared": "^3.52.0",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
@@ -37,5 +37,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "82d19a7d31a21a6bb4ac92a0d709b32fc19502e9"
+	"gitHead": "eb7c98d6c746294376f10554c68cc48c30d8bd0e"
 }

package/src/__tests__/index.tsx

@@ -62,12 +62,30 @@ describe('ClayTabs', () => {
 		expect(container.querySelector('.nav.nav-justified')).toBeTruthy();
 	});
 
+	it('renders with displayType prop nav items', () => {
+		const {container} = render(<ClayTabs displayType="underline" />);
+
+		expect(container.querySelector('.nav.nav-underline')).toBeTruthy();
+	});
+
 	it('renders with modern style', () => {
 		const {container} = render(<ClayTabs modern />);
 
 		expect(container.querySelector('.nav.nav-underline')).toBeTruthy();
 	});
 
+	it('renders with modern style and displayType prop as null', () => {
+		const {container} = render(<ClayTabs displayType={null} modern />);
+
+		expect(container.querySelector('.nav.nav-underline')).toBeTruthy();
+	});
+
+	it('renders with tab style using displayType prop and overrides modern prop', () => {
+		const {container} = render(<ClayTabs displayType="basic" modern />);
+
+		expect(container.querySelector('.nav.nav-tabs')).toBeTruthy();
+	});
+
 	it('renders with items', () => {
 		const {container} = render(<ClayTabsWithItems />);
 

package/src/index.tsx

@@ -10,7 +10,14 @@ import Content from './Content';
 import Item from './Item';
 import TabPane from './TabPane';
 
+export type DisplayType = null | 'basic' | 'underline';
+
 interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+	/**
+	 * Determines how tab is displayed.
+	 */
+	displayType?: DisplayType;
+
 	/**
 	 * Justify the nav items according the tab content.
 	 */
@@ -30,6 +37,7 @@ const ClayTabs: React.FunctionComponent<IProps> & {
 } = ({
 	children,
 	className,
+	displayType,
 	justified,
 	modern = true,
 	...otherProps
@@ -38,11 +46,17 @@ const ClayTabs: React.FunctionComponent<IProps> & {
 		<ul
 			className={classNames(
 				'nav',
-				{
-					'nav-justified': justified,
-					'nav-tabs': !modern,
-					'nav-underline': modern,
-				},
+				{'nav-justified': justified},
+				!displayType
+					? {
+							'nav-tabs': !modern,
+							'nav-underline': modern,
+					  }
+					: {
+							'nav-tabs': displayType === 'basic',
+							'nav-underline': displayType === 'underline',
+					  },
+
 				className
 			)}
 			role="tablist"

package/README.mdx

@@ -1,38 +0,0 @@
----
-title: 'Tabs'
-description: 'Tabs organize similar content together into individual sections in the same page.'
-lexiconDefinition: 'https://liferay.design/lexicon/core-components/tabs/'
-packageNpm: '@clayui/tabs'
----
-
-import {Tabs, TabsDropdown} from '$packages/clay-tabs/docs/index';
-
-<div class="nav-toc-absolute">
-<div class="nav-toc">
-
--   [Introduction](#introduction)
--   [Dropdown Tabs](#dropdown-tabs)
--   [TabPanel](#tabpanel)
-
-</div>
-</div>
-
-## Introduction
-
-`ClayTabs` is a controlled component, we left this component controlled because the user can use Dropdowns or another control to select a `TabPane` for render. Just creating states to manage it.
-
-For the modern variant of Tabs use the `modern` property. If you need to justify the text inside the `ClayTabs.Item`, use the `justified` property.
-
-Use `ClayTabs.Item` for defining a TabPane's trigger. For using this trigger as an `anchor` element, just define `href` property, otherwise, the trigger will be a `button`. Use `ClayTabs.TabPane` for wrapping the content that will be rendered by TabPane as the following example:
-
-<Tabs />
-
-## Dropdown Tabs
-
-As a controlled component, Tabs allows you to control the `active` TabPane. Thereby, we can select the active TabPane by a Dropdown menu. For example:
-
-<TabsDropdown />
-
-## TabPanel
-
-Note that `ClayTabs.TabPanel` is an alias to `ClayTabs.TabPane`. The two are interchangeable.