@clicoh/orion-library 1.2.0-beta.13 → 1.2.0-beta.15
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/assets/css/expresivo.css +75 -2
- package/dist/components/01-atoms/Select/Select.d.ts +3 -1
- package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +8 -2
- package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
- package/dist/components/02-molecules/Card/Card.d.ts +2 -2
- package/dist/components/02-molecules/Card/Card.d.ts.map +1 -1
- package/dist/components/02-molecules/Card/Card.jsx +6 -2
- package/dist/components/02-molecules/Card/Card.jsx.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +5 -2
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +3 -2
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.d.ts +80 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.d.ts.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx +261 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.d.ts +2 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.d.ts.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.js +2 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.js.map +1 -0
- package/dist/components/02-molecules/index.d.ts +1 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +1 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +13 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +25 -14
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
- package/expresivo/ExpMascot/ExpMascot.d.ts +7 -3
- package/expresivo/ExpMascot/ExpMascot.d.ts.map +1 -1
- package/expresivo/ExpMascot/ExpMascot.jsx +9 -4
- package/expresivo/ExpMascot/ExpMascot.jsx.map +1 -1
- package/expresivo/ExpPageHero/ExpPageHero.d.ts +82 -0
- package/expresivo/ExpPageHero/ExpPageHero.d.ts.map +1 -0
- package/expresivo/ExpPageHero/ExpPageHero.jsx +113 -0
- package/expresivo/ExpPageHero/ExpPageHero.jsx.map +1 -0
- package/expresivo/ExpPageHero/index.d.ts +3 -0
- package/expresivo/ExpPageHero/index.d.ts.map +1 -0
- package/expresivo/ExpPageHero/index.js +2 -0
- package/expresivo/ExpPageHero/index.js.map +1 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.d.ts +25 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.d.ts.map +1 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.jsx +30 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.jsx.map +1 -0
- package/expresivo/ExpStepBadge/index.d.ts +2 -0
- package/expresivo/ExpStepBadge/index.d.ts.map +1 -0
- package/expresivo/ExpStepBadge/index.js +2 -0
- package/expresivo/ExpStepBadge/index.js.map +1 -0
- package/expresivo/index.d.ts +2 -0
- package/expresivo/index.d.ts.map +1 -1
- package/expresivo/index.js +2 -0
- package/expresivo/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useId } from 'react';
|
|
4
|
+
import { Heading } from '@clicoh/orion-library';
|
|
5
|
+
import { ExpBubble } from '../ExpBubble/ExpBubble';
|
|
6
|
+
import { ExpCollapseToggle } from '../ExpCollapseToggle/ExpCollapseToggle';
|
|
7
|
+
import { ExpMascot } from '../ExpMascot/ExpMascot';
|
|
8
|
+
import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
9
|
+
/**
|
|
10
|
+
* Page header for the top of a screen, meant for the `heading` slot of
|
|
11
|
+
* `DashboardTemplate`: an eyebrow, the title, a description, optional content
|
|
12
|
+
* under it, and a mascot with a speech bubble on the right.
|
|
13
|
+
*
|
|
14
|
+
* On wide screens it draws a band with a dotted lavender background. With
|
|
15
|
+
* `collapse`, a corner button tucks it down to the title, and the mascot hangs
|
|
16
|
+
* from a thread instead; the consumer keeps the state. On small screens it is
|
|
17
|
+
* a plain title row without eyebrow, mascot or bubble, and `collapse` has no
|
|
18
|
+
* effect.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
|
|
21
|
+
* title, adornment, description, children and actions.
|
|
22
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* <ExpPageHero
|
|
26
|
+
* eyebrow="Case memory"
|
|
27
|
+
* title="Cases"
|
|
28
|
+
* description="Review past diagnoses before starting from scratch."
|
|
29
|
+
* mascot="fixi-02-investigando"
|
|
30
|
+
* bubble={{ title: 'Lead found', text: 'Search by ticket or symptom.' }}
|
|
31
|
+
* />
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // Collapsible, with the state kept by the consumer
|
|
35
|
+
* <ExpPageHero
|
|
36
|
+
* title="Cases"
|
|
37
|
+
* mascot="fixi-02-investigando"
|
|
38
|
+
* collapse={{
|
|
39
|
+
* collapsed,
|
|
40
|
+
* onToggle: () => setCollapsed(!collapsed),
|
|
41
|
+
* expandLabel: 'Expand header',
|
|
42
|
+
* collapseLabel: 'Collapse header',
|
|
43
|
+
* }}
|
|
44
|
+
* />
|
|
45
|
+
*
|
|
46
|
+
* @param {Object} props - The properties of the ExpPageHero component.
|
|
47
|
+
* @param {ReactNode} props.title - Page title.
|
|
48
|
+
* @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
|
|
49
|
+
* @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
|
|
50
|
+
* @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
|
|
51
|
+
* @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
|
|
52
|
+
* @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
|
|
53
|
+
* @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
|
|
54
|
+
* @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
|
|
55
|
+
* @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
|
|
56
|
+
* @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
|
|
57
|
+
*
|
|
58
|
+
* @returns {ReactNode} The page header.
|
|
59
|
+
*/
|
|
60
|
+
export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }) {
|
|
61
|
+
const options = useExpScopeOptions();
|
|
62
|
+
const generatedId = useId();
|
|
63
|
+
const id = restProps.id ?? generatedId;
|
|
64
|
+
const collapsed = !!collapse?.collapsed;
|
|
65
|
+
const hasAside = !!mascot || !!bubble;
|
|
66
|
+
const titleRow = (<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
|
|
67
|
+
<Heading level={headingLevel}>{title}</Heading>
|
|
68
|
+
{titleAdornment}
|
|
69
|
+
</div>);
|
|
70
|
+
if (!options) {
|
|
71
|
+
return (<div {...restProps} className={clsx('flex flex-col items-start gap-3 sm:flex-row sm:justify-between', restProps.className)}>
|
|
72
|
+
<div className="flex min-w-0 flex-col gap-1">
|
|
73
|
+
{titleRow}
|
|
74
|
+
{!!description && (<div className="text-gray-1 dark:text-gray-2 text-sm">
|
|
75
|
+
{description}
|
|
76
|
+
</div>)}
|
|
77
|
+
{children}
|
|
78
|
+
</div>
|
|
79
|
+
{actions}
|
|
80
|
+
</div>);
|
|
81
|
+
}
|
|
82
|
+
return (<div {...restProps} id={id} data-state={collapsed ? 'collapsed' : 'expanded'} className={clsx('exp-hero relative flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between lg:gap-6', collapsed
|
|
83
|
+
? 'lg:min-h-[72px] lg:py-3.5 lg:pr-30 lg:pl-6'
|
|
84
|
+
: 'lg:px-8 lg:py-6', !collapsed && !!collapse && !hasAside && 'lg:pr-20', restProps.className)}>
|
|
85
|
+
<div className="flex min-w-0 flex-col items-start gap-1 lg:flex-[1_1_420px]">
|
|
86
|
+
{!!eyebrow && (<p className={clsx('text-lavender dark:text-lavender-dark hidden text-xs leading-4 font-semibold tracking-[0.04em] uppercase', !collapsed && 'lg:block')}>
|
|
87
|
+
<span aria-hidden="true">✦ </span>
|
|
88
|
+
{eyebrow}
|
|
89
|
+
</p>)}
|
|
90
|
+
{titleRow}
|
|
91
|
+
{!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 max-w-[680px] text-sm leading-[22px] text-pretty', collapsed && 'lg:hidden')}>
|
|
92
|
+
{description}
|
|
93
|
+
</div>)}
|
|
94
|
+
{!!children && (<div className={clsx('mt-2 w-full', collapsed && 'lg:hidden')}>
|
|
95
|
+
{children}
|
|
96
|
+
</div>)}
|
|
97
|
+
</div>
|
|
98
|
+
{actions}
|
|
99
|
+
{hasAside && (<div className={clsx('hidden shrink-0 items-center gap-4', !collapsed && 'lg:flex', !!collapse && 'lg:mr-7')}>
|
|
100
|
+
{!!bubble && (<ExpBubble tail="right" title={bubble.title} badge={bubble.badge}>
|
|
101
|
+
{bubble.text}
|
|
102
|
+
</ExpBubble>)}
|
|
103
|
+
{!!mascot && <ExpMascot name={mascot} size={104}/>}
|
|
104
|
+
</div>)}
|
|
105
|
+
{collapsed && !!mascot && (<span className="absolute top-0 right-18 hidden lg:block">
|
|
106
|
+
<ExpMascot name={mascot} size={56} motion="hang"/>
|
|
107
|
+
</span>)}
|
|
108
|
+
{!!collapse && (<div className="absolute top-5 right-5 hidden lg:block">
|
|
109
|
+
<ExpCollapseToggle collapsed={collapsed} onToggle={collapse.onToggle} expandLabel={collapse.expandLabel} collapseLabel={collapse.collapseLabel} aria-controls={id}/>
|
|
110
|
+
</div>)}
|
|
111
|
+
</div>);
|
|
112
|
+
}
|
|
113
|
+
//# sourceMappingURL=ExpPageHero.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpStepBadgeProps = {
|
|
3
|
+
/** Number of the step, usually 1 to 9. */
|
|
4
|
+
step: number;
|
|
5
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
6
|
+
/**
|
|
7
|
+
* Tilted square with a step number, to put before the title of a numbered
|
|
8
|
+
* section. It is decorative: the title next to it carries the meaning.
|
|
9
|
+
*
|
|
10
|
+
* Outside an `ExpScope` it renders nothing, and the title stands alone.
|
|
11
|
+
*
|
|
12
|
+
* @component
|
|
13
|
+
* @example
|
|
14
|
+
* <div className="flex items-center gap-3">
|
|
15
|
+
* <ExpStepBadge step={1} />
|
|
16
|
+
* <Heading level="h6">Tell us what happened</Heading>
|
|
17
|
+
* </div>
|
|
18
|
+
*
|
|
19
|
+
* @param {ExpStepBadgeProps} props - The properties of the ExpStepBadge component.
|
|
20
|
+
* @param {number} props.step - Number of the step.
|
|
21
|
+
*
|
|
22
|
+
* @returns {ReactNode} The badge, or nothing outside an `ExpScope`.
|
|
23
|
+
*/
|
|
24
|
+
export declare function ExpStepBadge({ step, ...restProps }: ExpStepBadgeProps): ReactNode;
|
|
25
|
+
//# sourceMappingURL=ExpStepBadge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStepBadge.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStepBadge/ExpStepBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAkB/B"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
4
|
+
/**
|
|
5
|
+
* Tilted square with a step number, to put before the title of a numbered
|
|
6
|
+
* section. It is decorative: the title next to it carries the meaning.
|
|
7
|
+
*
|
|
8
|
+
* Outside an `ExpScope` it renders nothing, and the title stands alone.
|
|
9
|
+
*
|
|
10
|
+
* @component
|
|
11
|
+
* @example
|
|
12
|
+
* <div className="flex items-center gap-3">
|
|
13
|
+
* <ExpStepBadge step={1} />
|
|
14
|
+
* <Heading level="h6">Tell us what happened</Heading>
|
|
15
|
+
* </div>
|
|
16
|
+
*
|
|
17
|
+
* @param {ExpStepBadgeProps} props - The properties of the ExpStepBadge component.
|
|
18
|
+
* @param {number} props.step - Number of the step.
|
|
19
|
+
*
|
|
20
|
+
* @returns {ReactNode} The badge, or nothing outside an `ExpScope`.
|
|
21
|
+
*/
|
|
22
|
+
export function ExpStepBadge({ step, ...restProps }) {
|
|
23
|
+
const inScope = useExpScope();
|
|
24
|
+
if (!inScope)
|
|
25
|
+
return null;
|
|
26
|
+
return (<span {...restProps} aria-hidden="true" className={clsx('flex size-7 shrink-0 -rotate-8 items-center justify-center rounded-lg bg-black text-[0.8125rem] leading-none font-bold text-white shadow-[2px_2px_0_var(--color-lavender-1)]', 'dark:bg-white dark:text-black dark:shadow-[2px_2px_0_var(--color-lavender-dark-1)]', restProps.className)}>
|
|
27
|
+
{step}
|
|
28
|
+
</span>);
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=ExpStepBadge.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStepBadge.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpStepBadge/ExpStepBadge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,8KAA8K,EAC9K,oFAAoF,EACpF,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStepBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpStepBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
package/expresivo/index.d.ts
CHANGED
package/expresivo/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
|
package/expresivo/index.js
CHANGED
package/expresivo/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
|