@stack-spot/citric-react 0.20.4 → 0.20.5
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/citric.css +2 -1
- package/dist/components/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion.js +13 -1
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/IconBox.d.ts +5 -0
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +2 -3
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts +5 -0
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +2 -3
- package/dist/components/ImageBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion.tsx +15 -0
- package/src/components/IconBox.tsx +7 -3
- package/src/components/ImageBox.tsx +7 -3
package/dist/citric.css
CHANGED
|
@@ -2222,6 +2222,7 @@ input[data-citric="favorite"][type="checkbox"] {
|
|
|
2222
2222
|
gap: var(--spacing-2);
|
|
2223
2223
|
position: relative;
|
|
2224
2224
|
text-decoration: none;
|
|
2225
|
+
outline: none;
|
|
2225
2226
|
|
|
2226
2227
|
/* Appearances */
|
|
2227
2228
|
|
|
@@ -2258,7 +2259,7 @@ input[data-citric="favorite"][type="checkbox"] {
|
|
|
2258
2259
|
|
|
2259
2260
|
/* States */
|
|
2260
2261
|
|
|
2261
|
-
&:focus {
|
|
2262
|
+
&:focus-visible {
|
|
2262
2263
|
outline: 0.125rem solid var(--inverse-500);
|
|
2263
2264
|
outline-offset: 0.15rem;
|
|
2264
2265
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG,eAAO,MAAM,SAAS,oGACmF,cAAc,4CAqCrH,CAAA"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
|
+
import { useTranslate } from '@stack-spot/portal-translate';
|
|
3
4
|
import { useEffect, useMemo, useState } from 'react';
|
|
4
5
|
import { applyCSSVariable } from '../utils/css.js';
|
|
5
6
|
import { withRef } from '../utils/react.js';
|
|
6
7
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
8
|
export const Accordion = withRef(({ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }) => {
|
|
9
|
+
const t = useTranslate(dictionary);
|
|
8
10
|
const [ariaHidden, setAriaHidden] = useState(!expanded);
|
|
9
11
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id]);
|
|
10
12
|
useEffect(() => {
|
|
@@ -13,8 +15,18 @@ export const Accordion = withRef(({ id, appearance, expanded, onChange, header,
|
|
|
13
15
|
const expandBtn = _jsx("input", { type: "checkbox", checked: expanded, onChange: () => {
|
|
14
16
|
setAriaHidden(!ariaHidden);
|
|
15
17
|
onChange?.(!expanded);
|
|
16
|
-
}, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
|
|
18
|
+
}, "aria-label": ariaHidden ? t.open : t.close, title: ariaHidden ? t.open : t.close, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
|
|
17
19
|
const headerContent = typeof header === 'function' ? header(expandBtn) : _jsxs("label", { children: [header, expandBtn] });
|
|
18
20
|
return (_jsxs(CitricComponent, { tag: "div", component: "accordion", className: listToClass([appearance, className]), style: applyCSSVariable(style, 'max-height', `${maxHeight}px`), ...props, children: [_jsx("header", { children: headerContent }), _jsx("section", { id: accordionId, "aria-hidden": ariaHidden, ...(ariaHidden ? { inert: 'true' } : {}), children: appearance === 'card' ? _jsx("div", { className: "content", children: children }) : children })] }));
|
|
19
21
|
});
|
|
22
|
+
const dictionary = {
|
|
23
|
+
en: {
|
|
24
|
+
open: 'Open',
|
|
25
|
+
close: 'Close',
|
|
26
|
+
},
|
|
27
|
+
pt: {
|
|
28
|
+
open: 'Abrir',
|
|
29
|
+
close: 'Fechar',
|
|
30
|
+
},
|
|
31
|
+
};
|
|
20
32
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,gBACW,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACzC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,iBAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAC3E,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAkB9G;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE/G;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE3F;AAED,eAAO,MAAM,OAAO,iBAAoB,CAAA;AACxC,eAAO,MAAM,UAAU,oBAAuB,CAAA;AAC9C,eAAO,MAAM,QAAQ,kBAAqB,CAAA"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
|
-
import { useCallback } from 'react';
|
|
4
3
|
import { useCitricController } from '../context/hooks.js';
|
|
5
4
|
import { withRef } from '../utils/react.js';
|
|
6
5
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
6
|
function _IconBox({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
|
|
8
7
|
const citric = useCitricController();
|
|
9
|
-
|
|
8
|
+
function handleClick(e) {
|
|
10
9
|
onClick?.(e);
|
|
11
10
|
if (tag === 'button')
|
|
12
11
|
citric?.onClickButton?.(e, analytics ?? false);
|
|
13
12
|
else if (tag === 'a')
|
|
14
13
|
citric?.onClickLink?.(e, analytics ?? false);
|
|
15
|
-
}
|
|
14
|
+
}
|
|
16
15
|
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
17
16
|
}
|
|
18
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD,SAAS,QAAQ,CACf,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE7G,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,WAAW,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC9G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAkC,KAAwC;IAC1F,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;AACxC,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9C,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkB/F;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEhE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAEzD;AAED,eAAO,MAAM,QAAQ,kBAAqB,CAAA;AAC1C,eAAO,MAAM,WAAW,qBAAwB,CAAA;AAChD,eAAO,MAAM,SAAS,mBAAsB,CAAA"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
|
-
import { useCallback } from 'react';
|
|
4
3
|
import { useCitricController } from '../context/hooks.js';
|
|
5
4
|
import { withRef } from '../utils/react.js';
|
|
6
5
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
6
|
function _ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
|
|
8
7
|
const citric = useCitricController();
|
|
9
|
-
|
|
8
|
+
function handleClick(e) {
|
|
10
9
|
onClick?.(e);
|
|
11
10
|
if (tag === 'button')
|
|
12
11
|
citric?.onClickButton?.(e, analytics ?? false);
|
|
13
12
|
else if (tag === 'a')
|
|
14
13
|
citric?.onClickLink?.(e, analytics ?? false);
|
|
15
|
-
}
|
|
14
|
+
}
|
|
16
15
|
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass([appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
17
16
|
}
|
|
18
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD,SAAS,SAAS,CAChB,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,YAAY,CAAC,KAA2C;IAC/D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,SAAS,UAAU,CAAC,KAAsC;IACxD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAC1C,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAA;AAChD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
|
+
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
|
|
2
3
|
import { useEffect, useMemo, useState } from 'react'
|
|
3
4
|
import { applyCSSVariable } from '../utils/css'
|
|
4
5
|
import { withRef } from '../utils/react'
|
|
@@ -39,6 +40,7 @@ export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'
|
|
|
39
40
|
export const Accordion = withRef((
|
|
40
41
|
{ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,
|
|
41
42
|
) => {
|
|
43
|
+
const t = useTranslate(dictionary)
|
|
42
44
|
const [ariaHidden, setAriaHidden] = useState(!expanded)
|
|
43
45
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id])
|
|
44
46
|
|
|
@@ -53,6 +55,8 @@ export const Accordion = withRef((
|
|
|
53
55
|
setAriaHidden(!ariaHidden)
|
|
54
56
|
onChange?.(!expanded)
|
|
55
57
|
}}
|
|
58
|
+
aria-label={ariaHidden ? t.open : t.close}
|
|
59
|
+
title={ariaHidden ? t.open : t.close}
|
|
56
60
|
onKeyDown={e => e.key === 'Enter' && (e.target as HTMLElement).click?.()}
|
|
57
61
|
aria-controls={accordionId}
|
|
58
62
|
/>
|
|
@@ -72,3 +76,14 @@ export const Accordion = withRef((
|
|
|
72
76
|
</CitricComponent>
|
|
73
77
|
)
|
|
74
78
|
})
|
|
79
|
+
|
|
80
|
+
const dictionary = {
|
|
81
|
+
en: {
|
|
82
|
+
open: 'Open',
|
|
83
|
+
close: 'Close',
|
|
84
|
+
},
|
|
85
|
+
pt: {
|
|
86
|
+
open: 'Abrir',
|
|
87
|
+
close: 'Fechar',
|
|
88
|
+
},
|
|
89
|
+
} satisfies Dictionary
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme'
|
|
3
|
-
import { useCallback } from 'react'
|
|
4
3
|
import { useCitricController } from '../context/hooks'
|
|
5
4
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
6
5
|
import { withRef } from '../utils/react'
|
|
@@ -24,6 +23,11 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
24
23
|
/**
|
|
25
24
|
* Size of the box.
|
|
26
25
|
*
|
|
26
|
+
* - xs: 20px;
|
|
27
|
+
* - sm: 24px;
|
|
28
|
+
* - md: 32px;
|
|
29
|
+
* - lg: 40px.
|
|
30
|
+
*
|
|
27
31
|
* @default 'sm'
|
|
28
32
|
*/
|
|
29
33
|
size?: 'xs' | 'sm' | 'md' | 'lg',
|
|
@@ -51,11 +55,11 @@ function _IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
|
|
|
51
55
|
) {
|
|
52
56
|
const citric = useCitricController()
|
|
53
57
|
|
|
54
|
-
|
|
58
|
+
function handleClick(e: React.MouseEvent<any>) {
|
|
55
59
|
onClick?.(e)
|
|
56
60
|
if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
|
|
57
61
|
else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
|
|
58
|
-
}
|
|
62
|
+
}
|
|
59
63
|
|
|
60
64
|
return <CitricComponent
|
|
61
65
|
tag={(tag || 'i') as any}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
|
-
import { useCallback } from 'react'
|
|
3
2
|
import { useCitricController } from '../context/hooks'
|
|
4
3
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
5
4
|
import { withRef } from '../utils/react'
|
|
@@ -23,6 +22,11 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
|
|
|
23
22
|
/**
|
|
24
23
|
* Size of the box.
|
|
25
24
|
*
|
|
25
|
+
* - xs: 20px;
|
|
26
|
+
* - sm: 24px;
|
|
27
|
+
* - md: 32px;
|
|
28
|
+
* - lg: 40px.
|
|
29
|
+
*
|
|
26
30
|
* @default 'sm'
|
|
27
31
|
*/
|
|
28
32
|
size?: 'xs' | 'sm' | 'md' | 'lg',
|
|
@@ -50,11 +54,11 @@ function _ImageBox<T extends ImageBoxTag = 'div'>(
|
|
|
50
54
|
) {
|
|
51
55
|
const citric = useCitricController()
|
|
52
56
|
|
|
53
|
-
|
|
57
|
+
function handleClick(e: React.MouseEvent<any>) {
|
|
54
58
|
onClick?.(e)
|
|
55
59
|
if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
|
|
56
60
|
else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
|
|
57
|
-
}
|
|
61
|
+
}
|
|
58
62
|
|
|
59
63
|
return <CitricComponent
|
|
60
64
|
tag={(tag || 'i') as any}
|