@omniumretail/component-library 1.0.70 → 1.0.72

package/src/components/AnalyticsBar/interfaces/analyticsBar.tsx

@@ -1,13 +1,13 @@
-export interface AnalyticsBarProps {
-    data: any;
-    selectOptions: any;
-    selectDefault: any;
-    selectUserOption?: any;
-    sortedBy?: any;
-    activeListItem?: any;
-}
-
-export enum sortBy {
-    asc = 'asc',
-    desc = 'desc',
-}
+export interface AnalyticsBarProps {
+    data: any;
+    selectOptions: any;
+    selectDefault: any;
+    selectUserOption?: any;
+    sortedBy?: any;
+    activeListItem?: any;
+}
+
+export enum sortBy {
+    asc = 'asc',
+    desc = 'desc',
+}

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

@@ -1,108 +1,108 @@
-.select {
-    width: 100%;
-}
-
-.analyticsbar {
-    background: #2C2D2E0D;
-    height: 100%;
-    position: relative;
-
-    :global {
-        .ant-menu-light {
-            background-color: transparent !important;
-            border-inline-end: none !important;
-        }
-
-        .ant-menu-title-content {
-            font-size: 17px;
-            line-height: 20px;
-            font-weight: var(--font-weight-semibold);
-
-            &:hover {
-                color: var(--color-orange);
-            }
-        }
-
-        .ant-menu-sub {
-            .ant-menu-title-content {
-                font-size: 15px;
-                line-height: 18px;
-                font-weight: var(--font-weight-medium);
-            }
-
-            .ant-menu-item {
-                height: 30px;
-                line-height: 30px;
-
-                &:first-child {
-                    margin-top: -10px;
-                }
-            }
-        }
-
-        .ant-menu-submenu {
-            border-top: 1px solid var(--color-orange);
-            border-radius: 0;
-        }
-
-        .ant-menu-item {
-            &:hover {
-                background-color: initial !important;
-            }
-        }
-
-        .ant-menu-item-selected,
-        .ant-menu-submenu-selected >.ant-menu-submenu-title  {
-            color: var(--color-orange);
-            background-color: initial;
-        }
-
-        .ant-menu-inline .ant-menu-sub.ant-menu-inline {
-            background: initial;
-        }
-
-        .ant-menu-submenu-title  {
-            height: 50px !important;
-            line-height: 50px !important;
-
-            &:hover {
-                background-color: initial !important; 
-            }
-
-            .anticon {
-                color: var(--color-orange);
-            }
-        }
-    }
-}
-
-.header {
-    position: absolute;
-    top: 24px;
-    left: 24px;
-    right: 24px;
-    height: 144px;
-}
-
-.sorterWrapper {
-    font-size: var(--font-size-body-2);
-    line-height: 14px;
-    font-weight: var(--font-weight-light);
-    display: inline-block;
-    padding: 12px;
-    cursor: pointer;
-    position: absolute;
-    right: 0;
-    top: 60px;
-}
-
-.content {
-    position: absolute;
-    top: 144px;
-    left: 24px;
-    right: 24px;
-    bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-bottom: 24px;
-}
+.select {
+    width: 100%;
+}
+
+.analyticsbar {
+    background: #2C2D2E0D;
+    height: 100%;
+    position: relative;
+
+    :global {
+        .ant-menu-light {
+            background-color: transparent !important;
+            border-inline-end: none !important;
+        }
+
+        .ant-menu-title-content {
+            font-size: 17px;
+            line-height: 20px;
+            font-weight: var(--font-weight-semibold);
+
+            &:hover {
+                color: var(--color-orange);
+            }
+        }
+
+        .ant-menu-sub {
+            .ant-menu-title-content {
+                font-size: 15px;
+                line-height: 18px;
+                font-weight: var(--font-weight-medium);
+            }
+
+            .ant-menu-item {
+                height: 30px;
+                line-height: 30px;
+
+                &:first-child {
+                    margin-top: -10px;
+                }
+            }
+        }
+
+        .ant-menu-submenu {
+            border-top: 1px solid var(--color-orange);
+            border-radius: 0;
+        }
+
+        .ant-menu-item {
+            &:hover {
+                background-color: initial !important;
+            }
+        }
+
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected >.ant-menu-submenu-title  {
+            color: var(--color-orange);
+            background-color: initial;
+        }
+
+        .ant-menu-inline .ant-menu-sub.ant-menu-inline {
+            background: initial;
+        }
+
+        .ant-menu-submenu-title  {
+            height: 50px !important;
+            line-height: 50px !important;
+
+            &:hover {
+                background-color: initial !important; 
+            }
+
+            .anticon {
+                color: var(--color-orange);
+            }
+        }
+    }
+}
+
+.header {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    right: 24px;
+    height: 144px;
+}
+
+.sorterWrapper {
+    font-size: var(--font-size-body-2);
+    line-height: 14px;
+    font-weight: var(--font-weight-light);
+    display: inline-block;
+    padding: 12px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 60px;
+}
+
+.content {
+    position: absolute;
+    top: 144px;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 24px;
+}

