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

package/src/components/atoms/Icon/icons/Search.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Search: React.FCS = (props) => (
+  <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M25.1375 23.3625L20.5 18.7625C22.3001 16.518 23.1719 13.6691 22.936 10.8016C22.7001 7.93413 21.3746 5.26598 19.2319 3.34581C17.0892 1.42564 14.2923 0.39939 11.4162 0.478091C8.54005 0.556791 5.8034 1.73445 3.76893 3.76893C1.73445 5.8034 0.556791 8.54005 0.478091 11.4162C0.39939 14.2923 1.42564 17.0892 3.34581 19.2319C5.26598 21.3746 7.93413 22.7001 10.8016 22.936C13.6691 23.1719 16.518 22.3001 18.7625 20.5L23.3625 25.1C23.4787 25.2172 23.617 25.3102 23.7693 25.3736C23.9216 25.4371 24.085 25.4697 24.25 25.4697C24.415 25.4697 24.5784 25.4371 24.7307 25.3736C24.883 25.3102 25.0213 25.2172 25.1375 25.1C25.3628 24.8669 25.4887 24.5554 25.4887 24.2313C25.4887 23.9071 25.3628 23.5956 25.1375 23.3625ZM11.75 20.5C10.0194 20.5 8.32769 19.9868 6.88876 19.0254C5.44983 18.0639 4.32832 16.6973 3.66606 15.0985C3.00379 13.4996 2.83051 11.7403 3.16813 10.043C3.50575 8.34563 4.33911 6.78653 5.56282 5.56282C6.78653 4.33911 8.34563 3.50575 10.043 3.16813C11.7403 2.83051 13.4996 3.00379 15.0985 3.66606C16.6973 4.32832 18.0639 5.44983 19.0254 6.88876C19.9868 8.32769 20.5 10.0194 20.5 11.75C20.5 14.0706 19.5781 16.2962 17.9372 17.9372C16.2962 19.5781 14.0706 20.5 11.75 20.5Z" fill="#595959"/>
+  </svg>
+);
+
+export default Search;

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/molecules/Switch/Switch.stories.tsx

@@ -11,6 +11,7 @@ const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
 
 export const TwoOptions = Template.bind({});
 TwoOptions.args = {
+  onClick: (id) => console.log(id),
   options: [
     { id: "1", name: "One" },
     { id: "2", name: "Two" },
@@ -19,6 +20,7 @@ TwoOptions.args = {
 
 export const ThreeOptions = Template.bind({});
 ThreeOptions.args = {
+  onClick: (id) => console.log(id),
   options: [
     { id: "1", name: "One" },
     { id: "2", name: "Two" },
@@ -28,6 +30,7 @@ ThreeOptions.args = {
 
 export const ThreeWithDisabled = Template.bind({});
 ThreeWithDisabled.args = {
+  onClick: (id) => console.log(id),
   options: [
     { id: "1", name: "One" },
     { id: "2", name: "Two", disabled: true },

package/src/components/molecules/Switch/Switch.tsx

@@ -12,11 +12,13 @@ export interface SwitchProps {
     | [SwitchOption, SwitchOption]
     | [SwitchOption, SwitchOption, SwitchOption];
   active?: SwitchOption["id"];
+  onClick: (id: SwitchOption["id"]) => void;
 }
 
 export const Switch: React.FC<SwitchProps> = ({
   options,
   active: defaultActive,
+  onClick,
 }) => {
   const [active, setActive] = useState(defaultActive);
 
@@ -29,6 +31,7 @@ export const Switch: React.FC<SwitchProps> = ({
     }
 
     setActive(id);
+    onClick(id);
   };
 
   return (

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';