@bigbinary/neetoui 2.0.78 → 2.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "2.0.78",
+  "version": "2.0.82",
   "main": "./neetoui.js",
   "author": "BigBinary",
   "license": "MIT",

package/stories/Avatar.stories.jsx

@@ -50,6 +50,15 @@ Xlarge.args = {
   size: "xlarge",
 };
 
+export const WithCustomClassName = Template.bind({});
+WithCustomClassName.storyName="With Custom className"
+WithCustomClassName.args = {
+  onClick: { onClick },
+  user: { name: "neeto UI" },
+  size: "xlarge",
+  className: "cursor-pointer"
+};
+
 export const AllVariants = () => {
   const imageUrl = "https://i.pravatar.cc/300";
   const onClick = () => {

package/stories/Introduction.stories.mdx

@@ -57,6 +57,8 @@ yarn add @bigbinary/neetoui
 
 For other installation methods, refer our [**official npm page**](https://www.npmjs.com/package/@bigbinary/neetoui)
 
+For more information, refer our [**GitHub repository**](https://github.com/bigbinary/neeto-ui)
+
 <div className="tip-wrapper">
   <span className="tip">
     To use NeetoUI, you need a recent version of React.js installed (version

package/stories/Pane.stories.jsx

@@ -3,6 +3,7 @@ import { Check } from "@bigbinary/neeto-icons";
 
 import Button from "../lib/components/Button";
 import Pane from "../lib/components/Pane";
+import Typography from "../lib/components/Typography";
 
 export default {
   title: "Overlays/Pane",
@@ -32,24 +33,30 @@ export const Panes = () => {
 
       <Pane isOpen={showPane} onClose={() => setShowPane(false)}>
         <Pane.Header>
-          <h2>User Info</h2>
+          <Typography style="h2" weight="semibold">
+            Typography
+          </Typography>
         </Pane.Header>
         <Pane.Body>
-          Somewhere out in space live The Herculoids! Zok, the laser-ray dragon!
-          Igoo, the giant rock ape! Tundro, the tremendous! Gloop and Gleep, the
-          formless, fearless wonders! With Zandor, their leader, and his wife,
-          Tara, and son, Dorno, they team up to protect their planet from
-          sinister invaders! All-strong! All-brave! All-heroes! They're The
-          Herculoids!
+          <Typography style="body2">
+            Somewhere out in space live The Herculoids! Zok, the laser-ray
+            dragon! Igoo, the giant rock ape! Tundro, the tremendous! Gloop and
+            Gleep, the formless, fearless wonders! With Zandor, their leader,
+            and his wife, Tara, and son, Dorno, they team up to protect their
+            planet from sinister invaders! All-strong! All-brave! All-heroes!
+            They're The Herculoids!
+          </Typography>
         </Pane.Body>
-        <Pane.Footer className="flex space-x-4">
+        <Pane.Footer className="flex items-center space-x-2">
           <Button
             icon={Check}
+            size="large"
             label="Continue"
             onClick={() => setShowPane(false)}
           />
           <Button
             style="text"
+            size="large"
             label="Cancel"
             onClick={() => setShowPane(false)}
           />

package/stories/Tab.stories.jsx

@@ -15,15 +15,35 @@ export default {
   },
 };
 
+const Template = (args) => (
+  <Tab {...args}>
+    <Tab.Item active="true">Label</Tab.Item>
+    <Tab.Item>Label</Tab.Item>
+  </Tab>
+);
+
+export const Default = Template.bind({});
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "large",
+};
+
+export const LargeWithoutUnderline = Template.bind({});
+LargeWithoutUnderline.args = {
+  size: "large",
+  noUnderline: true,
+};
+
 export const TwoItems = () => {
   const [tab, setTab] = useState(true);
   return (
-    <Tab className="grid grid-cols-2">
+    <Tab>
       <Tab.Item active={tab} onClick={() => setTab(true)}>
-        Tab 1
+        Label
       </Tab.Item>
       <Tab.Item active={!tab} onClick={() => setTab(false)}>
-        Tab 2
+        Label
       </Tab.Item>
     </Tab>
   );
@@ -31,21 +51,21 @@ export const TwoItems = () => {
 
 export const ThreeItems = () => {
   return (
-    <Tab className="grid grid-cols-3">
-      <Tab.Item active>Tab 1</Tab.Item>
-      <Tab.Item>Tab 2</Tab.Item>
-      <Tab.Item>Tab 3</Tab.Item>
+    <Tab>
+      <Tab.Item active>Label</Tab.Item>
+      <Tab.Item>Label</Tab.Item>
+      <Tab.Item>Label</Tab.Item>
     </Tab>
   );
 };
 
-export const FourItems = (args) => {
+export const FourItems = () => {
   return (
-    <Tab className="grid grid-cols-3">
-      <Tab.Item active>Tab 1</Tab.Item>
-      <Tab.Item>Tab 2</Tab.Item>
-      <Tab.Item>Tab 3</Tab.Item>
-      <Tab.Item>Tab 4</Tab.Item>
+    <Tab>
+      <Tab.Item active>Label</Tab.Item>
+      <Tab.Item>Label</Tab.Item>
+      <Tab.Item>Label</Tab.Item>
+      <Tab.Item>Label</Tab.Item>
     </Tab>
   );
 };