1 files changed, 55 insertions, 0 deletions
diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx
new file mode 100644
index 0000000..1c56768
--- /dev/null
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx
@@ -0,0 +1,55 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useBoolean } from '../../../../utils/hooks';
+import { NavbarItem } from './navbar-item';
+
+/**
+ * NavbarItem - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Navbar/Item',
+  component: NavbarItem,
+  argTypes: {},
+} as ComponentMeta<typeof NavbarItem>;
+
+const Template: ComponentStory<typeof NavbarItem> = ({
+  isActive,
+  onDeactivate,
+  onToggle,
+  ...args
+}) => {
+  const { deactivate, state, toggle } = useBoolean(isActive);
+
+  return (
+    <NavbarItem
+      {...args}
+      isActive={state}
+      onDeactivate={deactivate}
+      onToggle={toggle}
+    />
+  );
+};
+
+/**
+ * NavbarItem Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  children: 'The modal contents.',
+  icon: 'cog',
+  id: 'default',
+  isActive: false,
+  label: 'Open example',
+};
+
+/**
+ * NavbarItem Stories - ModalVisibleAfterBreakpoint
+ */
+export const ModalVisibleAfterBreakpoint = Template.bind({});
+ModalVisibleAfterBreakpoint.args = {
+  children: 'The modal contents.',
+  icon: 'cog',
+  id: 'modal-visible',
+  isActive: false,
+  label: 'Open example',
+  modalVisibleFrom: 'md',
+};