@manakind/manuia-ui 0.23.0 → 0.24.0
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.
|
@@ -29,6 +29,18 @@
|
|
|
29
29
|
gap: var(--semantic-space-gap);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
& .mui-category-card__name {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: var(--semantic-space-gap);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* The category's own colour, as its label paints its icon. */
|
|
39
|
+
& .mui-category-card__icon {
|
|
40
|
+
flex-shrink: 0;
|
|
41
|
+
color: var(--mui-category-color, var(--semantic-color-action-primary));
|
|
42
|
+
}
|
|
43
|
+
|
|
32
44
|
& .mui-category-card__gap {
|
|
33
45
|
display: flex;
|
|
34
46
|
flex-direction: column;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type IconSource } from '@manakind/ui-core';
|
|
1
2
|
import './category-card.css';
|
|
2
3
|
/** Manuia's two kinds of life category. */
|
|
3
4
|
export type CategoryType = 'Personal' | 'Professional';
|
|
@@ -14,6 +15,11 @@ export interface CategoryRole {
|
|
|
14
15
|
export interface CategoryCardProps {
|
|
15
16
|
/** Category name. Rendered as the card's heading. */
|
|
16
17
|
name: string;
|
|
18
|
+
/**
|
|
19
|
+
* A glyph for the category, shown before its name in the category's colour.
|
|
20
|
+
* Decorative: the name carries the meaning.
|
|
21
|
+
*/
|
|
22
|
+
icon?: IconSource;
|
|
17
23
|
/** Personal or professional. Shown as a badge; the two get different tints. */
|
|
18
24
|
type: CategoryType;
|
|
19
25
|
/**
|
|
@@ -79,5 +85,5 @@ export interface CategoryCardProps {
|
|
|
79
85
|
* />
|
|
80
86
|
* ```
|
|
81
87
|
*/
|
|
82
|
-
export declare function CategoryCard({ name, type, color, vision, currentRating, idealRating, currentBand, idealBand, gapBand, roles, maxVisibleRoles, visionLength, titleAs, className, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
|
|
88
|
+
export declare function CategoryCard({ name, icon, type, color, vision, currentRating, idealRating, currentBand, idealBand, gapBand, roles, maxVisibleRoles, visionLength, titleAs, className, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
|
|
83
89
|
//# sourceMappingURL=category-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"category-card.d.ts","sourceRoot":"","sources":["../../src/category-card/category-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"category-card.d.ts","sourceRoot":"","sources":["../../src/category-card/category-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,UAAU,EAEhB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,qBAAqB,CAAC;AAE7B,2CAA2C;AAC3C,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,cAAc,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AAEzF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+EAA+E;IAC/E,IAAI,EAAE,YAAY,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sGAAsG;IACtG,aAAa,EAAE,MAAM,CAAC;IACtB,0FAA0F;IAC1F,WAAW,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qEAAqE;IACrE,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,WAAW,EACX,SAAS,EACT,OAAO,EACP,KAAU,EACV,eAAmB,EACnB,YAAkB,EAClB,OAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAiGnB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Badge, Card, CardContent, CardHeader, CardTitle, cx, Progress } from '@manakind/ui-core';
|
|
2
|
+
import { Badge, Card, CardContent, CardHeader, CardTitle, cx, Icon, Progress, } from '@manakind/ui-core';
|
|
3
3
|
import { safeColor } from '../css-color';
|
|
4
4
|
import './category-card.css';
|
|
5
5
|
const TYPE_VARIANT = {
|
|
@@ -65,7 +65,7 @@ const BAND_CLASS = (part, band) => band && `mui-category-card__${part}--${band}`
|
|
|
65
65
|
* />
|
|
66
66
|
* ```
|
|
67
67
|
*/
|
|
68
|
-
export function CategoryCard({ name, type, color, vision, currentRating, idealRating, currentBand, idealBand, gapBand, roles = [], maxVisibleRoles = 3, visionLength = 100, titleAs = 'h3', className, }) {
|
|
68
|
+
export function CategoryCard({ name, icon, type, color, vision, currentRating, idealRating, currentBand, idealBand, gapBand, roles = [], maxVisibleRoles = 3, visionLength = 100, titleAs = 'h3', className, }) {
|
|
69
69
|
const wash = safeColor(color);
|
|
70
70
|
const current = clampRating(currentRating);
|
|
71
71
|
const ideal = clampRating(idealRating);
|
|
@@ -74,6 +74,6 @@ export function CategoryCard({ name, type, color, vision, currentRating, idealRa
|
|
|
74
74
|
const visibleRoles = limit === undefined ? roles : roles.slice(0, limit);
|
|
75
75
|
const remainingRoles = roles.length - visibleRoles.length;
|
|
76
76
|
const visionText = vision?.trim();
|
|
77
|
-
return (_jsxs(Card, { interactive: true, className: cx('mui-category-card', className), style: wash ? { '--mui-category-color': wash } : undefined, children: [_jsxs(CardHeader, { className: "mui-category-card__header", children: [_jsxs("div", { className: "mui-category-card__meta", children: [_jsx(Badge, { variant: TYPE_VARIANT[type], appearance: "plain", children: type }), _jsxs("p", { className: cx('mui-category-card__gap', BAND_CLASS('gap', gapBand)), children: [_jsx("span", { className: "mui-category-card__gap-value", children: gap }), _jsx("span", { className: "mui-category-card__gap-label", children: "gap" })] })] }), _jsx(CardTitle, { as: titleAs, className: "mui-category-card__title", title: name, children: name })] }), _jsxs(CardContent, { className: "mui-category-card__content", children: [visionText && (_jsx("p", { className: "mui-category-card__vision", children: excerpt(visionText, visionLength) })), roles.length > 0 && (_jsxs("ul", { className: "mui-category-card__roles", "aria-label": "Roles", children: [visibleRoles.map((role) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", children: role.name }) }, role.id))), remainingRoles > 0 && (_jsx("li", { children: _jsxs(Badge, { variant: "muted", children: ["+", remainingRoles, " more"] }) }))] })), _jsxs("div", { className: "mui-category-card__ratings", children: [_jsx(Progress, { size: "sm", className: "mui-category-card__bar mui-category-card__bar--current", value: current, max: RATING_MAX, label: _jsx("span", { className: "mui-category-card__rating-label", children: "Current" }), valueText: _jsxs("span", { className: cx('mui-category-card__rating-value', BAND_CLASS('rating-value', currentBand)), children: [current, _jsxs("span", { className: "mui-category-card__rating-max", children: ["/", RATING_MAX] })] }) }), _jsx(Progress, { size: "sm", className: "mui-category-card__bar mui-category-card__bar--ideal", value: ideal, max: RATING_MAX, label: _jsx("span", { className: "mui-category-card__rating-label", children: "Ideal" }), valueText: _jsxs("span", { className: cx('mui-category-card__rating-value', BAND_CLASS('rating-value', idealBand)), children: [ideal, _jsxs("span", { className: "mui-category-card__rating-max", children: ["/", RATING_MAX] })] }) })] })] })] }));
|
|
77
|
+
return (_jsxs(Card, { interactive: true, className: cx('mui-category-card', className), style: wash ? { '--mui-category-color': wash } : undefined, children: [_jsxs(CardHeader, { className: "mui-category-card__header", children: [_jsxs("div", { className: "mui-category-card__meta", children: [_jsx(Badge, { variant: TYPE_VARIANT[type], appearance: "plain", children: type }), _jsxs("p", { className: cx('mui-category-card__gap', BAND_CLASS('gap', gapBand)), children: [_jsx("span", { className: "mui-category-card__gap-value", children: gap }), _jsx("span", { className: "mui-category-card__gap-label", children: "gap" })] })] }), _jsxs("div", { className: "mui-category-card__name", children: [icon ? (_jsx(Icon, { source: icon, size: "lg", decorative: true, className: "mui-category-card__icon" })) : null, _jsx(CardTitle, { as: titleAs, className: "mui-category-card__title", title: name, children: name })] })] }), _jsxs(CardContent, { className: "mui-category-card__content", children: [visionText && (_jsx("p", { className: "mui-category-card__vision", children: excerpt(visionText, visionLength) })), roles.length > 0 && (_jsxs("ul", { className: "mui-category-card__roles", "aria-label": "Roles", children: [visibleRoles.map((role) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", children: role.name }) }, role.id))), remainingRoles > 0 && (_jsx("li", { children: _jsxs(Badge, { variant: "muted", children: ["+", remainingRoles, " more"] }) }))] })), _jsxs("div", { className: "mui-category-card__ratings", children: [_jsx(Progress, { size: "sm", className: "mui-category-card__bar mui-category-card__bar--current", value: current, max: RATING_MAX, label: _jsx("span", { className: "mui-category-card__rating-label", children: "Current" }), valueText: _jsxs("span", { className: cx('mui-category-card__rating-value', BAND_CLASS('rating-value', currentBand)), children: [current, _jsxs("span", { className: "mui-category-card__rating-max", children: ["/", RATING_MAX] })] }) }), _jsx(Progress, { size: "sm", className: "mui-category-card__bar mui-category-card__bar--ideal", value: ideal, max: RATING_MAX, label: _jsx("span", { className: "mui-category-card__rating-label", children: "Ideal" }), valueText: _jsxs("span", { className: cx('mui-category-card__rating-value', BAND_CLASS('rating-value', idealBand)), children: [ideal, _jsxs("span", { className: "mui-category-card__rating-max", children: ["/", RATING_MAX] })] }) })] })] })] }));
|
|
78
78
|
}
|
|
79
79
|
//# sourceMappingURL=category-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"category-card.js","sourceRoot":"","sources":["../../src/category-card/category-card.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"category-card.js","sourceRoot":"","sources":["../../src/category-card/category-card.tsx"],"names":[],"mappings":"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"}
|