@zenpatient-org/healthspan-marketing-ui 0.2.68 → 0.2.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Profile/Profile.cjs.js +1 -0
- package/dist/components/Profile/Profile.d.ts +10 -0
- package/dist/components/Profile/Profile.es.js +18 -0
- package/dist/components/Profile/index.d.ts +1 -0
- package/dist/components/Profile/styles.module.css +106 -0
- package/dist/components/Profile/utils.cjs.js +1 -0
- package/dist/components/Profile/utils.d.ts +7 -0
- package/dist/components/Profile/utils.es.js +8 -0
- package/dist/components/Typography/Typography.d.ts +1 -1
- package/dist/components/Typography/typography.module.css +81 -0
- package/package.json +6 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../Typography/Typography.cjs.js"),i=require("./utils.cjs.js"),s=require("../../src/components/Profile/styles.module.css"),m=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),p={xl:"profileXl",lg:"profileLg",md:"profileMd",sm:"profileSm"},u=({firstName:o,lastName:r,image:a,size:n="md",editable:t=!1,onEdit:c})=>e.jsxs("div",{className:s.root,"data-size":n,children:[a?e.jsx("div",{className:s.imageContainer,children:e.jsx("img",{src:a,alt:i.getFullName({firstName:o,lastName:r}),className:s.image})}):e.jsx("div",{className:s.textContainer,children:e.jsx(l.Typography,{defaultVariant:p[n],className:s.name,children:i.getInitials({firstName:o,lastName:r})})}),t&&n!=="sm"&&e.jsx("div",{className:s.editableContainer,onClick:c,children:e.jsx(m.Icon,{name:d.EIconName.PLUS,className:s.editableIcon})})]});exports.Profile=u;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type ProfileProps = {
|
|
2
|
+
firstName: string;
|
|
3
|
+
lastName: string;
|
|
4
|
+
image?: string;
|
|
5
|
+
size?: ProfileSizeVariant;
|
|
6
|
+
editable?: boolean;
|
|
7
|
+
onEdit?: () => void;
|
|
8
|
+
};
|
|
9
|
+
export type ProfileSizeVariant = 'xl' | 'lg' | 'md' | 'sm';
|
|
10
|
+
export declare const Profile: ({ firstName, lastName, image, size, editable, onEdit }: ProfileProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Typography as n } from "../Typography/Typography.es.js";
|
|
3
|
+
import { getFullName as c, getInitials as d } from "./utils.es.js";
|
|
4
|
+
import e from "../../components/Profile/styles.module.css";
|
|
5
|
+
import { Icon as p } from "../Icon/Icon.es.js";
|
|
6
|
+
import { EIconName as f } from "../Icon/constants.es.js";
|
|
7
|
+
const g = {
|
|
8
|
+
xl: "profileXl",
|
|
9
|
+
lg: "profileLg",
|
|
10
|
+
md: "profileMd",
|
|
11
|
+
sm: "profileSm"
|
|
12
|
+
}, u = ({ firstName: i, lastName: o, image: l, size: r = "md", editable: m = !1, onEdit: s }) => /* @__PURE__ */ t("div", { className: e.root, "data-size": r, children: [
|
|
13
|
+
l ? /* @__PURE__ */ a("div", { className: e.imageContainer, children: /* @__PURE__ */ a("img", { src: l, alt: c({ firstName: i, lastName: o }), className: e.image }) }) : /* @__PURE__ */ a("div", { className: e.textContainer, children: /* @__PURE__ */ a(n, { defaultVariant: g[r], className: e.name, children: d({ firstName: i, lastName: o }) }) }),
|
|
14
|
+
m && r !== "sm" && /* @__PURE__ */ a("div", { className: e.editableContainer, onClick: s, children: /* @__PURE__ */ a(p, { name: f.PLUS, className: e.editableIcon }) })
|
|
15
|
+
] });
|
|
16
|
+
export {
|
|
17
|
+
u as Profile
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Profile } from './Profile';
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: center;
|
|
5
|
+
flex: 0 0 auto;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
position: relative;
|
|
8
|
+
border-radius: var(--border-radius-full);
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.root[data-size="xl"] {
|
|
13
|
+
width: 96px;
|
|
14
|
+
height: 96px;
|
|
15
|
+
|
|
16
|
+
& .editableIcon {
|
|
17
|
+
width: 24px;
|
|
18
|
+
height: 24px;
|
|
19
|
+
padding: 3px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.root[data-size="lg"] {
|
|
24
|
+
width: 64px;
|
|
25
|
+
height: 64px;
|
|
26
|
+
|
|
27
|
+
& .editableIcon {
|
|
28
|
+
width: 16px;
|
|
29
|
+
height: 16px;
|
|
30
|
+
padding: 2px;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.root[data-size="md"] {
|
|
35
|
+
width: 48px;
|
|
36
|
+
height: 48px;
|
|
37
|
+
|
|
38
|
+
& .editableIcon {
|
|
39
|
+
width: 12px;
|
|
40
|
+
height: 12px;
|
|
41
|
+
padding: 1px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.root[data-size="sm"] {
|
|
46
|
+
width: 32px;
|
|
47
|
+
height: 32px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.imageContainer {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
border-radius: var(--border-radius-full);
|
|
58
|
+
border: var(--border-width-sm) solid #F8F4EE;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.image {
|
|
63
|
+
display: block;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
object-fit: cover;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.textContainer {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-direction: column;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 100%;
|
|
76
|
+
border-radius: var(--border-radius-full);
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
background-color: var(--color-bg-fill-primary);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.name {
|
|
82
|
+
color: var(--color-text-primary-inverted);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.editableContainer {
|
|
86
|
+
display: none;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 31%;
|
|
91
|
+
background-color: rgba(20, 18, 16, 0.80);
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
position: absolute;
|
|
94
|
+
bottom: 0;
|
|
95
|
+
left: 0;
|
|
96
|
+
right: 0;
|
|
97
|
+
z-index: 1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.root:hover .editableContainer {
|
|
101
|
+
display: flex;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.editableIcon {
|
|
105
|
+
color: #FFFEFC;
|
|
106
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=({firstName:t,lastName:n})=>!t&&!n?"":`${t||""} ${n||""}`.trim(),o=({firstName:t,lastName:n})=>{const r=(t==null?void 0:t.charAt(0).toUpperCase())||"",e=(n==null?void 0:n.charAt(0).toUpperCase())||"";return`${r} ${e}`.trim()};exports.getFullName=i;exports.getInitials=o;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const c = ({ firstName: t, lastName: n }) => !t && !n ? "" : `${t || ""} ${n || ""}`.trim(), i = ({ firstName: t, lastName: n }) => {
|
|
2
|
+
const r = (t == null ? void 0 : t.charAt(0).toUpperCase()) || "", o = (n == null ? void 0 : n.charAt(0).toUpperCase()) || "";
|
|
3
|
+
return `${r} ${o}`.trim();
|
|
4
|
+
};
|
|
5
|
+
export {
|
|
6
|
+
c as getFullName,
|
|
7
|
+
i as getInitials
|
|
8
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React, ElementType } from 'react';
|
|
2
2
|
|
|
3
|
-
export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs';
|
|
3
|
+
export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs' | 'profileXl' | 'profileLg' | 'profileMd' | 'profileSm';
|
|
4
4
|
type FontWeight = 'regular' | 'medium';
|
|
5
5
|
export interface TypographyProps {
|
|
6
6
|
defaultVariant: TypographyVariant;
|
|
@@ -284,6 +284,51 @@
|
|
|
284
284
|
letter-spacing: var(--letter-spacing-xl);
|
|
285
285
|
}
|
|
286
286
|
|
|
287
|
+
.profileXl {
|
|
288
|
+
font-family: var(--font-default), sans-serif;
|
|
289
|
+
line-height: var(--line-height-sm);
|
|
290
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
291
|
+
font-weight: var(--font-weight-regular);
|
|
292
|
+
font-style: normal;
|
|
293
|
+
font-size: var(--font-size-heading-lg);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.profileLg {
|
|
297
|
+
font-family: var(--font-default), sans-serif;
|
|
298
|
+
line-height: var(--line-height-sm);
|
|
299
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
300
|
+
font-weight: var(--font-weight-regular);
|
|
301
|
+
font-style: normal;
|
|
302
|
+
font-size: var(--font-size-xxl);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.profileMd {
|
|
306
|
+
font-family: var(--font-default), sans-serif;
|
|
307
|
+
line-height: var(--line-height-sm);
|
|
308
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
309
|
+
font-weight: var(--font-weight-regular);
|
|
310
|
+
font-style: normal;
|
|
311
|
+
font-size: var(--font-size-lg);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.profileSm {
|
|
315
|
+
font-family: var(--font-default), sans-serif;
|
|
316
|
+
line-height: var(--line-height-xs);
|
|
317
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
318
|
+
font-weight: var(--font-weight-regular);
|
|
319
|
+
font-style: normal;
|
|
320
|
+
font-size: var(--font-size-xs);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.profileXs {
|
|
324
|
+
font-family: var(--font-default), sans-serif;
|
|
325
|
+
line-height: var(--line-height-xs);
|
|
326
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
327
|
+
font-weight: var(--font-weight-regular);
|
|
328
|
+
font-style: normal;
|
|
329
|
+
font-size: var(--font-size-3xs);
|
|
330
|
+
}
|
|
331
|
+
|
|
287
332
|
.weightRegular {
|
|
288
333
|
font-weight: var(--font-weight-regular);
|
|
289
334
|
}
|
|
@@ -591,6 +636,42 @@
|
|
|
591
636
|
letter-spacing: var(--letter-spacing-xl);
|
|
592
637
|
}
|
|
593
638
|
|
|
639
|
+
.profileXl {
|
|
640
|
+
font-family: var(--font-default), sans-serif;
|
|
641
|
+
line-height: var(--line-height-sm);
|
|
642
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
643
|
+
font-weight: var(--font-weight-regular);
|
|
644
|
+
font-style: normal;
|
|
645
|
+
font-size: var(--font-size-heading-lg);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.profileLg {
|
|
649
|
+
font-family: var(--font-default), sans-serif;
|
|
650
|
+
line-height: var(--line-height-sm);
|
|
651
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
652
|
+
font-weight: var(--font-weight-regular);
|
|
653
|
+
font-style: normal;
|
|
654
|
+
font-size: var(--font-size-xxl);
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.profileMd {
|
|
658
|
+
font-family: var(--font-default), sans-serif;
|
|
659
|
+
line-height: var(--line-height-sm);
|
|
660
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
661
|
+
font-weight: var(--font-weight-regular);
|
|
662
|
+
font-style: normal;
|
|
663
|
+
font-size: var(--font-size-lg);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.profileSm {
|
|
667
|
+
font-family: var(--font-default), sans-serif;
|
|
668
|
+
line-height: var(--line-height-xs);
|
|
669
|
+
letter-spacing: var(--letter-spacing-xxl);
|
|
670
|
+
font-weight: var(--font-weight-regular);
|
|
671
|
+
font-style: normal;
|
|
672
|
+
font-size: var(--font-size-xs);
|
|
673
|
+
}
|
|
674
|
+
|
|
594
675
|
.weightRegular {
|
|
595
676
|
font-weight: var(--font-weight-regular);
|
|
596
677
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zenpatient-org/healthspan-marketing-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.69",
|
|
4
4
|
"description": "Design system",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -341,6 +341,11 @@
|
|
|
341
341
|
"import": "./dist/components/FilterError/FilterError.es.js",
|
|
342
342
|
"require": "./dist/components/FilterError/FilterError.cjs.js"
|
|
343
343
|
},
|
|
344
|
+
"./Profile": {
|
|
345
|
+
"types": "./dist/components/Profile/Profile.d.ts",
|
|
346
|
+
"import": "./dist/components/Profile/Profile.es.js",
|
|
347
|
+
"require": "./dist/components/Profile/Profile.cjs.js"
|
|
348
|
+
},
|
|
344
349
|
"./CallbackModule": {
|
|
345
350
|
"types": "./dist/modules/Callback/Callback.d.ts",
|
|
346
351
|
"import": "./dist/modules/Callback/Callback.es.js",
|