binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5188 | WEB-5190] chore: layout and properties icon revamp (#7980)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-24 19:53:36 +05:30 • committed by GitHub
parent 33b6405695
commit d71dfe8f86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
115 changed files with 1362 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -102,5 +102,6 @@ dev-editor
storybook-static
CLAUDE.md
AGENTS.md
temp/
temp/

4
apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { observer } from "mobx-react";
import { CalendarCheck2 } from "lucide-react";
import { DueDatePropertyIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// helpers
@ -33,7 +33,7 @@ export const IssueBlockDate = observer((props: Props) => {
"border-[0.5px] border-custom-border-300": shouldShowBorder,
})}
>
<CalendarCheck2 className="size-3 flex-shrink-0" />
<DueDatePropertyIcon className="size-3 flex-shrink-0" />
{formattedDate ? formattedDate : "No Date"}
</div>
</Tooltip>

4
apps/space/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { observer } from "mobx-react";
import { Tags } from "lucide-react";
import { LabelPropertyIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
// hooks
@ -25,7 +25,7 @@ export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }:
<div
className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-custom-border-300`}
>
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
<LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
{shouldShowLabel && <span>No Labels</span>}
</div>
</Tooltip>

8
apps/space/core/components/issues/issue-layouts/properties/member.tsx
View file

@ -3,7 +3,7 @@
import { observer } from "mobx-react";
// icons
import type { LucideIcon } from "lucide-react";
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// plane ui
import { Avatar, AvatarGroup } from "@plane/ui";
// plane utils
@ -49,7 +49,11 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props: AvatarProps
}
}
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 mx-[4px] flex-shrink-0" />;
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<MembersPropertyIcon className="h-3 w-3 mx-[4px] flex-shrink-0" />
);
});
export const IssueBlockMembers = observer(({ memberIds, shouldShowBorder = true }: Props) => {

19
apps/space/core/components/issues/navbar/layout-icon.tsx
View file

@ -1,13 +1,22 @@
import type { LucideProps } from "lucide-react";
import { List, Kanban } from "lucide-react";
import type { TIssueLayout } from "@plane/constants";
import { ListLayoutIcon, BoardLayoutIcon } from "@plane/propel/icons";
import type { ISvgIcons } from "@plane/propel/icons";
export const IssueLayoutIcon = ({
layout,
size,
...props
}: { layout: TIssueLayout; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
const iconProps = {
...props,
...(size && { width: size, height: size }),
};
export const IssueLayoutIcon = ({ layout, ...props }: { layout: TIssueLayout } & LucideProps) => {
switch (layout) {
case "list":
return <List {...props} />;
return <ListLayoutIcon {...iconProps} />;
case "kanban":
return <Kanban {...props} />;
return <BoardLayoutIcon {...iconProps} />;
default:
return null;
}

11
apps/space/core/components/issues/peek-overview/issue-properties.tsx
View file

@ -2,10 +2,9 @@
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { CalendarCheck2, Signal } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon, StateGroupIcon } from "@plane/propel/icons";
import { StatePropertyIcon, StateGroupIcon, PriorityPropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { cn, getIssuePriorityFilters } from "@plane/utils";
// components
@ -66,7 +65,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
<div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<DoubleCircleIcon className="size-4 flex-shrink-0" />
<StatePropertyIcon className="size-4 flex-shrink-0" />
<span>State</span>
</div>
<div className="w-3/4 flex items-center gap-1.5 py-0.5 text-sm">
@ -77,7 +76,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<Signal className="size-4 flex-shrink-0" />
<PriorityPropertyIcon className="size-4 flex-shrink-0" />
<span>Priority</span>
</div>
<div className="w-3/4">
@ -106,7 +105,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<CalendarCheck2 className="size-4 flex-shrink-0" />
<DueDatePropertyIcon className="size-4 flex-shrink-0" />
<span>Due date</span>
</div>
<div>
@ -116,7 +115,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
"text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
})}
>
<CalendarCheck2 className="size-3" />
<DueDatePropertyIcon className="size-3" />
{renderFormattedDate(issueDetails.target_date)}
</div>
) : (

9
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
View file

@ -4,10 +4,11 @@ import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -21,9 +22,9 @@ import { useIssues } from "@/hooks/store/use-issues";
import { useProject } from "@/hooks/store/use-project";
const SUPPORTED_LAYOUTS = [
{ key: "list", titleTranslationKey: "issue.layouts.list", icon: List },
{ key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: Kanban },
{ key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: Calendar },
{ key: "list", titleTranslationKey: "issue.layouts.list", icon: ListLayoutIcon },
{ key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: BoardLayoutIcon },
{ key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarLayoutIcon },
];
export const CycleIssuesMobileHeader = observer(() => {

15
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
View file

@ -1,9 +1,10 @@
"use client";
import type React from "react";
import { observer } from "mobx-react";
// ui
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ISvgIcons } from "@plane/propel/icons";
import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
// plane package imports
import type { TCycleLayoutOptions } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -13,22 +14,22 @@ import { useProject } from "@/hooks/store/use-project";
const CYCLE_VIEW_LAYOUTS: {
key: TCycleLayoutOptions;
icon: LucideIcon;
icon: React.FC<ISvgIcons>;
title: string;
}[] = [
{
key: "list",
icon: List,
icon: ListLayoutIcon,
title: "List layout",
},
{
key: "board",
icon: LayoutGrid,
icon: GridLayoutIcon,
title: "Gallery layout",
},
{
key: "gantt",
icon: GanttChartSquare,
icon: TimelineLayoutIcon,
title: "Timeline layout",
},
];
@ -45,7 +46,7 @@ export const CyclesListMobileHeader = observer(() => {
// placement="bottom-start"
customButton={
<span className="flex items-center gap-2">
<List className="h-4 w-4" />
<ListLayoutIcon className="h-4 w-4" />
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
</span>
}

9
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
View file

@ -4,10 +4,11 @@ import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -21,9 +22,9 @@ import { useModule } from "@/hooks/store/use-module";
import { useProject } from "@/hooks/store/use-project";
const SUPPORTED_LAYOUTS = [
{ key: "list", i18n_title: "issue.layouts.list", icon: List },
{ key: "kanban", i18n_title: "issue.layouts.kanban", icon: Kanban },
{ key: "calendar", i18n_title: "issue.layouts.calendar", icon: Calendar },
{ key: "list", i18n_title: "issue.layouts.list", icon: ListLayoutIcon },
{ key: "kanban", i18n_title: "issue.layouts.kanban", icon: BoardLayoutIcon },
{ key: "calendar", i18n_title: "issue.layouts.calendar", icon: CalendarLayoutIcon },
];
export const ModuleIssuesMobileHeader = observer(() => {

39
apps/web/ce/components/issues/issue-layouts/utils.tsx
View file

@ -1,19 +1,18 @@
import type { FC } from "react";
import {
CalendarCheck2,
CalendarClock,
CalendarDays,
LayersIcon,
Link2,
Paperclip,
Signal,
Tag,
Triangle,
Users,
} from "lucide-react";
import { CalendarDays, LayersIcon, Link2, Paperclip } from "lucide-react";
// types
import type { ISvgIcons } from "@plane/propel/icons";
import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import {
CycleIcon,
StatePropertyIcon,
ModuleIcon,
MembersPropertyIcon,
DueDatePropertyIcon,
EstimatePropertyIcon,
LabelPropertyIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
} from "@plane/propel/icons";
import type { IGroupByColumn, IIssueDisplayProperties, TGetColumns, TSpreadsheetColumn } from "@plane/types";
// components
import {
@ -66,16 +65,16 @@ export const getScopeMemberIds = ({ isWorkspaceLevel, projectId }: TGetColumns):
export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;
export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
Users: Users,
MembersPropertyIcon: MembersPropertyIcon,
CalenderDays: CalendarDays,
CalenderCheck2: CalendarCheck2,
Triangle: Triangle,
Tag: Tag,
DueDatePropertyIcon: DueDatePropertyIcon,
EstimatePropertyIcon: EstimatePropertyIcon,
LabelPropertyIcon: LabelPropertyIcon,
ModuleIcon: ModuleIcon,
ContrastIcon: CycleIcon,
Signal: Signal,
CalendarClock: CalendarClock,
DoubleCircleIcon: DoubleCircleIcon,
PriorityPropertyIcon: PriorityPropertyIcon,
StartDatePropertyIcon: StartDatePropertyIcon,
StatePropertyIcon: StatePropertyIcon,
Link2: Link2,
Paperclip: Paperclip,
LayersIcon: LayersIcon,

6
apps/web/ce/components/relations/index.tsx
View file

@ -1,5 +1,5 @@
import { CircleDot, CopyPlus, XCircle } from "lucide-react";
import { RelatedIcon } from "@plane/propel/icons";
import { CircleDot, XCircle } from "lucide-react";
import { RelatedIcon, DuplicatePropertyIcon } from "@plane/propel/icons";
import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
import type { TIssueRelationTypes } from "../../types";
@ -17,7 +17,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
key: "duplicate",
i18n_label: "issue.relation.duplicate",
className: "bg-custom-background-80 text-custom-text-200",
icon: (size) => <CopyPlus size={size} className="text-custom-text-200" />,
icon: (size) => <DuplicatePropertyIcon width={size} height={size} className="text-custom-text-200" />,
placeholder: "None",
},
blocked_by: {

38
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
View file

@ -1,23 +1,19 @@
import { useCallback, useMemo } from "react";
import {
AtSign,
Briefcase,
Calendar,
CalendarCheck2,
CalendarClock,
CircleUserRound,
SignalHigh,
Tag,
Users,
} from "lucide-react";
import { AtSign, Briefcase, Calendar } from "lucide-react";
// plane imports
import {
CycleGroupIcon,
CycleIcon,
ModuleIcon,
DoubleCircleIcon,
StatePropertyIcon,
PriorityIcon,
StateGroupIcon,
MembersPropertyIcon,
LabelPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
UserCirclePropertyIcon,
PriorityPropertyIcon,
} from "@plane/propel/icons";
import type {
ICycle,
@ -149,7 +145,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getStateGroupFilterConfig<TWorkItemFilterProperty>("state_group")({
isEnabled: isFilterEnabled("state_group"),
filterIcon: DoubleCircleIcon,
filterIcon: StatePropertyIcon,
getOptionIcon: (stateGroupKey) => <StateGroupIcon stateGroup={stateGroupKey} />,
...operatorConfigs,
}),
@ -161,7 +157,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getStateFilterConfig<TWorkItemFilterProperty>("state_id")({
isEnabled: isFilterEnabled("state_id") && workItemStates !== undefined,
filterIcon: DoubleCircleIcon,
filterIcon: StatePropertyIcon,
getOptionIcon: (state) => <StateGroupIcon stateGroup={state.group} color={state.color} />,
states: workItemStates ?? [],
...operatorConfigs,
@ -174,7 +170,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getLabelFilterConfig<TWorkItemFilterProperty>("label_id")({
isEnabled: isFilterEnabled("label_id") && workItemLabels !== undefined,
filterIcon: Tag,
filterIcon: LabelPropertyIcon,
labels: workItemLabels ?? [],
getOptionIcon: (color) => (
<span className="flex flex-shrink-0 size-2.5 rounded-full" style={{ backgroundColor: color }} />
@ -215,7 +211,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getAssigneeFilterConfig<TWorkItemFilterProperty>("assignee_id")({
isEnabled: isFilterEnabled("assignee_id") && members !== undefined,
filterIcon: Users,
filterIcon: MembersPropertyIcon,
members: members ?? [],
getOptionIcon: (memberDetails) => (
<Avatar
@ -255,7 +251,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getCreatedByFilterConfig<TWorkItemFilterProperty>("created_by_id")({
isEnabled: isFilterEnabled("created_by_id") && members !== undefined,
filterIcon: CircleUserRound,
filterIcon: UserCirclePropertyIcon,
members: members ?? [],
getOptionIcon: (memberDetails) => (
<Avatar
@ -275,7 +271,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getSubscriberFilterConfig<TWorkItemFilterProperty>("subscriber_id")({
isEnabled: isFilterEnabled("subscriber_id") && members !== undefined,
filterIcon: Users,
filterIcon: MembersPropertyIcon,
members: members ?? [],
getOptionIcon: (memberDetails) => (
<Avatar
@ -295,7 +291,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getPriorityFilterConfig<TWorkItemFilterProperty>("priority")({
isEnabled: isFilterEnabled("priority"),
filterIcon: SignalHigh,
filterIcon: PriorityPropertyIcon,
getOptionIcon: (priority) => <PriorityIcon priority={priority} />,
...operatorConfigs,
}),
@ -307,7 +303,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getStartDateFilterConfig<TWorkItemFilterProperty>("start_date")({
isEnabled: true,
filterIcon: CalendarClock,
filterIcon: StartDatePropertyIcon,
...operatorConfigs,
}),
[operatorConfigs]
@ -318,7 +314,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() =>
getTargetDateFilterConfig<TWorkItemFilterProperty>("target_date")({
isEnabled: true,
filterIcon: CalendarCheck2,
filterIcon: DueDatePropertyIcon,
...operatorConfigs,
}),
[operatorConfigs]

4
apps/web/core/components/automation/auto-close-automation.tsx
View file

@ -15,7 +15,7 @@ import {
PROJECT_SETTINGS_TRACKER_EVENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon, DoubleCircleIcon } from "@plane/propel/icons";
import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
import type { IProject } from "@plane/types";
// ui
import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
@ -188,7 +188,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
size={EIconSize.LG}
/>
) : (
<DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
<StatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />
)}
{selectedOption?.name
? selectedOption.name

10
apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
View file

@ -3,8 +3,8 @@
import { Command } from "cmdk";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
import { DoubleCircleIcon } from "@plane/propel/icons";
import { LinkIcon, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
import { StatePropertyIcon, PriorityPropertyIcon, MembersPropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssue } from "@plane/types";
import { EIssueServiceType } from "@plane/types";
@ -90,7 +90,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<DoubleCircleIcon className="h-3.5 w-3.5" />
<StatePropertyIcon className="h-3.5 w-3.5" />
Change state...
</div>
</Command.Item>
@ -103,7 +103,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<Signal className="h-3.5 w-3.5" />
<PriorityPropertyIcon className="h-3.5 w-3.5" />
Change priority...
</div>
</Command.Item>
@ -116,7 +116,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<Users className="h-3.5 w-3.5" />
<MembersPropertyIcon className="h-3.5 w-3.5" />
Assign to...
</div>
</Command.Item>

32
apps/web/core/components/common/activity/helper.tsx
View file

@ -1,17 +1,13 @@
import type { ReactNode } from "react";
import {
Signal,
RotateCcw,
Network,
Link as LinkIcon,
Calendar,
Tag,
Inbox,
AlignLeft,
Users,
Paperclip,
Type,
Triangle,
FileText,
Globe,
Hash,
@ -25,7 +21,19 @@ import {
} from "lucide-react";
// components
import { ArchiveIcon, CycleIcon, DoubleCircleIcon, IntakeIcon, ModuleIcon } from "@plane/propel/icons";
import {
ArchiveIcon,
CycleIcon,
StatePropertyIcon,
IntakeIcon,
ModuleIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
MembersPropertyIcon,
EstimatePropertyIcon,
} from "@plane/propel/icons";
import { store } from "@/lib/store-context";
import type { TProjectActivity } from "@/plane-web/types";
@ -33,20 +41,20 @@ type ActivityIconMap = {
[key: string]: ReactNode;
};
export const iconsMap: ActivityIconMap = {
priority: <Signal size={14} className="text-custom-text-200" />,
priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" />,
restored: <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" />,
link: <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />,
start_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
target_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
label: <Tag className="h-3.5 w-3.5 text-custom-text-200" />,
start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
label: <LabelPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
inbox: <Inbox className="h-3.5 w-3.5 text-custom-text-200" />,
description: <AlignLeft className="h-3.5 w-3.5 text-custom-text-200" />,
assignee: <Users className="h-3.5 w-3.5 text-custom-text-200" />,
assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
attachment: <Paperclip className="h-3.5 w-3.5 text-custom-text-200" />,
name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
estimate: <Triangle size={14} className="text-custom-text-200" />,
state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,

4
apps/web/core/components/core/modals/user-image-upload-modal.tsx
View file

@ -3,11 +3,11 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useDropzone } from "react-dropzone";
import { UserCircle2 } from "lucide-react";
import { Transition, Dialog } from "@headlessui/react";
// plane imports
import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { UserCirclePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@ -146,7 +146,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
</>
) : (
<div>
<UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
<UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
<span className="mt-2 block text-sm font-medium text-custom-text-200">
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
</span>

4
apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
View file

@ -3,11 +3,11 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useDropzone } from "react-dropzone";
import { UserCircle2 } from "lucide-react";
import { Transition, Dialog } from "@headlessui/react";
// plane imports
import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { UserCirclePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@ -158,7 +158,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
</>
) : (
<div>
<UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
<UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
<span className="mt-2 block text-sm font-medium text-custom-text-200">
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
</span>

6
apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
View file

@ -3,11 +3,11 @@ import type { FC } from "react";
import React from "react";
import { isEmpty } from "lodash-es";
import { observer } from "mobx-react";
import { SquareUser, Users } from "lucide-react";
import { SquareUser } from "lucide-react";
// plane types
import { EEstimateSystem } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { WorkItemsIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, WorkItemsIcon } from "@plane/propel/icons";
import type { ICycle } from "@plane/types";
// plane ui
import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@ -87,7 +87,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<Users className="h-4 w-4" />
<MembersPropertyIcon className="h-4 w-4" />
<span className="text-base">{t("members")}</span>
</div>
<div className="flex w-3/5 items-center rounded-sm">

6
apps/web/core/components/cycles/list/cycle-list-item-action.tsx
View file

@ -5,7 +5,7 @@ import React, { useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { Eye, Users, ArrowRight, CalendarDays } from "lucide-react";
import { Eye, ArrowRight, CalendarDays } from "lucide-react";
// plane imports
import {
CYCLE_TRACKER_EVENTS,
@ -16,7 +16,7 @@ import {
} from "@plane/constants";
import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { TransferIcon, WorkItemsIcon } from "@plane/propel/icons";
import { TransferIcon, WorkItemsIcon, MembersPropertyIcon } from "@plane/propel/icons";
import { setPromiseToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { ICycle, TCycleGroups } from "@plane/types";
@ -314,7 +314,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
})}
</AvatarGroup>
) : (
<Users className="h-4 w-4 text-custom-text-300" />
<MembersPropertyIcon className="h-4 w-4 text-custom-text-300" />
)}
</div>
</Tooltip>

5
apps/web/core/components/dropdowns/date-range.tsx
View file

@ -5,13 +5,14 @@ import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { ArrowRight, CalendarCheck2, CalendarDays, X } from "lucide-react";
import { ArrowRight, CalendarDays, X } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
// ui
import type { DateRange, Matcher } from "@plane/propel/calendar";
import { Calendar } from "@plane/propel/calendar";
import { DueDatePropertyIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn, renderFormattedDate } from "@plane/utils";
// helpers
@ -236,7 +237,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
buttonToDateClassName
)}
>
{!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
{!hideIcon.to && <DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
</span>
{isClearable && !disabled && hasDisplayedDates && (

11
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -3,10 +3,11 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -104,7 +105,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: `${currentEstimatePoint?.value}`,
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">
{currentActiveEstimate?.type === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
@ -121,7 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: t("project_settings.estimates.no_estimate"),
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
),
@ -189,7 +190,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
{!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">
{selectedEstimate
@ -249,7 +250,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
>
{/* NOTE: This condition renders when estimates are not enabled for the project */}
<div className="flex-grow flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
</div>

8
apps/web/core/components/dropdowns/member/avatar.tsx
View file

@ -2,7 +2,7 @@
import { observer } from "mobx-react";
import type { LucideIcon } from "lucide-react";
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// plane ui
import { Avatar, AvatarGroup } from "@plane/ui";
import { cn, getFileURL } from "@plane/utils";
@ -49,5 +49,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
}
}
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
);
});

22
apps/web/core/components/inbox/content/issue-properties.tsx
View file

@ -2,8 +2,14 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
import { DoubleCircleIcon } from "@plane/propel/icons";
import {
StatePropertyIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
DuplicatePropertyIcon,
} from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
import { ControlLink } from "@plane/ui";
@ -56,7 +62,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* State */}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>State</span>
</div>
{issue?.state_id && (
@ -79,7 +85,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Assignee */}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Users className="h-4 w-4 flex-shrink-0" />
<MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Assignees</span>
</div>
<MemberDropdown
@ -107,7 +113,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Priority */}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Signal className="h-4 w-4 flex-shrink-0" />
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Priority</span>
</div>
<PriorityDropdown
@ -129,7 +135,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Due Date */}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
<DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Due date</span>
</div>
<DateDropdown
@ -154,7 +160,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Labels */}
<div className="flex min-h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Tag className="h-4 w-4 flex-shrink-0" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Labels</span>
</div>
<div className="w-3/5 flex-grow min-h-8 h-full pt-1">
@ -177,7 +183,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{duplicateIssueDetails && (
<div className="flex min-h-8 gap-2">
<div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
<CopyPlus className="h-4 w-4 flex-shrink-0" />
<DuplicatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Duplicate of</span>
</div>

7
apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
View file

@ -1,9 +1,8 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { LayoutPanelTop } from "lucide-react";
// plane imports
import { ETabIndices } from "@plane/constants";
import { ParentPropertyIcon } from "@plane/propel/icons";
import type { ISearchIssueResponse, TIssue } from "@plane/types";
import { CustomMenu } from "@plane/ui";
import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
@ -177,7 +176,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
type="button"
className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">
{selectedParentIssue
? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
@ -211,7 +210,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
onClick={() => setParentIssueModalOpen(true)}
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add parent</span>
</button>
)}

5
apps/web/core/components/integration/github/root.tsx
View file

@ -6,7 +6,8 @@ import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import useSWR, { mutate } from "swr";
import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
@ -68,7 +69,7 @@ const integrationWorkflowData = [
{
title: "Users",
key: "import-users",
icon: Users,
icon: MembersPropertyIcon,
},
{
title: "Confirm",

7
apps/web/core/components/integration/jira/root.tsx
View file

@ -7,9 +7,10 @@ import { useParams } from "next/navigation";
import { FormProvider, useForm } from "react-hook-form";
import { mutate } from "swr";
// icons
import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
// types
import { ArrowLeft, Check, List, Settings } from "lucide-react";
import { Button } from "@plane/propel/button";
import { MembersPropertyIcon } from "@plane/propel/icons";
// types
import type { IJiraImporterForm } from "@plane/types";
// ui
// fetch keys
@ -42,7 +43,7 @@ const integrationWorkflowData: Array<{
{
title: "Users",
key: "import-users",
icon: Users,
icon: MembersPropertyIcon,
},
{
title: "Confirm",

6
apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
View file

@ -2,9 +2,9 @@
import type { FC } from "react";
import React from "react";
import { Link, Paperclip, Waypoints } from "lucide-react";
import { Link, Paperclip } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
import { ViewsIcon, RelationPropertyIcon } from "@plane/propel/icons";
// plane imports
import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
// plane web imports
@ -52,7 +52,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
customButton={
<IssueDetailWidgetButton
title={t("issue.add.relation")}
icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
icon={<RelationPropertyIcon className="h-3.5 w-3.5 flex-shrink-0" />}
disabled={disabled}
/>
}

6
apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
View file

@ -2,8 +2,8 @@
import type { SyntheticEvent } from "react";
import { useMemo } from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CalendarClock } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { StartDatePropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import type { IIssueDisplayProperties, TIssue } from "@plane/types";
import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
@ -165,7 +165,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
onChange={handleStartDate}
maxDate={maxDate}
placeholder={t("common.order_by.start_date")}
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-30"
disabled={!canEdit}
@ -186,7 +186,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
onChange={handleTargetDate}
minDate={minDate}
placeholder={t("common.order_by.due_date")}
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlight ? "text-red-500" : ""}
clearIconClassName="text-custom-text-100"

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
View file

@ -1,7 +1,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
// icons
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// hooks;
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Users className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
icon={<MembersPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Triangle } from "lucide-react";
import { EstimatePropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -21,7 +21,7 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
return (
<IssueActivityBlockComponent
icon={<Triangle size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Tag } from "lucide-react";
import { LabelPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useLabel } from "@/hooks/store/use-label";
@ -24,7 +24,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Tag size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<LabelPropertyIcon height={14} width={14} className="text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { LayoutPanelTop } from "lucide-react";
import { ParentPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -20,7 +20,7 @@ export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) =>
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<LayoutPanelTop size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<ParentPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Signal } from "lucide-react";
import { PriorityPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -20,7 +20,7 @@ export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Signal size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
View file

@ -3,7 +3,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
// hooks
import { DoubleCircleIcon } from "@plane/propel/icons";
import { StatePropertyIcon } from "@plane/propel/icons";
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
import { IssueActivityBlockComponent, IssueLink } from "./";
@ -23,7 +23,7 @@ export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

5
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View file

@ -1,11 +1,12 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Loader, Search, Tag } from "lucide-react";
import { Check, Loader, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
// helpers
@ -89,7 +90,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
className={`relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 py-0.5 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200`}
>
<div className="flex-shrink-0">
<Tag className="h-2.5 w-2.5" />
<LabelPropertyIcon className="h-2.5 w-2.5" />
</div>
<div className="flex-shrink-0">{t("label.select")}</div>
</div>

33
apps/web/core/components/issues/issue-detail/sidebar.tsx
View file

@ -2,11 +2,22 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, UserCircle2, Users } from "lucide-react";
// i18n
import { useTranslation } from "@plane/i18n";
// ui
import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import {
CycleIcon,
StatePropertyIcon,
ModuleIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
UserCirclePropertyIcon,
EstimatePropertyIcon,
ParentPropertyIcon,
} from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
@ -74,7 +85,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.state")}</span>
</div>
<StateDropdown
@ -93,7 +104,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Users className="h-4 w-4 flex-shrink-0" />
<MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.assignees")}</span>
</div>
<MemberDropdown
@ -117,7 +128,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Signal className="h-4 w-4 flex-shrink-0" />
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.priority")}</span>
</div>
<PriorityDropdown
@ -134,7 +145,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{createdByDetails && (
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.created_by")}</span>
</div>
<div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@ -146,7 +157,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarClock className="h-4 w-4 flex-shrink-0" />
<StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.start_date")}</span>
</div>
<DateDropdown
@ -172,7 +183,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
<DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.due_date")}</span>
</div>
<DateDropdown
@ -202,7 +213,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{projectId && areEstimateEnabledByProjectId(projectId) && (
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Triangle className="h-4 w-4 flex-shrink-0" />
<EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.estimate")}</span>
</div>
<EstimateDropdown
@ -260,7 +271,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
<ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.parent")}</span>
</div>
<IssueParentSelectRoot
@ -275,7 +286,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex min-h-8 gap-2">
<div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
<Tag className="h-4 w-4 flex-shrink-0" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.labels")}</span>
</div>
<div className="h-full min-h-8 w-3/5 flex-grow">

31
apps/web/core/components/issues/issue-layouts/layout-icon.tsx
View file

@ -1,19 +1,34 @@
import type { LucideProps } from "lucide-react";
import { List, Kanban, Calendar, Sheet, GanttChartSquare } from "lucide-react";
import {
ListLayoutIcon,
BoardLayoutIcon,
CalendarLayoutIcon,
SheetLayoutIcon,
TimelineLayoutIcon,
} from "@plane/propel/icons";
import type { ISvgIcons } from "@plane/propel/icons";
import { EIssueLayoutTypes } from "@plane/types";
export const IssueLayoutIcon = ({ layout, ...props }: { layout: EIssueLayoutTypes } & LucideProps) => {
export const IssueLayoutIcon = ({
layout,
size,
...props
}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
const iconProps = {
...props,
...(size && { width: size, height: size }),
};
switch (layout) {
case EIssueLayoutTypes.LIST:
return <List {...props} />;
return <ListLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.KANBAN:
return <Kanban {...props} />;
return <BoardLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.CALENDAR:
return <Calendar {...props} />;
return <CalendarLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.SPREADSHEET:
return <Sheet {...props} />;
return <SheetLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.GANTT:
return <GanttChartSquare {...props} />;
return <TimelineLayoutIcon {...iconProps} />;
default:
return null;
}

8
apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -6,12 +6,12 @@ import { xor } from "lodash-es";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { CalendarCheck2, CalendarClock, Link, Paperclip } from "lucide-react";
import { Link, Paperclip } from "lucide-react";
// types
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
// i18n
import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
import { StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
// ui
@ -324,7 +324,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
onChange={handleStartDate}
maxDate={maxDate}
placeholder={t("common.order_by.start_date")}
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
disabled={isReadOnly}
@ -346,7 +346,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
onChange={handleTargetDate}
minDate={minDate}
placeholder={t("common.order_by.due_date")}
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
clearIconClassName="!text-custom-text-100"

4
apps/web/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -3,11 +3,11 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { Tags } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/hooks";
// i18n
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
// types
import { Tooltip } from "@plane/propel/tooltip";
import type { IIssueLabel } from "@plane/types";
@ -101,7 +101,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
fullWidth && "w-full"
)}
>
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
<LabelPropertyIcon className="h-3.5 w-3.5" />
{placeholderText}
</div>
</Tooltip>

4
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2 } from "lucide-react";
import { DueDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssue } from "@plane/types";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@ -42,7 +42,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
}}
disabled={disabled}
placeholder="Due date"
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full"
buttonClassName={cn(

4
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarClock } from "lucide-react";
import { StartDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssue } from "@plane/types";
// components
@ -36,7 +36,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
}}
disabled={disabled}
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full"

5
apps/web/core/components/issues/issue-modal/components/default-properties.tsx
View file

@ -4,10 +4,9 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import type { Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { LayoutPanelTop } from "lucide-react";
// plane imports
import { ETabIndices, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ParentPropertyIcon } from "@plane/propel/icons";
// types
import type { ISearchIssueResponse, TIssue } from "@plane/types";
// ui
@ -313,7 +312,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
onClick={() => setParentIssueListModalOpen(true)}
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">{t("add_parent")}</span>
</button>
)}

33
apps/web/core/components/issues/peek-overview/properties.tsx
View file

@ -2,11 +2,22 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, Users, UserCircle2 } from "lucide-react";
// i18n
import { useTranslation } from "@plane/i18n";
// ui icons
import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import {
CycleIcon,
StatePropertyIcon,
ModuleIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
UserCirclePropertyIcon,
EstimatePropertyIcon,
ParentPropertyIcon,
} from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
@ -69,7 +80,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* state */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.state")}</span>
</div>
<StateDropdown
@ -89,7 +100,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* assignee */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<Users className="h-4 w-4 flex-shrink-0" />
<MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.assignees")}</span>
</div>
<MemberDropdown
@ -112,7 +123,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* priority */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<Signal className="h-4 w-4 flex-shrink-0" />
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.priority")}</span>
</div>
<PriorityDropdown
@ -130,7 +141,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{createdByDetails && (
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.created_by")}</span>
</div>
<div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@ -148,7 +159,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* start date */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<CalendarClock className="h-4 w-4 flex-shrink-0" />
<StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.start_date")}</span>
</div>
<DateDropdown
@ -175,7 +186,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* due date */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
<DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.due_date")}</span>
</div>
<DateDropdown
@ -206,7 +217,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{isEstimateEnabled && (
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<Triangle className="h-4 w-4 flex-shrink-0" />
<EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.estimate")}</span>
</div>
<EstimateDropdown
@ -263,7 +274,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* parent */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
<ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
<p>{t("common.parent")}</p>
</div>
<IssueParentSelectRoot
@ -279,7 +290,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* label */}
<div className="flex w-full items-center gap-3 min-h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<Tag className="h-4 w-4 flex-shrink-0" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.labels")}</span>
</div>
<div className="flex w-full flex-col gap-3 truncate">

5
apps/web/core/components/issues/select/base.tsx
View file

@ -2,12 +2,13 @@ import React, { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Component, Loader, Search, Tag } from "lucide-react";
import { Check, Component, Loader, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { getRandomLabelColor } from "@plane/constants";
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { cn } from "@plane/utils";
// components
@ -181,7 +182,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
buttonClassName
)}
>
<Tag className="h-3 w-3 flex-shrink-0" />
<LabelPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span>{t("labels")}</span>
</div>
)}

6
apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
View file

@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { CalendarCheck2, CalendarClock } from "lucide-react";
import { DueDatePropertyIcon, StartDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssuePriorities, TWorkspaceDraftIssue } from "@plane/types";
import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@ -177,7 +177,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
onChange={handleStartDate}
maxDate={maxDate}
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
renderByDefault={isMobile}
@ -192,7 +192,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
onChange={handleTargetDate}
minDate={minDate}
placeholder="Due date"
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={
shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""

8
apps/web/core/components/modules/analytics-sidebar/root.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { CalendarClock, ChevronDown, ChevronRight, Info, Plus, SquareUser, Users } from "lucide-react";
import { ChevronDown, ChevronRight, Info, Plus, SquareUser } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
import {
MODULE_STATUS,
@ -16,7 +16,7 @@ import {
} from "@plane/constants";
// plane types
import { useTranslation } from "@plane/i18n";
import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, ModuleStatusIcon, WorkItemsIcon, StartDatePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// plane ui
@ -303,7 +303,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-5 pb-6 pt-2.5">
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" />
<StartDatePropertyIcon className="h-4 w-4" />
<span className="text-base">{t("date_range")}</span>
</div>
<div className="h-7">
@ -371,7 +371,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<Users className="h-4 w-4" />
<MembersPropertyIcon className="h-4 w-4" />
<span className="text-base">{t("members")}</span>
</div>
<Controller

12
apps/web/core/components/modules/module-layout-icon.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import type { TModuleLayoutOptions } from "@plane/types";
import { cn } from "@plane/utils";
@ -16,9 +16,9 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
// get Layout icon
const icons = {
list: List,
board: LayoutGrid,
gantt: GanttChartSquare,
list: ListLayoutIcon,
board: GridLayoutIcon,
gantt: TimelineLayoutIcon,
};
const Icon = icons[layoutType ?? "list"];
@ -28,10 +28,10 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
<>
{withContainer ? (
<div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
<Icon size={size} className={cn(className)} />
<Icon width={size} height={size} className={cn(className)} />
</div>
) : (
<Icon size={size} className={cn("flex-shrink-0", className)} />
<Icon width={size} height={size} className={cn("flex-shrink-0", className)} />
)}
</>
);

4
apps/web/core/components/modules/select/status.tsx
View file

@ -7,7 +7,7 @@ import type { FieldError, Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/propel/icons";
import { StatePropertyIcon, ModuleStatusIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -37,7 +37,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
{value ? (
<ModuleStatusIcon status={value} />
) : (
<DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
)}
{(selectedValue && t(selectedValue?.i18n_label)) ?? (
<span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>

4
apps/web/core/components/modules/sidebar-select/select-status.tsx
View file

@ -7,7 +7,7 @@ import type { Control, UseFormWatch } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon } from "@plane/propel/icons";
import { StatePropertyIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -26,7 +26,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<p>Status</p>
</div>
<div className="sm:basis-1/2">

5
apps/web/core/components/profile/overview/stats.tsx
View file

@ -4,9 +4,8 @@ import Link from "next/link";
import { useParams } from "next/navigation";
// ui
import { UserCircle2 } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CreateIcon, LayerStackIcon } from "@plane/propel/icons";
import { UserCirclePropertyIcon, CreateIcon, LayerStackIcon } from "@plane/propel/icons";
import type { IUserProfileData } from "@plane/types";
import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
// types
@ -28,7 +27,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
value: userProfile?.created_issues ?? "...",
},
{
icon: UserCircle2,
icon: UserCirclePropertyIcon,
route: "assigned",
i18n_title: "profile.stats.assigned",
value: userProfile?.assigned_issues ?? "...",

5
apps/web/core/components/readonly/estimate.tsx
View file

@ -2,9 +2,8 @@
import { useEffect } from "react";
import { observer } from "mobx-react";
import { Triangle } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { cn, convertMinutesToHoursMinutesString } from "@plane/utils";
// hooks
@ -46,7 +45,7 @@ export const ReadonlyEstimate: React.FC<TReadonlyEstimateProps> = observer((prop
return (
<div className={cn("flex items-center gap-1 text-sm", className)}>
{!hideIcon && <Triangle className="size-4 flex-shrink-0" />}
{!hideIcon && <EstimatePropertyIcon className="size-4 flex-shrink-0" />}
<span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
</div>
);

14
packages/constants/src/issue/common.ts
View file

@ -241,7 +241,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "A",
descendingOrderKey: "-assignees__first_name",
descendingOrderTitle: "Z",
icon: "Users",
icon: "MembersPropertyIcon",
},
created_on: {
i18n_title: "common.sort.created_on",
@ -257,7 +257,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "New",
descendingOrderKey: "target_date",
descendingOrderTitle: "Old",
icon: "CalendarCheck2",
icon: "DueDatePropertyIcon",
},
estimate: {
i18n_title: "common.estimate",
@ -265,7 +265,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "Low",
descendingOrderKey: "-estimate_point__key",
descendingOrderTitle: "High",
icon: "Triangle",
icon: "EstimatePropertyIcon",
},
labels: {
i18n_title: "common.labels",
@ -273,7 +273,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "A",
descendingOrderKey: "-labels__name",
descendingOrderTitle: "Z",
icon: "Tag",
icon: "LabelPropertyIcon",
},
modules: {
i18n_title: "common.modules",
@ -297,7 +297,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "None",
descendingOrderKey: "-priority",
descendingOrderTitle: "Urgent",
icon: "Signal",
icon: "PriorityPropertyIcon",
},
start_date: {
i18n_title: "common.order_by.start_date",
@ -305,7 +305,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "New",
descendingOrderKey: "start_date",
descendingOrderTitle: "Old",
icon: "CalendarClock",
icon: "StartDatePropertyIcon",
},
state: {
i18n_title: "common.state",
@ -313,7 +313,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "A",
descendingOrderKey: "-state__name",
descendingOrderTitle: "Z",
icon: "DoubleCircleIcon",
icon: "StatePropertyIcon",
},
updated_on: {
i18n_title: "common.sort.updated_on",

36
packages/propel/src/icons/add-icon.tsx → packages/propel/src/icons/actions/add-icon.tsx
View file

@ -1,33 +1,17 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const AddIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clipPath="url(#clip0_2890_23)">
export const AddIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_2890_23">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
</IconWrapper>
);
};

1
packages/propel/src/icons/actions/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./add-icon";

62
packages/propel/src/icons/constants.tsx Normal file
View file

@ -0,0 +1,62 @@
import { Icon } from "./icon";
export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }];
export const WorkspaceIconsMap = [
{ icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },
{ icon: <Icon name="workspace.archive" />, title: "ArchiveIcon" },
{ icon: <Icon name="workspace.dashboard" />, title: "DashboardIcon" },
{ icon: <Icon name="workspace.draft" />, title: "DraftIcon" },
{ icon: <Icon name="workspace.home" />, title: "HomeIcon" },
{ icon: <Icon name="workspace.inbox" />, title: "InboxIcon" },
{ icon: <Icon name="workspace.project" />, title: "ProjectIcon" },
{ icon: <Icon name="workspace.your-work" />, title: "YourWorkIcon" },
];
export const ProjectIconsMap = [
{ icon: <Icon name="project.cycle" />, title: "CycleIcon" },
{ icon: <Icon name="project.epic" />, title: "EpicIcon" },
{ icon: <Icon name="project.intake" />, title: "IntakeIcon" },
{ icon: <Icon name="project.module" />, title: "ModuleIcon" },
{ icon: <Icon name="project.page" />, title: "PageIcon" },
{ icon: <Icon name="project.view" />, title: "ViewIcon" },
{ icon: <Icon name="project.work-items" />, title: "WorkItemsIcon" },
];
export const SubBrandIconsMap = [
{ icon: <Icon name="sub-brand.pi-chat" />, title: "PiChatLogo" },
{ icon: <Icon name="sub-brand.plane" />, title: "PlaneIcon" },
{ icon: <Icon name="sub-brand.wiki" />, title: "WikiIcon" },
];
export const LayoutIconsMap = [
{ icon: <Icon name="layout.calendar" />, title: "CalendarLayoutIcon" },
{ icon: <Icon name="layout.card" />, title: "CardLayoutIcon" },
{ icon: <Icon name="layout.timeline" />, title: "TimelineLayoutIcon" },
{ icon: <Icon name="layout.grid" />, title: "GridLayoutIcon" },
{ icon: <Icon name="layout.board" />, title: "BoardLayoutIcon" },
{ icon: <Icon name="layout.list" />, title: "ListLayoutIcon" },
{ icon: <Icon name="layout.sheet" />, title: "SheetLayoutIcon" },
];
export const PropertyIconsMap = [
{ icon: <Icon name="property.boolean" />, title: "BooleanPropertyIcon" },
{ icon: <Icon name="property.dropdown" />, title: "DropdownPropertyIcon" },
{ icon: <Icon name="property.due-date" />, title: "DueDatePropertyIcon" },
{ icon: <Icon name="property.duplicate" />, title: "DuplicatePropertyIcon" },
{ icon: <Icon name="property.estimate" />, title: "EstimatePropertyIcon" },
{ icon: <Icon name="property.hash" />, title: "HashPropertyIcon" },
{ icon: <Icon name="property.label" />, title: "LabelPropertyIcon" },
{ icon: <Icon name="property.members" />, title: "MembersPropertyIcon" },
{ icon: <Icon name="property.overdue-date" />, title: "OverdueDatePropertyIcon" },
{ icon: <Icon name="property.parent" />, title: "ParentPropertyIcon" },
{ icon: <Icon name="property.priority" />, title: "PriorityPropertyIcon" },
{ icon: <Icon name="property.relates-to" />, title: "RelatesToPropertyIcon" },
{ icon: <Icon name="property.relation" />, title: "RelationPropertyIcon" },
{ icon: <Icon name="property.scope" />, title: "ScopePropertyIcon" },
{ icon: <Icon name="property.start-date" />, title: "StartDatePropertyIcon" },
{ icon: <Icon name="property.state" />, title: "StatePropertyIcon" },
{ icon: <Icon name="property.user-circle" />, title: "UserCirclePropertyIcon" },
{ icon: <Icon name="property.user" />, title: "UserPropertyIcon" },
{ icon: <Icon name="property.user-square" />, title: "UserSquarePropertyIcon" },
{ icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
];

2
packages/propel/src/icons/cycle/cycle-group-icon.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react";
import { CircleDotDashed, Circle } from "lucide-react";
import { CycleIcon } from "../cycle-icon";
import { CycleIcon } from "../project/cycle-icon";
import { CircleDotFullIcon } from "./circle-dot-full-icon";
import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";

10
packages/propel/src/icons/default-icon.tsx Normal file
View file

@ -0,0 +1,10 @@
import * as React from "react";
import { IconWrapper } from "./icon-wrapper";
import { ISvgIcons } from "./type";
export const DefaultIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
</IconWrapper>
);

28
packages/propel/src/icons/epic-icon.tsx
View file

@ -1,28 +0,0 @@
import * as React from "react";
export type Props = {
className?: string;
width?: string | number;
height?: string | number;
color?: string;
};
export const EpicIcon: React.FC<Props> = ({ width = "16", height = "16", className }) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.900146 9.33203V12.0142C0.900146 12.3736 1.17392 12.6654 1.51126 12.6654H14.9557C15.1178 12.6654 15.2732 12.5968 15.3878 12.4746C15.5024 12.3525 15.5668 12.1869 15.5668 12.0142V10.3299L13.375 7.99523C13.1458 7.75134 12.8351 7.61436 12.5113 7.61436C12.1874 7.61436 11.8767 7.75134 11.6476 7.99523L10.1257 9.35919L10.2534 9.56204L11.7209 9.60056C11.7809 9.66017 11.8291 9.73206 11.8625 9.81194C11.8959 9.89181 11.9138 9.97804 11.9153 10.0655C11.9167 10.1529 11.9017 10.2397 11.8709 10.3208C11.8402 10.4019 11.7944 10.4756 11.7364 10.5374C11.6784 10.5992 11.6092 10.648 11.5332 10.6807C11.4571 10.7135 11.3756 10.7296 11.2935 10.728C11.2114 10.7265 11.1305 10.7073 11.0556 10.6717C10.9806 10.6362 10.9131 10.5848 10.8572 10.5209L10.2534 9.56204L6.60385 3.76614C6.37468 3.52226 6.11293 3.33203 5.78904 3.33203C5.46515 3.33203 5.20339 3.52226 4.97422 3.76614L0.900146 9.33203Z"
fill="currentColor"
/>
<path
d="M11.7209 9.60056L10.2534 9.56204L10.8572 10.5209C10.9131 10.5848 10.9806 10.6362 11.0556 10.6717C11.1305 10.7073 11.2114 10.7265 11.2935 10.728C11.3756 10.7296 11.4571 10.7135 11.5332 10.6807C11.6092 10.648 11.6784 10.5992 11.7364 10.5374C11.7944 10.4756 11.8402 10.4019 11.8709 10.3208C11.9017 10.2397 11.9167 10.1529 11.9153 10.0655C11.9138 9.97804 11.8959 9.89181 11.8625 9.81194C11.8291 9.73206 11.7809 9.66017 11.7209 9.60056Z"
fill="currentColor"
/>
</svg>
);

29
packages/propel/src/icons/helpers.ts Normal file
View file

@ -0,0 +1,29 @@
import { ICON_REGISTRY, IconName } from "./registry";
/**
* Get the icon component by name
* @param name - The icon name from the registry
* @returns The icon component or default icon if not found
*/
export const getIconComponent = (name: IconName) => ICON_REGISTRY[name] || ICON_REGISTRY.default;
/**
* Check if the icon name exists in the registry
* @param name - The icon name to check
* @returns True if the icon exists in the registry
*/
export const isValidIconName = (name: string): name is IconName => name in ICON_REGISTRY;
/**
* Get all available icon names
* @returns Array of all icon names in the registry
*/
export const getIconNames = (): IconName[] => Object.keys(ICON_REGISTRY) as IconName[];
/**
* Get icons by category
* @param category - The category prefix (e.g., 'workspace', 'project')
* @returns Array of icon names matching the category
*/
export const getIconsByCategory = (category: string): IconName[] =>
getIconNames().filter((name) => name.startsWith(`${category}.`));

42
packages/propel/src/icons/icon-wrapper.tsx Normal file
View file

@ -0,0 +1,42 @@
import * as React from "react";
import { ISvgIcons } from "./type";
interface IIconWrapper extends ISvgIcons {
children: React.ReactNode;
clipPathId?: string;
viewBox?: string;
}
export const IconWrapper: React.FC<IIconWrapper> = ({
width = "16",
height = "16",
className = "text-current",
children,
clipPathId,
viewBox = "0 0 16 16",
...rest
}) => (
<svg
width={width}
height={height}
viewBox={viewBox}
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
{clipPathId ? (
<>
<g clipPath={`url(#${clipPathId})`}>{children}</g>
<defs>
<clipPath id={clipPathId}>
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</>
) : (
children
)}
</svg>
);

