Merge pull request #19 from taraldefi/feat/tables

Feat/tables

src/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { Plus } from 'react-feather';
 import Button from './Button';
 
@@ -9,40 +9,40 @@ export default {
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' }
-  }
-} as ComponentMeta<typeof Button>;
+    backgroundColor: { control: 'color' },
+  },
+} as Meta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
   backgroundColor: '#1ab98b',
-  label: 'New Application'
+  label: 'New Application',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'New Entity'
+  label: 'New Entity',
 };
 
 export const WithIcon = Template.bind({});
 WithIcon.args = {
   label: 'Add',
-  icon: <Plus size="15px"></Plus>
+  icon: <Plus size="15px"></Plus>,
 };
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
-  label: 'Button'
+  label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  label: 'Button'
+  label: 'Button',
 };

src/Entity/Entity.stories.tsx

@@ -1,13 +1,13 @@
 // Generated with util/create-component.js
-import { ComponentStory } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import { Entity } from './Entity';
 
 export default {
-  title: 'Entity'
+  title: 'Entity',
 };
 
-const Template: ComponentStory<typeof Entity> = (args) => <Entity {...args} />;
+const Template: StoryFn<typeof Entity> = (args) => <Entity {...args} />;
 
 export const EntityCard = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
@@ -17,9 +17,9 @@ const data = {
   title: 'Ullrich Weigel',
   registrationNo: 1,
   products: 25,
-  applications: 25
+  applications: 25,
 };
 
 EntityCard.args = {
-  entityData: data
+  entityData: data,
 };

src/LoanCard/LoanCard.stories.tsx

@@ -1,8 +1,7 @@
 // Generated with util/create-component.js
 import React from 'react';
-import { SmallLoanCard, LargeLoanCard, PaymentSuccessCard } from './LoanCard';
+import { LargeLoanCard, PaymentSuccessCard, SmallLoanCard } from './LoanCard';
 import { LoanCardTypes } from './LoanCard.types';
-import { date } from '@storybook/addon-knobs';
 
 export default {
   title: 'LoanCard',

src/Modals/Modals.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
 import { DeleteModal } from './Modals';
 
 export default {
@@ -9,8 +8,8 @@ export default {
   argTypes: {
     title: 'string',
     isOpen: { control: 'boolean' },
-    onClose: { action: 'onClose' }
-  }
+    onClose: { action: 'onClose' },
+  },
 };
 
 const Template = (args) => <DeleteModal {...args}></DeleteModal>;
@@ -19,5 +18,5 @@ export const deleteModal = Template.bind({});
 deleteModal.args = {
   title: 'delete entity name',
   isOpen: true,
-  onClose: action('onClose')
+  onClose: action('onClose'),
 };

src/PoolCard/PoolCard.stories.tsx

@@ -1,28 +1,24 @@
 // Generated with util/create-component.js
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-import PoolCard from "./PoolCard";
-
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import PoolCard from './PoolCard';
 
 export default {
-  title: "Pool Card",
+  title: 'Pool Card',
   component: PoolCard,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {},
-} as ComponentMeta<typeof PoolCard>;
+} as Meta<typeof PoolCard>;
 
-const Template: ComponentStory<typeof PoolCard> = (args) => (
-  <PoolCard {...args} />
-);
+const Template: StoryFn<typeof PoolCard> = (args) => <PoolCard {...args} />;
 
 export const Card = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Card.args = {
-  poolTitle: "Cauris Fund #4: Africa Innovation Pool",
-  poolDescription: "Fintech loans in Africa",
+  poolTitle: 'Cauris Fund #4: Africa Innovation Pool',
+  poolDescription: 'Fintech loans in Africa',
   unitranche: true,
-  poolStat: "12.15% USDC",
-  poolSubstat: "19.28% with GFI",
-  poolState: "yield",
-
+  poolStat: '12.15% USDC',
+  poolSubstat: '19.28% with GFI',
+  poolState: 'yield',
 };

src/Table/Table.scss

@@ -115,8 +115,6 @@
     }
   }
   .activity {
-    height: 70px;
-    display: flex;
     align-items: center;
 
     :nth-child(1) {
@@ -264,3 +262,52 @@
     }
   }
 }
+
+.task--box {
+  font-family: 'inter', sans-serif;
+  margin-bottom: 16px;
+  margin-top: 40px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bolder;
+    color: #64748b;
+    font-size: 14px;
+  }
+  .button--secondary {
+    padding: 10px 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #64748b;
+    height: 34px;
+  }
+}
+
+.active {
+  height: 250px;
+}
+
+.task--list {
+  padding-left: 24px;
+  display: flex;
+  justify-content: center;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+
+  :nth-child(1) {
+    font-weight: bolder;
+    font-size: 14px;
+  }
+
+  :nth-child(2) {
+    font-size: 13px;
+    color: #475569;
+  }
+}

src/Table/Table.stories.tsx

@@ -2,29 +2,33 @@
 import React from 'react';
 import {
   ApplicationTable,
+  AuditTable,
   CompanyTable,
-  SignOffTable,
   EntityTable,
+  OverviewTable,
   PersonsTable,
-  ResearchTable,
-  ScreeningTable,
   ReceiptTable,
   RepaymentTable,
-  OverviewTable,
-  AuditTable,
+  ResearchTable,
+  ScreeningTable,
+  SignOffTable,
+  TaskTable,
+  TeamTable,
 } from './Table';
 import {
   ApplicationTableData,
+  AuditTableData,
   CompanyTableData,
   EntityTableData,
-  ScreeningTableData,
+  OverviewTableData,
   PersonsTableData,
-  ResearchTableData,
-  SignoffTabelData,
   ReceiptTableData,
   RepaymentTableData,
-  OverviewTableData,
-  AuditTableData,
+  ResearchTableData,
+  ScreeningTableData,
+  SignoffTabelData,
+  TaskTableData,
+  TeamTableData,
 } from './data/data';
 export default {
   title: 'Table',
@@ -68,3 +72,11 @@ export const overview = () => (
 );
 
 export const audit = () => <AuditTable auditTableData={AuditTableData} />;
+
+export const task = () => (
+  <TaskTable taskTableData={TaskTableData} value={TaskTableData.length} />
+);
+
+export const team = () => (
+  <TeamTable teamTableData={TeamTableData} value={TeamTableData.length} />
+);