Merge pull request #33 from knovator/updates/design-system

Updates/Design-System
implerhq · Nov 3, 2022 · cb49688 · cb49688
2 parents 3cfcbfa + eaa750d
commit cb49688
Show file tree

Hide file tree

Showing 36 changed files with 365 additions and 77 deletions.
diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
@@ -4,7 +4,9 @@ export const colors = {
   darkDeem: '#666666',
   lightDeem: '#CCCCCC',
   lightGray: '#F8F8F8',
-  black: '#FFFFFF',
+  black: '#000000',
+  red: '#E40000',
   danger: '#AB3022',
+  lightDanger: '#FDEBEB',
   light: '#F2F9FE',
 };
diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts
@@ -1,7 +1,8 @@
 export const TEXTS = {
   DROPZONE: {
-    TITLE: 'Drag file here or Click to select file',
-    SUBTITLE: '.csv, .xlx, .xlsx files are supported',
+    TITLE: 'Drop your file here or ',
+    BROWSE: 'Browse',
+    SUBTITLE: 'Select any .csv, .xlx or .xlsx file',
     FILE_SELECTION: 'File selected successfully',
   },
 };
diff --git a/apps/widget/src/config/theme.config.ts b/apps/widget/src/config/theme.config.ts
@@ -6,9 +6,5 @@ export const mantineConfig: MantineThemeOverride = {
   fontFamily: "'Lato', sans serif",
   headings: {
     fontFamily: "'Lato', sans serif",
-    sizes: {
-      h1: { fontSize: 26 },
-      h2: { fontSize: 20 },
-    },
   },
 };
