@bigbinary/neetoui 2.0.89 → 2.0.93

package/stories/Checkout.stories.jsx

@@ -1,46 +0,0 @@
-import React from "react";
-
-import Checkbox from "../lib/components/Checkbox";
-
-export default {
-  title: "Components/Checkbox",
-  component: Checkbox,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Checkbox } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => <Checkbox {...args} />;
-
-export const Checked = Template.bind({});
-Checked.args = {
-  id: "checkbox_name",
-  label: "This is a Checkbox",
-  checked: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  id: "checkbox_name",
-  label: "This Checkbox is disabled",
-  disabled: true,
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  id: "checkbox_name",
-  label: "This Checkbox is required",
-  required: true,
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  id: "checkbox_name",
-  label: "Checkbox with error",
-  error: "Error message",
-};

package/stories/Color.stories.mdx

@@ -1,170 +0,0 @@
-import { Meta } 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/Colors" />
-
-<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/Dropdown.stories.jsx

@@ -1,104 +0,0 @@
-import React, { useState } from "react";
-import { Settings } from "@bigbinary/neeto-icons";
-
-import Dropdown from "../lib/components/Dropdown";
-
-export default {
-  title: "Components/Dropdown",
-  component: Dropdown,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Dropdown } from "@bigbinary/neetoui/v2";`',
-      },
-    },
-  },
-};
-
-const listItems = ["Option 1", "Option 2", "Option 3"];
-
-export const PrimaryDropdown = (args) => {
-  const [dropdownOne, setDropdownOne] = useState(false);
-
-  return (
-    <Dropdown
-      label="Primary Dropdown"
-      buttonStyle="primary"
-      position="bottom-end"
-      isOpen={dropdownOne}
-      onClose={() => {
-        setDropdownOne(false);
-      }}
-      buttonProps={{
-        onClick: () => {
-          setDropdownOne(!dropdownOne);
-        },
-      }}
-      closeOnSelect={false}
-      closeOnOutsideClick={false}
-    >
-      {listItems.map((item, idx) => (
-        <li key={idx}>{item}</li>
-      ))}
-    </Dropdown>
-  );
-};
-
-export const SecondaryDropdown = (args) => {
-  return (
-    <Dropdown
-      label="Secondary Dropdown"
-      buttonStyle="secondary"
-      position="bottom-end"
-    >
-      {listItems.map((item, idx) => (
-        <li key={idx}>{item}</li>
-      ))}
-    </Dropdown>
-  );
-};
-
-export const TextDropdown = (args) => {
-  return (
-    <Dropdown label="Text Dropdown" buttonStyle="text" position="bottom-end">
-      {listItems.map((item, idx) => (
-        <li key={idx}>{item}</li>
-      ))}
-    </Dropdown>
-  );
-};
-
-export const CustomIcon = (args) => {
-  return (
-    <Dropdown
-      label="Dropdown with custom icon"
-      icon={Settings}
-      position="bottom-end"
-    >
-      {listItems.map((item, idx) => (
-        <li key={idx}>{item}</li>
-      ))}
-    </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/Header.stories.jsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-
-import Header from "../lib/components/layouts/Header";
-import Button from "../lib/components/Button";
-
-export default {
-  title: "Layouts/Header",
-  component: Header,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component: '`import { Header } from "@bigbinary/neetoui/v2/layouts";`',
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <Router>
-    <Header {...args} />
-  </Router>
-);
-
-export const BasicUsage = Template.bind({});
-BasicUsage.args = {
-  title: "Layouts",
-  actionBlock: <Button label="Primary Action" />,
-};
-
-export const WithMenuBarToggle = Template.bind({});
-WithMenuBarToggle.args = {
-  title: "Layouts",
-  menuBarToggle: () => alert('clicked'),
-  actionBlock: <Button label="Primary Action" />,
-};
-
-export const WithBreadcrumbs = Template.bind({});
-WithBreadcrumbs.args = {
-  title: "Layouts",
-  menuBarToggle: () => alert('clicked'),
-  actionBlock: <Button label="Primary Action" />,
-  breadcrumbs: [{ text: "Home", link: "/" }],
-};

package/stories/HelpersBorderColor.stories.mdx

@@ -1,162 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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>