13
packages/propel/src/icons/icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { ICON_REGISTRY, IconName } from "./registry";
import { ISvgIcons } from "./type";
export interface IconProps extends Omit<ISvgIcons, "ref"> {
name: IconName;
}
export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
return <IconComponent {...props} />;
};

196
packages/propel/src/icons/icons.stories.tsx Normal file
View file

@ -0,0 +1,196 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
ActionsIconsMap,
LayoutIconsMap,
ProjectIconsMap,
PropertyIconsMap,
SubBrandIconsMap,
WorkspaceIconsMap,
} from "./constants";
import { Icon } from "./icon";
import { CycleIcon } from "./project/cycle-icon";
import { HomeIcon } from "./workspace/home-icon";
import { ProjectIcon } from "./workspace/project-icon";
const meta: Meta = {
title: "Icons",
parameters: {
layout: "padded",
docs: {
description: {
component:
"A comprehensive collection of all icons used throughout the application. Supports both direct imports and registry-based usage.",
},
},
},
};
export default meta;
type Story = StoryObj;
export const AllIcons: Story = {
render: () => (
<div className="space-y-12">
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Sub-Brand Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{SubBrandIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Workspace Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{WorkspaceIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Project Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{ProjectIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Layout Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{LayoutIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Property Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{PropertyIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Actions Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{ActionsIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
</div>
),
};
export const RegistryUsage: Story = {
render: () => (
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Registry-Based Usage</h3>
<p className="text-sm text-custom-text-300">
Use the <code className="px-1 py-0.5 bg-custom-background-80 rounded">Icon</code> component with{" "}
<code className="px-1 py-0.5 bg-custom-background-80 rounded">name</code> prop for dynamic icon selection.
</p>
<div className="grid grid-cols-12 gap-6 w-full">
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<Icon name="workspace.home" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">workspace.home</p>
</div>
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<Icon name="project.cycle" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">project.cycle</p>
</div>
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<Icon name="layout.board" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">layout.board</p>
</div>
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<Icon name="property.priority" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">property.priority</p>
</div>
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Direct Import Usage</h3>
<p className="text-sm text-custom-text-300">
Import icon components directly for better tree-shaking and type safety.
</p>
<div className="grid grid-cols-12 gap-6 w-full">
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<HomeIcon className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">HomeIcon</p>
</div>
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<CycleIcon className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">CycleIcon</p>
</div>
<div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<ProjectIcon className="text-custom-text-200" />
<p className="text-xs text-custom-text-300 text-center">ProjectIcon</p>
</div>
</div>
</div>
</div>
),
};
export const IconSizes: Story = {
render: () => (
<div className="space-y-6">
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Icon Sizes</h3>
<p className="text-sm text-custom-text-300">
Icons can be rendered in different sizes using width and height props.
</p>
</div>
<div className="flex items-end gap-8">
<div className="flex flex-col items-center gap-2">
<Icon name="workspace.home" width="12" height="12" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300">12x12</p>
</div>
<div className="flex flex-col items-center gap-2">
<Icon name="workspace.home" width="16" height="16" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300">16x16 (default)</p>
</div>
<div className="flex flex-col items-center gap-2">
<Icon name="workspace.home" width="24" height="24" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300">24x24</p>
</div>
<div className="flex flex-col items-center gap-2">
<Icon name="workspace.home" width="32" height="32" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300">32x32</p>
</div>
<div className="flex flex-col items-center gap-2">
<Icon name="workspace.home" width="48" height="48" className="text-custom-text-200" />
<p className="text-xs text-custom-text-300">48x48</p>
</div>
</div>
</div>
),
};

32
packages/propel/src/icons/index.ts
View file

@ -1,9 +1,10 @@
export type { ISvgIcons } from "./type";
export type { IconName } from "./registry";
export type { IconProps } from "./icon";
export { ICON_REGISTRY } from "./registry";
export * from "./actions";
export * from "./activity-icon";
export * from "./add-icon";
export * from "./ai-icon";
export * from "./analytics-icon";
export * from "./archive-icon";
export * from "./at-risk-icon";
export * from "./bar-icon";
export * from "./blocked-icon";
@ -15,58 +16,51 @@ export * from "./center-panel-icon";
export * from "./comment-fill-icon";
export * from "./create-icon";
export * from "./cycle";
export * from "./cycle-icon";
export * from "./dashboard-icon";
export * from "./default-icon";
export * from "./dice-icon";
export * from "./discord-icon";
export * from "./display-properties";
export * from "./done-icon";
export * from "./draft-icon";
export * from "./dropdown-icon";
export * from "./epic-icon";
export * from "./favorite-folder-icon";
export * from "./full-screen-panel-icon";
export * from "./github-icon";
export * from "./gitlab-icon";
export * from "./home-icon";
export * from "./inbox-icon";
export * from "./helpers";
export * from "./icon";
export * from "./icon-wrapper";
export * from "./info-fill-icon";
export * from "./info-icon";
export * from "./in-progress-icon";
export * from "./intake";
export * from "./intake-icon";
export * from "./layer-stack";
export * from "./layers-icon";
export * from "./layouts";
export * from "./lead-icon";
export * from "./module";
export * from "./module-icon";
export * from "./monospace-icon";
export * from "./multiple-sticky";
export * from "./off-track-icon";
export * from "./on-track-icon";
export * from "./overview-icon";
export * from "./page-icon";
export * from "./pending-icon";
export * from "./photo-filter-icon";
export * from "./pi-chat";
export * from "./planned-icon";
export * from "./plane-icon";
export * from "./priority-icon";
export * from "./project-icon";
export * from "./project";
export * from "./properties";
export * from "./related-icon";
export * from "./sans-serif-icon";
export * from "./serif-icon";
export * from "./side-panel-icon";
export * from "./state";
export * from "./sticky-note-icon";
export * from "./sub-brand";
export * from "./suspended-user";
export * from "./teams";
export * from "./transfer-icon";
export * from "./tree-map-icon";
export * from "./updates-icon";
export * from "./user-activity-icon";
export * from "./view-icon";
export * from "./wiki-icon";
export * from "./work-items-icon";
export * from "./workspace";
export * from "./workspace-icon";
export * from "./your-work-icon";

13
packages/propel/src/icons/layouts/board-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const BoardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/layouts/calendar-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const CalendarLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/layouts/card-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const CardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/layouts/grid-icon.tsx Normal file
View file

File diff suppressed because one or more lines are too long

7
packages/propel/src/icons/layouts/index.ts Normal file
View file

@ -0,0 +1,7 @@
export * from "./calendar-icon";
export * from "./card-icon";
export * from "./timeline-icon";
export * from "./grid-icon";
export * from "./board-icon";
export * from "./list-icon";
export * from "./sheet-icon";

13
packages/propel/src/icons/layouts/list-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ListLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/layouts/sheet-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const SheetLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/layouts/timeline-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const TimelineLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
fill={color}
/>
</IconWrapper>
);

36
packages/propel/src/icons/cycle-icon.tsx → packages/propel/src/icons/project/cycle-icon.tsx
View file

@ -1,24 +1,13 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const CycleIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clipPath="url(#clip0_1612_7015)">
export const CycleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
fill={color}
@ -27,11 +16,6 @@ export const CycleIcon: React.FC<ISvgIcons> = ({
d="M7.99951 12.3337C10.3928 12.3337 12.3328 10.3936 12.3328 8.00033C12.3328 5.60709 10.3928 3.66699 7.99951 3.66699V12.3337Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_1612_7015">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
</IconWrapper>
);
};

13
packages/propel/src/icons/project/epic-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const EpicIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
fill={color}
/>
</IconWrapper>
);

7
packages/propel/src/icons/project/index.ts Normal file
View file

@ -0,0 +1,7 @@
export * from "./cycle-icon";
export * from "./epic-icon";
export * from "./intake-icon";
export * from "./module-icon";
export * from "./page-icon";
export * from "./view-icon";
export * from "./work-items-icon";

36
packages/propel/src/icons/intake-icon.tsx → packages/propel/src/icons/project/intake-icon.tsx
View file

@ -1,33 +1,17 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const IntakeIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clipPath="url(#clip0_2310_10)">
export const IntakeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_2310_10">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
</IconWrapper>
);
};

23
packages/propel/src/icons/module-icon.tsx → packages/propel/src/icons/project/module-icon.tsx
View file

@ -1,23 +1,10 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ModuleIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
export const ModuleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
fill={color}
@ -38,5 +25,5 @@ export const ModuleIcon: React.FC<ISvgIcons> = ({
d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
fill={color}
/>
</svg>
</IconWrapper>
);

23
packages/propel/src/icons/page-icon.tsx → packages/propel/src/icons/project/page-icon.tsx
View file

@ -1,26 +1,13 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const PageIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
export const PageIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
fill={color}
/>
</svg>
</IconWrapper>
);

36
packages/propel/src/icons/view-icon.tsx → packages/propel/src/icons/project/view-icon.tsx
View file

@ -1,33 +1,17 @@
import * as React from "react";
import { ISvgIcons } from "./type";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ViewsIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clipPath="url(#clip0_1612_7029)">
export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_1612_7029">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
</IconWrapper>
);
};

