diff --git a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx b/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx index f658b92..1200359 100644 --- a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx +++ b/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx @@ -2,6 +2,7 @@ import { type CSSProperties, type Ref, useMemo } from 'react'; import type { IconKindValue } from './icon-types'; import './style.scss'; import type { Direction } from '../../types'; +import { IconAccessSettings } from './icons/IconAccessSettings'; import { IconAndroid } from './icons/IconAndroid'; import { IconApple } from './icons/IconApple'; import { IconAppStore } from './icons/IconAppstore'; @@ -61,6 +62,10 @@ const mapRotation = (kind: IconKindValue, direction: Direction): number => { return 0; }; +const EmptyIcon = () => { + return null; +}; + // Color should be set by css bcs some icons have different structures like 'loader' export const Icon = ({ icon: iconKind, @@ -131,8 +136,130 @@ export const Icon = ({ return IconGlobe; case 'help': return IconHelp; - default: - throw Error(`Unimplemented icon kind: ${iconKind}`); + case 'access-settings': + return IconAccessSettings; + case 'activity': + return EmptyIcon; + case 'activity-notes': + return EmptyIcon; + case 'add-user': + return EmptyIcon; + case 'analytics': + return EmptyIcon; + case 'archive': + return EmptyIcon; + case 'attention': + return EmptyIcon; + case 'check': + return EmptyIcon; + case 'clear': + return EmptyIcon; + case 'code': + return EmptyIcon; + case 'collapse': + return EmptyIcon; + case 'credit-card': + return EmptyIcon; + case 'date': + return EmptyIcon; + case 'delete': + return EmptyIcon; + case 'deploy': + return EmptyIcon; + case 'devices': + return EmptyIcon; + case 'devices-active': + return EmptyIcon; + case 'download': + return EmptyIcon; + case 'edit': + return EmptyIcon; + case 'enter': + return EmptyIcon; + case 'expand': + return EmptyIcon; + case 'filter': + return EmptyIcon; + case 'gateway': + return EmptyIcon; + case 'gift': + return EmptyIcon; + case 'github': + return EmptyIcon; + case 'groups': + return EmptyIcon; + case 'hamburger': + return EmptyIcon; + case 'info-filled': + return EmptyIcon; + case 'info-outlined': + return EmptyIcon; + case 'location': + return EmptyIcon; + case 'location-preview': + return EmptyIcon; + case 'location-tracking': + return EmptyIcon; + case 'logout': + return EmptyIcon; + case 'mail': + return EmptyIcon; + case 'manage-keys': + return EmptyIcon; + case 'menu': + return EmptyIcon; + case 'minus-circle': + return EmptyIcon; + case 'navigation-collapse': + return EmptyIcon; + case 'navigation-uncollapse': + return EmptyIcon; + case 'notification': + return EmptyIcon; + case 'one-time-password': + return EmptyIcon; + case 'openid': + return EmptyIcon; + case 'pdf': + return EmptyIcon; + case 'pie-chart': + return EmptyIcon; + case 'plus-circle': + return EmptyIcon; + case 'profile': + return EmptyIcon; + case 'protection': + return EmptyIcon; + case 'qr': + return EmptyIcon; + case 'search': + return EmptyIcon; + case 'servers': + return EmptyIcon; + case 'settings': + return EmptyIcon; + case 'sort': + return EmptyIcon; + case 'status-attention': + return EmptyIcon; + case 'status-available': + return EmptyIcon; + case 'status-important': + return EmptyIcon; + case 'support': + return EmptyIcon; + case 'transactions': + return EmptyIcon; + case 'user': + return EmptyIcon; + case 'user-active': + return EmptyIcon; + case 'users': + return EmptyIcon; + case 'webhooks': + return EmptyIcon; + case 'yubi-keys': + return EmptyIcon; } }, [iconKind]); diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx new file mode 100644 index 0000000..5cb508a --- /dev/null +++ b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconAccessSettings = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss index 3938144..4e66291 100644 --- a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss +++ b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss @@ -27,7 +27,7 @@ } &.variant-warning { - --bg-color: var(--bg-warning); + --bg-color: var(--bg-warning-transparent); --color: var(--fg-attention); --icon-color: var(--fg-attention); } @@ -52,7 +52,6 @@ max-width: 100%; overflow: hidden; text-wrap: wrap; - text-wrap: balance; text-align: left; } diff --git a/webnext/src/shared/defguard-ui/scss/_themes.scss b/webnext/src/shared/defguard-ui/scss/_themes.scss index 55f1792..ef13c12 100644 --- a/webnext/src/shared/defguard-ui/scss/_themes.scss +++ b/webnext/src/shared/defguard-ui/scss/_themes.scss @@ -21,6 +21,7 @@ --bg-success: var(--c-green-500); --bg-warning: var(--c-orange-500); + --bg-warning-transparent: var(--c-orange-500-transparent); --border-action: var(--c-blue-500); --border-action-disabled: var(--c-blue-300); @@ -78,6 +79,7 @@ --bg-success: var(--c-green-500); --bg-warning: var(--c-orange-500); + --bg-warning-transparent: var(--c-orange-500-transparent); --border-action: var(--c-blue-500); --border-action-disabled: var(--c-blue-300);