package/src/components/Button/Button.stories.tsx

@@ -1,26 +1,26 @@
-import { Meta, Story } from "@storybook/react";
-import { Button, CustomButtonProps } from '.';
-
-export default {
-    title: 'Button',
-    component: Button,
-} as Meta;
-
-const Template: Story<CustomButtonProps> = (args) => <Button {...args}>ola</Button>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    href: '#',
-    iconAlignRight: true,
-    type: 'link',
-    customClass: 'ola'
-};
-
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    href: '#',
-    iconAlignRight: true,
-    type: 'link',
-    ghost: true
-};
+import { Meta, Story } from "@storybook/react";
+import { Button, CustomButtonProps } from '.';
+
+export default {
+    title: 'Button',
+    component: Button,
+} as Meta;
+
+const Template: Story<CustomButtonProps> = (args) => <Button {...args}>ola</Button>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    href: '#',
+    iconAlignRight: true,
+    type: 'link',
+    customClass: 'ola'
+};
+
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    href: '#',
+    iconAlignRight: true,
+    type: 'link',
+    ghost: true
+};

package/src/components/Button/index.tsx

@@ -1,24 +1,24 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface CustomButtonProps extends ButtonProps {
-    iconAlignRight?: boolean;
-    buttonStyle?: string;
-    customClass?: string;
-}
-
-export const Button = ({customClass, ...props}: CustomButtonProps) => {
-    const { iconAlignRight, buttonStyle } = props;
-
-    const buttonClasses = { 
-        [styles.button]: true,
-        [styles["button--iconPositionStyle"]]: iconAlignRight === true,
-        [styles["button--style1"]]: buttonStyle === "style1",
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        <AntButton { ...props } className={ classNames(buttonClasses) } />
-    );
-};
+import { Button as AntButton, ButtonProps } from 'antd';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export interface CustomButtonProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    buttonStyle?: string;
+    customClass?: string;
+}
+
+export const Button = ({customClass, ...props}: CustomButtonProps) => {
+    const { iconAlignRight, buttonStyle } = props;
+
+    const buttonClasses = { 
+        [styles.button]: true,
+        [styles["button--iconPositionStyle"]]: iconAlignRight === true,
+        [styles["button--style1"]]: buttonStyle === "style1",
+        [`${customClass}`]: customClass,
+    }
+
+    return (
+        <AntButton { ...props } className={ classNames(buttonClasses) } />
+    );
+};

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

@@ -1,65 +1,65 @@
-.button {
-    padding: 12px 24px;
-    border-radius: 4px;
-    min-width: 170px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    align-self: flex-start;
-    text-decoration: none;
-    border: none;
-    font-size: 14px;
-    line-height: 16.8px;
-    font-weight: 700;
-    font-family: 'Silka', sans-serif;
-    background-color: var(--button-default-background);
-    color: var(--button-default-text-color);
-
-    &:hover {
-        background-color: var(--button-default-background-hover-color);
-        color: var(--button-default-text-hover-color) !important;
-    }
-
-    &:focus,
-    &:active,
-    &:focus:active {
-        background-color: var(--button-default-background-focus-color);
-        color: var(--button-default-text-focus-color);
-    }
-
-    &:disabled,
-    &.disabled {
-        background-color: var(--button-disabled-background-color);
-        color: var(--button-disabled-default-text-color);
-        pointer-events: none;
-    }
-
-    &--iconPositionStyle {
-        flex-direction: row-reverse;
-        gap: 5px;
-    }
-
-    &--style1 {
-        background-color: var(--button-style-1-background);
-        color: var(--button-style-1-text-color);
-
-        &:hover {
-            background-color: var(--button-style-1-background-hover-color);
-            color: var(--button-style-1-text-hover-color) !important;
-        }
-
-        &:focus,
-        &:active,
-        &:focus:active {
-            background-color: var(--button-style-1-background-focus-color);
-            color: var(--button-style-1-text-focus-color);
-        }
-
-        &:disabled,
-        &.disabled {
-            background-color: var(--button-disabled-background-color);
-            color: var(--button-disabled-default-text-color);
-            pointer-events: none;
-        }
-    }
-}
+.button {
+    padding: 12px 24px;
+    border-radius: 4px;
+    min-width: 170px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+    text-decoration: none;
+    border: none;
+    font-size: 14px;
+    line-height: 16.8px;
+    font-weight: 700;
+    font-family: 'Silka', sans-serif;
+    background-color: var(--button-default-background);
+    color: var(--button-default-text-color);
+
+    &:hover {
+        background-color: var(--button-default-background-hover-color);
+        color: var(--button-default-text-hover-color) !important;
+    }
+
+    &:focus,
+    &:active,
+    &:focus:active {
+        background-color: var(--button-default-background-focus-color);
+        color: var(--button-default-text-focus-color);
+    }
+
+    &:disabled,
+    &.disabled {
+        background-color: var(--button-disabled-background-color);
+        color: var(--button-disabled-default-text-color);
+        pointer-events: none;
+    }
+
+    &--iconPositionStyle {
+        flex-direction: row-reverse;
+        gap: 5px;
+    }
+
+    &--style1 {
+        background-color: var(--button-style-1-background);
+        color: var(--button-style-1-text-color);
+
+        &:hover {
+            background-color: var(--button-style-1-background-hover-color);
+            color: var(--button-style-1-text-hover-color) !important;
+        }
+
+        &:focus,
+        &:active,
+        &:focus:active {
+            background-color: var(--button-style-1-background-focus-color);
+            color: var(--button-style-1-text-focus-color);
+        }
+
+        &:disabled,
+        &.disabled {
+            background-color: var(--button-disabled-background-color);
+            color: var(--button-disabled-default-text-color);
+            pointer-events: none;
+        }
+    }
+}

