@integrigo/integrigo-ui 1.6.18-b → 1.6.18-d

package/src/components/molecules/IconButton/IconButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { Color } from "../../../styles";
+import { Icon } from "../../atoms";
+import { IconType } from "../../atoms/Icon";
+
+export interface IconButtonProps {
+  size?: "m" | "l";
+  icon: IconType;
+}
+
+const sizeVariant = {
+  m: 36,
+  l: 48,
+};
+
+export const IconButton: React.FC<IconButtonProps> = ({ size = "m", icon }) => {
+  const iconSize = (5 / 9) * sizeVariant[size];
+
+  return (
+    <Root size={size}>
+      <Icon type={icon} width={iconSize} height={iconSize} fill={Color.Orange}/>
+    </Root>
+  );
+};
+
+const Root = styled.button<{ size: "m" | "l" }>`
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(p) => sizeVariant[p.size]}px;
+  height: ${(p) => sizeVariant[p.size]}px;
+  border-radius: calc(${(p) => sizeVariant[p.size]}px / 2);
+  background-color: var(--color-ecru);
+`;

package/src/components/molecules/IconButton/index.ts

@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";

package/src/components/molecules/Profile/__snapshots__/Profile.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Profile /> profile should match snapshot 1`] = `
+<div>
+  <div
+    class="sc-dJjYzT bsksSc"
+  >
+    <img
+      alt="Jane Doe"
+      class="sc-jRQBWg hjrVkd"
+      height="32"
+      src="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"
+      width="32"
+    />
+    <div
+      class="sc-dlVxhl ctocLT"
+    >
+      <span
+        class="sc-hGPBjI kWwFIh"
+      >
+        Jane Doe
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,18 +1,20 @@
+import { FieldProps } from 'formik';
 import React from 'react';
 import styled from 'styled-components';
 import { getValidationTypeProps } from '../../../helpers/validation';
 import { ValidationType } from '../../../types/validation';
+import { fieldSizeVariants } from '../../atoms/Field';
 
-export interface TextAreaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & FieldProps & {
   validationType?: ValidationType;
+  size?: "xl" | "l" | "m" | "s";
 }
 
