feat(data-table): add email and phone cells (#808)

* feat: add email and telephone  data type to data grid cell

* feat: add email and telephone data cell stories

* chore: update dummy email and telephone number in story book

* test: add email cell and phone cell spec tests

Co-authored-by: Maomao Meyer-Zhang <[email protected]>

packages/components/src/components/data-grid/cell-handlers/email-cell.tsx

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { h } from '@stencil/core';
+import { Cell } from './cell-interface';
+
+// Expected content: an email string (eg: 'mailto:[email protected])
+
+export const EmailCell: Cell = {
+  defaults: {
+    sortBy: 'text',
+  },
+  render: ({ content }) => {
+    // Remove protocol (mailto:)
+    const emailNoProtocol = content.replace(/^mailto:/i, '');
+    return <scale-link href={content}>{emailNoProtocol}</scale-link>;
+  },
+};

packages/components/src/components/data-grid/cell-handlers/telephone-cell.tsx

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { h } from '@stencil/core';
+import { Cell } from './cell-interface';
+
+// Expected content: a telephone number  string (eg: 'tel:+491234567')
+
+export const TelephoneCell: Cell = {
+  defaults: {
+    sortBy: 'text',
+  },
+  render: ({ content }) => {
+    // Remove protocol (tell:)
+    const telephoneNoProtocol = content.replace(/^tel:/i, '');
+    return <scale-link href={content}>{telephoneNoProtocol}</scale-link>;
+  },
+};

packages/components/src/components/data-grid/data-grid-cells.ts

@@ -11,24 +11,28 @@
 
 import { CheckboxCell } from './cell-handlers/checkbox-cell';
 import { DateCell } from './cell-handlers/date-cell';
+import { EmailCell } from './cell-handlers/email-cell';
 import { GraphCell } from './cell-handlers/graph-cell';
 import { LinkCell } from './cell-handlers/link-cell';
 import { HTMLCell } from './cell-handlers/html-cell';
 import { NumberCell } from './cell-handlers/number-cell';
 import { SelectCell } from './cell-handlers/select-cell';
 import { TagsCell } from './cell-handlers/tags-cell';
+import { TelephoneCell } from './cell-handlers/telephone-cell';
 import { TextCell } from './cell-handlers/text-cell';
 import { ActionsCell } from './cell-handlers/actions-cell';
 
 export const CELL_TYPES = {
   checkbox: CheckboxCell,
   date: DateCell,
+  email: EmailCell,
   graph: GraphCell,
   html: HTMLCell,
   link: LinkCell,
   number: NumberCell,
   select: SelectCell,
   tags: TagsCell,
+  telephone: TelephoneCell,
   text: TextCell,
   actions: ActionsCell,
 };

packages/components/src/components/data-grid/readme.md

@@ -52,8 +52,8 @@
 - [scale-checkbox](../checkbox)
 - [scale-pagination](../pagination)
 - [scale-switch](../switch)
-- [scale-progress-bar](../progress-bar)
 - [scale-link](../link)
+- [scale-progress-bar](../progress-bar)
 - [scale-text-field](../text-field)
 - [scale-dropdown](../dropdown)
 - [scale-tag](../tag)
@@ -74,8 +74,8 @@ graph TD;
   scale-data-grid --> scale-checkbox
   scale-data-grid --> scale-pagination
   scale-data-grid --> scale-switch
-  scale-data-grid --> scale-progress-bar
   scale-data-grid --> scale-link
+  scale-data-grid --> scale-progress-bar
   scale-data-grid --> scale-text-field
   scale-data-grid --> scale-dropdown
   scale-data-grid --> scale-tag