@integrigo/integrigo-ui 1.6.17-g → 1.6.17-h

package/src/components/molecules/Button/BasicButton.tsx

@@ -14,7 +14,7 @@ export const sizeVariants = {
     font: '16px',
   },
   m: {
-    iconPadding: '28px',
+    iconPadding: '32px',
     padding: '10px 16px',
     ghostPadding: '20px',
     font: '12px',
@@ -65,6 +65,7 @@ export const BasicButton = styled.div<{
   padding: ${(p) => sizeVariants[p.sizeVariant].padding};
   font-weight: var(--font-bold);
   font-size: ${(p) => sizeVariants[p.sizeVariant].font};
+  line-height: ${(p) => sizeVariants[p.sizeVariant].font};
   cursor: pointer;
   overflow: hidden;
   position: relative;

package/src/components/molecules/Button/Button.tsx

@@ -72,7 +72,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {direction !== 'rtl' && (
-          <IconOffset size={size} ghost={Boolean(props.ghost)}>
+          // <IconOffset size={size} ghost={Boolean(props.ghost)}>
             <IconAddition
               icon={icon}
               size={size}
@@ -81,7 +81,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               direction={direction}
               onClick={onIconClick}
             />
-          </IconOffset>
+          // </IconOffset>
         )}
 
         <ButtonComponent
@@ -103,7 +103,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </ButtonComponent>
 
         {direction === 'rtl' && (
-          <IconOffset size={size} ghost={Boolean(props.ghost)} right>
+          // <IconOffset size={size} ghost={Boolean(props.ghost)} right>
             <IconAddition
               icon={icon}
               size={size}
@@ -112,7 +112,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               direction={direction}
               onClick={onIconClick}
             />
-          </IconOffset>
+          // </IconOffset>
         )}
       </ButtonWrapper>
     );
@@ -152,6 +152,7 @@ const IconOffset = styled.div<{
 }>`
   position: absolute;
   bottom: 0;
+  
   ${(p) =>
     p.right
       ? `right: ${p.ghost ? 0 : sizeVariant[p.size]}`

package/src/components/molecules/Input/Input.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
-import { FieldProps } from 'formik';
+import React from "react";
+import styled, { css, FlattenSimpleInterpolation } from "styled-components";
+import { FieldProps } from "formik";
 
-import { getValidationTypeProps } from '../../../helpers/validation';
-import { ValidationType } from '../../../types/validation';
-import { IconAddition, IconType } from '../../atoms/Icon';
-import { Label } from '../../atoms/Typography/Label';
-import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
+import { getValidationTypeProps } from "../../../helpers/validation";
+import { ValidationType } from "../../../types/validation";
+import { IconAddition, IconType } from "../../atoms/Icon";
+import { Label } from "../../atoms/Typography/Label";
+import { FieldLabel, fieldSizeVariants, FieldWrapper } from "../../atoms/Field";
 
 export type InputProps = Omit<
-React.InputHTMLAttributes<HTMLInputElement>,
-'size'
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
 > &
-FieldProps & {
-  label?: string;
-  validationType?: ValidationType;
-  icon?: IconType;
-  size?: 'xl' | 'l' | 'm' | 's';
-  direction?: 'ltr' | 'rtl';
-  onIconClick?: () => void;
-};
+  FieldProps & {
+    label?: string;
+    validationType?: ValidationType;
+    icon?: IconType;
+    size?: "xl" | "l" | "m" | "s";
+    direction?: "ltr" | "rtl";
+    onIconClick?: () => void;
+  };
 
 const getDirectionPadding = (
-  direction: InputProps['direction'],
-  padding: string,
+  direction: InputProps["direction"],
+  padding: string
 ): FlattenSimpleInterpolation => {
   switch (direction) {
-    case 'ltr':
+    case "ltr":
       return css`
         padding-left: ${padding};
       `;
-    case 'rtl':
+    case "rtl":
       return css`
         padding-right: ${padding};
       `;
@@ -40,7 +40,7 @@ const getDirectionPadding = (
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ icon, label, size = 'm', onIconClick, field, ...props }, ref) => (
+  ({ icon, label, size = "m", onIconClick, field, ...props }, ref) => (
     <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
       {label && (
         <FieldLabel sizeVariant={size}>
@@ -48,34 +48,36 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         </FieldLabel>
       )}
 
-      {props.direction !== 'rtl' && (
-        <IconAddition
-          icon={icon}
-          disabled={props.disabled}
-          direction={props.direction}
-          onClick={onIconClick}
-          size={size}
-        />
-      )}
+      <InputWrapper>
+        {props.direction !== "rtl" && (
+          <IconAddition
+            icon={icon}
+            disabled={props.disabled}
+            direction={props.direction}
+            onClick={onIconClick}
+            size={size}
+          />
+        )}
 
-      <InputElement ref={ref} sizeVariant={size} {...field} {...props} />
+        <InputElement ref={ref} sizeVariant={size} {...field} {...props} />
 
-      {props.direction === 'rtl' && (
-        <IconAddition
-          icon={icon}
-          disabled={props.disabled}
-          direction={props.direction}
-          onClick={onIconClick}
-        />
-      )}
+        {props.direction === "rtl" && (
+          <IconAddition
+            icon={icon}
+            disabled={props.disabled}
+            direction={props.direction}
+            onClick={onIconClick}
+          />
+        )}
+      </InputWrapper>
     </FieldWrapper>
-  ),
+  )
 );
 
 const InputElement = styled.input<
-Pick<InputProps, 'validationType' | 'direction'> & {
-  sizeVariant: 'xl' | 'l' | 'm' | 's';
-}
+  Pick<InputProps, "validationType" | "direction"> & {
+    sizeVariant: "xl" | "l" | "m" | "s";
+  }
 >`
   background-color: var(--color-white);
   border: 2px solid var(--shades-of-grey-80);
@@ -105,7 +107,7 @@ Pick<InputProps, 'validationType' | 'direction'> & {
   ${(p) =>
     getDirectionPadding(
       p.direction,
-      fieldSizeVariants[p.sizeVariant].iconPadding,
+      fieldSizeVariants[p.sizeVariant].iconPadding
     )};
 
   &:disabled {
@@ -117,4 +119,6 @@ Pick<InputProps, 'validationType' | 'direction'> & {
   }
 `;
 
-Input.displayName = 'Input';
+const InputWrapper = styled.div`
+  position: relative;
+`;

package/src/components/organisms/Table/Table.stories.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Table } from './Table';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+  Column,
+  createColumnHelper,
+} from '@tanstack/react-table';
+import { Button, Profile } from '../../molecules';
+
+export default {
+  title: 'Organisms/Table',
+  component: Table,
+  argTypes: {
+    variant: {
+      name: 'Color variant',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary'],
+      defaultValue: 'primary',
+    },
+    textAlign: {
+      name: 'Text alignment',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      defaultValue: 'center',
+    },
+  },
+} as ComponentMeta<typeof Table>;
+
+export const Primary: ComponentStory<typeof Table> = (args) => {
+  type Person = {
+    firstName: string
+    lastName: string
+    age: number
+    visits: number
+    status: string
+    progress: number
+  };
+
+  const personData: Person[] = [
+    {
+      firstName: 'tanner',
+      lastName: 'linsley',
+      age: 24,
+      visits: 100,
+      status: 'In Relationship',
+      progress: 50,
+    },
+    {
+      firstName: 'tandy',
+      lastName: 'miller',
+      age: 40,
+      visits: 40,
+      status: 'Single',
+      progress: 80,
+    },
+    {
+      firstName: 'joe',
+      lastName: 'dirte',
+      age: 45,
+      visits: 20,
+      status: 'Complicated',
+      progress: 10,
+    },
+  ];
+
+  const personColumnHelper = createColumnHelper<Person>();
+
+  const personColumns = [
+    personColumnHelper.accessor('firstName', {
+      cell: info => info.getValue(),
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor(row => row.lastName, {
+      id: 'lastName',
+      cell: info => info.getValue(),
+      header: () => 'Last Name',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('age', {
+      header: () => 'Age',
+      cell: info => info.renderValue(),
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('visits', {
+      header: () => 'Visits',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('status', {
+      header: 'Status',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('progress', {
+      header: 'Profile Progress',
+      footer: info => info.column.id,
+    }),
+  ] as Column<Person>[];
+
+  return (
+    <Table columns={personColumns} data={personData} variant={args.variant} textAlign={args.textAlign}/>
+  );
+};
+
+export const WithProfile: ComponentStory<typeof Table> = (args) => {
+ type DataType = {
+   fullName: string;
+   points: number;
+   avatar: string;
+   email: string;
+ };
+
+ const data: DataType[] = [
+   {
+     fullName: 'Tanner Linsley',
+     points: 24,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'abc@abc.pl',
+   },
+   {
+     fullName: 'Tandy Miller',
+     points: 80,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'def@def.pl',
+   },
+   {
+     fullName: 'Joe Dirte',
+     points: 45,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'ghi@ghi.pl',
+   },
+ ];
+ 
+ const profileColumnHelper = createColumnHelper<DataType>();
+
+ const columns = [
+   profileColumnHelper.accessor('fullName', {
+     cell: info => {
+       return (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{ flexBasis: '20px' }}>{info.row.index + 1}.</div>
+          <Profile
+            name={info.getValue()}
+            src={info.row.original.avatar}
+          >
+            <span>{info.row.original.email}</span>
+          </Profile>
+        </div>
+       );
+     },
+     header: () => 'Team member',
+     footer: info => info.column.id,
+   }),
+   profileColumnHelper.accessor('points', {
+     header: () => 'Points',
+     cell: info => info.renderValue(),
+     footer: info => info.column.id,
+   }),
+   profileColumnHelper.display({
+     header: 'Actions',
+     id: 'Actions',
+     cell: () => <div style={{ width: '30px' }}><Button direction={'ltr'} icon={'edit'} ghost>Edit</Button></div>,
+   }),
+ ] as Column<DataType>[];
+
+ return (
+    <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={"left"}/>
+ );
+};

package/src/components/organisms/Table/Table.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Table } from './Table';
+import { Column, createColumnHelper } from '@tanstack/react-table';
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+};
+
+const data: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: info => info.getValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor(row => row.lastName, {
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => 'Last Name',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: info => info.renderValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => 'Visits',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: info => info.column.id,
+  }),
+] as Column<Person>[];
+
+describe('<Table />', () => {
+  it('should render', () => {
+    render(<Table columns={columns} data={data}/>);
+  });
+  it('enabled - should match snapshot', () => {
+    const { container } = render(<Table columns={columns} data={data}/>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/organisms/Table/Table.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Column,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import styled from 'styled-components';
+
+type Variant = 'primary' | 'secondary';
+type Alignment = 'left' | 'right' | 'center';
+
+const colorVariant = {
+  primary: {
+    backgroundColor: 'var(--color-orange)',
+    fontColor: 'var(--color-white)',
+  },
+  secondary: {
+    backgroundColor: 'var(--color-navy)',
+    fontColor: 'var(--color-white)',
+  },
+};
+
+export interface Props <T extends Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
+  data: T[];
+  columns: Column<T>[];
+  variant?: Variant;
+  textAlign?: Alignment
+}
+
+export const Table = <T extends Record<string, unknown>>({
+  data,
+  columns,
+  variant = 'primary',
+  textAlign = 'center',
+  ...props
+}: Props<T>) => {
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div>
+      <StyledTable cellSpacing={0} {...props}>
+        <StyledHead variant={variant} textAlign={textAlign}>
+          {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </StyledHead>
+        <StyledBody textAlign={textAlign}>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </StyledBody>
+    </StyledTable>
+    </div>
+  );
+};
+
+const StyledTable = styled.table`
+
+`;
+
+StyledTable.displayName = 'StyledTable';
+
+const StyledHead = styled.thead<{ variant: Variant, textAlign: Alignment }>`
+  padding: 15px 10px;
+  height: 54px;
+
+  & tr th {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 15px 10px;
+    color: white;
+    text-align: ${props => props.textAlign};
+  }
+
+  ${(p) => `
+    background-color: ${colorVariant[p.variant].backgroundColor};
+    color: ${colorVariant[p.variant].fontColor};
+    
+    & th:first-child {
+      box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 5px 0px 0px 0px;
+    }
+  
+    & th:last-child {
+      box-shadow: 10px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 0px 5px 0px 0px;
+    }
+  `}
+`;
+
+StyledHead.displayName = 'StyledHead';
+
+const StyledBody = styled.tbody<{ textAlign: Alignment }>`
+  tr, td {
+    //height for td works like min-height. Table cells will grow when the content does not fit.
+    height: 52px;
+  }
+  
+  tr td {
+    padding: 10px;
+    text-align: ${props => props.textAlign};
+  }
+  
+  tr:nth-child(even) {
+    background-color: var(--shades-of-grey-0);
+  }
+  
+  tr:nth-child(odd) {
+    background-color: var(--shades-of-grey-20);
+  }
+  
+  tr:hover {
+    background-color: rgba(224, 154, 51, 0.2);
+    
+    td {
+      border-top: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+    }
+    
+    td:first-child {
+      border-left: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+      border-top: solid 2px var(--color-orange);
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+    }
+    
+    td:last-child {
+      border-right: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+      border-top: solid 2px var(--color-orange);
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+  }  
+`;
+
+StyledBody.displayName = 'StyledBody';