package/src/components/Category/Category.stories.tsx

@@ -1,88 +1,88 @@
-import { Meta, Story } from "@storybook/react";
-import { useEffect, useState } from "react";
-import { Category } from '.';
-
-export default {
-    title: 'Category',
-    component: Category,
-} as Meta;
-
-const Template: Story<any> = (args) => {
-    const [serverData, setServerData] = useState<any>();
-
-    // useEffect(() => {
-    //     console.log(serverData);
-    // }, [serverData])
-    
-    return <Category {...args} serverReadyData={setServerData} data={[
-        {
-            "title": "2 (Q: 0) (G: 2)",
-            "key": "0",
-            "data": {
-                "categoryName": "2",
-                "openAnswer": false,
-                "generalEvaluationLevel": "0",
-                "grade": "2",
-                "questions": []
-            },
-            "children": []
-        },
-        {
-            "title": "1 (Q: 0) (G: 1)",
-            "key": "1",
-            "data": {
-                "categoryName": "1",
-                "openAnswer": false,
-                "generalEvaluationLevel": "0",
-                "grade": "1",
-                "questions": []
-            },
-            "children": [
-                {
-                    "title": "1.1 (Q: 0) (G: 1.1)",
-                    "key": "1.0",
-                    "data": {
-                        "categoryName": "1.1",
-                        "openAnswer": false,
-                        "generalEvaluationLevel": "0",
-                        "grade": "1.1",
-                        "questions": []
-                    },
-                    "children": [
-                        {
-                            "title": "1.1.1 (Q: 0) (G: 1.1.1)",
-                            "key": "1.0.0",
-                            "data": {
-                                "categoryName": "1.1.1",
-                                "openAnswer": false,
-                                "generalEvaluationLevel": "0",
-                                "grade": "1.1.1",
-                                "questions": []
-                            },
-                            "children": []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "title": "3 (Q: 0) (G: 3)",
-            "key": "2",
-            "data": {
-                "categoryName": "3",
-                "openAnswer": false,
-                "generalEvaluationLevel": "0",
-                "grade": "3",
-                "questions": []
-            },
-            "children": []
-        }
-    ]}></Category>
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
-
-
-
+import { Meta, Story } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { Category } from '.';
+
+export default {
+    title: 'Category',
+    component: Category,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [serverData, setServerData] = useState<any>();
+
+    // useEffect(() => {
+    //     console.log(serverData);
+    // }, [serverData])
+    
+    return <Category {...args} serverReadyData={setServerData} data={[
+        {
+            "title": "2 (Q: 0) (G: 2)",
+            "key": "0",
+            "data": {
+                "categoryName": "2",
+                "openAnswer": false,
+                "generalEvaluationLevel": "0",
+                "grade": "2",
+                "questions": []
+            },
+            "children": []
+        },
+        {
+            "title": "1 (Q: 0) (G: 1)",
+            "key": "1",
+            "data": {
+                "categoryName": "1",
+                "openAnswer": false,
+                "generalEvaluationLevel": "0",
+                "grade": "1",
+                "questions": []
+            },
+            "children": [
+                {
+                    "title": "1.1 (Q: 0) (G: 1.1)",
+                    "key": "1.0",
+                    "data": {
+                        "categoryName": "1.1",
+                        "openAnswer": false,
+                        "generalEvaluationLevel": "0",
+                        "grade": "1.1",
+                        "questions": []
+                    },
+                    "children": [
+                        {
+                            "title": "1.1.1 (Q: 0) (G: 1.1.1)",
+                            "key": "1.0.0",
+                            "data": {
+                                "categoryName": "1.1.1",
+                                "openAnswer": false,
+                                "generalEvaluationLevel": "0",
+                                "grade": "1.1.1",
+                                "questions": []
+                            },
+                            "children": []
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "3 (Q: 0) (G: 3)",
+            "key": "2",
+            "data": {
+                "categoryName": "3",
+                "openAnswer": false,
+                "generalEvaluationLevel": "0",
+                "grade": "3",
+                "questions": []
+            },
+            "children": []
+        }
+    ]}></Category>
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
+
+
+