diff --git a/apps/widget/src/design-system/Button/Button.tsx b/apps/widget/src/design-system/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Button as MantineButton, MantineSize } from '@mantine/core';
 
 interface IButtonProps {
@@ -8,13 +8,22 @@ interface IButtonProps {
   onClick?: () => void;
   size?: MantineSize;
   color?: 'blue' | 'red';
+  leftIcon?: ReactNode;
 }
 
 export function Button(props: PropsWithChildren<IButtonProps>) {
-  const { variant, disabled, children, loading, onClick, size = 'md', color } = props;
+  const { variant, disabled, children, loading, onClick, size = 'md', color, leftIcon } = props;
 
   return (
-    <MantineButton disabled={disabled} variant={variant} loading={loading} onClick={onClick} size={size} color={color}>
+    <MantineButton
+      leftIcon={leftIcon}
+      disabled={disabled}
+      variant={variant}
+      loading={loading}
+      onClick={onClick}
+      size={size}
+      color={color}
+    >
       {children}
     </MantineButton>
   );

diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx
@@ -23,4 +23,13 @@ export default {
 
 const Template: ComponentStory<typeof Dropzone> = (args) => <Dropzone {...args} />;
 
-export const Simple = Template.bind({});
+export const Default = Template.bind({});
+
+export const WithFile = Template.bind({});
+WithFile.args = {
+  title: 'Select a file',
+  file: {
+    name: 'Document.tsx',
+    size: 1200,
+  } as unknown as File,
+};
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.style.ts b/apps/widget/src/design-system/Dropzone/Dropzone.style.ts
@@ -27,11 +27,16 @@ export const getCheckIconStyles = (theme) => ({
   display: 'block',
 });
 
+export const getWrapperStyles = (theme) => ({
+  width: '100%',
+});
+
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
     icon: getIconStyles(theme),
     successRoot: getSuccessRootStyles(theme),
     root: getRootStyles(theme),
     checkIcon: getCheckIconStyles(theme),
+    wrapper: getWrapperStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.tsx
@@ -2,6 +2,7 @@ import { Group, Text } from '@mantine/core';
 import { Dropzone as MantineDropzone, FileWithPath, MIME_TYPES } from '@mantine/dropzone';
 import useStyles from './Dropzone.style';
 import { TEXTS } from '../../config/texts.config';
+import { colors } from '../../config/colors.config';
 import { FileIcon, CheckIcon } from '../../icons';
 import { File as FileCMP } from '../File';
 
@@ -11,10 +12,11 @@ interface IDropzoneProps {
   onDrop: (files: FileWithPath[]) => void;
   onClear?: () => void;
   file?: FileWithPath;
+  title?: string;
 }
 
 export function Dropzone(props: IDropzoneProps) {
-  const { loading, accept = [MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx], onDrop, onClear, file } = props;
+  const { loading, accept = [MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx], onDrop, onClear, file, title } = props;
   const { classes } = useStyles();
 
   const isFileSelected = !!(file && file.name && file.size);
@@ -43,8 +45,11 @@ export function Dropzone(props: IDropzoneProps) {
       <MantineDropzone onDrop={onDrop} accept={accept} loading={loading} classNames={classes}>
         <Group position="center">
           <div>
-            <Text size="xl" align="center">
-              {TEXTS.DROPZONE.TITLE}
+            <Text align="center" weight="bold">
+              {TEXTS.DROPZONE.TITLE}{' '}
+              <Text component="span" color={colors.primary}>
+                {TEXTS.DROPZONE.BROWSE}
+              </Text>
             </Text>
             <MantineDropzone.Idle>
               <Group position="center" mt="md">
@@ -60,5 +65,14 @@ export function Dropzone(props: IDropzoneProps) {
     );
   };
 
-  return isFileSelected ? <SelectedFileContent /> : <SelectFileContent />;
+  return (
+    <div className={classes.wrapper}>
+      {title ? (
+        <Text weight="bold" size="sm" color="">
+          {title}
+        </Text>
+      ) : null}
+      {isFileSelected ? <SelectedFileContent /> : <SelectFileContent />}
+    </div>
+  );
 }
diff --git a/apps/widget/src/design-system/File/File.style.ts b/apps/widget/src/design-system/File/File.style.ts
@@ -16,6 +16,7 @@ export const getContainerStyles = (theme: MantineTheme): React.CSSProperties =>
 export const getFileIconStyles = (theme: MantineTheme): React.CSSProperties => ({
   color: colors.darkDeem,
   height: '20px',
+  width: '20px',
 });
 
 export const getCrossIconStyles = (theme: MantineTheme): React.CSSProperties => ({

diff --git a/apps/widget/src/design-system/File/File.tsx b/apps/widget/src/design-system/File/File.tsx
@@ -1,6 +1,7 @@
 import { FileIcon, CrossIcon } from '../../icons';
 import { Group, Text } from '@mantine/core';
 import useStyles from './File.style';
+import { colors } from '../../config/colors.config';
 
 interface IFile {
   name: string;
@@ -21,13 +22,13 @@ export function File(props: IFile) {
 
   return (
     <Group className={classes.root}>
-      <Group spacing="sm">
-        <FileIcon className={classes.fileIcon} />
+      <Group spacing="xs">
+        <FileIcon className={classes.fileIcon} fill={colors.darkDeem} />
         <Text size="sm" inline className={classes.nameText}>
           {name}
         </Text>
       </Group>
-      <Group spacing="sm">
+      <Group spacing="xs">
         <Text size="sm" inline className={classes.sizeText}>
           {size}
         </Text>

diff --git a/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx b/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
@@ -0,0 +1,24 @@
+import { Tooltip } from '@mantine/core';
+import { colors } from '../../config/colors.config';
+
+interface InvalidWarningProps {
+  label: string;
+}
+export function InvalidWarning(props: InvalidWarningProps) {
+  const { label } = props;
+
+  return (
+    <Tooltip label={label} withArrow>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-2 -2 24 24"
+        width="20"
+        fill="currentColor"
+        style={{ verticalAlign: 'middle', float: 'right', cursor: 'pointer', color: colors.red }}
+      >
+        {/* eslint-disable-next-line max-len */}
+        <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-13a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1zm0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
+      </svg>
+    </Tooltip>
+  );
+}
diff --git a/apps/widget/src/design-system/InvalidWarning/index.ts b/apps/widget/src/design-system/InvalidWarning/index.ts
@@ -0,0 +1 @@
+export * from './InvalidWarning';
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx
@@ -8,9 +8,9 @@ export default {
 
 const Template: ComponentStory<typeof MappingItem> = (args) => <MappingItem {...args} />;
 
-export const Simple = Template.bind({});
+export const NotMapped = Template.bind({});
 
-Simple.args = {
+NotMapped.args = {
   options: [
     {
       label: 'Firstname',
@@ -26,3 +26,23 @@ Simple.args = {
   size: 'sm',
   placeholder: 'Select Field',
 };
+
+export const Mapped = Template.bind({});
+
+Mapped.args = {
+  options: [
+    {
+      label: 'Firstname',
+      value: '1',
+    },
+    {
+      label: 'Lastname',
+      value: '2',
+    },
+  ],
+  searchable: true,
+  heading: 'First Name',
+  size: 'sm',
+  placeholder: 'Select Field',
+  value: '1',
+};
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.style.ts b/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
@@ -4,6 +4,12 @@ import { colors } from '../../config/colors.config';
 
 export const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
   justifyContent: 'space-between',
+  width: '100%',
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 3,
+  },
 });
 
 export const getSelectionRootStyles = (theme: MantineTheme): React.CSSProperties => ({
@@ -12,7 +18,12 @@ export const getSelectionRootStyles = (theme: MantineTheme): React.CSSProperties
   borderStyle: 'solid',
   borderRadius: 4,
   padding: 0,
-  width: '70%',
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    width: '100%',
+  },
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    width: '70%',
+  },
 });
 
 export const getHeadingStyles = (theme: MantineTheme) => ({
@@ -52,6 +63,13 @@ export const getStatusTextStyles = (theme: MantineTheme): React.CSSProperties =>
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing.sm,
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    flexDirection: 'row-reverse',
+  },
+});
+
+export const getRequiredStyles = (theme: MantineTheme): React.CSSProperties => ({
+  color: 'red',
 });
 
 export default createStyles((theme: MantineTheme, params: { height: number }, getRef): Record<string, any> => {
@@ -62,5 +80,6 @@ export default createStyles((theme: MantineTheme, params: { height: number }, ge
     selectRoot: getSelectRootStyles(theme),
     select: getSelectStyles(theme, params.height),
     heading: getHeadingStyles(theme),
+    required: getRequiredStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
@@ -10,6 +10,7 @@ interface IOption {
 
 interface IMappingItem {
   heading: string;
+  required?: boolean;
   options: IOption[];
   value?: string;
   placeholder?: string;
@@ -23,6 +24,7 @@ export function MappingItem(props: IMappingItem) {
   const {
     heading,
     options,
+    required,
     value,
     placeholder = 'Select field',
     size = 'sm',
@@ -43,6 +45,7 @@ export function MappingItem(props: IMappingItem) {
       <Group className={classes.selectionRoot} align="stretch" ref={groupRef} noWrap>
         <Text size={size} className={classes.heading}>
           {heading}
+          {required ? <span className={classes.required}>&nbsp;*</span> : null}
         </Text>
         <Select
           placeholder={placeholder}

diff --git a/apps/widget/src/design-system/Modal/Modal.stories.tsx b/apps/widget/src/design-system/Modal/Modal.stories.tsx
@@ -32,6 +32,5 @@ Simple.args = {
   centered: true,
   opened: true,
   overflow: 'inside',
-  padding: 'sm',
   children: 'Content',
 };
diff --git a/apps/widget/src/design-system/Modal/Modal.style.ts b/apps/widget/src/design-system/Modal/Modal.style.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { createStyles, MantineTheme } from '@mantine/core';
+import { colors } from '../../config/colors.config';
+
+export const getHeaderStyles = (theme: MantineTheme): React.CSSProperties => ({
+  marginBottom: theme.spacing.xs,
+  marginRight: 0,
+});
+
+export const getModalStyles = (theme: MantineTheme): React.CSSProperties => ({
+  padding: '100px',
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    header: getHeaderStyles(theme),
+    modal: getModalStyles(theme),
+  };
+});
diff --git a/apps/widget/src/design-system/Modal/Modal.tsx b/apps/widget/src/design-system/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Modal as MantineModal } from '@mantine/core';
+import useStyles from './Modal.style';
 
 interface IModalProps extends JSX.ElementChildrenAttribute {
   title?: string;
@@ -8,20 +9,11 @@ interface IModalProps extends JSX.ElementChildrenAttribute {
   onClose: () => void;
   overflow?: 'inside' | 'outside';
   size?: 'sm' | 'md' | 'lg' | '100%' | number;
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 }
 
 export function Modal(props: PropsWithChildren<IModalProps>) {
-  const {
-    children,
-    onClose,
-    opened,
-    size = '100%',
-    padding = 'sm',
-    overflow = 'inside',
-    title,
-    centered = true,
-  } = props;
+  const { children, onClose, opened, size = '100%', overflow = 'inside', title, centered = true } = props;
+  const { classes } = useStyles();
 
   return (
     <MantineModal
@@ -34,7 +26,10 @@ export function Modal(props: PropsWithChildren<IModalProps>) {
       centered={centered}
       overflow={overflow}
       title={title}
-      padding={padding}
+      classNames={{
+        header: classes.header,
+        modal: classes.modal,
+      }}
     >
       {children}
     </MantineModal>

diff --git a/apps/widget/src/design-system/Pagination/Pagination.stories.tsx b/apps/widget/src/design-system/Pagination/Pagination.stories.tsx
@@ -17,6 +17,4 @@ export const Simple = Template.bind({});
 Simple.args = {
   total: 10,
   page: 1,
-  limit: 10,
-  totalRecords: 100,
 };