feat(@clayui/core): adds theme API to Provider

liferay · Jul 5, 2021 · e7bae7d · e7bae7d
1 parent 1d4e4b3
commit e7bae7d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 10 deletions.
diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
@@ -10,7 +10,7 @@
 	},
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
-	"ts:main": "src/index.tsx",
+	"ts:main": "src/index.ts",
 	"files": [
 		"lib",
 		"src"
@@ -26,6 +26,8 @@
 		"react"
 	],
 	"dependencies": {
+		"@clayui/button": "^3.6.0",
+		"@clayui/drop-down": "^3.30.0",
 		"@clayui/icon": "^3.1.0",
 		"@clayui/modal": "^3.29.0"
 	},

diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
@@ -3,6 +3,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+export {
+	default as Button,
+	ClayButtonWithIcon as ButtonWithIcon,
+} from '@clayui/button';
+export {
+	default as DropDown,
+	ClayDropDownWithItems as DropDownWithItems,
+	ClayDropDownWithDrilldown as DropDownWithDrilldown,
+} from '@clayui/drop-down';
 export {default as Icon} from '@clayui/icon';
 export {
 	default as Modal,

diff --git a/packages/clay-core/src/provider/src/Provider.tsx b/packages/clay-core/src/provider/src/Provider.tsx
@@ -17,9 +17,13 @@ interface IProviderProps extends IProviderContext {
 }
 
 interface IProviderContext {
+	/**
+	 * The theme corresponds to a CSS class to scope the application.
+	 */
+	theme?: string;
 }
 
-const Context = React.createContext<IProviderContext | null>(null);
+const Context = React.createContext<IProviderContext>({});
 
 Context.displayName = 'ClayProviderContext';
 

diff --git a/packages/clay-core/src/provider/stories/Provider.stories.tsx b/packages/clay-core/src/provider/stories/Provider.stories.tsx
@@ -6,14 +6,42 @@
 import '@clayui/css/lib/css/atlas.css';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
 import {storiesOf} from '@storybook/react';
-import React from 'react';
+import React, {useState} from 'react';
 
 import {Provider} from '../';
-import {Icon} from '../../';
+import {Button, DropDown, Icon} from '../../';
 
-storiesOf('Provider', module).add('spritemap', () => (
-	<Provider spritemap={spritemap}>
-		<Icon symbol="books" />
-		<Icon symbol="times" />
-	</Provider>
-));
+storiesOf('Provider', module)
+	.add('spritemap', () => (
+		<Provider spritemap={spritemap}>
+			<Icon symbol="books" />
+			<Icon symbol="times" />
+		</Provider>
+	))
+	.add('theme', () => {
+		const [active, setActive] = useState(false);
+
+		return (
+			<Provider spritemap={spritemap} theme="cadmin">
+				<DropDown
+					active={active}
+					onActiveChange={setActive}
+					trigger={<Button>{'Click here!'}</Button>}
+				>
+					<DropDown.ItemList>
+						<DropDown.Group header="Group #1">
+							{[
+								{href: '#one', label: 'one'},
+								{href: '#two', label: 'two'},
+								{href: '#three', label: 'three'},
+							].map((item, i) => (
+								<DropDown.Item href={item.href} key={i}>
+									{item.label}
+								</DropDown.Item>
+							))}
+						</DropDown.Group>
+					</DropDown.ItemList>
+				</DropDown>
+			</Provider>
+		);
+	});