@bigbinary/neetoui 2.0.65 → 2.0.71

package/.storybook/preview.js

@@ -13,7 +13,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Introduction', 'Foundation', 'Components', 'Overlays', 'Layouts'],
+      order: ['Introduction', 'Foundation', ['Colors', 'Typography', 'Iconography', 'Helpers'], 'Components', 'Overlays', 'Layouts'],
     },
   },
 }

package/package.json

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

package/stories/Color.stories.mdx

@@ -128,10 +128,10 @@ export const colorPalette = [
   <thead>
     <tr>
       <td></td>
-      <td>Hex Code</td>
-      <td>Variable Name</td>
-      <td>Text Color</td>
-      <td>Background Color</td>
+      <td>Hex code</td>
+      <td>Variable name</td>
+      <td>Text color class</td>
+      <td>Background color class</td>
     </tr>
   </thead>
   <tbody>
@@ -154,14 +154,14 @@ export const colorPalette = [
           </td>
           <td>
             <div className="flex justify-between">
-              <code>{`.${color.name.replace("$neeto-ui", "neeto-ui-text")}`}</code>
+              <code>{`${color.name.replace("$neeto-ui", "neeto-ui-text")}`}</code>
               <b className={`ml-2 ${color.name.replace("$neeto-ui", "neeto-ui-text")}`}>
                 Aa
               </b>
             </div>
           </td>
           <td className={`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}>
-            <code>{`.${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}</code>
+            <code>{`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}</code>
           </td>
         </tr>
       );

package/stories/Dropdown.stories.jsx

@@ -82,3 +82,23 @@ export const CustomIcon = (args) => {
     </Dropdown>
   );
 };
+
+export const DropdownStory = (args) => {
+  return (
+    <Dropdown
+      label="Dropdown"
+      position="bottom-end"
+      {...args}
+    >
+      {listItems.map((item, idx) => (
+        <li key={idx}>{item}</li>
+      ))}
+    </Dropdown>
+  );
+};
+DropdownStory.storyName = "DropDown"
+DropdownStory.args = {
+  buttonProps: {
+    size: "large"
+  }
+}

package/stories/HelpersBorderColor.stories.mdx

@@ -0,0 +1,162 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+export const colorPalette = [
+  {
+    name: "$neeto-ui-white",
+    value: "#ffffff",
+    compiledValue: "#ffffff",
+  },
+  {
+    name: "$neeto-ui-black",
+    value: "#1b1f23",
+    compiledValue: "#1b1f23",
+  },
+  {
+    name: "$neeto-ui-gray-800",
+    value: "#2f3941",
+    compiledValue: "#2f3941",
+  },
+  {
+    name: "$neeto-ui-gray-700",
+    value: "#49545c",
+    compiledValue: "#49545c",
+  },
+  {
+    name: "$neeto-ui-gray-600",
+    value: "#68737d",
+    compiledValue: "#68737d",
+  },
+  {
+    name: "$neeto-ui-gray-500",
+    value: "#87929d",
+    compiledValue: "#87929d",
+  },
+  {
+    name: "$neeto-ui-gray-400",
+    value: "#c2c8cc",
+    compiledValue: "#c2c8cc",
+  },
+  {
+    name: "$neeto-ui-gray-300",
+    value: "#d8dcde",
+    compiledValue: "#d8dcde",
+  },
+  {
+    name: "$neeto-ui-gray-200",
+    value: "#e9ebed",
+    compiledValue: "#e9ebed",
+  },
+  {
+    name: "$neeto-ui-gray-100",
+    value: "#f8f9f9",
+    compiledValue: "#f8f9f9",
+  },
+  {
+    name: "$neeto-ui-success",
+    value: "#00ba88",
+    compiledValue: "#00ba88",
+  },
+  {
+    name: "$neeto-ui-info",
+    value: "#276ef1",
+    compiledValue: "#276ef1",
+  },
+  {
+    name: "$neeto-ui-warning",
+    value: "#f3cd82",
+    compiledValue: "#f3cd82",
+  },
+  {
+    name: "$neeto-ui-error",
+    value: "#f56a58",
+    compiledValue: "#f56a58",
+  },
+  {
+    name: "$neeto-ui-pastel-blue",
+    value: "#eaf3fc",
+    compiledValue: "#eaf3fc",
+  },
+  {
+    name: "$neeto-ui-pastel-green",
+    value: "#ebf5ec",
+    compiledValue: "#ebf5ec",
+  },
+  {
+    name: "$neeto-ui-pastel-yellow",
+    value: "#fff2d7",
+    compiledValue: "#fff2d7",
+  },
+  {
+    name: "$neeto-ui-pastel-red",
+    value: "#ffefed",
+    compiledValue: "#ffefed",
+  },
+  {
+    name: "$neeto-ui-pastel-teal",
+    value: "#98f3f4",
+    compiledValue: "#98f3f4",
+  },
+  {
+    name: "$neeto-ui-secondary-indigo",
+    value: "#5e5ce6",
+    compiledValue: "#5e5ce6",
+  },
+  {
+    name: "$neeto-ui-secondary-green",
+    value: "#00ba88",
+    compiledValue: "#00ba88",
+  },
+  {
+    name: "$neeto-ui-secondary-teal",
+    value: "#64d2ff",
+    compiledValue: "#64d2ff",
+  },
+];
+
+<Meta title="Foundation/Helpers/Border Color" />
+
+<style>{`
+  .story-demo-table tr{
+      background: transparent !important;
+  }
+  
+`}</style>
+
+# Border Color
+
+<table className="story-demo-table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>Hex code</td>
+      <td>Class</td>
+    </tr>
+  </thead>
+  <tbody>
+    {colorPalette.map((color) => {
+      return (
+        <tr key={color.name}>
+          <td>
+            <div
+              className={`w-12 h-12 border ${color.name.replace(
+                "$neeto-ui",
+                "neeto-ui-border"
+              )}`}
+            ></div>
+          </td>
+          <td>
+            <code>{color.value}</code>
+          </td>
+          <td>
+            <div className="flex justify-between">
+              <code>{`${color.name.replace(
+                "$neeto-ui",
+                "neeto-ui-border"
+              )}`}</code>
+            </div>
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>

package/stories/HelpersBoxShadows.stories.mdx

@@ -0,0 +1,83 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+export const boxShadows = [
+  {
+    name: "$neeto-ui-shadow-xs",
+    value: "0px 1px 4px -1px rgba(28, 48, 74, 0.12)",
+    compiledValue: "0px 1px 4px -1px rgba(28, 48, 74, 0.12)",
+  },
+  {
+    name: "$neeto-ui-shadow-s",
+    value:
+      "0px 3px 12px -1px rgba(28, 52, 84, 0.12), 0px 2px 4px -1px rgba(28, 55, 90, 0.08)",
+    compiledValue:
+      "0px 3px 12px -1px rgba(28, 52, 84, 0.12), 0px 2px 4px -1px rgba(28, 55, 90, 0.08)",
+  },
+  {
+    name: "$neeto-ui-shadow-m",
+    value:
+      "0px 8px 24px -4px rgba(28, 50, 79, 0.12), 0px 2px 6px -1px rgba(28, 55, 90, 0.08)",
+    compiledValue:
+      "0px 8px 24px -4px rgba(28, 50, 79, 0.12), 0px 2px 6px -1px rgba(28, 55, 90, 0.08)",
+  },
+  {
+    name: "$neeto-ui-shadow-l",
+    value:
+      "0px 12px 48px -6px rgba(28, 50, 79, 0.12), 0px 3px 18px -2px rgba(28, 55, 90, 0.08)",
+    compiledValue:
+      "0px 12px 48px -6px rgba(28, 50, 79, 0.12), 0px 3px 18px -2px rgba(28, 55, 90, 0.08)",
+  },
+  {
+    name: "$neeto-ui-shadow-xl",
+    value:
+      "0px 18px 64px -8px rgba(28, 50, 79, 0.12), 0px 4px 24px -3px rgba(28, 55, 90, 0.08)",
+    compiledValue:
+      "0px 18px 64px -8px rgba(28, 50, 79, 0.12), 0px 4px 24px -3px rgba(28, 55, 90, 0.08)",
+  },
+];
+
+<Meta title="Foundation/Helpers/Box Shadows" />
+
+<style>{`
+  .story-demo-table tr{
+      background: transparent !important;
+  }
+  
+`}</style>
+
+# Box Shadows
+
+<table className="story-demo-table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>Class</td>
+    </tr>
+  </thead>
+  <tbody>
+    {boxShadows.map((shadow) => {
+      return (
+        <tr key={shadow.name}>
+          <td>
+            <div className="p-16">
+              <div
+                className={`w-32 h-32 neeto-ui-bg-white ${shadow.name.replace(
+                  "$neeto-ui",
+                  "neeto-ui"
+                )}`}
+              ></div>
+            </div>
+          </td>
+          <td>
+            <div className="flex justify-between">
+              <code>{`${shadow.name.replace(
+                "$neeto-ui",
+                "neeto-ui"
+              )}`}</code>
+            </div>
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>

package/stories/HelpersColor.stories.mdx

@@ -0,0 +1,170 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+export const colorPalette = [
+  {
+    name: "$neeto-ui-white",
+    value: "#ffffff",
+    compiledValue: "#ffffff",
+  },
+  {
+    name: "$neeto-ui-black",
+    value: "#1b1f23",
+    compiledValue: "#1b1f23",
+  },
+  {
+    name: "$neeto-ui-gray-800",
+    value: "#2f3941",
+    compiledValue: "#2f3941",
+  },
+  {
+    name: "$neeto-ui-gray-700",
+    value: "#49545c",
+    compiledValue: "#49545c",
+  },
+  {
+    name: "$neeto-ui-gray-600",
+    value: "#68737d",
+    compiledValue: "#68737d",
+  },
+  {
+    name: "$neeto-ui-gray-500",
+    value: "#87929d",
+    compiledValue: "#87929d",
+  },
+  {
+    name: "$neeto-ui-gray-400",
+    value: "#c2c8cc",
+    compiledValue: "#c2c8cc",
+  },
+  {
+    name: "$neeto-ui-gray-300",
+    value: "#d8dcde",
+    compiledValue: "#d8dcde",
+  },
+  {
+    name: "$neeto-ui-gray-200",
+    value: "#e9ebed",
+    compiledValue: "#e9ebed",
+  },
+  {
+    name: "$neeto-ui-gray-100",
+    value: "#f8f9f9",
+    compiledValue: "#f8f9f9",
+  },
+  {
+    name: "$neeto-ui-success",
+    value: "#00ba88",
+    compiledValue: "#00ba88",
+  },
+  {
+    name: "$neeto-ui-info",
+    value: "#276ef1",
+    compiledValue: "#276ef1",
+  },
+  {
+    name: "$neeto-ui-warning",
+    value: "#f3cd82",
+    compiledValue: "#f3cd82",
+  },
+  {
+    name: "$neeto-ui-error",
+    value: "#f56a58",
+    compiledValue: "#f56a58",
+  },
+  {
+    name: "$neeto-ui-pastel-blue",
+    value: "#eaf3fc",
+    compiledValue: "#eaf3fc",
+  },
+  {
+    name: "$neeto-ui-pastel-green",
+    value: "#ebf5ec",
+    compiledValue: "#ebf5ec",
+  },
+  {
+    name: "$neeto-ui-pastel-yellow",
+    value: "#fff2d7",
+    compiledValue: "#fff2d7",
+  },
+  {
+    name: "$neeto-ui-pastel-red",
+    value: "#ffefed",
+    compiledValue: "#ffefed",
+  },
+  {
+    name: "$neeto-ui-pastel-teal",
+    value: "#98f3f4",
+    compiledValue: "#98f3f4",
+  },
+  {
+    name: "$neeto-ui-secondary-indigo",
+    value: "#5e5ce6",
+    compiledValue: "#5e5ce6",
+  },
+  {
+    name: "$neeto-ui-secondary-green",
+    value: "#00ba88",
+    compiledValue: "#00ba88",
+  },
+  {
+    name: "$neeto-ui-secondary-teal",
+    value: "#64d2ff",
+    compiledValue: "#64d2ff",
+  },
+];
+
+<Meta title="Foundation/Helpers/Color" />
+
+<style>{`
+  .story-demo-table tr{
+      background: transparent !important;
+  }
+  
+`}</style>
+
+# Colors
+
+<table className="story-demo-table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>Hex code</td>
+      <td>Variable name</td>
+      <td>Text color class</td>
+      <td>Background color class</td>
+    </tr>
+  </thead>
+  <tbody>
+    {colorPalette.map((color) => {
+      return (
+        <tr key={color.name}>
+          <td>
+            <div
+              className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
+                "$neeto-ui",
+                "neeto-ui-bg"
+              )}`}
+            ></div>
+          </td>
+          <td>
+            <code>{color.value}</code>
+          </td>
+          <td>
+            <code>{color.name}</code>
+          </td>
+          <td>
+            <div className="flex justify-between">
+              <code>{`${color.name.replace("$neeto-ui", "neeto-ui-text")}`}</code>
+              <b className={`ml-2 ${color.name.replace("$neeto-ui", "neeto-ui-text")}`}>
+                Aa
+              </b>
+            </div>
+          </td>
+          <td className={`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}>
+            <code>{`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}</code>
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>

package/stories/Iconography.stories.jsx

@@ -24,7 +24,7 @@ export default {
     docs: {
       description: {
         component:
-          '`import { ClockIcon } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<ClockIcon color="#1e1e20" size={24} />`',
+          '`import { Clock } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<Clock color="#1e1e20" size={24} />`',
       },
     },
   },
@@ -81,7 +81,7 @@ export const ApplicationIcons = () => {
           <tr>
             <th className="p-4 text-left border border-gray-200"></th>
             <th className="p-4 text-left border border-gray-200">Application</th>
-            <th className="p-4 text-left border border-gray-200">Gradient Class</th>
+            <th className="p-4 text-left border border-gray-200">Gradient class</th>
             <th className="p-4 text-left border border-gray-200">Icon</th>
           </tr>
         </thead>
@@ -92,7 +92,7 @@ export const ApplicationIcons = () => {
               <tr className="">
                 <td className="p-4 text-center border border-gray-200">  
                   <div
-                    className={`neeto-ui-app-switcher-link__icon-holder m-0 ${application
+                    className={`w-8 h-8 rounded-md mb-3 flex flex-row items-center justify-center ${application
                       .toLocaleLowerCase()
                       .replace("neeto", "gradient--")}`}
                   >
@@ -103,7 +103,7 @@ export const ApplicationIcons = () => {
                   <b className="p-1 px-2 text-xs">{application}</b>
                 </td>
                 <td className="p-4 text-left border border-gray-200">
-                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{`.${application
+                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{`${application
                     .toLocaleLowerCase()
                     .replace("neeto", "gradient--")}`}</code>
                 </td>

package/stories/Input.stories.jsx

@@ -41,8 +41,12 @@ export const Required = () => <Input label="Required Input" required={true} />;
 
 export const Disabled = () => <Input label="Disabled Input" disabled={true} />;
 
-export const SearchInput = () => (
-  <Input label="Search" prefix={<Search />} suffix=".neetohelp.com" />
+export const SearchInputSmall = () => (
+  <Input label="Search" prefix={<Search size={16} />} suffix=".neetohelp.com" />
+);
+
+export const SearchInputLarge = () => (
+  <Input label="Search" size="large" prefix={<Search size={20} />} suffix=".neetohelp.com" />
 );
 
 export const Error = () => <Input label="Error" error="Provide valid email" />;
@@ -62,15 +66,6 @@ export const AllVariants = () => {
       <div className="p-6 space-y-6">
         <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
           <h2 className="text-xl">Input/Small/Default</h2>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" data-cy="test123" />
-            <Input
-              placeholder="Input Placeholder"
-              prefix={<Favorite size={16} />}
-            />
-            <Input placeholder="Input Placeholder" />
-            <Input placeholder="Input Placeholder" />
-          </div>
           <div className="flex flex-row items-center justify-center space-x-8">
             <Input placeholder="Input Placeholder" />
             <Input
@@ -136,16 +131,6 @@ export const AllVariants = () => {
             <Input placeholder="Input Placeholder" size="large" />
             <Input placeholder="Input Placeholder" size="large" />
           </div>
-          <div className="flex flex-row items-center justify-center space-x-8">
-            <Input placeholder="Input Placeholder" size="large" />
-            <Input
-              placeholder="Input Placeholder"
-              size="large"
-              prefix={<Favorite size={16} />}
-            />
-            <Input placeholder="Input Placeholder" size="large" />
-            <Input placeholder="Input Placeholder" size="large" />
-          </div>
           <div className="flex flex-row items-center justify-center space-x-8">
             <Input
               placeholder="Input Placeholder"

package/stories/Sidebar.stories.jsx

@@ -7,7 +7,7 @@ export default {
   title: "Layouts/Sidebar",
   component: Sidebar,
   parameters: {
-    layout: "padded",
+    layout: "fullscreen",
     docs: {
       description: {
         component: '`import { Sidebar } from "@bigbinary/neetoui/v2/layouts";`',