13
packages/propel/src/icons/project/work-items-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const WorkItemsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/boolean-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const BooleanPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
fill={color}
/>
</IconWrapper>
);

17
packages/propel/src/icons/properties/dropdown-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const DropdownPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.041 8.00098C14.041 4.66436 11.3365 1.95916 8 1.95898C4.66328 1.95898 1.95801 4.66425 1.95801 8.00098C1.95818 11.3375 4.66339 14.042 8 14.042C11.3364 14.0418 14.0408 11.3374 14.041 8.00098ZM10.2246 6.55859C10.4687 6.31468 10.8644 6.31457 11.1084 6.55859C11.3524 6.80262 11.3523 7.19829 11.1084 7.44238L8.44141 10.1094C8.32429 10.2264 8.16557 10.2919 8 10.292C7.83424 10.292 7.67483 10.2266 7.55762 10.1094L4.89062 7.44238C4.64693 7.19833 4.64682 6.80258 4.89062 6.55859C5.1347 6.31452 5.53131 6.31452 5.77539 6.55859L7.99902 8.7832L10.2246 6.55859ZM15.291 8.00098C15.2908 12.0278 12.0268 15.2918 8 15.292C3.97303 15.292 0.708184 12.0279 0.708008 8.00098C0.708008 3.9739 3.97292 0.708984 8 0.708984C12.0269 0.70916 15.291 3.974 15.291 8.00098Z"
fill={color}
/>
</IconWrapper>
);
};

