@bigbinary/neetoui 2.0.82 → 2.0.86

package/README.md

@@ -8,14 +8,13 @@
 yarn add @bigbinary/neetoui
 ```
 
-NeetoUI relies on [Remixicons](https://remixicon.com/) for it's icons.
-Install it by executing following command.
+If the project uses **NeetoUI v1**, install [Remixicons](https://remixicon.com/) as **NeetoUI v1** relies on it. It can be installed by executing following command.
 
 ```
 yarn add remixicon
 ```
 
-Import the styles in your `application.scss` file by doing
+Then import the Remixicon styles in your `application.scss` file by doing
 
 ```
 import 'remixicon/fonts/remixicon.css'
@@ -48,3 +47,8 @@ v2 : https://neetoui-v2.netlify.app
 ## Theming
 
 Theme override gist: [Override Gist](https://gist.github.com/goutham-subramanyam/d0619f8d089b10e7474a32478110ea0f)
+
+## Other Libraries
+
+- [neetoIcons](https://github.com/bigbinary/neeto-icons): **NeetoIcons** is the official icons library from BigBinary.
+- [neetoUtils](https://github.com/bigbinary/neeto-utils): **NeetoUtils** is a collection of react hooks and utility functions used at BigBinary.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "2.0.82",
+  "version": "2.0.86",
   "main": "./neetoui.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -82,7 +82,7 @@
     "react-toastify": "^8.0.2"
   },
   "dependencies": {
-    "@bigbinary/neeto-icons": "^1.7.4",
+    "@bigbinary/neeto-icons": "^1.7.6",
     "@popperjs/core": "^2.9.2",
     "@reach/auto-id": "^0.15.0",
     "@tailwindcss/forms": "^0.3.2",

package/stories/Button.stories.jsx

@@ -48,6 +48,15 @@ Link.args = {
   label: "Button",
 };
 
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+  label: "Tooltip button",
+  tooltipProps: {
+    content: "Top",
+    placement: "top",
+  },
+};
+
 export const AllVariants = () => {
   const [loading, setLoading] = useState(false);
   const toggle = () => {

package/stories/Sidebar.stories.jsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
 import Sidebar from "../lib/components/layouts/Sidebar";
+import AppSwitcher from "../lib/components/layouts/AppSwitcher";
 import { NAV_LINKS, COMPONENT_MAPPING } from "../example/src/constants";
 
 export default {
@@ -52,6 +54,50 @@ const Template = (args) => {
 
 export const Sidenav = Template.bind({});
 Sidenav.args = {
+  organizationInfo: {
+    name: "neetoUI",
+    subdomain: "neetoui.netlify.app",
+  },
+  navLinks: NAV_LINKS,
+  profileInfo: {
+    name: "Kieran Miller",
+    imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
+    dropdownProps: [
+      {
+        label: "Edit",
+        onClick: () => {},
+      },
+      {
+        label: "Logout",
+        onClick: () => {},
+      },
+    ],
+  },
+  showAppSwitcher: true,
+  appName: "neetoUI",
+};
+
+export const SidebarWithAppSwitcher = (args) => {
+  const [isAppSwitcherOpen, setIsAppSwitcherOpen] = useState(false);
+
+  return (
+    <Router>
+        <Sidebar
+          {...args}
+          onAppSwitcherToggle={() => setIsAppSwitcherOpen((isOpen) => !isOpen)}
+          toggleAppSwitcher={isAppSwitcherOpen}
+        />
+        <AppSwitcher
+          isOpen={isAppSwitcherOpen}
+          onClose={() => setIsAppSwitcherOpen(false)}
+          v2
+        />
+    </Router>
+  );
+};
+
+SidebarWithAppSwitcher.storyName = "Sidebar with AppSwitcher"
+SidebarWithAppSwitcher.args = {
   organizationInfo: {
     name: "neetoUI",
     subdomain: "neetoui.netlify.app",
@@ -72,4 +118,6 @@ Sidenav.args = {
       },
     ],
   },
+  showAppSwitcher: true,
+  appName: "neetoUI",
 };