diff --git a/components/Icon/Icon.tsx b/components/Icon/Icon.tsx index dfa4119..5f17ccb 100644 --- a/components/Icon/Icon.tsx +++ b/components/Icon/Icon.tsx @@ -14,6 +14,7 @@ import { IconAddLocation } from './icons/IconAddLocation'; import { IconAddRule } from './icons/IconAddRule'; import { IconAddToken } from './icons/IconAddToken'; import { IconAddUser } from './icons/IconAddUser'; +import { IconAliases } from './icons/IconAliases'; import { IconAndroid } from './icons/IconAndroid'; import { IconApple } from './icons/IconApple'; import { IconAppStore } from './icons/IconAppstore'; @@ -22,6 +23,7 @@ import { IconArrowBig } from './icons/IconArrowBig'; import { IconArrowSmall } from './icons/IconArrowSmall'; import { IconAttentionFilled } from './icons/IconAttentionFilled'; import { IconAttentionOutlined } from './icons/IconAttentionOutlined'; +import { IconAuthorisedApp } from './icons/IconAuthorisedApp'; import { IconBiometric } from './icons/IconBiometric'; import { IconBug } from './icons/IconBug'; import { IconCalendar } from './icons/IconCalendar'; @@ -181,6 +183,8 @@ export const Icon = ({ return IconAddRule; case 'add-alias': return IconAddAlias; + case 'aliases': + return IconAliases; case 'upload': return IconUpload; case 'lock-closed': @@ -429,6 +433,8 @@ export const Icon = ({ return IconTutorial; case 'tutorial-not-available': return IconTutorialNotAvailable; + case 'authorised-app': + return IconAuthorisedApp; } }, [iconKind]); diff --git a/components/Icon/icon-types.ts b/components/Icon/icon-types.ts index 0b4a711..97e7ef4 100644 --- a/components/Icon/icon-types.ts +++ b/components/Icon/icon-types.ts @@ -2,6 +2,7 @@ export const IconKind = { IpSuggest: 'ip-suggest', Filtration: 'filtration', AddAlias: 'add-alias', + Aliases: 'aliases', Customize: 'customize', NetworkSettings: 'network-settings', AddGroup: 'add-group', @@ -130,6 +131,7 @@ export const IconKind = { LightBulb: 'light-bulb', Tutorial: 'tutorial', TutorialNotAvailable: 'tutorial-not-available', + AuthorisedApp: 'authorised-app', } as const; export type IconKindValue = (typeof IconKind)[keyof typeof IconKind]; diff --git a/components/Icon/icons/IconAliases.tsx b/components/Icon/icons/IconAliases.tsx new file mode 100644 index 0000000..1e68e1a --- /dev/null +++ b/components/Icon/icons/IconAliases.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconAliases = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/components/Icon/icons/IconAuthorisedApp.tsx b/components/Icon/icons/IconAuthorisedApp.tsx new file mode 100644 index 0000000..d1994d0 --- /dev/null +++ b/components/Icon/icons/IconAuthorisedApp.tsx @@ -0,0 +1,16 @@ +export const IconAuthorisedApp = () => { + return ( + + + + ); +}; diff --git a/components/MarkedSectionHeader/MarkedSectionHeader.tsx b/components/MarkedSectionHeader/MarkedSectionHeader.tsx index 0b3de11..28987d7 100644 --- a/components/MarkedSectionHeader/MarkedSectionHeader.tsx +++ b/components/MarkedSectionHeader/MarkedSectionHeader.tsx @@ -4,7 +4,7 @@ import { SizedBox } from '../SizedBox/SizedBox'; type Props = { title: string; - description: string; + description?: string; }; export const MarkedSectionHeader = ({ description, title }: Props) => { @@ -13,10 +13,14 @@ export const MarkedSectionHeader = ({ description, title }: Props) => { {title} - - - {description} - + {description && ( + <> + + + {description} + + + )} ); diff --git a/components/SectionSelect/SectionSelect.tsx b/components/SectionSelect/SectionSelect.tsx index 92e7abb..93648fe 100644 --- a/components/SectionSelect/SectionSelect.tsx +++ b/components/SectionSelect/SectionSelect.tsx @@ -8,6 +8,8 @@ import { CheckboxIndicator } from '../CheckboxIndicator/CheckboxIndicator'; import { Icon } from '../Icon'; import { RadioIndicator } from '../RadioIndicator/RadioIndicator'; import behavior from './assets/behavior.png'; +import certificateAuthority from './assets/certificate-authority.png'; +import certificates from './assets/certificates.png'; import customSettings from './assets/custom-settings.png'; import customization from './assets/customization.png'; import deviceClc from './assets/device-clc.png'; @@ -61,6 +63,8 @@ export const SectionSelect = ({ }: Props) => { const imageSource = useMemo(() => { switch (image) { + case 'certificate-authority': + return certificateAuthority; case 'ldap': return ldap; case 'proxy-management': @@ -73,6 +77,8 @@ export const SectionSelect = ({ return remoteActivation; case 'enrollment': return enrollment; + case 'certificates': + return certificates; case 'manual-setup': return manualSetup; case 'token-email': diff --git a/components/SectionSelect/assets/certificate-authority.png b/components/SectionSelect/assets/certificate-authority.png new file mode 100644 index 0000000..7348c77 Binary files /dev/null and b/components/SectionSelect/assets/certificate-authority.png differ diff --git a/components/SectionSelect/assets/certificates.png b/components/SectionSelect/assets/certificates.png new file mode 100644 index 0000000..824664d Binary files /dev/null and b/components/SectionSelect/assets/certificates.png differ diff --git a/components/SectionSelect/types.ts b/components/SectionSelect/types.ts index 3094e90..0ee8634 100644 --- a/components/SectionSelect/types.ts +++ b/components/SectionSelect/types.ts @@ -1,4 +1,5 @@ const SectionSelectImage = { + CertificateAuthority: 'certificate-authority', Smtp: 'smtp', GatewayNotifications: 'gateway-notifications', RemoteActivation: 'remote-activation', @@ -21,6 +22,7 @@ const SectionSelectImage = { Vector: 'vector', LDAP: 'ldap', Enrollment: 'enrollment', + Certificates: 'certificates', ExternalId: 'external-id', } as const;