13
packages/propel/src/icons/properties/due-date-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const DueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
fill={color}
/>
</IconWrapper>
);

17
packages/propel/src/icons/properties/duplicate-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const DuplicatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.041 8.13282C14.041 7.74954 14.041 7.4995 14.0254 7.3086C14.0104 7.12507 13.9841 7.05154 13.9639 7.01173C13.896 6.87852 13.7876 6.77008 13.6543 6.70216C13.6145 6.68189 13.541 6.65563 13.3574 6.64063C13.1665 6.62507 12.9165 6.62501 12.5332 6.62501H8.13282C7.74955 6.62501 7.4995 6.62507 7.3086 6.64063C7.12508 6.65563 7.05155 6.68189 7.01173 6.70216C6.87845 6.77006 6.77006 6.87845 6.70216 7.01173C6.68189 7.05155 6.65563 7.12508 6.64063 7.3086C6.62507 7.4995 6.62501 7.74955 6.62501 8.13282V12.5332C6.62501 12.9165 6.62507 13.1665 6.64063 13.3574C6.65563 13.541 6.68189 13.6145 6.70216 13.6543C6.77008 13.7876 6.87852 13.896 7.01173 13.9639C7.05154 13.9841 7.12507 14.0104 7.3086 14.0254C7.4995 14.041 7.74954 14.041 8.13282 14.041H12.5332C12.9165 14.041 13.1665 14.041 13.3574 14.0254C13.541 14.0104 13.6145 13.9841 13.6543 13.9639C13.7875 13.896 13.896 13.7875 13.9639 13.6543C13.9841 13.6145 14.0104 13.541 14.0254 13.3574C14.041 13.1665 14.041 12.9165 14.041 12.5332V8.13282ZM9.70802 12V10.959H8.667C8.32193 10.959 8.04218 10.679 8.042 10.334C8.042 9.98881 8.32182 9.70899 8.667 9.70899H9.70802V8.667C9.70802 8.32188 9.98791 8.04209 10.333 8.042C10.6782 8.042 10.958 8.32182 10.958 8.667V9.70899H12C12.3451 9.70908 12.625 9.98887 12.625 10.334C12.6248 10.679 12.345 10.9589 12 10.959H10.958V12C10.958 12.3452 10.6782 12.625 10.333 12.625C9.98791 12.6249 9.70802 12.3451 9.70802 12ZM9.37501 3.33302C9.37501 3.01415 9.37415 2.80617 9.36329 2.64649C9.35279 2.49251 9.33426 2.42923 9.32032 2.39552C9.24843 2.22197 9.11107 2.08363 8.93751 2.01173C8.90379 1.99777 8.84057 1.98024 8.68653 1.96973C8.52687 1.95885 8.31893 1.95802 8.00001 1.95802H3.4668C3.08321 1.95802 2.83257 1.95805 2.64161 1.97364C2.45792 1.98865 2.38455 2.01488 2.34473 2.03516C2.21146 2.10307 2.10307 2.21146 2.03516 2.34473C2.01488 2.38455 1.98865 2.45792 1.97364 2.64161C1.95805 2.83257 1.95802 3.08321 1.95802 3.4668V8.00001C1.95802 8.31893 1.95885 8.52687 1.96973 8.68653C1.98024 8.84057 1.99777 8.90379 2.01173 8.93751C2.08363 9.11107 2.22197 9.24843 2.39552 9.32032C2.42923 9.33426 2.49251 9.35279 2.64649 9.36329C2.80617 9.37415 3.01415 9.37501 3.33302 9.37501C3.67819 9.37501 3.95802 9.65483 3.95802 10C3.95784 10.345 3.67808 10.625 3.33302 10.625C3.03094 10.625 2.7727 10.6248 2.56055 10.6104C2.34294 10.5955 2.12822 10.5631 1.917 10.4756C1.43725 10.2769 1.05621 9.89565 0.857429 9.41602C0.769896 9.20466 0.736546 8.98926 0.721687 8.77149C0.707239 8.55948 0.708015 8.3018 0.708015 8.00001V3.4668C0.708015 3.10389 0.70782 2.79368 0.728523 2.54005C0.749847 2.27906 0.796841 2.02275 0.921882 1.77735C1.10961 1.40896 1.40896 1.10961 1.77735 0.921882C2.02275 0.796841 2.27906 0.749847 2.54005 0.728523C2.79368 0.70782 3.10389 0.708015 3.4668 0.708015H8.00001C8.3018 0.708015 8.55948 0.707239 8.77149 0.721687C8.98926 0.736546 9.20466 0.769896 9.41602 0.857429C9.89565 1.05621 10.2769 1.43725 10.4756 1.917C10.5631 2.12822 10.5955 2.34294 10.6104 2.56055C10.6248 2.7727 10.625 3.03094 10.625 3.33302C10.625 3.67808 10.345 3.95784 10 3.95802C9.65483 3.95802 9.37501 3.67819 9.37501 3.33302ZM15.291 12.5332C15.291 12.8962 15.2922 13.2063 15.2715 13.46C15.2502 13.7207 15.203 13.9765 15.0781 14.2217C14.8904 14.5902 14.5902 14.8904 14.2217 15.0781C13.9765 15.203 13.7207 15.2502 13.46 15.2715C13.2063 15.2922 12.8962 15.291 12.5332 15.291H8.13282C7.76985 15.291 7.45971 15.2922 7.20606 15.2715C6.94533 15.2502 6.68953 15.203 6.44434 15.0781C6.0758 14.8904 5.77563 14.5901 5.5879 14.2217C5.46306 13.9765 5.41586 13.7207 5.39454 13.46C5.37381 13.2063 5.37501 12.8962 5.37501 12.5332V8.13282C5.37501 7.76985 5.37381 7.45971 5.39454 7.20606C5.41586 6.94533 5.46306 6.68953 5.5879 6.44434C5.77565 6.07587 6.07587 5.77565 6.44434 5.5879C6.68953 5.46306 6.94533 5.41586 7.20606 5.39454C7.45971 5.37381 7.76985 5.37501 8.13282 5.37501H12.5332C12.8962 5.37501 13.2063 5.37381 13.46 5.39454C13.7207 5.41586 13.9765 5.46306 14.2217 5.5879C14.5901 5.77563 14.8904 6.0758 15.0781 6.44434C15.203 6.68953 15.2502 6.94533 15.2715 7.20606C15.2922 7.45971 15.291 7.76985 15.291 8.13282V12.5332Z"
fill={color}
/>
</IconWrapper>
);
};

