Fixes #1941 - Implement panel component with collapse ability

migrate-the-clay-components-from-v2-to-v3.md

@@ -165,13 +165,14 @@ ClayNavigationBar has become simpler than the version `v2`, removing APIs from `
 
 ### API Changes:
 
-- `data` deprecated, you can pass as props to the component or elements.
-- `defaultEventHandler` deprecated
-- `elementClasses` deprecated
-- `id` deprecated, you can pass as props to the component or elements.
-- `items` deprecated, in favor of composition. You can pass `<ClayNavigationBar.Item>` component to specify the element that will be rendered on Dropdown.
+-   `data` deprecated, you can pass as props to the component or elements.
+-   `defaultEventHandler` deprecated
+-   `elementClasses` deprecated
+-   `id` deprecated, you can pass as props to the component or elements.
+-   `items` deprecated, in favor of composition. You can pass `<ClayNavigationBar.Item>` component to specify the element that will be rendered on Dropdown.
 
 ### Compositions:
+
 Example:
 
 You want to use Clay button or just a button element inside your dropdown
@@ -273,14 +274,14 @@ Become a low-level API, you can compose Modal's small blocks to get the results
 
 ### API Changes
 
--  `body` deprecated in favor of utilizing `<ClayModal.Body />` component
--  `data` deprecated
--  `defaultEventHandler` deprecated
--  `elementClasses` renamed to `className`
--  `footerButtons` deprecated in favor of utilizing `<ClayModal.Footer />` component
--  `onClose` added
--  `title` deprecated in favor of utilizing `<ClayModal.Header />` component
--  `visible` deprecated in favor of animating the component when it is mount and unmount.
+-   `body` deprecated in favor of utilizing `<ClayModal.Body />` component
+-   `data` deprecated
+-   `defaultEventHandler` deprecated
+-   `elementClasses` renamed to `className`
+-   `footerButtons` deprecated in favor of utilizing `<ClayModal.Footer />` component
+-   `onClose` added
+-   `title` deprecated in favor of utilizing `<ClayModal.Header />` component
+-   `visible` deprecated in favor of animating the component when it is mount and unmount.
 
 ### Compositions
 
@@ -407,4 +408,37 @@ For example:
 -   `items` removed in favor of composition
 -   `selectable` removed in favor of using `ClayCheckbox`
 -   `schema` removed
--   `spritemap` only used for `<ClayList.QuickActionMenu.Item />`
+-   `spritemap` only used for `<ClayList.QuickActionMenu.Item />`
+
+## ClayCollapse -> ClayPanel
+
+ClayCollapse has been renamed to ClayPanel due to collapse being just a part of the panel functionality. ClayPanel is now simpler as it now manages its own expanded state internally. ClayPanel also is now created via composition with `<ClayPanel.Body>`, `<ClayPanel.Footer>`, `<ClayPanel.Header>` and `<ClayPanel.Group>`.
+
+For example:
+
+```jsx
+<ClayPanel>
+	<ClayPanel.Header>{'Header!'}</ClayPanel.Header>
+	<ClayPanel.Body>{'Body!'}</ClayPanel.Body>
+	<ClayPanel.Footer>{'Footer!'}</ClayPanel.Footer>
+</ClayPanel>
+
+// or
+<ClayPanel.Group>
+	<ClayPanel>
+		<ClayPanel.Body>{'One!'}</ClayPanel.Body>
+	</ClayPanel>
+	<ClayPanel>
+		<ClayPanel.Body>{'Two!'}</ClayPanel.Body>
+	</ClayPanel>
+</ClayPanel.Group>
+```
+
+### API Changes
+
+-   `closedClasses` removed and uses clay's classes of `collapse` and `show`
+-   `collapsed` renamed to `defaultExpanded` which will only take effect on first render.
+-   `content` removed in favor of `children` prop
+-   `headers` removed in favor of composing with `<ClayPanel.Header>`
+-   `openClasses` removed and uses clay's class of `collapse`
+-   `transitionClasses` removed and manages transitions internally.

packages/clay-navigation-bar/package.json

@@ -29,7 +29,8 @@
 		"classnames": "^2.2.6",
 		"@clayui/button": "^3.0.0",
 		"@clayui/icon": "^3.0.0",
-		"@clayui/link": "^3.0.0"
+		"@clayui/link": "^3.0.0",
+		"@clayui/shared": "^3.0.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.1",

packages/clay-navigation-bar/src/index.tsx

@@ -11,7 +11,7 @@ import ClayIcon from '@clayui/icon';
 import ClayLink from '@clayui/link';
 import warning from 'warning';
 
-import {useTransition} from './hooks';
+import {useTransitionHeight} from '@clayui/shared';
 
 interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
@@ -83,7 +83,7 @@ const ClayNavigationBar: React.FunctionComponent<Props> & {
 		transitioning,
 		handleTransitionEnd,
 		handleClickToggler,
-	] = useTransition(visible, setVisible, contentRef);
+	] = useTransitionHeight(visible, setVisible, contentRef);
 
 	const activeElementsCount = children.filter(child => child.props.active)
 		.length;

packages/clay-panel/README.md

@@ -0,0 +1,17 @@
+# clay-panel
+
+React implementation of panel from clay-css
+
+## Setup
+
+1. Install `yarn`
+
+2. Install local dependencies:
+
+```
+yarn
+```
+
+## 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.

packages/clay-panel/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@clayui/panel",
+	"version": "3.0.0",
+	"description": "ClayPanel component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-panel",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"module": "src/index.tsx",
+	"jsnext:main": "src/index.tsx",
+	"files": [
+		"lib",
+		"src"
+	],
+	"scripts": {
+		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "npm run build && npm run build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"@clayui/icon": "^3.0.0",
+		"classnames": "^2.2.6"
+	},
+	"peerDependencies": {
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
+}

packages/clay-panel/src/Body.tsx

@@ -0,0 +1,24 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ClayPanelBody: React.FunctionComponent<Props> = ({
+	children,
+	className,
+	...otherProps
+}) => {
+	return (
+		<div {...otherProps} className={classNames('panel-body', className)}>
+			{children}
+		</div>
+	);
+};
+
+export default ClayPanelBody;

packages/clay-panel/src/Footer.tsx

@@ -0,0 +1,24 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ClayPanelFooter: React.FunctionComponent<Props> = ({
+	children,
+	className,
+	...otherProps
+}) => {
+	return (
+		<div {...otherProps} className={classNames('panel-footer', className)}>
+			{children}
+		</div>
+	);
+};
+
+export default ClayPanelFooter;

packages/clay-panel/src/Group.tsx

@@ -0,0 +1,62 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Flag to signify that `panel-group-fluid-first` class should be added.
+	 * This class generally should be used inside card or sheet
+	 */
+	fluidFirst?: boolean;
+
+	/**
+	 * Flag to signify that `panel-group-fluid-last` class should be added.
+	 * This class generally should be used inside card or sheet
+	 */
+	fluidLast?: boolean;
+
+	/**
+	 * Flag to signify that `panel-group-fluid` class should be added.
+	 * This class generally should be used inside card or sheet
+	 */
+	fluid?: boolean;
+
+	/**
+	 * Flag to signify that `panel-group-flush` class should be added.
+	 * This class generally should be used inside card, sheet, or a type of padded container.
+	 */
+	flush?: boolean;
+}
+
+const ClayPanelGroup: React.FunctionComponent<Props> = ({
+	children,
+	className,
+	fluid,
+	fluidFirst,
+	fluidLast,
+	flush,
+	...otherProps
+}) => {
+	return (
+		<div
+			{...otherProps}
+			aria-orientation="vertical"
+			className={classNames('panel-group', className, {
+				'panel-group-fluid': fluid,
+				'panel-group-fluid-first': fluidFirst,
+				'panel-group-fluid-last': fluidLast,
+				'panel-group-flush': flush,
+			})}
+			role="tablist"
+		>
+			{children}
+		</div>
+	);
+};
+
+export default ClayPanelGroup;

packages/clay-panel/src/Header.tsx

@@ -0,0 +1,24 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ClayPanelHeader: React.FunctionComponent<Props> = ({
+	children,
+	className,
+	...otherProps
+}) => {
+	return (
+		<div {...otherProps} className={classNames('panel-header', className)}>
+			{children}
+		</div>
+	);
+};
+
+export default ClayPanelHeader;