feat: add client and server icon (#792)

apps/design-system/src/components/ProtocolBadge.stories.tsx → apps/design-system/src/components/ServiceInfoBadge.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { ProtocolBadge } from '@asyncapi/studio-ui'
+import { ServiceInfoBadge } from '@asyncapi/studio-ui'
 
 export default {
-  component: ProtocolBadge,
+  component: ServiceInfoBadge,
   parameters: {
     backgrounds: {
       default: 'dark'
@@ -12,84 +12,96 @@ export default {
 
 export const HTTP = {
   args: {
-    protocol: 'http'
+    info: 'http'
+  }
+}
+
+export const Server = {
+  args: {
+    info: 'server'
+  }
+}
+
+export const Client = {
+  args: {
+    info: 'client'
   }
 }
 
 export const Kafka = {
   args: {
-    protocol: 'kafka'
+    info: 'kafka'
   }
 }
 
 export const Websocket = {
   args: {
-    protocol: 'websocket'
+    info: 'websocket'
   }
 }
 
 export const AMQP = {
   args: {
-    protocol: 'amqp'
+    info: 'amqp'
   }
 }
 
 export const MQTT = {
   args: {
-    protocol: 'mqtt'
+    info: 'mqtt'
   }
 }
 
 export const GooglePubSub = {
   args: {
-    protocol: 'googlepubsub'
+    info: 'googlepubsub'
   }
 }
 
 export const IBMMQ = {
   args: {
-    protocol: 'ibmmq'
+    info: 'ibmmq'
   }
 }
 
 export const NATS = {
   args: {
-    protocol: 'nats'
+    info: 'nats'
   }
 }
 
 export const Pulsar = {
   args: {
-    protocol: 'pulsar'
+    info: 'pulsar'
   }
 }
 
 export const Redis = {
   args: {
-    protocol: 'redis'
+    info: 'redis'
   }
 }
 
 export const SNS = {
   args: {
-    protocol: 'sns'
+    info: 'sns'
   }
 }
 
 export const SQS = {
   args: {
-    protocol: 'sqs'
+    info: 'sqs'
   }
 }
 
 export const Solace = {
   args: {
-    protocol: 'solace'
+    info: 'solace'
   }
 }
 
 export const STOMP = {
   args: {
-    protocol: 'stomp'
+    info: 'stomp'
   }
 }

packages/ui/components/ProtocolBadge.tsx → packages/ui/components/ServiceInfoBadge.tsx

@@ -1,26 +1,36 @@
 import type { FunctionComponent } from 'react'
-import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons'
+import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons'
 
-interface ProtocolBadgeProps {
+interface ServiceInfoBadgeProps {
   className?: string
-  protocol: 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp'
+  info: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp'
 }
 
-export const ProtocolBadge: FunctionComponent<ProtocolBadgeProps> = ({
+export const ServiceInfoBadge: FunctionComponent<ServiceInfoBadgeProps> = ({
   className = '',
-  protocol,
+  info,
   ...props
 }) => {
   let colorName
   let content
   let ariaLabel
 
-  switch (protocol) {
+  switch (info) {
   case 'http':
     ariaLabel = 'HTTP'
     colorName = 'cyan' // bg-cyan-100 text-cyan-900
     content = <span className="text-3xs font-bold">HTTP</span>
     break;
+  case 'client':
+    ariaLabel = 'Client'
+    colorName = 'orange' // bg-orange-100 text-orange-900
+    content = <ClientIcon className="w-4 h-4" />
+    break;
+  case 'server':
+    ariaLabel = 'Server'
+    colorName = 'blue' // bg-blue-100 text-blue-900
+    content = <ServerIcon className="w-4 h-4" />
+    break;
   case 'kafka':
     ariaLabel = 'Kafka'
     colorName = 'indigo' // bg-indigo-100 text-indigo-900

packages/ui/components/icons/ClientIcon.tsx

@@ -0,0 +1,16 @@
+const ClientIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path d="M18.125 14.375V14.1852C18.125 13.896 18.0915 13.6078 18.0253 13.3263L16.1352 5.29333C15.8363 4.02288 14.7026 3.125 13.3975 3.125H6.60254C5.2974 3.125 4.16373 4.02288 3.86481 5.29333L1.97469 13.3263C1.90845 13.6078 1.875 13.896 1.875 14.1852V14.375M18.125 14.375C18.125 15.7557 17.0057 16.875 15.625 16.875H4.375C2.99429 16.875 1.875 15.7557 1.875 14.375M18.125 14.375C18.125 12.9943 17.0057 11.875 15.625 11.875H4.375C2.99429 11.875 1.875 12.9943 1.875 14.375M15.625 14.375H15.6313V14.3813H15.625V14.375ZM13.125 14.375H13.1313V14.3813H13.125V14.375Z" stroke="#78350F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+ClientIcon.displayName = 'ClientIcon';
+
+export default ClientIcon

packages/ui/components/icons/ServerIcon.tsx

@@ -0,0 +1,16 @@
+const ServerIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path d="M11.875 8.125L13.75 10L11.875 11.875M8.125 11.875L6.25 10L8.125 8.125M5 16.875H15C16.0355 16.875 16.875 16.0355 16.875 15V5C16.875 3.96447 16.0355 3.125 15 3.125H5C3.96447 3.125 3.125 3.96447 3.125 5V15C3.125 16.0355 3.96447 16.875 5 16.875Z" stroke="#0C4A6E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+ServerIcon.displayName = 'ServerIcon';
+
+export default ServerIcon

packages/ui/components/icons/index.tsx

@@ -24,6 +24,7 @@ export {
 export { default as AMQPIcon } from './AMQPIcon'
 export { default as AWSSNSIcon } from './AWSSNSIcon'
 export { default as AWSSQSIcon } from './AWSSQSIcon'
+export { default as ClientIcon } from './ClientIcon'
 export { default as GooglePubSubIcon } from './GooglePubSubIcon'
 export { default as IBMMQIcon } from './IBMMQIcon'
 export { default as KafkaIcon } from './KafkaIcon'
@@ -32,6 +33,7 @@ export { default as NATSIcon } from './NATSIcon'
 export { default as PulsarIcon } from './PulsarIcon'
 export { default as RedisIcon } from './RedisIcon'
 export { default as SealIcon } from './SealIcon'
+export { default as ServerIcon } from './ServerIcon'
 export { default as SolaceIcon } from './SolaceIcon'
 export { default as StompIcon } from './StompIcon'
 export { default as WebSocketIcon } from './WebSocketIcon'

packages/ui/components/index.tsx

@@ -7,7 +7,7 @@ export * from './DropdownMenu'
 export * from './Logo'
 export * from './Modal'
 export * from './OperationIcon'
-export * from './ProtocolBadge'
+export * from './ServiceInfoBadge'
 export * from './Sidebar'
 export * from './SlideOver'
 export * from './Toolbar'