13
packages/propel/src/icons/properties/estimate-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const EstimatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/hash-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const HashPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
fill={color}
/>
</IconWrapper>
);

20
packages/propel/src/icons/properties/index.ts Normal file
View file

@ -0,0 +1,20 @@
export * from "./boolean-icon";
export * from "./dropdown-icon";
export * from "./due-date-icon";
export * from "./duplicate-icon";
export * from "./estimate-icon";
export * from "./hash-icon";
export * from "./label-icon";
export * from "./members-icon";
export * from "./overdue-date-icon";
export * from "./parent-icon";
export * from "./priority-icon";
export * from "./relates-to-icon";
export * from "./relation-icon";
export * from "./scope-icon";
export * from "./start-date-icon";
export * from "./state-icon";
export * from "./user-circle-icon";
export * from "./user-icon";
export * from "./user-square-icon";
export * from "./workflows-icon";

21
packages/propel/src/icons/properties/label-icon.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const LabelPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M5.00008 5.33366C5.18418 5.33366 5.33341 5.18442 5.33341 5.00033C5.33341 4.81623 5.18418 4.66699 5.00008 4.66699C4.81599 4.66699 4.66675 4.81623 4.66675 5.00033C4.66675 5.18442 4.81599 5.33366 5.00008 5.33366Z"
fill={color}
/>
<path
d="M6.52889 0.787186C6.82526 0.787186 7.07583 0.782776 7.31795 0.840897C7.4677 0.876877 7.61266 0.930325 7.74959 1.00008L7.88338 1.07527V1.07625C8.0955 1.20626 8.26961 1.38532 8.47908 1.5948L13.5924 6.70711C13.9811 7.0958 14.2988 7.41437 14.5357 7.69344C14.7772 7.97795 14.9708 8.2628 15.0806 8.60066C15.252 9.12791 15.252 9.69649 15.0806 10.2237C14.9708 10.5616 14.7772 10.8464 14.5357 11.1309C14.2988 11.41 13.9811 11.7286 13.5924 12.1173L12.1178 13.5919C11.7291 13.9806 11.4105 14.2983 11.1314 14.5352C10.8469 14.7768 10.5621 14.9703 10.2242 15.0802C9.69697 15.2515 9.1284 15.2515 8.60115 15.0802C8.26329 14.9703 7.97844 14.7768 7.69392 14.5352C7.41486 14.2983 7.09629 13.9806 6.7076 13.5919L1.59529 8.47859C1.38581 8.26913 1.20675 8.09502 1.07674 7.88289H1.07576C0.968573 7.70785 0.889331 7.51701 0.841385 7.31746C0.783264 7.07534 0.787674 6.82478 0.787674 6.5284V3.54597C0.787674 3.18306 0.787479 2.87285 0.808182 2.61922C0.829506 2.35823 0.876501 2.10192 1.00154 1.85652C1.18928 1.48812 1.48863 1.18878 1.85701 1.00105C2.10241 0.876012 2.35872 0.829017 2.61971 0.807694C2.87334 0.786991 3.18355 0.787186 3.54646 0.787186H6.52889ZM5.51033 4.45906C5.99372 4.508 6.37068 4.91589 6.37068 5.41219C6.37068 5.94146 5.94195 6.37019 5.41267 6.37019C4.91638 6.37019 4.50849 5.99323 4.45955 5.50984L4.45467 5.41219L4.45955 5.31453C4.50849 4.83114 4.91638 4.45418 5.41267 4.45418L5.51033 4.45906ZM2.03767 6.5284C2.03767 6.88427 2.04165 6.96065 2.05721 7.02547C2.07449 7.09734 2.10259 7.16638 2.14119 7.22957H2.14217C2.17698 7.28637 2.22778 7.34351 2.47908 7.5948L7.59236 12.7071C7.99549 13.1102 8.27146 13.3859 8.50252 13.5821C8.72806 13.7736 8.86932 13.8532 8.98787 13.8917C9.264 13.9814 9.56145 13.9814 9.83748 13.8917C9.95606 13.8532 10.0973 13.7736 10.3228 13.5821C10.5539 13.3859 10.8299 13.1102 11.233 12.7071L12.7076 11.2325C13.1107 10.8294 13.3864 10.5534 13.5826 10.3223C13.7741 10.0968 13.8536 9.95557 13.8922 9.83699C13.9818 9.56097 13.9818 9.26351 13.8922 8.98738C13.8537 8.86883 13.7741 8.72757 13.5826 8.50203C13.3864 8.27097 13.1107 7.99501 12.7076 7.59187L7.59529 2.47859C7.344 2.2273 7.28686 2.17649 7.23006 2.14168V2.1407C7.16687 2.1021 7.09783 2.074 7.02596 2.05672C6.96114 2.04116 6.88475 2.03719 6.52889 2.03719H3.54646C3.16287 2.03719 2.91223 2.03722 2.72127 2.05281C2.53758 2.06782 2.4642 2.09405 2.42439 2.11433C2.29111 2.18224 2.18272 2.29063 2.11482 2.4239C2.09454 2.46372 2.06831 2.5371 2.0533 2.72078C2.03771 2.91174 2.03767 3.16238 2.03767 3.54597V6.5284Z"
fill={color}
/>
</IconWrapper>
);
};

