Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add client and server icon #792

Merged
merged 4 commits into from
Sep 18, 2023
+79 −23
Merged

feat: add client and server icon #792

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f131977
feat: add client and server icon and rename ProtocolBadge to ServiceI…
princerajpoot20 Sep 16, 2023
f52f46e
minor changes
princerajpoot20 Sep 16, 2023
1ff291c
minor changes
princerajpoot20 Sep 16, 2023
508ccad
rename protocol to info
princerajpoot20 Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions .../src/components/ProtocolBadge.stories.tsx → ...c/components/ServiceInfoBadge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -16,6 +16,18 @@ export const HTTP = {
}
}

export const Server = {
args: {
protocol: 'server'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably rename protocol to info or something similar since it's not a Protocol Badge anymore. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

info would be a good choice, or we could use serviceName or serviceInfo, which would be a bit clearer.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I leave it up to you :) I'm fine with anything except serviceName because it's not the name of the service.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure :)

}
}

export const Client = {
args: {
protocol: 'client'
}
}

export const Kafka = {
args: {
protocol: 'kafka'
Expand Down
18 changes: 14 additions & 4 deletions packages/ui/components/ProtocolBadge.tsx → packages/ui/components/ServiceInfoBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
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'
protocol: '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,
...props
Expand All @@ -21,6 +21,16 @@ export const ProtocolBadge: FunctionComponent<ProtocolBadgeProps> = ({
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
Expand Down
16 changes: 16 additions & 0 deletions packages/ui/components/icons/ClientIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
16 changes: 16 additions & 0 deletions packages/ui/components/icons/ServerIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions packages/ui/components/icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
2 changes: 1 addition & 1 deletion packages/ui/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down