@omniumretail/component-library 1.0.73 → 1.0.74

package/src/components/Separator/Separator.stories.tsx

@@ -1,22 +1,22 @@
-import {Meta, Story} from "@storybook/react";
-import { Separator, SeparatorProps, Spaces } from '.';
-
-export default {
-    title: 'Separator',
-    component: Separator,
-} as Meta;
-
-const Template: Story<SeparatorProps> = (args) => <Separator {...args}></Separator>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    hasOpacity: false,
-    colorIsBlue: false,
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    hasOpacity: true,
-    colorIsBlue: true,
-    space: Spaces.l,
-};
+import {Meta, Story} from "@storybook/react";
+import { Separator, SeparatorProps, Spaces } from '.';
+
+export default {
+    title: 'Separator',
+    component: Separator,
+} as Meta;
+
+const Template: Story<SeparatorProps> = (args) => <Separator {...args}></Separator>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    hasOpacity: false,
+    colorIsBlue: false,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    hasOpacity: true,
+    colorIsBlue: true,
+    space: Spaces.l,
+};

package/src/components/Separator/index.tsx

@@ -1,27 +1,27 @@
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export enum Spaces {
-    s = 's',
-    m = 'm',
-    l = 'l',
-}
-
-export interface SeparatorProps {
-    hasOpacity?: boolean;
-    colorIsBlue?: boolean;
-    space: Spaces;
-}
-
-export const Separator = (props: SeparatorProps) => {
-    const { hasOpacity, colorIsBlue, space } = props;
-
-    const separatorClasses = classNames({
-        [styles.separator]: true,
-        [styles['separator--opacity-50']]: hasOpacity,
-        [styles['separator--blue-background']]: colorIsBlue,
-        [styles[`separator--space-${space}` || '']]: space && Spaces[space],
-    });
-    
-    return <hr className={separatorClasses} />
-};
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export enum Spaces {
+    s = 's',
+    m = 'm',
+    l = 'l',
+}
+
+export interface SeparatorProps {
+    hasOpacity?: boolean;
+    colorIsBlue?: boolean;
+    space: Spaces;
+}
+
+export const Separator = (props: SeparatorProps) => {
+    const { hasOpacity, colorIsBlue, space } = props;
+
+    const separatorClasses = classNames({
+        [styles.separator]: true,
+        [styles['separator--opacity-50']]: hasOpacity,
+        [styles['separator--blue-background']]: colorIsBlue,
+        [styles[`separator--space-${space}` || '']]: space && Spaces[space],
+    });
+    
+    return <hr className={separatorClasses} />
+};

package/src/components/Separator/styles.module.scss

