fix: state group icon (#2072)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
4559a1bd5d
commit
9d9c1a86bf
13 changed files with 43 additions and 20 deletions
23
space/components/icons/state-group/backlog-state-icon.tsx
Normal file
23
space/components/icons/state-group/backlog-state-icon.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
// types
|
||||
import type { Props } from "../types";
|
||||
// constants
|
||||
import { issueGroupColors } from "constants/data";
|
||||
|
||||
export const BacklogStateIcon: React.FC<Props> = ({
|
||||
width = "14",
|
||||
height = "14",
|
||||
className,
|
||||
color = issueGroupColors["backlog"],
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
|
||||
</svg>
|
||||
);
|
||||
74
space/components/icons/state-group/cancelled-state-icon.tsx
Normal file
74
space/components/icons/state-group/cancelled-state-icon.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React from "react";
|
||||
// types
|
||||
import type { Props } from "../types";
|
||||
// constants
|
||||
import { issueGroupColors } from "constants/data";
|
||||
|
||||
export const CancelledStateIcon: React.FC<Props> = ({
|
||||
width = "14",
|
||||
height = "14",
|
||||
className,
|
||||
color = issueGroupColors["cancelled"],
|
||||
}) => (
|
||||
<svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
|
||||
/>
|
||||
<circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
|
||||
<path
|
||||
className="cls-3"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke="#ffffff"
|
||||
strokeLinecap="square"
|
||||
strokeMiterlimit={10}
|
||||
d="M32.64,32.44q9.54,9.75,19.09,19.48"
|
||||
/>
|
||||
<path
|
||||
className="cls-3"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke="#ffffff"
|
||||
strokeLinecap="square"
|
||||
strokeMiterlimit={10}
|
||||
d="M32.64,51.92,51.73,32.44"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
65
space/components/icons/state-group/completed-state-icon.tsx
Normal file
65
space/components/icons/state-group/completed-state-icon.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import React from "react";
|
||||
// types
|
||||
import type { Props } from "../types";
|
||||
// constants
|
||||
import { issueGroupColors } from "constants/data";
|
||||
|
||||
export const CompletedStateIcon: React.FC<Props> = ({
|
||||
width = "14",
|
||||
height = "14",
|
||||
className,
|
||||
color = issueGroupColors["completed"],
|
||||
}) => (
|
||||
<svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
|
||||
/>
|
||||
<circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
|
||||
<path
|
||||
className="cls-3"
|
||||
fill="none"
|
||||
strokeWidth={3}
|
||||
stroke="#ffffff"
|
||||
strokeLinecap="square"
|
||||
strokeMiterlimit={10}
|
||||
d="M30.45,43.75l6.61,6.61L53.92,34"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
6
space/components/icons/state-group/index.ts
Normal file
6
space/components/icons/state-group/index.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export * from "./backlog-state-icon";
|
||||
export * from "./cancelled-state-icon";
|
||||
export * from "./completed-state-icon";
|
||||
export * from "./started-state-icon";
|
||||
export * from "./state-group-icon";
|
||||
export * from "./unstarted-state-icon";
|
||||
73
space/components/icons/state-group/started-state-icon.tsx
Normal file
73
space/components/icons/state-group/started-state-icon.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React from "react";
|
||||
// types
|
||||
import type { Props } from "../types";
|
||||
// constants
|
||||
import { issueGroupColors } from "constants/data";
|
||||
|
||||
export const StartedStateIcon: React.FC<Props> = ({
|
||||
width = "14",
|
||||
height = "14",
|
||||
className,
|
||||
color = issueGroupColors["started"],
|
||||
}) => (
|
||||
<svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.36 83.36">
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
|
||||
/>
|
||||
<path
|
||||
className="cls-2"
|
||||
fill={color}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-2"
|
||||
fill={color}
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
29
space/components/icons/state-group/state-group-icon.tsx
Normal file
29
space/components/icons/state-group/state-group-icon.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// icons
|
||||
import {
|
||||
BacklogStateIcon,
|
||||
CancelledStateIcon,
|
||||
CompletedStateIcon,
|
||||
StartedStateIcon,
|
||||
UnstartedStateIcon,
|
||||
} from "components/icons";
|
||||
import { TIssueGroupKey } from "types/issue";
|
||||
|
||||
type Props = {
|
||||
stateGroup: TIssueGroupKey;
|
||||
color: string;
|
||||
className?: string;
|
||||
height?: string;
|
||||
width?: string;
|
||||
};
|
||||
|
||||
export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
|
||||
if (stateGroup === "backlog")
|
||||
return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
|
||||
else if (stateGroup === "cancelled")
|
||||
return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
|
||||
else if (stateGroup === "completed")
|
||||
return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
|
||||
else if (stateGroup === "started")
|
||||
return <StartedStateIcon className={className} color={color} height={height} width={width} />;
|
||||
else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
|
||||
};
|
||||
55
space/components/icons/state-group/unstarted-state-icon.tsx
Normal file
55
space/components/icons/state-group/unstarted-state-icon.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React from "react";
|
||||
// types
|
||||
import type { Props } from "../types";
|
||||
// constants
|
||||
import { issueGroupColors } from "constants/data";
|
||||
|
||||
export const UnstartedStateIcon: React.FC<Props> = ({
|
||||
width = "14",
|
||||
height = "14",
|
||||
className,
|
||||
color = issueGroupColors["unstarted"],
|
||||
}) => (
|
||||
<svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue