@openfin/ui-library 0.1.22 → 0.1.23-alpha.1627330098

package/dist/components/layout/DefinitionList/definitionList.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 export interface DefinitionListProps extends React.HTMLAttributes<HTMLDListElement> {
-    definitions: {
-        [key: string]: string;
-    };
+    definitions: Map<string, string>;
 }
 export declare const DefinitionList: React.FC<DefinitionListProps>;

package/dist/components/layout/DefinitionList/definitionList.js

@@ -20,19 +20,30 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const DefinitionList = (_a) => {
     var { definitions } = _a, rest = __rest(_a, ["definitions"]);
-    return (jsx_runtime_1.jsx(List, Object.assign({}, rest, { children: Object.keys(definitions).map((name, index) => {
+    return (jsx_runtime_1.jsx(List, Object.assign({}, rest, { children: Array.from(definitions.keys()).map((name, index) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(Name, { children: name }, void 0),
-                    jsx_runtime_1.jsx(Definition, { children: definitions[name] }, void 0)] }, `${name}-${index}`));
+                    jsx_runtime_1.jsx(Definition, { children: definitions.get(name) }, void 0)] }, `${name}-${index}`));
         }) }), void 0));
 };
 exports.DefinitionList = DefinitionList;
 const List = styled_components_1.default.dl `
   display: grid;
   grid-template-columns: 1fr 3fr;
-  gap: ${({ theme }) => `0 ${theme.px.small}`};
+  gap: ${({ theme }) => `0 ${theme.px.large}`};
+  overflow-y: auto;
+  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
+  word-break: break-word;
 `;
 const Name = styled_components_1.default.dt `
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  color: ${({ theme }) => theme.palette.textHelp};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: ${({ theme }) => theme.fontWeight.normal};
+  line-height: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
   white-space: nowrap;
 `;
-const Definition = styled_components_1.default.dd ``;
+const Definition = styled_components_1.default.dd `
+  font-size: ${({ theme }) => theme.fontSize.small};
+  line-height: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
+`;

package/dist/components/templates/ContactCard/contactCard.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ContactCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Name of the contact.
+     */
+    name: string;
+    /**
+     * Title of the contact.
+     */
+    title?: string;
+    /**
+     * URL for the contact's profile photo.
+     */
+    photoUrl?: string;
+    /**
+     * A flag to indicate that the contact card should display the contact's initials as profile photo if the photo url is undefined.
+     */
+    useInitials?: boolean;
+    /**
+     * An array of detail list objects that can be used for logical grouping of contact details.
+     */
+    details: Map<string, string>[];
+}
+export declare const ContactCard: React.FC<ContactCardProps>;

package/dist/components/templates/ContactCard/contactCard.js

@@ -0,0 +1,114 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+// import { getColorForName, getInitials } from '../utils/name';
+const DefinitionList_1 = require("../../layout/DefinitionList");
+const name_1 = require("../utils/name");
+const ContactCard = (_a) => {
+    var { name, title, photoUrl, useInitials = false, details } = _a, rest = __rest(_a, ["name", "title", "photoUrl", "useInitials", "details"]);
+    const renderProfileImage = photoUrl || useInitials;
+    const initials = react_1.default.useMemo(() => name_1.getInitials(name), [name]);
+    const color = react_1.default.useMemo(() => name_1.getColorForName(name), [name]);
+    return (jsx_runtime_1.jsxs(Container, Object.assign({}, rest, { children: [jsx_runtime_1.jsxs(Header, { children: [renderProfileImage && (jsx_runtime_1.jsx(ProfileImage, Object.assign({ iconColor: color }, { children: photoUrl ? jsx_runtime_1.jsx(Photo, { alt: title, src: photoUrl }, void 0) : jsx_runtime_1.jsx(LetterIcon, { children: initials }, void 0) }), void 0)),
+                    jsx_runtime_1.jsxs(Identity, { children: [jsx_runtime_1.jsxs(Name, { children: [" ", name, " "] }, void 0),
+                            title && jsx_runtime_1.jsxs(Title, { children: [" ", title, " "] }, void 0)] }, void 0)] }, void 0),
+            jsx_runtime_1.jsx(DetailsPane, { children: details.map((list, index) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(DetailList, { definitions: list }, void 0),
+                        index < details.length - 1 && jsx_runtime_1.jsx(HorizontalLine, {}, void 0)] }, `${name}-details-${index}`))) }, void 0)] }), void 0));
+};
+exports.ContactCard = ContactCard;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: ${({ theme }) => theme.px.base};
+`;
+const Header = styled_components_1.default.div `
+  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
+  display: flex;
+  margin-bottom: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
+`;
+const ProfileImage = styled_components_1.default.div `
+  align-items: center;
+  background-color: ${(attrs) => attrs.iconColor};
+  border-radius: ${({ theme }) => theme.px.xsmall};
+  display: flex;
+  height: ${({ theme }) => theme.iconSize.xxxlarge};
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.px.small};
+  width: ${({ theme }) => theme.iconSize.xxxlarge};
+`;
+const LetterIcon = styled_components_1.default.span `
+  font-size: ${({ theme }) => theme.fontSize.base};
+  text-transform: uppercase;
+`;
+const Photo = styled_components_1.default.img `
+  border-radius: ${({ theme }) => theme.px.xsmall};
+  height: ${({ theme }) => theme.iconSize.xxxlarge};
+  object-fit: cover;
+  user-select: none;
+  width: ${({ theme }) => theme.iconSize.xxxlarge};
+`;
+const Identity = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+`;
+const Name = styled_components_1.default.span `
+  font-size: ${({ theme }) => theme.fontSize.large};
+  line-height: ${({ theme }) => theme.px.large};
+  overflow: hidden;
+  padding-bottom: ${({ theme }) => theme.px.xsmall};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Title = styled_components_1.default.span `
+  color: ${({ theme }) => theme.palette.textHelp};
+  line-height: ${({ theme }) => theme.px.base};
+  overflow: hidden;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const DetailsPane = styled_components_1.default.div `
+  background-color: ${({ theme }) => theme.palette.background5};
+  border-radius: 2px;
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.px.small};
+`;
+const HorizontalLine = styled_components_1.default.div `
+  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
+  margin-bottom: ${({ theme }) => theme.px.base};
+`;
+const DetailList = styled_components_1.default(DefinitionList_1.DefinitionList) `
+  dt {
+    text-align: left;
+    text-transform: capitalize;
+  }
+
+  dd {
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

package/dist/components/templates/ContactCard/index.d.ts

@@ -0,0 +1 @@
+export * from './contactCard';

package/dist/components/templates/ContactCard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./contactCard"), exports);

package/dist/components/templates/utils/name.d.ts

@@ -0,0 +1,2 @@
+export declare const getInitials: (name: string) => string;
+export declare const getColorForName: (name?: string) => string;

package/dist/components/templates/utils/name.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorForName = exports.getInitials = void 0;
+const getInitials = (name) => {
+    const trimmed = name.trim();
+    const lastWordPos = trimmed.lastIndexOf(' ');
+    if (lastWordPos > -1) {
+        return [trimmed.charAt(0), trimmed.charAt(lastWordPos + 1)].join('');
+    }
+    return trimmed.slice(0, 2);
+};
+exports.getInitials = getInitials;
+const colors = ['#8C61FF', '#00CC88', '#FF8FB8', '#FF976B', '#FD5E60', '#36C3FE', '#5254FB'];
+const getColorForName = (name = '') => {
+    let total = 0;
+    for (let i = 0; i < name.length; i++) {
+        const code = name.codePointAt(i);
+        total += code;
+    }
+    return colors[total % colors.length];
+};
+exports.getColorForName = getColorForName;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/layout/Box';
 export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';
 export * from './components/system/ThemeProvider';
+export * from './components/templates/ContactCard';
 export * from './components/typography/Heading';
 export * from './components/typography/Text';
 export * from './hooks/useColorScheme';

package/dist/index.js

@@ -36,6 +36,7 @@ __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/layout/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);
 __exportStar(require("./components/system/ThemeProvider"), exports);
+__exportStar(require("./components/templates/ContactCard"), exports);
 __exportStar(require("./components/typography/Heading"), exports);
 __exportStar(require("./components/typography/Text"), exports);
 __exportStar(require("./hooks/useColorScheme"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.22",
+  "version": "0.1.23-alpha.1627330098",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",