Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Implement Card Table Component #243

Merged
merged 12 commits into from
Aug 23, 2022
Merged

feat: Implement Card Table Component #243

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9cdb965
Initial commit for card table component.
chadstewart Aug 21, 2022
87924d8
Working on general structure of table and header.
chadstewart Aug 21, 2022
3b96589
Completed header for card table.
chadstewart Aug 21, 2022
b2caf3f
Working on table body
chadstewart Aug 21, 2022
257cd05
Finished card table component.
chadstewart Aug 21, 2022
17b1dab
Renamed card table to contributor table and changed padding for table…
chadstewart Aug 21, 2022
42439c2
Forgot to update padding on copmonent all components.
chadstewart Aug 21, 2022
9d9e6d8
Updated interface in contributor table based on code review.
chadstewart Aug 22, 2022
149c0f6
Forgot to update the story with the changes of the interface.
chadstewart Aug 22, 2022
dd97cbe
Updated alt text for icons. Please note that you need to use title in…
chadstewart Aug 23, 2022
058c5ad
Updating CSS based on code review.
chadstewart Aug 23, 2022
137d22c
Updated react icons to get them to match more closely with one another.
chadstewart Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions components/molecules/ContributorTable/contributor-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import Text from "components/atoms/Typography/text";
import { IconContext } from "react-icons";
import { FaRegDotCircle, FaRegCheckCircle } from "react-icons/fa";
import { BsFileEarmarkDiff, BsFileDiff } from "react-icons/bs";
import { VscGitPullRequest,VscGitPullRequestClosed, VscGitMerge, VscGitPullRequestDraft } from "react-icons/vsc";

interface PRs {
prStatus: string;
prName: string;
item1: string;
item2: string;
item3: number;
item4: number;
chadstewart marked this conversation as resolved.
Show resolved Hide resolved
}

interface CardTableProps {
prList: PRs[];
}

const CardTable = ({ prList }: CardTableProps) => {
return (
prList.length > 0 ?
<>
<div className="flex gap-2 items-center bg-light-slate-3 rounded-md px-2 py-1">
<div className="w-3/5">
<Text>
chadstewart marked this conversation as resolved.
Show resolved Hide resolved
Latest PRs
</Text>
</div>
<IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
<div className="flex justify-end w-[calc(10%-4px)]">
<FaRegDotCircle />
</div>
</IconContext.Provider>
<IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
<div className="flex justify-end w-[calc(10%-4px)]">
<FaRegCheckCircle />
</div>
</IconContext.Provider>
<IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
<div className="flex justify-end w-[calc(10%-4px)]">
<BsFileEarmarkDiff />
eryc-cc marked this conversation as resolved.
Show resolved Hide resolved
</div>
</IconContext.Provider>
<IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
<div className="flex justify-end w-[calc(10%-4px)]">
<BsFileDiff />
</div>
</IconContext.Provider>
</div>
{prList.map(({prName, prStatus, item1, item2, item3, item4}, index) =>
<div key={index} className="flex gap-2 items-center px-2 py-1">
<div className="flex item-center gap-2 w-3/5">
{prStatus === "open" ?
<IconContext.Provider value={{ color: "green", style: { width: 14, height: 14, marginTop: 2 } }}>
<VscGitPullRequest/>
</IconContext.Provider>

:

prStatus === "closed" ?
<IconContext.Provider value={{ color: "red", style: { width: 14, height: 14, marginTop: 2 } }}>
<VscGitPullRequestClosed />
</IconContext.Provider>

:

prStatus === "merged" ?
<IconContext.Provider value={{ color: "purple", style: { width: 14, height: 14, marginTop: 2 } }}>
<VscGitMerge />
</IconContext.Provider>

:

<IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, marginTop: 2 } }}>
<VscGitPullRequestDraft />
</IconContext.Provider>
}
<Text>
{item1}
</Text>
<Text className="!text-light-slate-12 !font-medium">
{prName}
</Text>
</div>
<div className="flex justify-end w-[calc(10%-4px)]">
chadstewart marked this conversation as resolved.
Show resolved Hide resolved
{item1}
</div>
<div className="flex justify-end w-[calc(10%-4px)]">
{item2}
</div>
<div className="flex justify-end w-[calc(10%-4px)]">
{item3}
</div>
<div className="flex justify-end w-[calc(10%-4px)]">
{item4}
</div>
</div>
)}
</>

:

<div className="px-2 py-1">
There are currently no PRs...
</div>
);
};

export default CardTable;
59 changes: 59 additions & 0 deletions stories/molecules/contributor-table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import ContributorTable from "components/molecules/ContributorTable/contributor-table";

const storyConfig = {
title: "Design System/Molecules/Contributor Table",
component: "Card Table"
};

export default storyConfig;

const testPRs = [
{
prName: "Merging some work",
prStatus: "merged",
item1: "2mo",
item2: "2mo",
item3: 13,
item4: 837
},
{
prName: "Merging some work",
prStatus: "closed",
item1: "2mo",
item2: "2mo",
item3: 13,
item4: 837
},
{
prName: "Merging some work",
prStatus: "open",
item1: "2mo",
item2: "2mo",
item3: 13,
item4: 837
},
{
prName: "Merging some work",
prStatus: "draft",
item1: "2mo",
item2: "2mo",
item3: 13,
item4: 837
}
];

//CardTable Template
const ContributorTableTemplate: ComponentStory<typeof ContributorTable> = (args) => <ContributorTable {...args} />;

export const AddedPullRequests = ContributorTableTemplate.bind({});
export const NoPullRequests = ContributorTableTemplate.bind({});

AddedPullRequests.args = {
prList: testPRs
};

NoPullRequests.args = {
prList: []
};