essence-appbar - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "essence-appbar",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Essence AppBar - AppBar component.",
@@ -5,0 +5,0 @@ "author": "Hetmann W. Iohan <[e-mail]>",

README.md

@@ -1,8 +0,87 @@
-# Essence AppBar - AppBar component.
+# Essence AppBar - AppBar component
 
 ### How to use
-```jsx
-<AppBar classes={'e-background-yellow-100 e-text-blue-400'}>
-    <Text>AppBar text</Text>
-</AppBar>
+```js
+import ClassNames from 'classnames';
+import AppBar from 'essence-appbar/src/appbar.jsx';
+import Input from 'essence-input/src/input.jsx';
+import Menu from 'essence-menu/src/menu.jsx';
+import Toast from 'essence-toast/src/toast.jsx';
+
+class AppBarTest extends React.Component {
+	constructor(props) {
+        super(props);
+        this.state = {
+        	search: 'close',
+        	toast: false,
+            classes: ClassNames(
+                this.props.classes,
+                this.props.className
+            )
+        };
+    }
+
+    renderSearch() {
+    	let classes = ClassNames('e-no-margin e-text-white e-left', this.state.search);
+    	return (
+			<Input
+				type={'search'}
+				name='search-input'
+				placeholder='Search...'
+				classes={classes}/>
+		);
+	}
+
+    renderToast() {
+    	if (this.state.toast) {
+    		return (
+    			<Toast classes={'e-text-green-500'} visible={true} delay={5000}>
+					Adaugat la Favorite
+				</Toast>
+			);
+    	}
+
+    	return;
+    }
+
+    toggleSearch() {
+    	this.setState({
+    		search: (this.state.search === 'close' ? 'open' : 'close')
+    	});
+    }
+
+    toggleToast() {
+    	var toastStatus = !this.state.toast;
+
+    	this.setState({
+    		toast: toastStatus
+    	});
+    }
+
+    render() {
+        return(
+			<AppBar classes={'e-background-cyan-400'}>
+				<Button className={'flat e-background-cyan-400 e-text-white e-left'} type={'primary'} icon={'navigation-menu'}/>
+
+				<Text className={'e-text-white'}>Essence - test</Text>
+
+				<Menu type={'cover'} icon={'navigation-more-vert'} classes={'e-right e-text-white e-background-cyan-400'}>
+					<Text classes={'e-text-black'}>Profile</Text>
+					<Text classes={'e-text-black'}>Settings</Text>
+					<Text classes={'e-text-black'}>Logout</Text>
+				</Menu>
+				
+				<Block className={'e-right'}>
+					{this.renderToast()}
+					<Button onClick={this.toggleToast.bind(this)} className={'flat e-background-cyan-400 e-text-white e-right'} type={'primary'} icon={'action-favorite'}/>
+				</Block>
+				
+				<Block className={'e-right search-block'}>
+					{this.renderSearch()}
+					<Button onClick={this.toggleSearch.bind(this)} className={'flat e-background-cyan-400 e-text-white e-right'} type={'primary'} icon={'action-search'}/>
+				</Block>
+			</AppBar>
+        );
+    }
+};
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13688

increased by48.9%

Number of lines in readme file

87

increased by987.5%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes