Merge pull request #15 from labcodes/migrate-narrow-sidebar

Migrate narrow sidebar

apps/docs/stories/Sidebar/NarrowSidebar.stories.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { NarrowSidebar as Component } from "../../confetti-ds/src";
+
+import { CollapseButton as CollapseButtonStory } from "./subcomponents/CollapseButton.stories";
+import { FooterButton as FooterButtonStory } from "./subcomponents/FooterButton.stories";
+import { Header as HeaderStory } from "./subcomponents/Header.stories";
+import { Item as ItemStory } from "./subcomponents/Item.stories";
+import { UserAvatar as UserAvatarStory } from "./subcomponents/UserAvatar.stories";
+
+export default {
+  title: "Sidebar/Narrow Sidebar",
+  component: Component,
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  subcomponents: {
+    Body: Component.Body,
+    CollapseButton: Component.CollapseButton,
+    Footer: Component.Footer,
+    FooterButton: Component.FooterButton,
+    Header: Component.Header,
+    Item: Component.Item,
+    UserAvatar: Component.UserAvatar,
+  },
+};
+
+export const NarrowSidebar = (args) => (
+  <Component {...args} isOpenOnMobile>
+    <Component.Header {...HeaderStory.args}>
+      <Component.UserAvatar {...UserAvatarStory.args} />
+      <Component.CollapseButton {...CollapseButtonStory.args} />
+    </Component.Header>
+
+    <Component.Body>
+      <Component.Item {...ItemStory.args} isActive />
+      <Component.Item {...ItemStory.args} label="With Long Ellipsed Label" />
+      <Component.Item {...ItemStory.args} label="With Icon" icon="star" />
+    </Component.Body>
+
+    <Component.Footer>
+      <Component.FooterButton {...FooterButtonStory.args} label="Password" icon="key" />
+    </Component.Footer>
+  </Component>
+);

apps/docs/stories/Sidebar/NarrowSidebarWithFooterAvatar.stories.js

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { NarrowSidebar as Component } from "../../confetti-ds/src";
+
+import { CollapseButton as CollapseButtonStory } from "./subcomponents/CollapseButton.stories";
+import { FooterButton as FooterButtonStory } from "./subcomponents/FooterButton.stories";
+import { Header as HeaderStory } from "./subcomponents/Header.stories";
+import { Item as ItemStory } from "./subcomponents/Item.stories";
+import { Logotype as LogotypeStory } from "./subcomponents/Logotype.stories";
+import { UserAvatar as UserAvatarStory } from "./subcomponents/UserAvatar.stories";
+
+export default {
+  title: "Sidebar/Narrow Sidebar With Footer Avatar",
+  component: Component,
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  subcomponents: {
+    Body: Component.Body,
+    CollapseButton: Component.CollapseButton,
+    Footer: Component.Footer,
+    FooterButton: Component.FooterButton,
+    Header: Component.Header,
+    Item: Component.Item,
+    Logotype: Component.Logotype,
+    UserAvatar: Component.UserAvatar,
+  },
+};
+
+export const NarrowSidebarWithFooterAvatar = (args) => (
+  <Component {...args} isOpenOnMobile>
+    <Component.Header {...HeaderStory.args}>
+      <Component.Logotype {...LogotypeStory.args} />
+      <Component.CollapseButton {...CollapseButtonStory.args} />
+    </Component.Header>
+
+    <Component.Body>
+      <Component.Item {...ItemStory.args} isActive />
+      <Component.Item {...ItemStory.args} label="With Long Ellipsed Label" />
+      <Component.Item {...ItemStory.args} label="With Icon" icon="star" />
+    </Component.Body>
+
+    <Component.Footer>
+      <Component.UserAvatar {...UserAvatarStory.args} />
+      <Component.FooterButton {...FooterButtonStory.args} label="Password" icon="key" />
+    </Component.Footer>
+  </Component>
+);
+
+NarrowSidebarWithFooterAvatar.args = {
+};

apps/docs/stories/Sidebar/subcomponents/Body.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+const { Body: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Body",
+  component: Component,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export const Body = (args) => <Component {...args} />;

apps/docs/stories/Sidebar/subcomponents/CollapseButton.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+const { CollapseButton: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Collapse Button",
+  component: Component,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
+export const CollapseButton = (args) => <Component {...args} />;
+CollapseButton.args = {
+  onClick: () => {}
+}

apps/docs/stories/Sidebar/subcomponents/Footer.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+const { Footer: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Footer",
+  component: Component,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export const Footer = (args) => <Component {...args} />;

apps/docs/stories/Sidebar/subcomponents/FooterButton.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+import { ICON_TYPES } from "../../../confetti-ds/src/constants";
+const { FooterButton: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Footer Button",
+  component: Component,
+  argTypes: {
+    icon: {
+      control: { type: "select", options: ICON_TYPES },
+    },
+  },
+};
+
+export const FooterButton = (args) => <Component {...args} />;
+FooterButton.args = {
+  onClick: () => alert("Footer Button clicked"),
+  label: "Footer Button",
+}

apps/docs/stories/Sidebar/subcomponents/Header.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+const { Header: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Header",
+  component: Component,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export const Header = (args) => <Component {...args} />;

apps/docs/stories/Sidebar/subcomponents/Item.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+import { ICON_TYPES } from "../../../confetti-ds/src/constants";
+const { Item: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Item",
+  component: Component,
+  argTypes: {
+    icon: {
+      control: { type: "select", options: ICON_TYPES },
+    },
+  },
+};
+
+export const Item = (args) => <Component {...args} />;
+Item.args = {
+  onClick: () => alert("Item clicked"),
+  label: "Sidebar Item",
+}

apps/docs/stories/Sidebar/subcomponents/Logotype.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+import logo from "./logo.png";
+const { Logotype: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/Logotype",
+  component: Component,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
+export const Logotype = (args) => <Component {...args} />;
+Logotype.args = {
+  logoSrc: logo,
+  altText: "Labcodes' logo"
+}

apps/docs/stories/Sidebar/subcomponents/UserAvatar.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { NarrowSidebar } from "../../../confetti-ds/src";
+import mrgeraldo from "./MrGeraldo.png";
+const { UserAvatar: Component } = NarrowSidebar;
+
+export default {
+  title: "Sidebar/Subcomponents/User Avatar",
+  component: Component,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
+export const UserAvatar = (args) => <Component {...args} />;
+UserAvatar.args = {
+  avatarSrc: mrgeraldo,
+  altText: "Mr. Geraldo",
+  caption: "Bot and Administrator"
+}