@bigbinary/neetoui 2.0.84 → 2.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "2.0.84",
+  "version": "2.0.88",
   "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 {
@@ -71,4 +73,51 @@ Sidenav.args = {
       },
     ],
   },
+  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",
+  },
+  navLinks: NAV_LINKS,
+  profileInfo: {
+    name: "Kieran Miller",
+    email: "kieranmiller@gmail.com",
+    imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
+    dropdownProps: [
+      {
+        label: "Edit",
+        onClick: () => {},
+      },
+      {
+        label: "Logout",
+        onClick: () => {},
+      },
+    ],
+  },
+  showAppSwitcher: true,
+  appName: "neetoUI",
 };

package/stories/Switch.stories.jsx

@@ -43,7 +43,7 @@ WithLabel.args = {
 
 export const WithCustomLabel = Template.bind({});
 WithCustomLabel.args = {
-  label: <span className="ml-3 shadow-md">Switch Label Example</span>,
+  label: <span className="neeto-ui-text-info">Custom Label Example</span>,
 };
 
 export const WithChangeListner = Template.bind({});

package/stories/Tooltip.stories.jsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import Button from "../lib/components/Button";
 import Tooltip from "../lib/components/Tooltip";
+import Typography from "../lib/components/Typography";
 
 export default {
   title: "Overlays/Tooltip",
@@ -115,3 +116,22 @@ export const Themes = () => {
     </div>
   );
 };
+
+export const TooltipOnText = () => {
+  return (
+    <div className=" p-10 flex items-center justify-center space-x-6">
+      <Tooltip placement="top" content={"Tooltip"}>
+        <Typography>Top</Typography>
+      </Tooltip>
+      <Tooltip placement="bottom" content={"Tooltip"}>
+        <Typography>Bottom</Typography>
+      </Tooltip>
+      <Tooltip placement="left" content={"Tooltip"}>
+        <Typography>Left</Typography>
+      </Tooltip>
+      <Tooltip placement="right" content={"Tooltip"}>
+        <Typography>Right</Typography>
+      </Tooltip>
+    </div>
+  );
+};