@openfin/ui-library 0.1.21 → 0.1.22-alpha.1627308148

package/dist/components/elements/Icon/openfin/LockedClosedFilledIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IconProps } from '@modulz/radix-icons/dist/types';
+/**
+ * OpenFin Icon
+ */
+export declare const LockedClosedFilledIcon: ({ color, ...props }: IconProps) => JSX.Element;

package/dist/components/elements/Icon/openfin/LockedClosedFilledIcon.js

@@ -0,0 +1,23 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LockedClosedFilledIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OpenFin Icon
+ */
+const LockedClosedFilledIcon = (_a) => {
+    var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx_runtime_1.jsx("path", { d: "M5.00003 4.63623C5.00003 3.76052 5.24222 3.10561 5.64327 2.67378C6.03938 2.24727 6.64585 1.97852 7.50143 1.97852C8.35748 1.97852 8.96309 2.24673 9.35827 2.6723C9.75841 3.10321 10 3.75729 10 4.63346V6.50021H11V4.63346C11 3.57917 10.7076 2.65578 10.0911 1.99183C9.46955 1.32254 8.57586 0.978516 7.50143 0.978516C6.42678 0.978516 5.53255 1.3235 4.91052 1.99328C4.29342 2.65775 4.00003 3.58169 4.00003 4.63623V6.50021H5.00003V4.63623ZM3 6.50021C2.72386 6.50021 2.5 6.72407 2.5 7.00021V13.0002C2.5 13.2764 2.72386 13.5002 3 13.5002H12C12.2761 13.5002 12.5 13.2764 12.5 13.0002V7.00021C12.5 6.72407 12.2761 6.50021 12 6.50021H3Z", fill: color }, void 0) }), void 0));
+};
+exports.LockedClosedFilledIcon = LockedClosedFilledIcon;

package/dist/components/elements/Icon/openfin/index.d.ts

@@ -1,3 +1,4 @@
 export * from './OpenFinIcon';
 export * from './BellIcon';
 export * from './WorkspaceIcon';
+export * from './LockedClosedFilledIcon';

package/dist/components/elements/Icon/openfin/index.js

@@ -13,3 +13,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./OpenFinIcon"), exports);
 __exportStar(require("./BellIcon"), exports);
 __exportStar(require("./WorkspaceIcon"), exports);
+__exportStar(require("./LockedClosedFilledIcon"), exports);

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/system/ThemeProvider/lib/constants.d.ts

@@ -207,6 +207,7 @@ export declare const IconSet: {
     readonly OpenFinIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BellIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly WorkspaceIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
+    readonly LockedClosedFilledIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly ActivityLogIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly AlignBaselineIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly AlignBottomIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;

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/package.json

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