Fixes #1941 - Implement panel component with collapse ability

liferay · May 1, 2019 · 3d7aa03 · 3d7aa03
1 parent cbb9cae
commit 3d7aa03
Show file tree

Hide file tree

Showing 9 changed files with 564 additions and 10 deletions.
diff --git a/packages/clay-panel/package.json b/packages/clay-panel/package.json
@@ -11,20 +11,29 @@
 	"main": "lib/index.js",
 	"module": "src/index.tsx",
 	"jsnext:main": "src/index.tsx",
-	"files": ["lib", "src"],
+	"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"],
+	"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"]
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
 }
diff --git a/packages/clay-panel/src/Body.tsx b/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;
diff --git a/packages/clay-panel/src/Footer.tsx b/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;
diff --git a/packages/clay-panel/src/Group.tsx b/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;
diff --git a/packages/clay-panel/src/Header.tsx b/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;
diff --git a/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap
@@ -1 +1,158 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClayPanel renders 1`] = `
+<div
+  className="panel"
+>
+  <div
+    className="panel-header"
+  >
+    <span
+      className="panel-title"
+    >
+      Display Title
+    </span>
+  </div>
+  <div
+    className="panel-header"
+  >
+    Header!
+  </div>
+  <div
+    className="panel-body"
+  >
+    Body!
+  </div>
+  <div
+    className="panel-footer"
+  >
+    Footer!
+  </div>
+</div>
+`;
+
+exports[`ClayPanel renders with different displayType 1`] = `
+<div
+  className="panel panel-secondary"
+>
+  <div
+    className="panel-header"
+  >
+    <span
+      className="panel-title"
+    >
+      Display Title
+    </span>
+  </div>
+  <div
+    className="panel-header"
+  >
+    Header!
+  </div>
+  <div
+    className="panel-body"
+  >
+    Body!
+  </div>
+  <div
+    className="panel-footer"
+  >
+    Footer!
+  </div>
+</div>
+`;
+
+exports[`ClayPanel renders with multiple panels 1`] = `
+<div
+  aria-orientation="vertical"
+  className="panel-group"
+  role="tablist"
+>
+  <div
+    className="panel"
+  >
+    <div
+      className="panel-header"
+    >
+      <span
+        className="panel-title"
+      >
+        Display Title
+      </span>
+    </div>
+    <div
+      className="panel-body"
+    >
+      Body!
+    </div>
+  </div>
+  <div
+    className="panel"
+  >
+    <div
+      className="panel-header"
+    >
+      <span
+        className="panel-title"
+      >
+        Display Title
+      </span>
+    </div>
+    <div
+      className="panel-body"
+    >
+      Body!
+    </div>
+  </div>
+  <div
+    className="panel"
+  >
+    <button
+      aria-expanded={false}
+      className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="panel-title"
+      >
+        Display Title
+      </span>
+      <span
+        className="collapse-icon-closed"
+      >
+        <svg
+          className="lexicon-icon lexicon-icon-angle-right"
+          role="presentation"
+        >
+          <use
+            xlinkHref="/foo/bar#angle-right"
+          />
+        </svg>
+      </span>
+      <span
+        className="collapse-icon-open"
+      >
+        <svg
+          className="lexicon-icon lexicon-icon-angle-down"
+          role="presentation"
+        >
+          <use
+            xlinkHref="/foo/bar#angle-down"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      className="panel-collapse collapse"
+      role="tabpanel"
+    >
+      <div
+        className="panel-body"
+      >
+        Body!
+      </div>
+    </div>
+  </div>
+</div>
+`;