-
-
Notifications
You must be signed in to change notification settings - Fork 230
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
PullRequestSocialCard component to design system (#774)
Closes #716
- Loading branch information
Showing
6 changed files
with
152 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
components/molecules/PullRequestSocialCard/pull-request-social-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { IconContext } from "react-icons"; | ||
| import { VscGitPullRequest } from "react-icons/vsc"; | ||
| import { FaRegCommentAlt } from "react-icons/fa"; | ||
|
|
||
| import CardHorizontalBarChart, { LanguageObject } from "../CardHorizontalBarChart/card-horizontal-bar-chart"; | ||
| import Text from "components/atoms/Typography/text"; | ||
| import Avatar from "components/atoms/Avatar/avatar"; | ||
|
|
||
| interface PullRequestSocialCardProps { | ||
| orgName: string; | ||
| repoName: string; | ||
| languageList: LanguageObject[]; | ||
| prTicketId: string; | ||
| prTitle: string; | ||
| commentsCount?: number; | ||
| avatar?: string; | ||
| linesAdded?: number; | ||
| linesRemoved?: number; | ||
| } | ||
| const PullRequestSocialCard = ({ | ||
| orgName, | ||
| repoName, | ||
| prTitle, | ||
| avatar, | ||
| languageList, | ||
| prTicketId, | ||
| commentsCount, | ||
| linesAdded, | ||
| linesRemoved | ||
| }: PullRequestSocialCardProps) => { | ||
| return ( | ||
| <div className="w-[26.375rem] cursor-pointer border rounded-xl px-5 py-4"> | ||
| <div className="flex gap-2 items-center "> | ||
| <Avatar alt="" avatarURL={avatar} initials="" size="sm" /> | ||
| <Text className="!text-sm !text-light-slate-11"> | ||
| {orgName}/<span className="text-light-slate-11">{repoName}</span> | ||
| </Text> | ||
| </div> | ||
| <div className="flex gap-2 items-start mt-2"> | ||
| <IconContext.Provider value={{ color: "green", style: { width: 18, height: 18, marginTop: 4 } }}> | ||
| <VscGitPullRequest title="Open Pull Request" /> | ||
| </IconContext.Provider> | ||
| <Text className="!text-lg "> | ||
| <span className="text-light-slate-10 ">{prTicketId}</span> {prTitle} | ||
| </Text> | ||
| </div> | ||
|
|
||
| {/* Language list section */} | ||
| <div className="mt-6"> | ||
| <CardHorizontalBarChart withDescription={false} languageList={languageList} /> | ||
| </div> | ||
|
|
||
| <div className="flex items-center gap-5 text-light-slate-10 mt-3"> | ||
| <div className="flex justify-between gap-2"> | ||
| <span title="lines added" className="text-green-600"> | ||
| +{linesAdded || 0} | ||
| </span> | ||
|
|
||
| <span title="lines removed" className="text-red-600"> | ||
| -{linesRemoved || 0} | ||
| </span> | ||
| </div> | ||
| <div className="flex gap-0.5"> | ||
| <div className="w-3 h-3 bg-green-600 rounded"></div> | ||
| <div className="w-3 h-3 bg-green-600 rounded"></div> | ||
| <div className="w-3 h-3 bg-green-600 rounded"></div> | ||
| <div className="w-3 h-3 bg-green-600 rounded"></div> | ||
| <div className="w-3 h-3 bg-light-slate-8 rounded"></div> | ||
| </div> | ||
| {commentsCount && ( | ||
| <div className="flex text-light-slate-10 items-center gap-2"> | ||
| {`${commentsCount} comment${commentsCount > 1 ? "s" : ""}`} <FaRegCommentAlt size={16} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PullRequestSocialCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { ComponentStory } from "@storybook/react"; | ||
| import PullRequestSocialCard from "components/molecules/PullRequestSocialCard/pull-request-social-card"; | ||
| import { testLanguageList } from "./card-horizontal-bar.stories"; | ||
| import { TooltipProvider } from "@radix-ui/react-tooltip"; | ||
|
|
||
| const StoryConfig = { | ||
| title: "Design System/Molecules/PullRequestSocialCard" | ||
| }; | ||
| export default StoryConfig; | ||
|
|
||
| const PullRequestSocialCardTemplate: ComponentStory<typeof PullRequestSocialCard> = (args) => ( | ||
| <TooltipProvider> | ||
| <PullRequestSocialCard {...args} /> | ||
| </TooltipProvider> | ||
| ); | ||
|
|
||
| export const PullRequestSocialCardStory = PullRequestSocialCardTemplate.bind({}); | ||
|
|
||
| PullRequestSocialCardStory.args = { | ||
| prTitle: "Add support for Swift Package Manager", | ||
| orgName: "open-sauced", | ||
| repoName: "insights", | ||
| avatar: | ||
| "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80", | ||
|
|
||
| languageList: testLanguageList, | ||
| prTicketId: "#223", | ||
| commentsCount: 5, | ||
| linesAdded: 12, | ||
| linesRemoved: 4 | ||
| }; |