Skip to content

Commit

Permalink
Merge pull request #153 from kubeshop/razvantopliceanu/feat/add-missi…
Browse files Browse the repository at this point in the history
…ng-icons

feat: add missing icons
  • Loading branch information
topliceanurazvan authored Jan 20, 2023
2 parents 6398ad4 + d96a2f0 commit f4c6d18
Show file tree
Hide file tree
Showing 9 changed files with 196 additions and 76 deletions.
5 changes: 5 additions & 0 deletions .changeset/forty-dolphins-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@monokle/components": patch
---

Add missing icons
45 changes: 26 additions & 19 deletions packages/components/src/atoms/Icon/Icon.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import React, { useMemo } from "react";
import React, {useMemo} from 'react';

import AntdIcon, { ExclamationCircleOutlined } from "@ant-design/icons";
import AntdIcon, {ExclamationCircleOutlined} from '@ant-design/icons';

import { IconNames } from "./types";
import {IconNames} from './types';

import Colors from "@/styles/Colors";
import Colors from '@/styles/Colors';

import {
AllProjects,
ClusterDashboard,
Collapse,
Compare,
Git,
GitOps,
GitRepository,
Explorer,
Helm,
Images,
Expand All @@ -28,11 +30,12 @@ import {
SeverityLow,
SeverityMedium,
Shortcuts,
SplitView,
Terminal,
Validation,
Warning,
YAMLSyntax,
} from "./Icons";
} from './Icons';

