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

feat: add operation icon component #708

Merged
merged 4 commits into from
Jul 1, 2023
Merged

feat: add operation icon component #708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d02c281
feat: initial draft for operation icon
princerajpoot20 Jul 1, 2023
1061258
fix: made changes
princerajpoot20 Jul 1, 2023
ad9f321
fix: changed location of OperationIcon and restrictthe values.
princerajpoot20 Jul 1, 2023
db8bbb1
fix: remove title
princerajpoot20 Jul 1, 2023
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
9 changes: 9 additions & 0 deletions apps/design-system/src/components/OperationIcon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { OperationIcon } from 'ui';
fmvilas marked this conversation as resolved.
Show resolved Hide resolved

export default {
component: OperationIcon,
};

export const WithReplyIcon = () => <OperationIcon operation="reply" className="w-7 h-7" />;
export const ReceiveIcon = () => <OperationIcon operation="receive" className="w-7 h-7" />;
export const SendIcon = () => <OperationIcon operation="send" className="w-7 h-7" />;
31 changes: 31 additions & 0 deletions packages/ui/components/OperationIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { FunctionComponent, SVGProps } from "react";

fmvilas marked this conversation as resolved.
Show resolved Hide resolved
interface IconProps extends SVGProps<SVGSVGElement> {
operation: 'send' | 'receive' | 'reply';
}

export const OperationIcon: FunctionComponent<IconProps> = ({ operation, className = "w-7 h-7", ...props }) => {
switch (operation) {
case "send":
return (
<svg {...props} className={className} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="3" fill="#E0F2FE" />
<path d="M8.375 19.625L19.625 8.375M19.625 8.375L11.1875 8.375M19.625 8.375V16.8125" stroke="#075985" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
case "receive":
return (
<svg {...props} className={className} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="3" fill="#ECFCCB" />
<path d="M19.625 8.375L8.375 19.625M8.375 19.625L16.8125 19.625M8.375 19.625L8.375 11.1875" stroke="#3F6212" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
case "reply":
return (
<svg {...props} className={className} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="3" fill="#EDE9FE" />
<path d="M11.75 11.75L7.25 16.25M7.25 16.25L11.75 20.75M7.25 16.25H16.25C18.7353 16.25 20.75 14.2353 20.75 11.75C20.75 9.26472 18.7353 7.25 16.25 7.25H14" stroke="#5B21B6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
};
1 change: 1 addition & 0 deletions packages/ui/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import "./styles.css"
export * from "./DropdownMenu"
export * from "./Logo"
export * from "./Modal"
export * from "./OperationIcon"
export * from "./Sidebar"
export * from "./Toolbar"
export { default as Tooltip } from "./Tooltip"