13
packages/propel/src/icons/properties/members-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const MembersPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/overdue-date-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const OverdueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
fill={color}
/>
</IconWrapper>
);

21
packages/propel/src/icons/properties/parent-icon.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ParentPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
fill={color}
/>
<path
d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
fill={color}
/>
<path
d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/priority-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const PriorityPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/relates-to-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const RelatesToPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/properties/relation-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const RelationPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
fill={color}
/>
</IconWrapper>
);

17
packages/propel/src/icons/properties/scope-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ScopePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M8.00049 0.708008C12.0274 0.708184 15.2915 3.97303 15.2915 8C15.2913 12.0268 12.0273 15.2908 8.00049 15.291C3.97352 15.291 0.708672 12.0269 0.708496 8C0.708496 3.97292 3.97341 0.708008 8.00049 0.708008ZM7.37549 4V1.98926C4.53761 2.28073 2.28224 4.53713 1.99072 7.375H4.00049C4.34552 7.37518 4.62549 7.65493 4.62549 8C4.62531 8.34492 4.34541 8.62482 4.00049 8.625H1.99072C2.28252 11.4625 4.53789 13.7173 7.37549 14.0088V12C7.37549 11.6548 7.65531 11.375 8.00049 11.375C8.34552 11.3752 8.62549 11.6549 8.62549 12V14.0078C11.4627 13.716 13.7175 11.4622 14.0093 8.625H12.0005C11.6554 8.625 11.3757 8.34503 11.3755 8C11.3755 7.65482 11.6553 7.375 12.0005 7.375H14.0093C13.7178 4.5374 11.463 2.28203 8.62549 1.99023V4C8.62531 4.34492 8.34541 4.62482 8.00049 4.625C7.65542 4.625 7.37566 4.34503 7.37549 4Z"
fill={color}
/>
</IconWrapper>
);
};

