@omniumretail/component-library 1.0.66 → 1.0.68

package/src/components/Navigation/index.tsx

@@ -1,33 +1,33 @@
-import styles from './styles.module.scss';
-import { Link } from '../Link';
-import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-export interface NavigationProps {
-    backLink?: boolean;
-    title: string;
-    homeLink?: boolean;
-    loginLink?: boolean;
-    loginOnClickFunction?: () => void;
-    backLinkOnClickFunction?: () => void;
-    homeOnClickFunction?: () => void;
-}
-
-export const Navigation = (props: NavigationProps) => {
-    const { backLink, title, homeLink, loginOnClickFunction, loginLink, backLinkOnClickFunction, homeOnClickFunction } = props;
-    const { t } = useTranslation();
-
-    return (
-        <div className={styles.navigation}>
-            <div className={styles.columnLeft}>
-            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {t('navigation.back')} </Link> }
-            </div>
-            <div className={styles.columnCenter}>
-                <h1 className={styles.title}>{title}</h1>
-            </div>
-            <div className={styles.columnRight}>
-                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {t('navigation.home')} </Link>}
-                {loginLink && <Link href="#" onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> {t('navigation.logout')} </Link>}
-            </div>
-        </div>
-    )
-};
+import styles from './styles.module.scss';
+import { Link } from '../Link';
+import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+export interface NavigationProps {
+    backLink?: boolean;
+    title: string;
+    homeLink?: boolean;
+    loginLink?: boolean;
+    loginOnClickFunction?: () => void;
+    backLinkOnClickFunction?: () => void;
+    homeOnClickFunction?: () => void;
+}
+
+export const Navigation = (props: NavigationProps) => {
+    const { backLink, title, homeLink, loginOnClickFunction, loginLink, backLinkOnClickFunction, homeOnClickFunction } = props;
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles.navigation}>
+            <div className={styles.columnLeft}>
+            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {t('navigation.back')} </Link> }
+            </div>
+            <div className={styles.columnCenter}>
+                <h1 className={styles.title}>{title}</h1>
+            </div>
+            <div className={styles.columnRight}>
+                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {t('navigation.home')} </Link>}
+                {loginLink && <Link href="#" onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> {t('navigation.logout')} </Link>}
+            </div>
+        </div>
+    )
+};

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

