wip

packages/clay-sidebar/.yarnrc

@@ -0,0 +1,3 @@
+# Make `yarn version` produce the right commit message and tag for this package.
+version-tag-prefix "@clayui/sidebar@"
+version-git-message "chore: prepare @clayui/sidebar@%s"

packages/clay-sidebar/README.md

@@ -0,0 +1,17 @@
+# clay-sidebar
+
+My awesome Clay component
+
+## 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-sidebar/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@clayui/sidebar",
+	"version": "3.0.0",
+	"description": "ClaySidebar component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-sidebar",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"ts: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": "yarn build && yarn build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"classnames": "^2.2.6"
+	},
+	"peerDependencies": {
+		"@clayui/css": "3.x",
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	]
+}

packages/clay-sidebar/src/Divider.tsx

@@ -0,0 +1,17 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+interface IDividerProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Divider: React.FunctionComponent<IDividerProps> = ({...otherProps}) => {
+	return <div {...otherProps}>{'Should be a divider'}</div>;
+};
+
+Divider.displayName = 'Divider';
+
+export default Divider;

packages/clay-sidebar/src/Panel.tsx

@@ -0,0 +1,31 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+interface IPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+	show?: boolean;
+}
+
+const Panel: React.FunctionComponent<IPanelProps> = ({
+	children,
+	show = false,
+	...otherProps
+}) => {
+	if (show) {
+		return (
+			<div className="sidebar sidebar-light" {...otherProps}>
+				{children}
+			</div>
+		);
+	}
+
+	return null;
+};
+
+Panel.displayName = 'Panel';
+
+export default Panel;

packages/clay-sidebar/src/Search.tsx

@@ -0,0 +1,49 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayButton from '@clayui/button';
+import ClayForm, {ClayInput} from '@clayui/form';
+import ClayIcon from '@clayui/icon';
+import classNames from 'classnames';
+import React from 'react';
+
+interface ISearchProps extends React.HTMLAttributes<HTMLDivElement> {
+	spritemap: string;
+}
+
+const Search: React.FunctionComponent<ISearchProps> = ({
+	className,
+	placeholder,
+	spritemap,
+	...otherProps
+}) => {
+	return (
+		<ClayForm.Group
+			className={classNames('cm-panel-search', className)}
+			{...otherProps}
+		>
+			<ClayInput.Group>
+				<ClayInput.GroupItem prepend>
+					<ClayInput
+						placeholder={placeholder}
+						sizing="sm"
+						type="search"
+					/>
+				</ClayInput.GroupItem>
+
+				<ClayInput.GroupItem append shrink>
+					<ClayButton small type="submit">
+						<ClayIcon spritemap={spritemap} symbol="search" />
+					</ClayButton>
+				</ClayInput.GroupItem>
+			</ClayInput.Group>
+		</ClayForm.Group>
+	);
+};
+
+Search.displayName = 'Search';
+
+export default Search;