13
packages/propel/src/icons/properties/start-date-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const StartDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
fill={color}
/>
</IconWrapper>
);

17
packages/propel/src/icons/properties/state-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const StatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM11.375 8C11.375 6.13612 9.86383 4.62513 8 4.625C6.13604 4.625 4.625 6.13604 4.625 8C4.625 9.86394 6.13604 11.375 8 11.375C9.86383 11.3749 11.375 9.86386 11.375 8ZM12.625 8C12.625 10.5542 10.5542 12.6249 8 12.625C5.44568 12.625 3.375 10.5543 3.375 8C3.375 5.44568 5.44568 3.375 8 3.375C10.5542 3.37513 12.625 5.44576 12.625 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
fill={color}
/>
</IconWrapper>
);
};

17
packages/propel/src/icons/properties/user-circle-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const UserCirclePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95809 9.50928 2.51265 10.8884 3.42773 11.9473C4.03051 11.1928 4.958 10.708 6 10.708H10C11.0413 10.7081 11.9676 11.1926 12.5703 11.9463C13.4854 10.8874 14.0409 9.50932 14.041 8ZM6 11.958C5.31831 11.958 4.71294 12.2919 4.3418 12.8066C5.35728 13.5806 6.62467 14.041 8 14.041C9.37482 14.0409 10.641 13.5801 11.6562 12.8066C11.2851 12.2923 10.6813 11.9581 10 11.958H6ZM10.041 6.33301C10.041 5.20554 9.12741 4.29119 8 4.29102C6.87242 4.29102 5.95801 5.20543 5.95801 6.33301C5.95801 7.46057 6.87242 8.375 8 8.375C9.12741 8.37482 10.041 7.46045 10.041 6.33301ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8ZM11.291 6.33301C11.291 8.15081 9.81776 9.62482 8 9.625C6.18206 9.625 4.70801 8.15091 4.70801 6.33301C4.70801 4.51507 6.18206 3.04102 8 3.04102C9.81776 3.04119 11.291 4.51517 11.291 6.33301Z"
fill={color}
/>
</IconWrapper>
);
};

13
packages/propel/src/icons/properties/user-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const UserPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
fill={color}
/>
</IconWrapper>
);

17
packages/propel/src/icons/properties/user-square-icon.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z"
fill={color}
/>
</IconWrapper>
);
};

21
packages/propel/src/icons/properties/workflows-icon.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const WorkflowsPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} {...rest}>
<path
d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
fill={color}
/>
<path
d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
fill={color}
/>
<path
d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
fill={color}
/>
</IconWrapper>
);

Some files were not shown because too many files have changed in this diff Show more