@@ -1,42 +1,58 @@
-.navigation {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
-    align-items: center;
-    height: 75px;
-    gap: 0 24px;
-    position: relative;
-
-    @media(max-width: 767px) {
-        padding-top: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .title {
-        font-size: var(--font-size-body-4);
-        font-weight: var(--font-weight-semibold);
-        text-transform: uppercase;
-    }
-
-    .columnCenter {
-        align-self: center;
-        @media(max-width: 767px) {
-            position: absolute;
-            top: 0;
-            margin: 0 auto;
-            left: 0;
-            right: 0;
-            text-align: center;
-        }
-    }
-
-    .columnLeft {
-        justify-self: start;
-    }
-
-    .columnRight {
-        justify-self: end;
-    }
-}
+.navigation {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
+    align-items: center;
+    height: 75px;
+    gap: 0 24px;
+    position: relative;
+
+    @media(max-width: 767px) {
+        padding-top: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .title {
+        font-size: var(--font-size-body-3);
+        font-weight: var(--font-weight-semibold);
+        text-transform: uppercase;
+
+        @media(min-width: 768px) {
+            font-size: var(--font-size-body-4);
+        }
+    }
+
+    .columnCenter {
+        align-self: center;
+        @media(max-width: 767px) {
+            position: absolute;
+            top: 0;
+            margin: 0 auto;
+            left: 0;
+            right: 0;
+            text-align: center;
+        }
+    }
+
+    .columnLeft {
+        justify-self: start;
+    }
+
+    .columnRight {
+        justify-self: end;
+
+        :global {
+            .ant-btn {
+                span {
+                    &:not([role="img"]) {
+                        @media(max-width: 767px) {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/Notification/Notification.stories.tsx

@@ -1,29 +1,29 @@
-import { Meta, Story } from "@storybook/react";
-import { Notification, ErrorNotificationProps } from '.';
-
-export default {
-    title: 'Notification',
-    component: Notification,
-} as unknown as Meta;
-
-const Template: Story<ErrorNotificationProps> = (args) => {
-
-    const { openNotificationWithIcon } = Notification({
-        message: args.message,
-        description: args.description,
-    });
-
-    return (
-        <>
-            {openNotificationWithIcon('error')}
-        </>
-    )
-};
-export const Primary = Template.bind({});
-Primary.args = {
-    message: "Sucesso",
-    description: "Parabéns, conseguiste!"
-};
-
-
-
+import { Meta, Story } from "@storybook/react";
+import { Notification, ErrorNotificationProps } from '.';
+
+export default {
+    title: 'Notification',
+    component: Notification,
+} as unknown as Meta;
+
+const Template: Story<ErrorNotificationProps> = (args) => {
+
+    const { openNotificationWithIcon } = Notification({
+        message: args.message,
+        description: args.description,
+    });
+
+    return (
+        <>
+            {openNotificationWithIcon('error')}
+        </>
+    )
+};
+export const Primary = Template.bind({});
+Primary.args = {
+    message: "Sucesso",
+    description: "Parabéns, conseguiste!"
+};
+
+
+

package/src/components/Notification/index.tsx

@@ -1,21 +1,21 @@
-import { notification } from 'antd';
-
-export interface ErrorNotificationProps {
-  message: string;
-  description: string;
-}
-
-type NotificationType = 'success' | 'info' | 'warning' | 'error';
-
-export const Notification = ({ message, description }: ErrorNotificationProps) => {
-  const openNotificationWithIcon = (type: NotificationType) => {
-    notification[type]({
-      message: message,
-      description: description,
-    });
-  };
-
-  return {
-    openNotificationWithIcon,
-  };
-};
+import { notification } from 'antd';
+
+export interface ErrorNotificationProps {
+  message: string;
+  description: string;
+}
+
+type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+export const Notification = ({ message, description }: ErrorNotificationProps) => {
+  const openNotificationWithIcon = (type: NotificationType) => {
+    notification[type]({
+      message: message,
+      description: description,
+    });
+  };
+
+  return {
+    openNotificationWithIcon,
+  };
+};

package/src/components/Questions/Questions.stories.tsx

@@ -1,37 +1,37 @@
-import { Meta, Story } from "@storybook/react";
-import { Questions } from '.';
-import { SearchOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from "antd";
-import { useForm } from 'antd/lib/form/Form';
-
-export default {
-    title: 'Questions',
-    component: Questions,
-} as Meta;
-
-const Template: Story<any> = (args) => {
-    const [form] = useForm();
-
-    const onFinish = (values: any) => {
-        console.log('Received values of form:', values);
-    };
-
-    return (
-        <>
-            <Form
-                name="dynamic_form_nest_item"
-                onFinish={onFinish}
-                autoComplete="off"
-                form={form}
-            >
-                <Questions {...args}></Questions>
-            </Form>
-            <div style={{marginTop: '60px'}}></div>
-            <Button onClick={() => form.submit()}>Submit</Button>
-        </>
-);
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { Questions } from '.';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Form, Input } from "antd";
+import { useForm } from 'antd/lib/form/Form';
+
+export default {
+    title: 'Questions',
+    component: Questions,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [form] = useForm();
+
+    const onFinish = (values: any) => {
+        console.log('Received values of form:', values);
+    };
+
+    return (
+        <>
+            <Form
+                name="dynamic_form_nest_item"
+                onFinish={onFinish}
+                autoComplete="off"
+                form={form}
+            >
+                <Questions {...args}></Questions>
+            </Form>
+            <div style={{marginTop: '60px'}}></div>
+            <Button onClick={() => form.submit()}>Submit</Button>
+        </>
+);
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Questions/SingleQuestion/index.tsx

@@ -1,84 +1,84 @@
-import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Form, Input, Space } from 'antd';
-import { t } from 'i18next';
-import styles from './styles.module.scss';
-
-export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => {    
-    return (
-        <div 
-            key={key}
-            ref={provided.innerRef}
-            snapshot={snapshot}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            className={styles.dragItem}
-        >
-            <Space>
-                <div className={styles.question}>
-                    <div className={styles.drag}>
-                        <HolderOutlined />
-                    </div>
-                    <div className={styles.content}>
-                        <div className={styles.label}>
-                            abc
-                        </div>
-                        <Form.Item
-                            {...restField}
-                            name={[name, 'question']}
-                        >
-                            <Input placeholder={`${t('components.category.placeholderQuestion')}`} onBlur={handleChanges} />
-                        </Form.Item>
-                    </div>
-                    <div className={styles.actions}>
-                         {/* <div className={styles.edit}>
-                            <div className={styles.notEditing} 
-                            // onClick={() => handleStartEdit(index)}
-                            >
-                                <EditOutlined />
-                            </div>
-
-                            <div className={styles.editing}>
-                                <CheckOutlined style={{ color: 'var( --color-confirmation-600)' }} 
-                                onClick={() => handleSaveEdit()} 
-                                />
-                                <CloseOutlined style={{ color: 'var( --color-warning-500)' }}     
-                                //onClick={() => handleCancelEdit(index)} 
-                                />
-                            </div>
-                        </div> */}
-                        <div className={styles.delete}>
-                            <DeleteOutlined onClick={() => remove(name)} />
-                        </div>
-                    </div>
-                </div>
-                <div className={styles.information}>
-                    <div className={styles.infoIcon}>
-                        <InfoCircleOutlined />
-                    </div>
-                    <div className={styles.content}>
-                        <div className={styles.label}>
-                            xpto
-                        </div>
-                        <Form.Item
-                            {...restField}
-                            name={[name, 'info']}
-                        >
-                            <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges}/>
-                        </Form.Item>
-                    </div>
-                    {showGrade && 
-                        <div className={styles.grade}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'grade']}
-                            >
-                                <Input placeholder={`${t('components.category.placeholderGrade')}`} onBlur={handleChanges} />
-                            </Form.Item>
-                        </div>
-                    }
-
-                </div>
-            </Space>
-        </div>
-    );
-};
+import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Space } from 'antd';
+import { t } from 'i18next';
+import styles from './styles.module.scss';
+
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => {    
+    return (
+        <div 
+            key={key}
+            ref={provided.innerRef}
+            snapshot={snapshot}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className={styles.dragItem}
+        >
+            <Space>
+                <div className={styles.question}>
+                    <div className={styles.drag}>
+                        <HolderOutlined />
+                    </div>
+                    <div className={styles.content}>
+                        <div className={styles.label}>
+                            abc
+                        </div>
+                        <Form.Item
+                            {...restField}
+                            name={[name, 'question']}
+                        >
+                            <Input placeholder={`${t('components.category.placeholderQuestion')}`} onBlur={handleChanges} />
+                        </Form.Item>
+                    </div>
+                    <div className={styles.actions}>
+                         {/* <div className={styles.edit}>
+                            <div className={styles.notEditing} 
+                            // onClick={() => handleStartEdit(index)}
+                            >
+                                <EditOutlined />
+                            </div>
+
+                            <div className={styles.editing}>
+                                <CheckOutlined style={{ color: 'var( --color-confirmation-600)' }} 
+                                onClick={() => handleSaveEdit()} 
+                                />
+                                <CloseOutlined style={{ color: 'var( --color-warning-500)' }}     
+                                //onClick={() => handleCancelEdit(index)} 
+                                />
+                            </div>
+                        </div> */}
+                        <div className={styles.delete}>
+                            <DeleteOutlined onClick={() => remove(name)} />
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.information}>
+                    <div className={styles.infoIcon}>
+                        <InfoCircleOutlined />
+                    </div>
+                    <div className={styles.content}>
+                        <div className={styles.label}>
+                            xpto
+                        </div>
+                        <Form.Item
+                            {...restField}
+                            name={[name, 'info']}
+                        >
+                            <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges}/>
+                        </Form.Item>
+                    </div>
+                    {showGrade && 
+                        <div className={styles.grade}>
+                            <Form.Item
+                                {...restField}
+                                name={[name, 'grade']}
+                            >
+                                <Input placeholder={`${t('components.category.placeholderGrade')}`} onBlur={handleChanges} />
+                            </Form.Item>
+                        </div>
+                    }
+
+                </div>
+            </Space>
+        </div>
+    );
+};