@clicoh/orion-library 1.2.0-beta.12 → 1.2.0-beta.14
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 +919 -0
- package/assets/mascotas/svg/bugi-mascota-01-alerta.svg +39 -0
- package/assets/mascotas/svg/bugi-mascota-02-investigando.svg +36 -0
- package/assets/mascotas/svg/bugi-mascota-05-sorprendido.svg +38 -0
- package/assets/mascotas/svg/oculus-mascota-01-feliz.svg +52 -0
- package/assets/mascotas/svg/oculus-mascota-02-investigando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-03-dudando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-04-analizando-documento.svg +53 -0
- package/assets/mascotas/svg/oculus-mascota-06-celebrando.svg +54 -0
- package/assets/mascotas/svg/oculus-mascota-07-buscando-rapido.svg +57 -0
- package/assets/mascotas/svg/oculus-mascota-08-satisfecho.svg +55 -0
- package/assets/mascotas/webp/fixi-mascota-01-feliz-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-02-investigando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-03-dudando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-04-reparando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-05-sorprendido-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-06-celebrando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-07-corriendo-sm.webp +0 -0
- package/dist/components/01-atoms/Button/Button.d.ts +18 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +25 -5
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- package/dist/components/01-atoms/Heading/Heading.jsx +1 -1
- package/dist/components/01-atoms/Heading/Heading.jsx.map +1 -1
- package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/Input.jsx +9 -7
- package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx.map +1 -1
- package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +7 -7
- package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.d.ts +24 -3
- package/dist/components/01-atoms/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.jsx +30 -4
- package/dist/components/01-atoms/Spinner/Spinner.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/index.d.ts +1 -0
- package/dist/components/01-atoms/Spinner/index.d.ts.map +1 -1
- package/dist/components/01-atoms/Stat/Stat.d.ts +4 -1
- package/dist/components/01-atoms/Stat/Stat.d.ts.map +1 -1
- package/dist/components/01-atoms/Stat/Stat.jsx +6 -2
- package/dist/components/01-atoms/Stat/Stat.jsx.map +1 -1
- package/dist/components/01-atoms/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/01-atoms/Textarea/Textarea.jsx +3 -3
- package/dist/components/01-atoms/Textarea/Textarea.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx +26 -3
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
- package/dist/components/02-molecules/Card/Card.d.ts +74 -0
- package/dist/components/02-molecules/Card/Card.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/Card.jsx +83 -0
- package/dist/components/02-molecules/Card/Card.jsx.map +1 -0
- package/dist/components/02-molecules/Card/index.d.ts +2 -0
- package/dist/components/02-molecules/Card/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/index.js +2 -0
- package/dist/components/02-molecules/Card/index.js.map +1 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +37 -2
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +187 -32
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts +52 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx +66 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.js +2 -0
- package/dist/components/02-molecules/EmptyState/index.js.map +1 -0
- package/dist/components/02-molecules/Filter/Filter.d.ts +7 -1
- package/dist/components/02-molecules/Filter/Filter.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/Filter.jsx +10 -7
- package/dist/components/02-molecules/Filter/Filter.jsx.map +1 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts +15 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx +18 -3
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.jsx +2 -2
- package/dist/components/02-molecules/Menu/MenuItem.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx.map +1 -1
- package/dist/components/02-molecules/Table/Table.d.ts +3 -1
- package/dist/components/02-molecules/Table/Table.d.ts.map +1 -1
- package/dist/components/02-molecules/Table/Table.jsx +6 -5
- package/dist/components/02-molecules/Table/Table.jsx.map +1 -1
- package/dist/components/02-molecules/index.d.ts +2 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +2 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/dist/components/03-organisms/Header/Header.d.ts +3 -1
- package/dist/components/03-organisms/Header/Header.d.ts.map +1 -1
- package/dist/components/03-organisms/Header/Header.jsx +4 -5
- package/dist/components/03-organisms/Header/Header.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +36 -4
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +44 -10
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts +6 -2
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx +7 -3
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts +2 -0
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx +2 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map +1 -1
- package/expresivo/ExpBubble/ExpBubble.d.ts +51 -0
- package/expresivo/ExpBubble/ExpBubble.d.ts.map +1 -0
- package/expresivo/ExpBubble/ExpBubble.jsx +74 -0
- package/expresivo/ExpBubble/ExpBubble.jsx.map +1 -0
- package/expresivo/ExpBubble/index.d.ts +3 -0
- package/expresivo/ExpBubble/index.d.ts.map +1 -0
- package/expresivo/ExpBubble/index.js +2 -0
- package/expresivo/ExpBubble/index.js.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts +37 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx +43 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map +1 -0
- package/expresivo/ExpCollapseToggle/index.d.ts +3 -0
- package/expresivo/ExpCollapseToggle/index.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/index.js +2 -0
- package/expresivo/ExpCollapseToggle/index.js.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts +26 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx +39 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map +1 -0
- package/expresivo/ExpGrowBar/index.d.ts +3 -0
- package/expresivo/ExpGrowBar/index.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/index.js +2 -0
- package/expresivo/ExpGrowBar/index.js.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts +65 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx +156 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map +1 -0
- package/expresivo/ExpJourneyTrack/index.d.ts +3 -0
- package/expresivo/ExpJourneyTrack/index.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/index.js +2 -0
- package/expresivo/ExpJourneyTrack/index.js.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts +49 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx +60 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx.map +1 -0
- package/expresivo/ExpKeyButton/index.d.ts +3 -0
- package/expresivo/ExpKeyButton/index.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/index.js +2 -0
- package/expresivo/ExpKeyButton/index.js.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx.map +1 -0
- package/expresivo/ExpLensIcon/index.d.ts +3 -0
- package/expresivo/ExpLensIcon/index.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/index.js +2 -0
- package/expresivo/ExpLensIcon/index.js.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts +41 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.jsx +45 -0
- package/expresivo/ExpMascot/ExpMascot.jsx.map +1 -0
- package/expresivo/ExpMascot/catalog.d.ts +12 -0
- package/expresivo/ExpMascot/catalog.d.ts.map +1 -0
- package/expresivo/ExpMascot/catalog.js +41 -0
- package/expresivo/ExpMascot/catalog.js.map +1 -0
- package/expresivo/ExpMascot/index.d.ts +4 -0
- package/expresivo/ExpMascot/index.d.ts.map +1 -0
- package/expresivo/ExpMascot/index.js +2 -0
- package/expresivo/ExpMascot/index.js.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts +29 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx +87 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx.map +1 -0
- package/expresivo/ExpMedalBadge/index.d.ts +3 -0
- package/expresivo/ExpMedalBadge/index.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/index.js +2 -0
- package/expresivo/ExpMedalBadge/index.js.map +1 -0
- 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/ExpPillButton/ExpPillButton.d.ts +44 -0
- package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx +75 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -0
- package/expresivo/ExpPillButton/index.d.ts +3 -0
- package/expresivo/ExpPillButton/index.d.ts.map +1 -0
- package/expresivo/ExpPillButton/index.js +2 -0
- package/expresivo/ExpPillButton/index.js.map +1 -0
- package/expresivo/ExpScope/ExpScope.d.ts +63 -0
- package/expresivo/ExpScope/ExpScope.d.ts.map +1 -0
- package/expresivo/ExpScope/ExpScope.jsx +67 -0
- package/expresivo/ExpScope/ExpScope.jsx.map +1 -0
- package/expresivo/ExpScope/index.d.ts +3 -0
- package/expresivo/ExpScope/index.d.ts.map +1 -0
- package/expresivo/ExpScope/index.js +2 -0
- package/expresivo/ExpScope/index.js.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts +35 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx +67 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx.map +1 -0
- package/expresivo/ExpScoreRing/index.d.ts +3 -0
- package/expresivo/ExpScoreRing/index.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/index.js +2 -0
- package/expresivo/ExpScoreRing/index.js.map +1 -0
- package/expresivo/index.d.ts +13 -0
- package/expresivo/index.d.ts.map +1 -0
- package/expresivo/index.js +13 -0
- package/expresivo/index.js.map +1 -0
- package/expresivo/shared/glyphs.d.ts +20 -0
- package/expresivo/shared/glyphs.d.ts.map +1 -0
- package/expresivo/shared/glyphs.jsx +60 -0
- package/expresivo/shared/glyphs.jsx.map +1 -0
- package/package.json +3 -2
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
4
|
+
import { mascotCatalog } from './catalog';
|
|
5
|
+
/**
|
|
6
|
+
* One of the official clicOH mascots, drawn from its file as is: never
|
|
7
|
+
* redrawn, recolored or cropped.
|
|
8
|
+
*
|
|
9
|
+
* Mascots are decorative and hidden from screen readers, so the text next to
|
|
10
|
+
* them must carry the message. Use one per state (empty, loading, error, no
|
|
11
|
+
* permission, success), above the title and the copy, and never on screens
|
|
12
|
+
* full of data. Suggested sizes: 96–128px for desktop empty states, 80px on
|
|
13
|
+
* small screens, 48–64px inside a message or a toast.
|
|
14
|
+
*
|
|
15
|
+
* In dark mode Bugi sits on a light disc so it reads on the dark background;
|
|
16
|
+
* Oculus and Fixi need none.
|
|
17
|
+
*
|
|
18
|
+
* Renders nothing outside an `ExpScope`, or when the scope hides mascots.
|
|
19
|
+
*
|
|
20
|
+
* @component
|
|
21
|
+
* @example
|
|
22
|
+
* <ExpMascot name="oculus-01-feliz" size={112} />
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // Hanging from a thread, swinging gently
|
|
26
|
+
* <ExpMascot name="fixi-06-celebrando" size={56} motion="hang" />
|
|
27
|
+
*
|
|
28
|
+
* @param {Object} props - The properties of the ExpMascot component.
|
|
29
|
+
* @param {ExpMascotName} props.name - Mascot and pose, as in `oculus-01-feliz`.
|
|
30
|
+
* @param {number} [props.size=112] - Width and height on screen, in pixels.
|
|
31
|
+
* @param {'still' | 'float' | 'hang'} [props.motion='still'] - `float` bobs up and down; `hang` hangs it from a thread and swings it. Both stop with reduced motion.
|
|
32
|
+
*
|
|
33
|
+
* @returns {ReactNode} The mascot, or `null` outside an `ExpScope`.
|
|
34
|
+
*/
|
|
35
|
+
export function ExpMascot({ name, size = 112, motion = 'still', ...restProps }) {
|
|
36
|
+
const options = useExpScopeOptions();
|
|
37
|
+
if (!options || options.mascots === 'hidden')
|
|
38
|
+
return null;
|
|
39
|
+
return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0 flex-col items-center', motion === 'float' && 'exp-float', motion === 'hang' && 'exp-hang', restProps.className)}>
|
|
40
|
+
{motion === 'hang' && (<span className="bg-lavender-1 dark:bg-lavender-dark-1 h-3.5 w-[1.5px]"/>)}
|
|
41
|
+
<img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className={clsx('block object-contain', name.startsWith('bugi-') &&
|
|
42
|
+
'dark:bg-gray-6 dark:rounded-full dark:p-[8%]')}/>
|
|
43
|
+
</span>);
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=ExpMascot.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,sBAAsB,EACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,8CAA8C,CACjD,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StaticImageData } from 'next/image';
|
|
2
|
+
/**
|
|
3
|
+
* Official clicOH mascots, named `<mascot>-<NN>-<pose>` like their files.
|
|
4
|
+
* `oculus` is the agent, `bugi` the problem and `fixi` the fix.
|
|
5
|
+
*/
|
|
6
|
+
export type ExpMascotName = 'oculus-01-feliz' | 'oculus-02-investigando' | 'oculus-03-dudando' | 'oculus-04-analizando-documento' | 'oculus-06-celebrando' | 'oculus-07-buscando-rapido' | 'oculus-08-satisfecho' | 'bugi-01-alerta' | 'bugi-02-investigando' | 'bugi-05-sorprendido' | 'fixi-01-feliz' | 'fixi-02-investigando' | 'fixi-03-dudando' | 'fixi-04-reparando' | 'fixi-05-sorprendido' | 'fixi-06-celebrando' | 'fixi-07-corriendo';
|
|
7
|
+
/**
|
|
8
|
+
* Oculus and Bugi are vectors. Fixi is a 256px WebP, sharp up to 128px on
|
|
9
|
+
* high-density screens.
|
|
10
|
+
*/
|
|
11
|
+
export declare const mascotCatalog: Record<ExpMascotName, StaticImageData>;
|
|
12
|
+
//# sourceMappingURL=catalog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAmBlD;;;GAGG;AACH,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,wBAAwB,GACxB,mBAAmB,GACnB,gCAAgC,GAChC,sBAAsB,GACtB,2BAA2B,GAC3B,sBAAsB,GACtB,gBAAgB,GAChB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,sBAAsB,GACtB,iBAAiB,GACjB,mBAAmB,GACnB,qBAAqB,GACrB,oBAAoB,GACpB,mBAAmB,CAAC;AAExB;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAkBhE,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import bugi01 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-01-alerta.svg';
|
|
2
|
+
import bugi02 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-02-investigando.svg';
|
|
3
|
+
import bugi05 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-05-sorprendido.svg';
|
|
4
|
+
import oculus01 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-01-feliz.svg';
|
|
5
|
+
import oculus02 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-02-investigando.svg';
|
|
6
|
+
import oculus03 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-03-dudando.svg';
|
|
7
|
+
import oculus04 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-04-analizando-documento.svg';
|
|
8
|
+
import oculus06 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-06-celebrando.svg';
|
|
9
|
+
import oculus07 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-07-buscando-rapido.svg';
|
|
10
|
+
import oculus08 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-08-satisfecho.svg';
|
|
11
|
+
import fixi01 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-01-feliz-sm.webp';
|
|
12
|
+
import fixi02 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-02-investigando-sm.webp';
|
|
13
|
+
import fixi03 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-03-dudando-sm.webp';
|
|
14
|
+
import fixi04 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-04-reparando-sm.webp';
|
|
15
|
+
import fixi05 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-05-sorprendido-sm.webp';
|
|
16
|
+
import fixi06 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-06-celebrando-sm.webp';
|
|
17
|
+
import fixi07 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-07-corriendo-sm.webp';
|
|
18
|
+
/**
|
|
19
|
+
* Oculus and Bugi are vectors. Fixi is a 256px WebP, sharp up to 128px on
|
|
20
|
+
* high-density screens.
|
|
21
|
+
*/
|
|
22
|
+
export const mascotCatalog = {
|
|
23
|
+
'oculus-01-feliz': oculus01,
|
|
24
|
+
'oculus-02-investigando': oculus02,
|
|
25
|
+
'oculus-03-dudando': oculus03,
|
|
26
|
+
'oculus-04-analizando-documento': oculus04,
|
|
27
|
+
'oculus-06-celebrando': oculus06,
|
|
28
|
+
'oculus-07-buscando-rapido': oculus07,
|
|
29
|
+
'oculus-08-satisfecho': oculus08,
|
|
30
|
+
'bugi-01-alerta': bugi01,
|
|
31
|
+
'bugi-02-investigando': bugi02,
|
|
32
|
+
'bugi-05-sorprendido': bugi05,
|
|
33
|
+
'fixi-01-feliz': fixi01,
|
|
34
|
+
'fixi-02-investigando': fixi02,
|
|
35
|
+
'fixi-03-dudando': fixi03,
|
|
36
|
+
'fixi-04-reparando': fixi04,
|
|
37
|
+
'fixi-05-sorprendido': fixi05,
|
|
38
|
+
'fixi-06-celebrando': fixi06,
|
|
39
|
+
'fixi-07-corriendo': fixi07,
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=catalog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/catalog.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,sEAAsE,CAAC;AAC1F,OAAO,MAAM,MAAM,4EAA4E,CAAC;AAChG,OAAO,MAAM,MAAM,2EAA2E,CAAC;AAC/F,OAAO,QAAQ,MAAM,uEAAuE,CAAC;AAC7F,OAAO,QAAQ,MAAM,8EAA8E,CAAC;AACpG,OAAO,QAAQ,MAAM,yEAAyE,CAAC;AAC/F,OAAO,QAAQ,MAAM,sFAAsF,CAAC;AAC5G,OAAO,QAAQ,MAAM,4EAA4E,CAAC;AAClG,OAAO,QAAQ,MAAM,iFAAiF,CAAC;AACvG,OAAO,QAAQ,MAAM,4EAA4E,CAAC;AAClG,OAAO,MAAM,MAAM,0EAA0E,CAAC;AAC9F,OAAO,MAAM,MAAM,iFAAiF,CAAC;AACrG,OAAO,MAAM,MAAM,4EAA4E,CAAC;AAChG,OAAO,MAAM,MAAM,8EAA8E,CAAC;AAClG,OAAO,MAAM,MAAM,gFAAgF,CAAC;AACpG,OAAO,MAAM,MAAM,+EAA+E,CAAC;AACnG,OAAO,MAAM,MAAM,8EAA8E,CAAC;AAyBlG;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2C;IACnE,iBAAiB,EAAE,QAAQ;IAC3B,wBAAwB,EAAE,QAAQ;IAClC,mBAAmB,EAAE,QAAQ;IAC7B,gCAAgC,EAAE,QAAQ;IAC1C,sBAAsB,EAAE,QAAQ;IAChC,2BAA2B,EAAE,QAAQ;IACrC,sBAAsB,EAAE,QAAQ;IAChC,gBAAgB,EAAE,MAAM;IACxB,sBAAsB,EAAE,MAAM;IAC9B,qBAAqB,EAAE,MAAM;IAC7B,eAAe,EAAE,MAAM;IACvB,sBAAsB,EAAE,MAAM;IAC9B,iBAAiB,EAAE,MAAM;IACzB,mBAAmB,EAAE,MAAM;IAC3B,qBAAqB,EAAE,MAAM;IAC7B,oBAAoB,EAAE,MAAM;IAC5B,mBAAmB,EAAE,MAAM;CAC5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpMedalBadgeModifier = 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
|
|
3
|
+
export type ExpMedalBadgeProps = {
|
|
4
|
+
modifier: ExpMedalBadgeModifier;
|
|
5
|
+
/** One character or a tiny icon inside the medal. */
|
|
6
|
+
glyph?: ReactNode;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
9
|
+
/**
|
|
10
|
+
* Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
|
|
11
|
+
* pill. Same status modifiers as the core `Badge`; the label carries the
|
|
12
|
+
* message and the medal only decorates it.
|
|
13
|
+
*
|
|
14
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
15
|
+
* `modifier`.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
* @example
|
|
19
|
+
* <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
|
|
20
|
+
*
|
|
21
|
+
* @param {Object} props - The properties of the ExpMedalBadge component.
|
|
22
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
23
|
+
* @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
|
|
24
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
25
|
+
*
|
|
26
|
+
* @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
|
|
27
|
+
*/
|
|
28
|
+
export declare function ExpMedalBadge({ modifier, glyph, children, ...restProps }: ExpMedalBadgeProps): ReactNode;
|
|
29
|
+
//# sourceMappingURL=ExpMedalBadge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMedalBadge.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAgDtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAW,EACX,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAkDhC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Badge } from '@clicoh/orion-library';
|
|
4
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
|
+
// The ribbon and the pill label use the strong shade: the base `warning`
|
|
6
|
+
// and `success` hues sit below 4.5:1 on their tint.
|
|
7
|
+
const colorMap = {
|
|
8
|
+
success: {
|
|
9
|
+
ring: 'bg-success',
|
|
10
|
+
ribbon: 'bg-success-strong',
|
|
11
|
+
pill: 'border-success bg-success-1 text-success-strong dark:bg-success/16 dark:text-success',
|
|
12
|
+
},
|
|
13
|
+
warning: {
|
|
14
|
+
ring: 'bg-amber',
|
|
15
|
+
ribbon: 'bg-amber-strong',
|
|
16
|
+
pill: 'border-amber bg-warning-1 text-amber-strong dark:bg-warning/16 dark:text-amber',
|
|
17
|
+
},
|
|
18
|
+
error: {
|
|
19
|
+
ring: 'bg-error',
|
|
20
|
+
ribbon: 'bg-error-strong',
|
|
21
|
+
pill: 'border-error bg-error-1 text-error-strong dark:bg-error/16 dark:text-error',
|
|
22
|
+
},
|
|
23
|
+
info: {
|
|
24
|
+
ring: 'bg-info',
|
|
25
|
+
ribbon: 'bg-info-dark-3 dark:bg-info',
|
|
26
|
+
pill: 'border-info bg-info-1 text-info-dark-3 dark:bg-info/16 dark:text-info',
|
|
27
|
+
},
|
|
28
|
+
progress: {
|
|
29
|
+
ring: 'bg-lavender',
|
|
30
|
+
ribbon: 'bg-lavender',
|
|
31
|
+
pill: 'border-lavender bg-lavender-2 text-lavender dark:bg-lavender/18 dark:text-lavender',
|
|
32
|
+
},
|
|
33
|
+
disabled: {
|
|
34
|
+
ring: 'bg-gray-1',
|
|
35
|
+
ribbon: 'bg-gray-1',
|
|
36
|
+
pill: 'border-gray-1 bg-gray-6 text-gray-1 dark:bg-gray-2/16 dark:text-gray-2',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
const glyphColorMap = {
|
|
40
|
+
success: 'text-success',
|
|
41
|
+
warning: 'text-amber',
|
|
42
|
+
error: 'text-error',
|
|
43
|
+
info: 'text-info',
|
|
44
|
+
progress: 'text-lavender',
|
|
45
|
+
disabled: 'text-gray-1 dark:text-gray-2',
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
|
|
49
|
+
* pill. Same status modifiers as the core `Badge`; the label carries the
|
|
50
|
+
* message and the medal only decorates it.
|
|
51
|
+
*
|
|
52
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
53
|
+
* `modifier`.
|
|
54
|
+
*
|
|
55
|
+
* @component
|
|
56
|
+
* @example
|
|
57
|
+
* <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
|
|
58
|
+
*
|
|
59
|
+
* @param {Object} props - The properties of the ExpMedalBadge component.
|
|
60
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
61
|
+
* @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
|
|
62
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
63
|
+
*
|
|
64
|
+
* @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
|
|
65
|
+
*/
|
|
66
|
+
export function ExpMedalBadge({ modifier, glyph = '•', children, ...restProps }) {
|
|
67
|
+
const inScope = useExpScope();
|
|
68
|
+
if (!inScope) {
|
|
69
|
+
return (<Badge {...restProps} modifier={modifier}>
|
|
70
|
+
{children}
|
|
71
|
+
</Badge>);
|
|
72
|
+
}
|
|
73
|
+
const colors = colorMap[modifier];
|
|
74
|
+
return (<span {...restProps} className={clsx('relative inline-flex h-[22px] items-center pl-2.5 whitespace-nowrap', restProps.className)}>
|
|
75
|
+
<span className={clsx('inline-flex h-[18px] items-center rounded-full border pr-2 pl-3.5 text-[11px] leading-4 font-semibold', colors.pill)}>
|
|
76
|
+
{children}
|
|
77
|
+
</span>
|
|
78
|
+
<span aria-hidden="true" className="absolute top-px left-0 size-5">
|
|
79
|
+
<span className={clsx('exp-medal-ribbon absolute top-3 left-[5px] h-[11px] w-2.5', colors.ribbon)}/>
|
|
80
|
+
<span className={clsx('exp-medal-octagon absolute inset-0', colors.ring)}/>
|
|
81
|
+
<span className={clsx('exp-medal-octagon absolute inset-0.5 flex items-center justify-center bg-white text-[10px] leading-none font-extrabold dark:bg-black', glyphColorMap[modifier])}>
|
|
82
|
+
{glyph}
|
|
83
|
+
</span>
|
|
84
|
+
</span>
|
|
85
|
+
</span>);
|
|
86
|
+
}
|
|
87
|
+
//# sourceMappingURL=ExpMedalBadge.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMedalBadge.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD,yEAAyE;AACzE,oDAAoD;AACpD,MAAM,QAAQ,GAA+C;IAC3D,OAAO,EAAE;QACP,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;QAC3B,IAAI,EAAE,sFAAsF;KAC7F;IACD,OAAO,EAAE;QACP,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,gFAAgF;KACvF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,4EAA4E;KACnF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,6BAA6B;QACrC,IAAI,EAAE,uEAAuE;KAC9E;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,oFAAoF;KAC3F;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,wEAAwE;KAC/E;CACF,CAAC;AAEF,MAAM,aAAa,GAA0C;IAC3D,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,8BAA8B;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACvC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAElC,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,qEAAqE,EACrE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,uGAAuG,EACvG,MAAM,CAAC,IAAI,CACZ,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,+BAA+B,CAChE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,2DAA2D,EAC3D,MAAM,CAAC,MAAM,CACd,CAAC,EAEJ;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CAAC,oCAAoC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAErE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,sIAAsI,EACtI,aAAa,CAAC,QAAQ,CAAC,CACxB,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
import type { ExpMascotName } from '../ExpMascot/catalog';
|
|
3
|
+
export type ExpPageHeroLevel = 'h3' | 'h4' | 'h5';
|
|
4
|
+
export type ExpPageHeroBubble = {
|
|
5
|
+
title?: ReactNode;
|
|
6
|
+
text?: ReactNode;
|
|
7
|
+
badge?: ReactNode;
|
|
8
|
+
};
|
|
9
|
+
export type ExpPageHeroCollapse = {
|
|
10
|
+
collapsed: boolean;
|
|
11
|
+
onToggle: () => void;
|
|
12
|
+
/** Accessible name while collapsed, such as "Expand header". */
|
|
13
|
+
expandLabel: string;
|
|
14
|
+
/** Accessible name while expanded, such as "Collapse header". */
|
|
15
|
+
collapseLabel: string;
|
|
16
|
+
};
|
|
17
|
+
export type ExpPageHeroProps = {
|
|
18
|
+
title: ReactNode;
|
|
19
|
+
eyebrow?: ReactNode;
|
|
20
|
+
headingLevel?: ExpPageHeroLevel;
|
|
21
|
+
titleAdornment?: ReactNode;
|
|
22
|
+
description?: ReactNode;
|
|
23
|
+
/** Content under the description, such as stat chips or a data line. */
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
actions?: ReactNode;
|
|
26
|
+
mascot?: ExpMascotName;
|
|
27
|
+
bubble?: ExpPageHeroBubble;
|
|
28
|
+
collapse?: ExpPageHeroCollapse;
|
|
29
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
|
|
30
|
+
/**
|
|
31
|
+
* Page header for the top of a screen, meant for the `heading` slot of
|
|
32
|
+
* `DashboardTemplate`: an eyebrow, the title, a description, optional content
|
|
33
|
+
* under it, and a mascot with a speech bubble on the right.
|
|
34
|
+
*
|
|
35
|
+
* On wide screens it draws a band with a dotted lavender background. With
|
|
36
|
+
* `collapse`, a corner button tucks it down to the title, and the mascot hangs
|
|
37
|
+
* from a thread instead; the consumer keeps the state. On small screens it is
|
|
38
|
+
* a plain title row without eyebrow, mascot or bubble, and `collapse` has no
|
|
39
|
+
* effect.
|
|
40
|
+
*
|
|
41
|
+
* Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
|
|
42
|
+
* title, adornment, description, children and actions.
|
|
43
|
+
*
|
|
44
|
+
* @component
|
|
45
|
+
* @example
|
|
46
|
+
* <ExpPageHero
|
|
47
|
+
* eyebrow="Case memory"
|
|
48
|
+
* title="Cases"
|
|
49
|
+
* description="Review past diagnoses before starting from scratch."
|
|
50
|
+
* mascot="fixi-02-investigando"
|
|
51
|
+
* bubble={{ title: 'Lead found', text: 'Search by ticket or symptom.' }}
|
|
52
|
+
* />
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* // Collapsible, with the state kept by the consumer
|
|
56
|
+
* <ExpPageHero
|
|
57
|
+
* title="Cases"
|
|
58
|
+
* mascot="fixi-02-investigando"
|
|
59
|
+
* collapse={{
|
|
60
|
+
* collapsed,
|
|
61
|
+
* onToggle: () => setCollapsed(!collapsed),
|
|
62
|
+
* expandLabel: 'Expand header',
|
|
63
|
+
* collapseLabel: 'Collapse header',
|
|
64
|
+
* }}
|
|
65
|
+
* />
|
|
66
|
+
*
|
|
67
|
+
* @param {Object} props - The properties of the ExpPageHero component.
|
|
68
|
+
* @param {ReactNode} props.title - Page title.
|
|
69
|
+
* @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
|
|
70
|
+
* @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
|
|
71
|
+
* @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
|
|
72
|
+
* @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
|
|
73
|
+
* @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
|
|
74
|
+
* @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
|
|
75
|
+
* @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
|
|
76
|
+
* @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
|
|
77
|
+
* @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
|
|
78
|
+
*
|
|
79
|
+
* @returns {ReactNode} The page header.
|
|
80
|
+
*/
|
|
81
|
+
export declare function ExpPageHero({ title, eyebrow, headingLevel, titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }: ExpPageHeroProps): ReactNode;
|
|
82
|
+
//# sourceMappingURL=ExpPageHero.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpPageHero.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAmH9B"}
|
|
@@ -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,44 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpPillButtonTone = 'brand' | 'soft';
|
|
3
|
+
export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'none';
|
|
4
|
+
export type ExpPillButtonProps = {
|
|
5
|
+
tone?: ExpPillButtonTone;
|
|
6
|
+
icon?: ExpPillButtonIcon;
|
|
7
|
+
/** Blocks the button and animates its glyph while the action runs. */
|
|
8
|
+
busy?: boolean;
|
|
9
|
+
/** Label shown while `busy`. Defaults to `children`. */
|
|
10
|
+
busyLabel?: string;
|
|
11
|
+
/** Takes the full width of its container. */
|
|
12
|
+
block?: boolean;
|
|
13
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
14
|
+
/**
|
|
15
|
+
* Light pill-shaped call to action, the same 44px height as the core
|
|
16
|
+
* `Button`. `brand` is a filled lavender pill that turns into the clicOH
|
|
17
|
+
* gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
|
|
18
|
+
* for secondary actions, such as a button inside a field.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it falls back to the core `Button`: `brand` maps to
|
|
21
|
+
* `principal` and `soft` to `second`.
|
|
22
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* <ExpPillButton onClick={search}>Search</ExpPillButton>
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* <ExpPillButton tone="soft" icon="sync" busy={isSyncing} busyLabel="Syncing…">
|
|
29
|
+
* Sync
|
|
30
|
+
* </ExpPillButton>
|
|
31
|
+
*
|
|
32
|
+
* @param {Object} props - The properties of the ExpPillButton component.
|
|
33
|
+
* @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
|
|
34
|
+
* @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
|
|
35
|
+
* @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
|
|
36
|
+
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
37
|
+
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
38
|
+
* @param {ReactNode} props.children - Label of the action.
|
|
39
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
40
|
+
*
|
|
41
|
+
* @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
|
|
42
|
+
*/
|
|
43
|
+
export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
|
|
44
|
+
//# sourceMappingURL=ExpPillButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AA+B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CA+DhC"}
|