@@ -1,25 +1,25 @@
-.separator {
-    background-color: var(--color-orange);
-    height: 1px;
-    border: none;
-
-    &--opacity-50 {
-        opacity: 50%;
-    }
-
-    &--blue-background {
-        background-color: var(--color-blue);
-    }
-
-    &--space-s {
-        margin: 8px 0;
-    }
-
-    &--space-m {
-        margin: 16px 0;
-    }
-
-    &--space-l {
-        margin: 24px 0;
-    }
-}
+.separator {
+    background-color: var(--color-orange);
+    height: 1px;
+    border: none;
+
+    &--opacity-50 {
+        opacity: 50%;
+    }
+
+    &--blue-background {
+        background-color: var(--color-blue);
+    }
+
+    &--space-s {
+        margin: 8px 0;
+    }
+
+    &--space-m {
+        margin: 16px 0;
+    }
+
+    &--space-l {
+        margin: 24px 0;
+    }
+}

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,85 +1,85 @@
-import { RightCircleOutlined } from "@ant-design/icons";
-import { Meta, Story } from "@storybook/react";
-import { Sidebar, SidebarProps } from '.';
-
-export default {
-    title: 'Sidebar',
-    component: Sidebar,
-} as Meta;
-
-const Template: Story<SidebarProps> = (args) => {
-    const navigate = (targetRoute: string) => {
-        console.log(targetRoute);
-    }
-
-    return <Sidebar {...args} navigateFunction={navigate}></Sidebar>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-    isOpen: true,
-    links: [
-        {
-            label: "Ciclo de Avaliação",
-            targetRoute: "/ciclodeavaliacao",
-            active: true,
-            icon: <RightCircleOutlined />,
-        },
-        {
-            label: "Gestão de Questionários",
-            targetRoute: "/gestaodequestionarios",
-            active: true,
-            sublinks: [
-                {
-                    label: "Subpage 1121212",
-                    targetRoute: "/analytics/subpage121212",
-                    active: false,
-                },
-                {
-                    label: "Subpage 2111",
-                    targetRoute: "/analytics/subpage211",
-                    active: false
-                }
-            ]
-        },
-        {
-            label: "Analytics",
-            targetRoute: "/analytics",
-            active: false,
-            sublinks: [
-                {
-                    label: "Subpage 1",
-                    targetRoute: "/analytics/subpage1",
-                    active: false,
-                },
-                {
-                    label: "Subpage 2",
-                    targetRoute: "/analytics/subpage2",
-                    active: false
-                }
-            ]
-        }
-    ],
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    isOpen: false,
-    links: [
-        {
-            label: "Ciclo de Avaliação",
-            targetRoute: "/ciclodeavaliacao",
-            active: false,
-        },
-        {
-            label: "Gestão de Questionários",
-            targetRoute: "/gestaodequestionarios",
-            active: false,
-        },
-        {
-            label: "Analytics",
-            targetRoute: "/analytics",
-            active: false,
-        },
-    ],
-};
+import { RightCircleOutlined } from "@ant-design/icons";
+import { Meta, Story } from "@storybook/react";
+import { Sidebar, SidebarProps } from '.';
+
+export default {
+    title: 'Sidebar',
+    component: Sidebar,
+} as Meta;
+
+const Template: Story<SidebarProps> = (args) => {
+    const navigate = (targetRoute: string) => {
+        console.log(targetRoute);
+    }
+
+    return <Sidebar {...args} navigateFunction={navigate}></Sidebar>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+    isOpen: true,
+    links: [
+        {
+            label: "Ciclo de Avaliação",
+            targetRoute: "/ciclodeavaliacao",
+            active: true,
+            icon: <RightCircleOutlined />,
+        },
+        {
+            label: "Gestão de Questionários",
+            targetRoute: "/gestaodequestionarios",
+            active: true,
+            sublinks: [
+                {
+                    label: "Subpage 1121212",
+                    targetRoute: "/analytics/subpage121212",
+                    active: false,
+                },
+                {
+                    label: "Subpage 2111",
+                    targetRoute: "/analytics/subpage211",
+                    active: false
+                }
+            ]
+        },
+        {
+            label: "Analytics",
+            targetRoute: "/analytics",
+            active: false,
+            sublinks: [
+                {
+                    label: "Subpage 1",
+                    targetRoute: "/analytics/subpage1",
+                    active: false,
+                },
+                {
+                    label: "Subpage 2",
+                    targetRoute: "/analytics/subpage2",
+                    active: false
+                }
+            ]
+        }
+    ],
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    isOpen: false,
+    links: [
+        {
+            label: "Ciclo de Avaliação",
+            targetRoute: "/ciclodeavaliacao",
+            active: false,
+        },
+        {
+            label: "Gestão de Questionários",
+            targetRoute: "/gestaodequestionarios",
+            active: false,
+        },
+        {
+            label: "Analytics",
+            targetRoute: "/analytics",
+            active: false,
+        },
+    ],
+};

package/src/components/Sidebar/index.tsx

