feat: add callto link to user details (#269)

src/UserDetailsPopover/PhoneRow.tsx

@@ -0,0 +1,19 @@
+import { PhoneOutlined } from '@ant-design/icons';
+import React from 'react';
+
+import { Anchor } from '../Anchor';
+
+import { RowWithLabel } from './RowWithLabel';
+import { callToLink } from './phone';
+
+type PhoneRowProps = {
+  phone: string;
+};
+
+export function PhoneRow({ phone }: PhoneRowProps) {
+  return (
+    <RowWithLabel label={<PhoneOutlined />}>
+      <Anchor href={callToLink(phone)}>{phone}</Anchor>
+    </RowWithLabel>
+  );
+}

src/UserDetailsPopover/UserDetails.tsx

@@ -8,6 +8,7 @@ import { Space } from '../Space';
 import { Typography } from '../Typography';
 
 import { EmailRow } from './EmailRow';
+import { PhoneRow } from './PhoneRow';
 import { GUTTER, SPACE } from './constants';
 
 type User = {
@@ -16,6 +17,7 @@ type User = {
   firstname?: string | null;
   inactive?: boolean;
   lastname?: string | null;
+  phone?: string | null;
   username: string;
 };
 
@@ -24,7 +26,8 @@ export type UserDetailsProps = {
 };
 
 export function UserDetails({ user }: UserDetailsProps) {
-  const { acronym, email, firstname, lastname, inactive, username } = user;
+  const { acronym, email, firstname, lastname, inactive, username, phone } =
+    user;
   const fullName = joinNonEmpty([firstname, lastname], ' ');
   const showFullName = !inactive && fullName;
   return (
@@ -54,9 +57,14 @@ export function UserDetails({ user }: UserDetailsProps) {
 
       <Divider style={{ marginTop: SPACE, marginBottom: SPACE }} />
 
-      {inactive
-        ? 'The user was deactivated'
-        : email && <EmailRow email={email} />}
+      {inactive ? (
+        'The user was deactivated'
+      ) : (
+        <>
+          {email && <EmailRow email={email} />}
+          {phone && <PhoneRow phone={phone} />}
+        </>
+      )}
     </Space>
   );
 }

src/UserDetailsPopover/index.stories.tsx

@@ -13,6 +13,7 @@ export default {
     email: { control: { type: 'text' }, defaultValue: '[email protected]' },
     firstname: { control: { type: 'text' }, defaultValue: 'John' },
     lastname: { control: { type: 'text' }, defaultValue: 'Doe' },
+    phone: { control: { type: 'text' }, defaultValue: '123' },
     username: { control: { type: 'text' }, defaultValue: 'jdoe' },
     inactive: {
       control: {
@@ -56,6 +57,7 @@ export const Default: Story = function Link(args) {
                 firstname: args.firstname,
                 lastname: args.lastname,
                 username: args.username,
+                phone: args.phone,
                 inactive: args.inactive,
               }
         }
@@ -73,6 +75,7 @@ export const WithCustomChildren: Story = function Link(args) {
       firstname: args.firstname,
       lastname: args.lastname,
       username: args.username,
+      phone: args.phone,
       inactive: args.inactive,
     }),
     [args],

src/UserDetailsPopover/phone.test.ts

@@ -0,0 +1,12 @@
+import { callToLink } from './phone';
+
+describe('callToLink', () => {
+  it('throws error when phone is empty ', () => {
+    expect(() => callToLink('')).toThrow(/empty/);
+  });
+
+  it('renders callto link ', () => {
+    const phone = '123';
+    expect(callToLink(phone)).toBe(`callto:${phone}`);
+  });
+});

src/UserDetailsPopover/phone.ts

@@ -0,0 +1,7 @@
+export function callToLink(phone: string): string {
+  if (!phone) {
+    throw new Error('Could not create callto-Link because phone is empty');
+  }
+
+  return `callto:${phone}`;
+}