@omniumretail/component-library 1.0.72 → 1.0.74

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

@@ -1,180 +1,180 @@
-.categoryResponse {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    height: 100%;
-
-    @media(min-width: 600px) {
-        display: grid;
-        grid-template-columns: 220px auto;
-    }
-
-    @media(min-width: 768px) {
-        grid-template-columns: 300px auto;
-    }
-}
-
-.sidebarWrapper {
-    background: #EBECED;
-    overflow: auto;
-    padding: 20px;
-
-    @media(max-width: 599px) {
-        padding: 20px 20px 0 20px;
-        max-height: 80px;
-    }
-}
-
-.contentWrapper {
-    background: var(--color-white);
-    overflow: auto;
-    padding: 20px;
-
-    @media(max-width: 599px) {
-        height: 100%;
-    }
-}
-
-.title {
-    font-size: var(--font-size-body-2);
-    color: var(--color-blue);
-    margin-bottom: 12px;
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
-        margin-bottom: 36px;
-    }
-}
-
-.label {
-    padding-bottom: 15px;
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-2);
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
-    }
-}
-
-.cursorPointer {
-    cursor: pointer;
-}
-
-.subCategory {
-    padding-left: 16px;
-
-    .label {
-        font-weight: var(--font-weight-semibold);
-    }
-
-    .labelWrapper {
-        .subCategory {
-            .label {
-                font-weight: var(--font-weight-light);
-            }
-        }
-    }
-}
-
-.labelWrapper {
-    display: block;
-}
-
-.active {
-    color: var(--color-orange);
-}
-
-.details {
-    margin-bottom: 16px;
-
-    @media(min-width: 768px) {
-        margin-bottom: 24px;
-    }
-}
-
-.categoryName {
-    font-size: var(--font-size-body-3);
-    color: var(--color-blue);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
-    }
-}
-
-.categoryDescription {
-    font-size: var(--font-size-body-2);
-    font-weight: var(--font-weight-light);
-    color: var(--color-black);
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-// Questions
-.questionWrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    margin-bottom: 24px;
-
-    @media(min-width: 768px) {
-        margin-bottom: 36px;
-    }
-}
-
-.questionWrapperOpenAnswer {
-    flex-direction: column;
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-    margin-bottom: 24px;
-
-    .question {
-        width: 100%;
-        border-bottom: none;
-    }
-
-    .answer {
-        width: 100%;
-        height: auto;
-
-        :global {
-            .ant-input {
-                min-height: 140px;
-            }
-            
-            .ant-form-item {
-                margin-bottom: 16px;
-            }
-        }
-    }
-}
-
-.question {
-    width: calc(100% - 112px);
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-}
-
-.answer {
-    width: 100px;
-    height: 50px;
-    align-self: flex-end;
-}
-
-.subject {
-    font-size: var(--font-size-body-2);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-.description {
-    font-weight: var(--font-weight-light);
-    margin-bottom: 4px;
-}
+.categoryResponse {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+
+    @media(min-width: 600px) {
+        display: grid;
+        grid-template-columns: 220px auto;
+    }
+
+    @media(min-width: 768px) {
+        grid-template-columns: 300px auto;
+    }
+}
+
+.sidebarWrapper {
+    background: #EBECED;
+    overflow: auto;
+    padding: 20px;
+
+    @media(max-width: 599px) {
+        padding: 20px 20px 0 20px;
+        max-height: 80px;
+    }
+}
+
+.contentWrapper {
+    background: var(--color-white);
+    overflow: auto;
+    padding: 20px;
+
+    @media(max-width: 599px) {
+        height: 100%;
+    }
+}
+
+.title {
+    font-size: var(--font-size-body-2);
+    color: var(--color-blue);
+    margin-bottom: 12px;
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+        margin-bottom: 36px;
+    }
+}
+
+.label {
+    padding-bottom: 15px;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-2);
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+    }
+}
+
+.cursorPointer {
+    cursor: pointer;
+}
+
+.subCategory {
+    padding-left: 16px;
+
+    .label {
+        font-weight: var(--font-weight-semibold);
+    }
+
+    .labelWrapper {
+        .subCategory {
+            .label {
+                font-weight: var(--font-weight-light);
+            }
+        }
+    }
+}
+
+.labelWrapper {
+    display: block;
+}
+
+.active {
+    color: var(--color-orange);
+}
+
+.details {
+    margin-bottom: 16px;
+
+    @media(min-width: 768px) {
+        margin-bottom: 24px;
+    }
+}
+
+.categoryName {
+    font-size: var(--font-size-body-3);
+    color: var(--color-blue);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+    }
+}
+
+.categoryDescription {
+    font-size: var(--font-size-body-2);
+    font-weight: var(--font-weight-light);
+    color: var(--color-black);
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-3);
+    }
+}
+
+// Questions
+.questionWrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    margin-bottom: 24px;
+
+    @media(min-width: 768px) {
+        margin-bottom: 36px;
+    }
+}
+
+.questionWrapperOpenAnswer {
+    flex-direction: column;
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+    margin-bottom: 24px;
+
+    .question {
+        width: 100%;
+        border-bottom: none;
+    }
+
+    .answer {
+        width: 100%;
+        height: auto;
+
+        :global {
+            .ant-input {
+                min-height: 140px;
+            }
+            
+            .ant-form-item {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+
+.question {
+    width: calc(100% - 112px);
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+}
+
+.answer {
+    width: 100px;
+    height: 50px;
+    align-self: flex-end;
+}
+
+.subject {
+    font-size: var(--font-size-body-2);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-3);
+    }
+}
+
+.description {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,16 +1,16 @@
-import { Meta, Story } from "@storybook/react";
-import { CustomDatePicker, CustomDatePickerProps } from '.';
-
-export default {
-    title: 'DatePicker',
-    component: CustomDatePicker,
-} as Meta;
-
-const Template: Story<CustomDatePickerProps> = (args) => <CustomDatePicker {...args}></CustomDatePicker>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    onChange: (x: any, y: any) => {
-        console.log(x, y);
-    },
-};
+import { Meta, Story } from "@storybook/react";
+import { CustomDatePicker, CustomDatePickerProps } from '.';
+
+export default {
+    title: 'DatePicker',
+    component: CustomDatePicker,
+} as Meta;
+
+const Template: Story<CustomDatePickerProps> = (args) => <CustomDatePicker {...args}></CustomDatePicker>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    onChange: (x: any, y: any) => {
+        console.log(x, y);
+    },
+};

package/src/components/DatePicker/index.tsx

@@ -1,38 +1,38 @@
-import styles from './styles.module.scss';
-import { DatePicker, DatePickerProps  } from 'antd';
-
-export type CustomDatePickerProps = DatePickerProps & {
-    isRangePicker?: boolean;
-    onChange?: (a: any, b: any) => void;
-    disabled?: boolean;
-    defaultValue?: any;
-}
-
-const { RangePicker } = DatePicker;
-
-export const CustomDatePicker = ({
-    className, onChange, value, isRangePicker, disabled, defaultValue, ...rest
-}: CustomDatePickerProps) => {
-    
-    return (
-        <>
-            { isRangePicker
-            ?
-                <RangePicker
-                    onChange={ onChange }
-                    className={ `${styles.sitooDatePicker} ${className}` }
-                    disabled={disabled}
-                    defaultValue={defaultValue}
-                />
-            :
-                <DatePicker
-                { ...rest }
-                value={ value }
-                onChange={ onChange }
-                defaultValue={defaultValue}
-                className={ `${styles.sitooDatePicker} ${className}` }
-                />
-            }
-        </>
-    );
-}
+import styles from './styles.module.scss';
+import { DatePicker, DatePickerProps  } from 'antd';
+
+export type CustomDatePickerProps = DatePickerProps & {
+    isRangePicker?: boolean;
+    onChange?: (a: any, b: any) => void;
+    disabled?: boolean;
+    defaultValue?: any;
+}
+
+const { RangePicker } = DatePicker;
+
+export const CustomDatePicker = ({
+    className, onChange, value, isRangePicker, disabled, defaultValue, ...rest
+}: CustomDatePickerProps) => {
+    
+    return (
+        <>
+            { isRangePicker
+            ?
+                <RangePicker
+                    onChange={ onChange }
+                    className={ `${styles.sitooDatePicker} ${className}` }
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                />
+            :
+                <DatePicker
+                { ...rest }
+                value={ value }
+                onChange={ onChange }
+                defaultValue={defaultValue}
+                className={ `${styles.sitooDatePicker} ${className}` }
+                />
+            }
+        </>
+    );
+}

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

@@ -1,3 +1,3 @@
-.sitooDatePicker {
-    border-color: rgba(var(--color-black-rgb), .5);
-}
+.sitooDatePicker {
+    border-color: rgba(var(--color-black-rgb), .5);
+}

package/src/components/DatePickerTag/DatePickerTag.stories.tsx

@@ -1,19 +1,19 @@
-import { Meta, Story } from "@storybook/react";
-import { DatePickerTag } from '.';
-import { TagProps } from 'antd';
-import { useState } from "react";
-
-export default {
-    title: 'DatePickerTag',
-    component: DatePickerTag,
-} as Meta;
-
-const Template: Story<TagProps> = (args) => {
-    const [tagsInfo, setTagsInfo] = useState<any>({});
-    
-    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { DatePickerTag } from '.';
+import { TagProps } from 'antd';
+import { useState } from "react";
+
+export default {
+    title: 'DatePickerTag',
+    component: DatePickerTag,
+} as Meta;
+
+const Template: Story<TagProps> = (args) => {
+    const [tagsInfo, setTagsInfo] = useState<any>({});
+    
+    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};