@@ -1,104 +1,104 @@
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
-import { useState } from 'react';
-
-export interface Links {
-    label: string;
-    targetRoute: string;
-    active: boolean;
-    icon?: React.ReactNode;
-    sublinks?: Links[];
-    activeSubMenu?: boolean;
-}
-
-export interface SidebarProps {
-    isOpen?: boolean;
-    links: Links[];
-    navigateFunction: (targetRoute: string) => void;
-}
-
-export const Sidebar = (props: SidebarProps) => {
-    const { isOpen = false, links, navigateFunction } = props;
-    const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen);
-    const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
-  
-    const sidebarClasses = classNames({
-      [styles.sidebarClosed]: !sidebarOpen,
-    }, styles.sidebar);
-  
-    const toggleSidebar = () => {
-      setSidebarOpen(!sidebarOpen);
-    }
-  
-    const toggleSubMenu = (index: number) => {
-      setActiveSubMenuIndex(activeSubMenuIndex === index ? -1 : index);
-    }
-  
-    const isLinkActive = (link: Links) => {
-      if (link.sublinks) {
-        return link.sublinks.some(sublink => sublink.active);
-      }
-      return link.active;
-    }
-  
-    return (
-      <div className={sidebarClasses}>
-        <div className={styles.toggle} onClick={toggleSidebar}>
-          {sidebarOpen ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
-        </div>
-        {links &&
-          links.map((link: Links, index: number) => {
-            const { label, targetRoute, icon, sublinks } = link;
-            const isActive = isLinkActive(link);
-            const isActiveSubMenu = activeSubMenuIndex === index;
-  
-            const sidebarItemClasses = classNames({
-              [styles.sidebarItemActive]: isActive,
-              [styles.sidebarHasIcon]: icon
-            }, styles.sidebarItem);
-  
-            return (
-              <div
-                className={sidebarItemClasses}
-                onClick={() => {
-                  if (sublinks) {
-                    toggleSubMenu(index);
-                  } else {
-                    navigateFunction(targetRoute);
-                  }
-                }}
-                onMouseEnter={() => toggleSubMenu(index)}
-                onMouseLeave={() => toggleSubMenu(-1)}
-                key={index}
-              >
-                {icon ? (sidebarOpen ? label : icon) : label}
-                {sublinks && isActiveSubMenu && (
-                  <div className={`${sidebarOpen ? styles.subMenu : ''}`}>
-                    {sublinks.map((sublink: Links, subindex: number) => {
-                      const { label: subLabel, targetRoute: subTargetRoute, active: subActive, icon: subIcon } = sublink;
-
-                      const subLinkClasses = classNames({
-                        [styles.sidebarItemActive]: subActive,
-                        [styles.sidebarHasIcon]: icon,
-                      }, styles.subMenuItem);
-  
-                      return (
-                        <div
-                          className={`${styles.sidebarItem} ${subLinkClasses}`}
-                          onClick={() => navigateFunction(subTargetRoute)}
-                          key={subindex}
-                        >
-                          {subIcon ? (sidebarOpen ? subLabel : subIcon) : (sidebarOpen ? subLabel : subLabel.charAt(0))}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-      </div>
-    );
-  };  
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+
+export interface Links {
+    label: string;
+    targetRoute: string;
+    active: boolean;
+    icon?: React.ReactNode;
+    sublinks?: Links[];
+    activeSubMenu?: boolean;
+}
+
+export interface SidebarProps {
+    isOpen?: boolean;
+    links: Links[];
+    navigateFunction: (targetRoute: string) => void;
+}
+
+export const Sidebar = (props: SidebarProps) => {
+    const { isOpen = false, links, navigateFunction } = props;
+    const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen);
+    const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
+  
+    const sidebarClasses = classNames({
+      [styles.sidebarClosed]: !sidebarOpen,
+    }, styles.sidebar);
+  
+    const toggleSidebar = () => {
+      setSidebarOpen(!sidebarOpen);
+    }
+  
+    const toggleSubMenu = (index: number) => {
+      setActiveSubMenuIndex(activeSubMenuIndex === index ? -1 : index);
+    }
+  
+    const isLinkActive = (link: Links) => {
+      if (link.sublinks) {
+        return link.sublinks.some(sublink => sublink.active);
+      }
+      return link.active;
+    }
+  
+    return (
+      <div className={sidebarClasses}>
+        <div className={styles.toggle} onClick={toggleSidebar}>
+          {sidebarOpen ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
+        </div>
+        {links &&
+          links.map((link: Links, index: number) => {
+            const { label, targetRoute, icon, sublinks } = link;
+            const isActive = isLinkActive(link);
+            const isActiveSubMenu = activeSubMenuIndex === index;
+  
+            const sidebarItemClasses = classNames({
+              [styles.sidebarItemActive]: isActive,
+              [styles.sidebarHasIcon]: icon
+            }, styles.sidebarItem);
+  
+            return (
+              <div
+                className={sidebarItemClasses}
+                onClick={() => {
+                  if (sublinks) {
+                    toggleSubMenu(index);
+                  } else {
+                    navigateFunction(targetRoute);
+                  }
+                }}
+                onMouseEnter={() => toggleSubMenu(index)}
+                onMouseLeave={() => toggleSubMenu(-1)}
+                key={index}
+              >
+                {icon ? (sidebarOpen ? label : icon) : label}
+                {sublinks && isActiveSubMenu && (
+                  <div className={`${sidebarOpen ? styles.subMenu : ''}`}>
+                    {sublinks.map((sublink: Links, subindex: number) => {
+                      const { label: subLabel, targetRoute: subTargetRoute, active: subActive, icon: subIcon } = sublink;
+
+                      const subLinkClasses = classNames({
+                        [styles.sidebarItemActive]: subActive,
+                        [styles.sidebarHasIcon]: icon,
+                      }, styles.subMenuItem);
+  
+                      return (
+                        <div
+                          className={`${styles.sidebarItem} ${subLinkClasses}`}
+                          onClick={() => navigateFunction(subTargetRoute)}
+                          key={subindex}
+                        >
+                          {subIcon ? (sidebarOpen ? subLabel : subIcon) : (sidebarOpen ? subLabel : subLabel.charAt(0))}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    );
+  };