-export const TextArea: React.FC<TextAreaProps> = (props) => {
-  return <TextAreaElement rows={4} {...props} />;
+export const TextArea: React.FC<TextAreaProps> = ({ field, ...props }) => {
+  return <TextAreaElement rows={4} {...field} {...props} />;
 };
 
-const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
+const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType' | 'size'>>`
   background-color: var(--color-white);
   border: 2px solid var(--shades-of-grey-80);
   border-radius: var(--padding-s);
@@ -21,6 +23,8 @@ const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
   overflow: hidden;
   color: var(--shades-of-grey-100);
   font-weight: var(--font-bold);
+  font-size: ${(p) => fieldSizeVariants[p.size || 'm'].font};
+  padding: ${(p) => fieldSizeVariants[p.size || 'm'].padding};
   transition: border var(--transition-speed),
     background-color var(--transition-speed);
   width: 100%;

package/src/components/molecules/index.ts

@@ -7,4 +7,5 @@ export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
 export { Tile } from './Tile'
-export { Switch } from './Switch'
+export { Switch } from './Switch'
+export { IconButton } from './IconButton'

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

@@ -4,7 +4,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import {
   Column,
-  createColumnHelper,
+  createColumnHelper, Row,
 } from '@tanstack/react-table';
 import { Button, Profile } from '../../molecules';
 
@@ -49,7 +49,7 @@ export const Primary: ComponentStory<typeof Table> = (args) => {
     progress: number
   };
 
-  const personData: Person[] = [
+  const data: Person[] = [
     {
       firstName: 'tanner',
       lastName: 'linsley',
@@ -76,52 +76,52 @@ export const Primary: ComponentStory<typeof Table> = (args) => {
     },
   ];
 
-  const personColumnHelper = createColumnHelper<Person>();
+  const columnHelper = createColumnHelper<Person>();
 
   const personColumns = [
-    personColumnHelper.accessor('firstName', {
+    columnHelper.accessor('firstName', {
       cell: info => info.getValue(),
       footer: info => info.column.id,
     }),
-    personColumnHelper.accessor(row => row.lastName, {
+    columnHelper.accessor(row => row.lastName, {
       id: 'lastName',
       cell: info => info.getValue(),
       header: () => 'Last Name',
       footer: info => info.column.id,
     }),
-    personColumnHelper.accessor('age', {
+    columnHelper.accessor('age', {
       header: () => 'Age',
       cell: info => info.renderValue(),
       footer: info => info.column.id,
     }),
-    personColumnHelper.accessor('visits', {
+    columnHelper.accessor('visits', {
       header: () => 'Visits',
       footer: info => info.column.id,
     }),
-    personColumnHelper.accessor('status', {
+    columnHelper.accessor('status', {
       header: 'Status',
       footer: info => info.column.id,
     }),
-    personColumnHelper.accessor('progress', {
+    columnHelper.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}/>
+    <Table columns={personColumns} data={data} variant={args.variant} textAlign={args.textAlign}/>
   );
 };
 
 export const WithProfile: ComponentStory<typeof Table> = (args) => {
- type DataType = {
+ type Profile = {
    fullName: string;
    points: number;
    avatar: string;
    email: string;
  };
 
- const data: DataType[] = [
+ const data: Profile[] = [
    {
      fullName: 'Tanner Linsley',
      points: 24,
@@ -142,10 +142,10 @@ export const WithProfile: ComponentStory<typeof Table> = (args) => {
    },
  ];
  
- const profileColumnHelper = createColumnHelper<DataType>();
+ const columnHelper = createColumnHelper<Profile>();
 
  const columns = [
-   profileColumnHelper.accessor('fullName', {
+   columnHelper.accessor('fullName', {
      cell: info => {
        return (
         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -162,19 +162,109 @@ export const WithProfile: ComponentStory<typeof Table> = (args) => {
      header: () => 'Team member',
      footer: info => info.column.id,
    }),
-   profileColumnHelper.accessor('points', {
+   columnHelper.accessor('points', {
      header: () => 'Points',
      cell: info => info.renderValue(),
      footer: info => info.column.id,
    }),
-   profileColumnHelper.display({
+   columnHelper.display({
      header: 'Actions',
      id: 'Actions',
      cell: () => <div style={{ width: '30px' }}><Button direction={'ltr'} icon={'edit'} ghost>Edit</Button></div>,
    }),
- ] as Column<DataType>[];
+ ] as Column<Profile>[];
 
  return (
-    <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={"left"}/>
+    <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={'left'}/>
  );
+};
+
+export const ExpandableRows: ComponentStory<typeof Table> = (args) => {
+  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 personColumns = [
+    columnHelper.accessor('firstName', {
+      header: 'First Name',
+      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>[];
+
+  return (
+    <Table
+      columns={personColumns}
+      data={data}
+      variant={args.variant}
+      textAlign={args.textAlign}
+      renderExpandCollapseComponent={(row: Row<Person>) => (
+        <div
+          style={{ cursor: 'pointer' }}
+          onClick={() => row.toggleExpanded()}>
+          Edit
+        </div>
+      )}
+      renderExpandableRowComponent={(row: Row<Person>) => (
+        <div>Hello {row.original.firstName} {row.original.lastName}</div>
+      )}
+    />
+  );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+import { Column, createColumnHelper, Row } from '@tanstack/react-table';
 import { Table } from './Table';
-import { Column, createColumnHelper } from '@tanstack/react-table';
 
 type Person = {
   firstName: string
@@ -43,6 +43,7 @@ const columnHelper = createColumnHelper<Person>();
 
 const columns = [
   columnHelper.accessor('firstName', {
+    header: 'First Name',
     cell: info => info.getValue(),
     footer: info => info.column.id,
   }),
@@ -73,10 +74,77 @@ const columns = [
 
 describe('<Table />', () => {
   it('should render', () => {
-    render(<Table columns={columns} data={data}/>);
+    const { container, getByText } = render(<Table columns={columns} data={data}/>);
+    expect(container.getElementsByTagName('table').length).toEqual(1);
+    expect(container.getElementsByTagName('th').length).toEqual(6);
+    expect(getByText(/First Name/)).toBeInTheDocument();
+    expect(getByText(/Last Name/)).toBeInTheDocument();
+    expect(getByText(/Age/)).toBeInTheDocument();
+    expect(getByText(/Visits/)).toBeInTheDocument();
+    expect(getByText(/Profile Progress/)).toBeInTheDocument();
   });
   it('enabled - should match snapshot', () => {
     const { container } = render(<Table columns={columns} data={data}/>);
     expect(container).toMatchSnapshot();
   });
+  it('expandable rows - should match snapshot',() => {
+    const { container } = render(
+      <Table
+        columns={columns}
+        data={data}
+        renderExpandCollapseComponent={(row: Row<Person>) => (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              console.log('click');
+              row.toggleExpanded();
+            }}
+            data-testid={`expand-button-${row.index}`}
+          >
+            Edit
+          </div>
+        )}
+        renderExpandableRowComponent={(row: Row<Person>) => (
+          <div data-testid={`expand-content-${row.index}`}>Hello {row.original.firstName} {row.original.lastName}</div>
+        )}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it('should render expandable rows', () => {
+    const { container, getByTestId, queryByTestId } = render(
+      <Table
+        columns={columns}
+        data={data}
+        renderExpandCollapseComponent={(row: Row<Person>) => (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => row.toggleExpanded()}
+            data-testid={`expand-button-${row.index}`}
+          >
+            Edit
+          </div>
+        )}
+        renderExpandableRowComponent={(row: Row<Person>) => (
+          <div data-testid={`expand-content-${row.index}`}>Hello {row.original.firstName} {row.original.lastName}</div>
+        )}
+      />,
+    );
+    expect(container.getElementsByTagName('table').length).toEqual(1);
+    expect(container.getElementsByTagName('th').length).toEqual(7);
+    expect(getByTestId(/expand-button-1/)).toBeInTheDocument();
+    expect(queryByTestId(/expand-content-1/)).not.toBeInTheDocument();
+
+    const expandCollapseButton = getByTestId(/expand-button-1/);
+
+    fireEvent.click(expandCollapseButton);
+
+    expect(getByTestId(/expand-content-1/)).toBeInTheDocument();
+
+    // I don't know why, but it does not work when used with the expandCollapseButton above
+    const sameExpandCollapseButton = getByTestId(/expand-button-1/);
+    fireEvent.click(sameExpandCollapseButton);
+
+    expect(queryByTestId(/expand-content-1/)).not.toBeInTheDocument();
+  });
 });

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   Column,
   flexRender,
   getCoreRowModel,
   useReactTable,
+  Row,
 } from '@tanstack/react-table';
 import styled from 'styled-components';
 
@@ -25,7 +26,9 @@ export interface Props <T extends Record<string, unknown>> extends React.TableHT
   data: T[];
   columns: Column<T>[];
   variant?: Variant;
-  textAlign?: Alignment
+  textAlign?: Alignment;
+  renderExpandableRowComponent?: (row: Row<T>) => ReactNode;
+  renderExpandCollapseComponent?: (row: Row<T>) => ReactNode;
 }
 
 export const Table = <T extends Record<string, unknown>>({
@@ -33,12 +36,34 @@ export const Table = <T extends Record<string, unknown>>({
   columns,
   variant = 'primary',
   textAlign = 'center',
+  renderExpandableRowComponent,
+  renderExpandCollapseComponent,
   ...props
 }: Props<T>) => {
 
+  const tableColumns = [
+    ...columns,
+    ...(typeof renderExpandableRowComponent !== 'undefined' && typeof renderExpandCollapseComponent !== 'undefined'
+      ? [
+        {
+          accessorKey: 'expandable-column',
+          header: '',
+          cell: ({ row }: { row: Row<T> }) => {
+            return (
+              <>
+                {renderExpandCollapseComponent(row)}
+              </>
+            );
+          },
+          enableSorting: false,
+        },
+      ]
+      : []),
+  ];
+
   const table = useReactTable({
     data,
-    columns,
+    columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
   });
 
@@ -63,13 +88,22 @@ export const Table = <T extends Record<string, unknown>>({
         </StyledHead>
         <StyledBody textAlign={textAlign}>
           {table.getRowModel().rows.map(row => (
-            <tr key={row.id}>
+            <React.Fragment key={row.id}>
+              <tr>
               {row.getVisibleCells().map(cell => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
               ))}
             </tr>
+            {row.getIsExpanded() && typeof renderExpandableRowComponent !== 'undefined' && (
+              <tr>
+                <td colSpan={tableColumns.length + 1}>
+                  {renderExpandableRowComponent(row)}
+                </td>
+              </tr>
+            )}
+            </React.Fragment>
           ))}
         </StyledBody>
     </StyledTable>
@@ -77,9 +111,7 @@ export const Table = <T extends Record<string, unknown>>({
   );
 };
 
-const StyledTable = styled.table`
-
-`;
+const StyledTable = styled.table``;
 
 StyledTable.displayName = 'StyledTable';
 

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

@@ -5,14 +5,14 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
   <div>
     <table
       cellspacing="0"
-      class="sc-bcXHqe eCGCkv"
+      class="sc-bdvvtL gGYjnV"
     >
       <thead
-        class="sc-gswNZR qcRyf"
+        class="sc-gsDKAQ goIZuE"
       >
         <tr>
           <th>
-            firstName
+            First Name
           </th>
           <th>
             Last Name
@@ -32,7 +32,7 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-dkrFOg jkyDVI"
+        class="sc-dkPtRN eONmCs"
       >
         <tr>
           <td>
@@ -99,3 +99,128 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Table /> expandable rows - should match snapshot 1`] = `
+<div>
+  <div>
+    <table
+      cellspacing="0"
+      class="sc-bdvvtL gGYjnV"
+    >
+      <thead
+        class="sc-gsDKAQ goIZuE"
+      >
+        <tr>
+          <th>
+            First Name
+          </th>
+          <th>
+            Last Name
+          </th>
+          <th>
+            Age
+          </th>
+          <th>
+            Visits
+          </th>
+          <th>
+            Status
+          </th>
+          <th>
+            Profile Progress
+          </th>
+          <th />
+        </tr>
+      </thead>
+      <tbody
+        class="sc-dkPtRN eONmCs"
+      >
+        <tr>
+          <td>
+            tanner
+          </td>
+          <td>
+            linsley
+          </td>
+          <td>
+            24
+          </td>
+          <td>
+            100
+          </td>
+          <td>
+            In Relationship
+          </td>
+          <td>
+            50
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-0"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            tandy
+          </td>
+          <td>
+            miller
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            Single
+          </td>
+          <td>
+            80
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-1"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            joe
+          </td>
+          <td>
+            dirte
+          </td>
+          <td>
+            45
+          </td>
+          <td>
+            20
+          </td>
+          <td>
+            Complicated
+          </td>
+          <td>
+            10
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-2"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;

package/src/index.ts

@@ -12,7 +12,7 @@ export {
   Chip,
   Dot,
   Gradient,
-} from './components/atoms';
+} from "./components/atoms";
 
 export {
   InfoCard,
@@ -25,8 +25,9 @@ export {
   Radio,
   Tile,
   Switch,
-} from './components/molecules';
+  IconButton,
+} from "./components/molecules";
 
-export { Menu, Setting, Modal, Select, Table } from './components/organisms';
+export { Menu, Setting, Modal, Select, Table } from "./components/organisms";
 
-export { GlobalStyles as IntegrigoUI, Color } from './styles';
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";