type IconProps = {
name: IconNames;
Expand All @@ -44,36 +47,39 @@ type IconProps = {
};

const icons: Record<IconNames, React.ComponentType<any>> = {
"all-projects": AllProjects,
"cluster-dashboard": ClusterDashboard,
'all-projects': AllProjects,
'cluster-dashboard': ClusterDashboard,
collapse: Collapse,
compare: Compare,
error: ExclamationCircleOutlined,
explorer: Explorer,
"git-ops": Git,
git: Git,
'git-ops': GitOps,
'git-repository': GitRepository,
helm: Helm,
images: Images,
incomingRefs: IncomingRefs,
"k8s-schema": K8sSchema,
'k8s-schema': K8sSchema,
kubernetes: Kubernetes,
kustomize: Kustomize,
"opa-status": OPAStatus,
"open-policy-agent": OpenPolicyAgent,
'opa-status': OPAStatus,
'open-policy-agent': OpenPolicyAgent,
outgoingRefs: OutgoingRefs,
"resource-links": ResourceLinks,
'resource-links': ResourceLinks,
search: Search,
"severity-high": SeverityHigh,
"severity-low": SeverityLow,
"severity-medium": SeverityMedium,
'severity-high': SeverityHigh,
'severity-low': SeverityLow,
'severity-medium': SeverityMedium,
shortcuts: Shortcuts,
'split-view': SplitView,
terminal: Terminal,
validation: Validation,
warning: Warning,
"yaml-syntax": YAMLSyntax,
'yaml-syntax': YAMLSyntax,
};

export const Icon: React.FC<IconProps> = (props) => {
const { name, style, color, onMouseEnter, onMouseLeave, className } = props;
const Icon: React.FC<IconProps> = props => {
const {name, style, color, onMouseEnter, onMouseLeave, className} = props;

const finalStyle: React.CSSProperties = useMemo(() => {
const customStyle = style || {};
Expand All @@ -87,11 +93,12 @@ export const Icon: React.FC<IconProps> = (props) => {
return (
<AntdIcon
className={className}
// @ts-ignore */
component={icons[name]}
style={finalStyle}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
);
};

export default Icon;
18 changes: 13 additions & 5 deletions packages/components/src/atoms/Icon/Icons/Git.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
const Git: React.FC = ({ width, height }: { width?: number; height?: number }) => {
const iconWidth = width || "22";
const iconHeight = height || "11";
const Git: React.FC = ({width, height}: {width?: number; height?: number}) => {
const iconWidth = width || '16';
const iconHeight = height || '16';

return (
<svg width={iconWidth} height={iconHeight} viewBox="0 0 22 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width={iconWidth}
height={iconHeight}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.9688 4.46875H16.4016C16.1619 3.21174 15.4913 2.0777 14.5053 1.262C13.5193 0.446294 12.2797 0 11 0C9.72033 0 8.48073 0.446294 7.49474 1.262C6.50875 2.0777 5.83811 3.21174 5.59836 4.46875H1.03125C0.757746 4.46875 0.495443 4.5774 0.302046 4.7708C0.108649 4.96419 0 5.22649 0 5.5C0 5.7735 0.108649 6.03581 0.302046 6.2292C0.495443 6.4226 0.757746 6.53125 1.03125 6.53125H5.59836C5.83811 7.78826 6.50875 8.92229 7.49474 9.738C8.48073 10.5537 9.72033 11 11 11C12.2797 11 13.5193 10.5537 14.5053 9.738C15.4913 8.92229 16.1619 7.78826 16.4016 6.53125H20.9688C21.2423 6.53125 21.5046 6.4226 21.698 6.2292C21.8913 6.03581 22 5.7735 22 5.5C22 5.22649 21.8913 4.96419 21.698 4.7708C21.5046 4.5774 21.2423 4.46875 20.9688 4.46875ZM11 8.9375C10.3201 8.9375 9.65552 8.73589 9.09023 8.35818C8.52493 7.98046 8.08434 7.44359 7.82416 6.81547C7.56399 6.18735 7.49591 5.49619 7.62855 4.82938C7.76119 4.16257 8.08858 3.55006 8.56932 3.06932C9.05006 2.58858 9.66257 2.26119 10.3294 2.12855C10.9962 1.99591 11.6874 2.06399 12.3155 2.32416C12.9436 2.58434 13.4805 3.02493 13.8582 3.59023C14.2359 4.15552 14.4375 4.82013 14.4375 5.5C14.4365 6.41136 14.074 7.2851 13.4295 7.92954C12.7851 8.57397 11.9114 8.93646 11 8.9375Z"
fillRule="evenodd"
clipRule="evenodd"
d="M15.6984 7.28745L8.71255 0.301806C8.31032 -0.100602 7.65786 -0.100602 7.25528 0.301806L5.8048 1.75264L7.6448 3.59281C8.07246 3.44829 8.5628 3.54528 8.90374 3.88604C9.24643 4.22908 9.34254 4.7236 9.19436 5.15282L10.968 6.92631C11.3972 6.7783 11.8921 6.8739 12.2348 7.21728C12.7137 7.69595 12.7137 8.47204 12.2348 8.95106C11.7556 9.43026 10.9797 9.43026 10.5003 8.95106C10.1402 8.59062 10.0511 8.06127 10.2337 7.61759L8.57952 5.96356V10.3162C8.69618 10.374 8.80641 10.451 8.90374 10.548C9.38259 11.0268 9.38259 11.8027 8.90374 12.2823C8.42489 12.761 7.64846 12.761 7.16978 12.2823C6.69093 11.8027 6.69093 11.0268 7.16978 10.548C7.28819 10.4298 7.42523 10.3403 7.57149 10.2804V5.88747C7.42523 5.82774 7.28854 5.73893 7.16978 5.62001C6.80708 5.25747 6.71984 4.72499 6.90598 4.27957L5.09192 2.46534L0.301676 7.25506C-0.100559 7.65782 -0.100559 8.31027 0.301676 8.71268L7.28784 15.6983C7.69008 16.1006 8.34236 16.1006 8.74511 15.6983L15.6984 8.74507C16.101 8.34266 16.101 7.68986 15.6984 7.28745Z"
fill="currentColor"
/>
</svg>
Expand Down
27 changes: 27 additions & 0 deletions packages/components/src/atoms/Icon/Icons/GitOps.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const GitOps: React.FC = ({
width,
height,
}: {
width?: number;
height?: number;
}) => {
const iconWidth = width || '22';
const iconHeight = height || '11';

return (
<svg
width={iconWidth}
height={iconHeight}
viewBox="0 0 22 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.9688 4.46875H16.4016C16.1619 3.21174 15.4913 2.0777 14.5053 1.262C13.5193 0.446294 12.2797 0 11 0C9.72033 0 8.48073 0.446294 7.49474 1.262C6.50875 2.0777 5.83811 3.21174 5.59836 4.46875H1.03125C0.757746 4.46875 0.495443 4.5774 0.302046 4.7708C0.108649 4.96419 0 5.22649 0 5.5C0 5.7735 0.108649 6.03581 0.302046 6.2292C0.495443 6.4226 0.757746 6.53125 1.03125 6.53125H5.59836C5.83811 7.78826 6.50875 8.92229 7.49474 9.738C8.48073 10.5537 9.72033 11 11 11C12.2797 11 13.5193 10.5537 14.5053 9.738C15.4913 8.92229 16.1619 7.78826 16.4016 6.53125H20.9688C21.2423 6.53125 21.5046 6.4226 21.698 6.2292C21.8913 6.03581 22 5.7735 22 5.5C22 5.22649 21.8913 4.96419 21.698 4.7708C21.5046 4.5774 21.2423 4.46875 20.9688 4.46875ZM11 8.9375C10.3201 8.9375 9.65552 8.73589 9.09023 8.35818C8.52493 7.98046 8.08434 7.44359 7.82416 6.81547C7.56399 6.18735 7.49591 5.49619 7.62855 4.82938C7.76119 4.16257 8.08858 3.55006 8.56932 3.06932C9.05006 2.58858 9.66257 2.26119 10.3294 2.12855C10.9962 1.99591 11.6874 2.06399 12.3155 2.32416C12.9436 2.58434 13.4805 3.02493 13.8582 3.59023C14.2359 4.15552 14.4375 4.82013 14.4375 5.5C14.4365 6.41136 14.074 7.2851 13.4295 7.92954C12.7851 8.57397 11.9114 8.93646 11 8.9375Z"
fill="currentColor"
/>
</svg>
);
};

export default GitOps;
27 changes: 27 additions & 0 deletions packages/components/src/atoms/Icon/Icons/GitRepository.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const GitRepository: React.FC = ({
width,
height,
}: {
width?: number;
height?: number;
}) => {
const iconWidth = width || '32';
const iconHeight = height || '32';

return (
<svg
width={iconWidth}
height={iconHeight}
viewBox="0 0 32 32"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.002 2C15.498 2 15.0059 2.18359 14.627 2.5625L11.8145 5.40625C11.6621 5.48828 11.5332 5.60547 11.4395 5.75L2.56445 14.625C1.80664 15.3789 1.80664 16.6172 2.56445 17.375L14.627 29.4375C15.3848 30.1914 16.6191 30.1914 17.377 29.4375L29.4395 17.375C30.1973 16.6211 30.1973 15.3828 29.4395 14.625L17.377 2.5625C16.998 2.18359 16.5059 2 16.002 2ZM16.002 4.03125L27.9707 16L16.002 27.9688L4.0332 16L12.3145 7.71875L14.0645 9.46875C14.0176 9.63672 14.002 9.81641 14.002 10C14.002 10.7383 14.4043 11.3711 15.002 11.7188V20.2812C14.4043 20.6289 14.002 21.2617 14.002 22C14.002 23.1055 14.8965 24 16.002 24C17.1074 24 18.002 23.1055 18.002 22C18.002 21.2617 17.5996 20.6289 17.002 20.2812V12.4375L20.0645 15.5C20.0215 15.6602 20.002 15.8281 20.002 16C20.002 17.1055 20.8965 18 22.002 18C23.1074 18 24.002 17.1055 24.002 16C24.002 14.8945 23.1074 14 22.002 14C21.8301 14 21.6621 14.0195 21.502 14.0625L17.9395 10.5C17.9824 10.3398 18.002 10.1719 18.002 10C18.002 8.89453 17.1074 8 16.002 8C15.8184 8 15.6387 8.01562 15.4707 8.0625L13.7207 6.3125L16.002 4.03125Z"
fill="currentColor"
/>
</svg>
);
};

export default GitRepository;
39 changes: 39 additions & 0 deletions packages/components/src/atoms/Icon/Icons/SplitView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const SplitView: React.FC = ({
width,
height,
}: {
width?: number;
height?: number;
}) => {
const iconWidth = width || '20';
const iconHeight = height || '20';

return (
<svg
width={iconWidth}
height={iconHeight}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_112_2183)">
<path d="M10.625 2.5H9.375V17.5H10.625V2.5Z" fill="currentColor" />
<path
d="M6.25 4.375V15.625H2.5V4.375H6.25ZM6.25 3.125H2.5C2.16848 3.125 1.85054 3.2567 1.61612 3.49112C1.3817 3.72554 1.25 4.04348 1.25 4.375V15.625C1.25 15.9565 1.3817 16.2745 1.61612 16.5089C1.85054 16.7433 2.16848 16.875 2.5 16.875H6.25C6.58152 16.875 6.89946 16.7433 7.13388 16.5089C7.3683 16.2745 7.5 15.9565 7.5 15.625V4.375C7.5 4.04348 7.3683 3.72554 7.13388 3.49112C6.89946 3.2567 6.58152 3.125 6.25 3.125Z"
fill="currentColor"
/>
<path
d="M17.5 4.375V15.625H13.75V4.375H17.5ZM17.5 3.125H13.75C13.4185 3.125 13.1005 3.2567 12.8661 3.49112C12.6317 3.72554 12.5 4.04348 12.5 4.375V15.625C12.5 15.9565 12.6317 16.2745 12.8661 16.5089C13.1005 16.7433 13.4185 16.875 13.75 16.875H17.5C17.8315 16.875 18.1495 16.7433 18.3839 16.5089C18.6183 16.2745 18.75 15.9565 18.75 15.625V4.375C18.75 4.04348 18.6183 3.72554 18.3839 3.49112C18.1495 3.2567 17.8315 3.125 17.5 3.125Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_112_2183">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
);
};

export default SplitView;
53 changes: 28 additions & 25 deletions packages/components/src/atoms/Icon/Icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
export { default as AllProjects } from "./AllProjects";
export { default as ClusterDashboard } from "./ClusterDashboard";
export { default as Collapse } from "./Collapse";
export { default as Compare } from "./Compare";
export { default as Explorer } from "./Explorer";
export { default as Helm } from "./Helm";
export { default as Git } from "./Git";
export { default as K8sSchema } from "./K8sSchema";
export { default as Kustomize } from "./Kustomize";
export { default as Kubernetes } from "./Kubernetes";
export { default as Images } from "./Images";
export { default as IncomingRefs } from "./IncomingRefs";
export { default as OPAStatus } from "./OPAStatus";
export { default as OpenPolicyAgent } from "./OpenPolicyAgent";
export { default as OutgoingRefs } from "./OutgoingRefs";
export { default as ResourceLinks } from "./ResourceLinks";
export { default as SeverityHigh } from "./SeverityHigh";
export { default as SeverityLow } from "./SeverityLow";
export { default as SeverityMedium } from "./SeverityMedium";
export { default as Shortcuts } from "./Shortcuts";
export { default as Terminal } from "./Terminal";
export { default as Validation } from "./Validation";
export { default as Warning } from "./Warning";
export { default as YAMLSyntax } from "./YAMLSyntax";
export { default as Search } from "./Search";
export {default as AllProjects} from './AllProjects';
export {default as ClusterDashboard} from './ClusterDashboard';
export {default as Collapse} from './Collapse';
export {default as Compare} from './Compare';
export {default as Explorer} from './Explorer';
export {default as Helm} from './Helm';
export {default as Git} from './Git';
export {default as GitOps} from './GitOps';
export {default as GitRepository} from './GitRepository';
export {default as K8sSchema} from './K8sSchema';
export {default as Kustomize} from './Kustomize';
export {default as Kubernetes} from './Kubernetes';
export {default as Images} from './Images';
export {default as IncomingRefs} from './IncomingRefs';
export {default as OPAStatus} from './OPAStatus';
export {default as OpenPolicyAgent} from './OpenPolicyAgent';
export {default as OutgoingRefs} from './OutgoingRefs';
export {default as ResourceLinks} from './ResourceLinks';
export {default as SeverityHigh} from './SeverityHigh';
export {default as SeverityLow} from './SeverityLow';
export {default as SeverityMedium} from './SeverityMedium';
export {default as Shortcuts} from './Shortcuts';
export {default as SplitView} from './SplitView';
export {default as Terminal} from './Terminal';
export {default as Validation} from './Validation';
export {default as Warning} from './Warning';
export {default as YAMLSyntax} from './YAMLSyntax';
export {default as Search} from './Search';
3 changes: 2 additions & 1 deletion packages/components/src/atoms/Icon/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from "./Icon";
export {default as Icon} from './Icon';
export type {IconNames} from './types';
55 changes: 29 additions & 26 deletions packages/components/src/atoms/Icon/types.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
export type IconNames =
| "all-projects"
| "cluster-dashboard"
| "compare"
| "explorer"
| "images"
| "git-ops"
| "kubernetes"
| "collapse"
| "opa-status"
| "helm"
| "kustomize"
| "incomingRefs"
| "outgoingRefs"
| "warning"
| "error"
| "validation"
| "open-policy-agent"
| "severity-high"
| "severity-medium"
| "severity-low"
| "shortcuts"
| "yaml-syntax"
| "resource-links"
| "k8s-schema"
| "search"
| "terminal";
| 'all-projects'
| 'cluster-dashboard'
| 'compare'
| 'explorer'
| 'images'
| 'git'
| 'git-ops'
| 'git-repository'
| 'kubernetes'
| 'collapse'
| 'opa-status'
| 'helm'
| 'kustomize'
| 'incomingRefs'
| 'outgoingRefs'
| 'warning'
| 'error'
| 'validation'
| 'open-policy-agent'
| 'severity-high'
| 'severity-medium'
| 'severity-low'
| 'shortcuts'
| 'split-view'
| 'yaml-syntax'
| 'resource-links'
| 'k8s-schema'
| 'search'
| 'terminal';

0 comments on commit f4c6d18

Please sign in to comment.