@qoretechnologies/reqore 0.65.0 → 0.67.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.
- package/.tasks/NEW_COMPONENT.md +439 -0
- package/dist/components/Accordion/index.d.ts +2 -1
- package/dist/components/Accordion/index.d.ts.map +1 -1
- package/dist/components/Accordion/index.js +10 -27
- package/dist/components/Accordion/index.js.map +1 -1
- package/dist/components/Button/index.d.ts +7 -0
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +4 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Callout/index.d.ts +56 -1
- package/dist/components/Callout/index.d.ts.map +1 -1
- package/dist/components/Callout/index.js +81 -18
- package/dist/components/Callout/index.js.map +1 -1
- package/dist/components/EmptyState/index.d.ts +6 -0
- package/dist/components/EmptyState/index.d.ts.map +1 -1
- package/dist/components/EmptyState/index.js +2 -2
- package/dist/components/EmptyState/index.js.map +1 -1
- package/dist/components/EntityRow/index.d.ts +82 -0
- package/dist/components/EntityRow/index.d.ts.map +1 -0
- package/dist/components/EntityRow/index.js +186 -0
- package/dist/components/EntityRow/index.js.map +1 -0
- package/dist/components/ErrorBoundary/index.js +1 -1
- package/dist/components/ErrorBoundary/index.js.map +1 -1
- package/dist/components/FeatureCard/index.d.ts +41 -0
- package/dist/components/FeatureCard/index.d.ts.map +1 -1
- package/dist/components/FeatureCard/index.js +31 -12
- package/dist/components/FeatureCard/index.js.map +1 -1
- package/dist/components/Icon/index.d.ts +14 -0
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +33 -2
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Message/index.d.ts +6 -0
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Message/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +16 -0
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +15 -8
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/components/Panel/index.d.ts +23 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +69 -23
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Progress/index.d.ts +11 -0
- package/dist/components/Progress/index.d.ts.map +1 -1
- package/dist/components/Progress/index.js +38 -6
- package/dist/components/Progress/index.js.map +1 -1
- package/dist/components/SeverityRow/index.d.ts +60 -0
- package/dist/components/SeverityRow/index.d.ts.map +1 -0
- package/dist/components/SeverityRow/index.js +153 -0
- package/dist/components/SeverityRow/index.js.map +1 -0
- package/dist/components/Statistic/index.d.ts +23 -0
- package/dist/components/Statistic/index.d.ts.map +1 -1
- package/dist/components/Statistic/index.js +17 -7
- package/dist/components/Statistic/index.js.map +1 -1
- package/dist/components/Testimonial/index.d.ts +78 -0
- package/dist/components/Testimonial/index.d.ts.map +1 -0
- package/dist/components/Testimonial/index.js +156 -0
- package/dist/components/Testimonial/index.js.map +1 -0
- package/dist/containers/ReqoreProvider.d.ts.map +1 -1
- package/dist/containers/ReqoreProvider.js +3 -1
- package/dist/containers/ReqoreProvider.js.map +1 -1
- package/dist/containers/UIProvider.d.ts +1 -1
- package/dist/containers/UIProvider.d.ts.map +1 -1
- package/dist/containers/UIProvider.js.map +1 -1
- package/dist/context/ReqoreContext.d.ts +7 -0
- package/dist/context/ReqoreContext.d.ts.map +1 -1
- package/dist/context/ReqoreContext.js.map +1 -1
- package/dist/helpers/utils.d.ts +20 -0
- package/dist/helpers/utils.d.ts.map +1 -1
- package/dist/helpers/utils.js +27 -1
- package/dist/helpers/utils.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.d.ts +10 -0
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +12 -2
- package/dist/styles.js.map +1 -1
- package/package.json +1 -1
- package/tests.json +1 -1
package/.tasks/NEW_COMPONENT.md
CHANGED
|
@@ -180,3 +180,442 @@ If you cannot find a component idea that is genuinely useful and fits the librar
|
|
|
180
180
|
|
|
181
181
|
- do not implement anything
|
|
182
182
|
- instead produce a shortlist with pros/cons and stop
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
# Appendix A — Repo idioms & gotchas (read before Step 4)
|
|
187
|
+
|
|
188
|
+
These are concrete patterns distilled from real components in this repo (`ReqoreStatistic`, `ReqoreProgress`, `ReqoreFeatureCard`, `ReqoreCallout`, `ReqorePanel`, `ReqoreSeverityRow`, `ReqoreEntityRow`). Every one of them was a real review correction that should not have to happen twice.
|
|
189
|
+
|
|
190
|
+
## A.1 Prop naming — match the library, do not invent
|
|
191
|
+
|
|
192
|
+
| Use this | Not this | Why |
|
|
193
|
+
|---|---|---|
|
|
194
|
+
| `label` | `title` | `title` is an HTML reserved attribute. Every existing Reqore component (`Panel`, `Button`, `FeatureCard`, `Statistic`, `Tier`) uses `label`. |
|
|
195
|
+
| `description` | `subtitle`, `subLabel`, `secondary` | Used consistently across `Panel`, `FeatureCard`, `EmptyState`. |
|
|
196
|
+
| `transparent: boolean` | `tinted`, `noTint`, `withBg` | Polarity matches `ReqorePanel` / `ReqoreStatistic`. Default `false`; pass `true` to drop the surface. |
|
|
197
|
+
| `flat: boolean` | `bordered`, `outlined` | Default rendering shows a border; `flat={true}` drops it. Same polarity as Panel/Button/etc. |
|
|
198
|
+
| `rounded: boolean` | `square`, `pill` (unless explicitly a pill component) | Default `true`; `rounded={false}` makes it square. |
|
|
199
|
+
| `badge: TReqoreBadge \| TReqoreBadge[]` | `badges`, `tag`, `chip` | Reuse `Button.TReqoreBadge`. Render via `ButtonBadge`. |
|
|
200
|
+
| `actions: IReqoreXxxAction[]` | `buttons`, `controls` | Each action extends `Omit<IReqoreButtonProps, 'children'>` plus an optional `label` field. Same as `Panel.actions`. |
|
|
201
|
+
| `effect`, `labelEffect`, `descriptionEffect`, `metadataEffect` | `style`, `theme`, `appearance` | One `*Effect` prop per text-bearing element. The wrapper takes `effect`. |
|
|
202
|
+
| `intent: TReqoreIntent` | `severity`, `level`, `kind` | Always use the `IReqoreIntent` contract. Map domain concepts (severity, status) to intents in the consumer. |
|
|
203
|
+
| `disabled`, `tooltip`, `customTheme`, `inheritCustomTheme`, `fluid`, `fixed`, `size` | anything else | Inherit from the standard global type contracts (see A.2). |
|
|
204
|
+
|
|
205
|
+
**Rule of thumb**: before naming a prop, grep `src/components/Panel/index.tsx` and `src/components/Button/index.tsx` for the closest concept. If those use a name, you must use the same name.
|
|
206
|
+
|
|
207
|
+
## A.2 Standard contract checklist
|
|
208
|
+
|
|
209
|
+
Every interactive surface component should extend the matching contracts so consumers get the same prop bag everywhere:
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
export interface IReqoreXxxProps
|
|
213
|
+
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
|
|
214
|
+
IReqoreDisabled,
|
|
215
|
+
IReqoreIntent,
|
|
216
|
+
IWithReqoreCustomTheme,
|
|
217
|
+
IWithReqoreEffect,
|
|
218
|
+
IWithReqoreFlat,
|
|
219
|
+
IWithReqoreFluid,
|
|
220
|
+
IWithReqoreSize,
|
|
221
|
+
IWithReqoreTooltip {
|
|
222
|
+
// Component-specific props go here.
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
Add `IWithReqoreFixed` for components that can be used in flex layouts where shrinking is sometimes wrong.
|
|
227
|
+
|
|
228
|
+
The `Omit<React.HTMLAttributes<...>, 'title'>` is critical — without it, callers can pass `title='...'` (the HTML attribute) which collides with any `title` field you might tempt yourself into adding. Block it explicitly.
|
|
229
|
+
|
|
230
|
+
## A.3 Required structural patterns
|
|
231
|
+
|
|
232
|
+
```ts
|
|
233
|
+
const ReqoreXxx = memo(
|
|
234
|
+
forwardRef<HTMLDivElement, IReqoreXxxProps>(
|
|
235
|
+
({ /* destructure all */ }, ref) => {
|
|
236
|
+
const theme = useReqoreTheme(
|
|
237
|
+
'main',
|
|
238
|
+
customTheme,
|
|
239
|
+
intent, // pass intent only when the component should colour-shift
|
|
240
|
+
undefined,
|
|
241
|
+
inheritCustomTheme,
|
|
242
|
+
);
|
|
243
|
+
|
|
244
|
+
return (
|
|
245
|
+
<ReqoreTooltipComponent
|
|
246
|
+
{...rest}
|
|
247
|
+
Component={StyledXxx}
|
|
248
|
+
tooltip={tooltip}
|
|
249
|
+
ref={ref}
|
|
250
|
+
theme={theme}
|
|
251
|
+
{/* transient props, see A.4 */}
|
|
252
|
+
className={`${className || ''} reqore-xxx`}
|
|
253
|
+
>
|
|
254
|
+
{/* body */}
|
|
255
|
+
</ReqoreTooltipComponent>
|
|
256
|
+
);
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
);
|
|
260
|
+
|
|
261
|
+
export default ReqoreXxx;
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
- **`memo` + `forwardRef` are non-negotiable** — without `forwardRef`, parents can't measure / scroll to / focus the component.
|
|
265
|
+
- **`ReqoreTooltipComponent` is the wrapper that gives every component a free `tooltip` prop.** Using it also propagates `effect`, `customTheme`, `disabled` correctly. Never wire tooltip yourself.
|
|
266
|
+
- **`useReqoreTheme(...)`** for theme resolution. Don't read theme directly from context; the hook applies intent + customTheme correctly.
|
|
267
|
+
- **`className` always merges with the existing one** and includes a `.reqore-<component-name>` hook for tests.
|
|
268
|
+
|
|
269
|
+
## A.4 Styled components — transient props
|
|
270
|
+
|
|
271
|
+
Styled-components forwards all unknown props as DOM attributes. Anything that's a styling-only flag MUST be a transient prop (`$prefix`) so it doesn't leak to the DOM:
|
|
272
|
+
|
|
273
|
+
```ts
|
|
274
|
+
interface IStyledXxxProps {
|
|
275
|
+
theme: IReqoreTheme;
|
|
276
|
+
size: TSizes;
|
|
277
|
+
$fluid?: boolean; // ← transient (styling-only)
|
|
278
|
+
$intent?: TReqoreIntent; // ← transient
|
|
279
|
+
$tinted?: boolean; // ← transient
|
|
280
|
+
flat?: boolean; // not transient — also a real prop on the public API
|
|
281
|
+
rounded?: boolean; // same
|
|
282
|
+
}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
Pass them through with the `$` prefix at the render site:
|
|
286
|
+
|
|
287
|
+
```tsx
|
|
288
|
+
<StyledXxx
|
|
289
|
+
$fluid={fluid}
|
|
290
|
+
$intent={intent}
|
|
291
|
+
flat={flat}
|
|
292
|
+
rounded={rounded}
|
|
293
|
+
/>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
## A.5 Sizing — never hardcode pixels
|
|
297
|
+
|
|
298
|
+
Use the size lookup tables in `constants/sizes`:
|
|
299
|
+
|
|
300
|
+
- `PADDING_FROM_SIZE[size]` for content padding
|
|
301
|
+
- `RADIUS_FROM_SIZE[size]` for border radius
|
|
302
|
+
- `TEXT_FROM_SIZE[size]` / `CONTROL_TEXT_FROM_SIZE[size]` for font size
|
|
303
|
+
- `ICON_FROM_SIZE[size]` for icon size
|
|
304
|
+
|
|
305
|
+
If your component has its own scale (e.g. an icon tile that's bigger than a regular icon), define a per-component table:
|
|
306
|
+
|
|
307
|
+
```ts
|
|
308
|
+
const ICON_TILE_SIZE_FROM_SIZE: Record<TSizes, number> = {
|
|
309
|
+
micro: 18, tiny: 22, small: 26, normal: 32, big: 40, huge: 48, massive: 56,
|
|
310
|
+
};
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
Don't hardcode `28px` in the styled component.
|
|
314
|
+
|
|
315
|
+
## A.6 Colour helpers — use the toolkit, not hex
|
|
316
|
+
|
|
317
|
+
```ts
|
|
318
|
+
import {
|
|
319
|
+
changeLightness,
|
|
320
|
+
changeDarkness,
|
|
321
|
+
getMainBackgroundColor,
|
|
322
|
+
getReadableColor,
|
|
323
|
+
getColorFromMaybeString,
|
|
324
|
+
} from '../../helpers/colors';
|
|
325
|
+
import { rgba } from 'polished';
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
- `theme.intents[intent]` for intent-coloured fills
|
|
329
|
+
- `changeLightness(getMainBackgroundColor(theme), 0.08)` for subtle borders
|
|
330
|
+
- `rgba(theme.intents[intent], 0.06)` for tinted backgrounds
|
|
331
|
+
- `getReadableColor(theme, undefined, undefined, true)` for foreground that adapts to the surface
|
|
332
|
+
|
|
333
|
+
**Reqore colour shorthand strings** (work anywhere a `TReqoreEffectColor` is accepted):
|
|
334
|
+
|
|
335
|
+
```
|
|
336
|
+
'main:lighten:5' // 5 steps lighter than theme.main
|
|
337
|
+
'success:darken:2' // 2 steps darker than theme.intents.success
|
|
338
|
+
'info:lighten:2:0.6' // intent.info, 2 steps lighter, 0.6 opacity
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
Use these for design tokens like dimmed chip surfaces (`customTheme={{ main: 'main:lighten:5' }}`) instead of hardcoded hex.
|
|
342
|
+
|
|
343
|
+
## A.7 Effect prop trifecta — every text-bearing element gets one
|
|
344
|
+
|
|
345
|
+
For a component with `label` + `description` + `metadata`:
|
|
346
|
+
|
|
347
|
+
```ts
|
|
348
|
+
labelEffect?: IReqoreEffect;
|
|
349
|
+
descriptionEffect?: IReqoreEffect;
|
|
350
|
+
metadataEffect?: IReqoreEffect;
|
|
351
|
+
effect?: IReqoreEffect; // applied to the wrapper for backgrounds/gradients
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
Pass them to the inner elements with sensible defaults merged via spread:
|
|
355
|
+
|
|
356
|
+
```tsx
|
|
357
|
+
<ReqoreP effect={{ opacity: 0.7, ...descriptionEffect }}>{description}</ReqoreP>
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
That way the consumer's effect always wins on conflicts but the default opacity etc. carries through for unset fields.
|
|
361
|
+
|
|
362
|
+
The wrapper itself uses `styled(StyledEffect)` so the `effect` prop applies to the surface (gradients, glows, frost, drop-shadow filters):
|
|
363
|
+
|
|
364
|
+
```ts
|
|
365
|
+
const StyledXxx = styled(StyledEffect)<IStyledXxxProps>` /* ... */ `;
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
## A.8 Badges — reuse `ButtonBadge`, never roll your own
|
|
369
|
+
|
|
370
|
+
```tsx
|
|
371
|
+
import ReqoreButton, { ButtonBadge, TReqoreBadge } from '../Button';
|
|
372
|
+
|
|
373
|
+
// In your styled label row:
|
|
374
|
+
{hasBadge && <ButtonBadge size={size} content={badge} margin='none' />}
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
**`margin='none'` is critical** when the badge is inside a flex container with its own `gap`. The default `margin='left'` adds a `ReqoreSpacer` which double-spaces inside a flex parent and creates visible gaps. Use `'none'` and let the flex `gap` handle spacing.
|
|
378
|
+
|
|
379
|
+
## A.9 Truncation / `wrap={false}` — cascade ellipsis, never apply to the wrapper
|
|
380
|
+
|
|
381
|
+
The CSS `text-overflow: ellipsis` only takes effect on the actual text-bearing element. Applying it to a wrapping `<div>` just clips the inner text without rendering the `…` glyph. The correct pattern:
|
|
382
|
+
|
|
383
|
+
```ts
|
|
384
|
+
const StyledTextSlot = styled.div<{ $wrap: boolean }>`
|
|
385
|
+
min-width: 0;
|
|
386
|
+
${({ $wrap }) =>
|
|
387
|
+
!$wrap &&
|
|
388
|
+
css`
|
|
389
|
+
flex: 1 1 auto;
|
|
390
|
+
overflow: hidden;
|
|
391
|
+
|
|
392
|
+
& > * {
|
|
393
|
+
overflow: hidden;
|
|
394
|
+
text-overflow: ellipsis;
|
|
395
|
+
white-space: nowrap;
|
|
396
|
+
display: block;
|
|
397
|
+
max-width: 100%;
|
|
398
|
+
}
|
|
399
|
+
`}
|
|
400
|
+
`;
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
Then wrap each truncatable element with `<StyledTextSlot $wrap={wrap}>`. The `& > *` selector cascades into the inner `<ReqoreP>` / `<ReqoreSpan>` / `<ReqoreHeading>`.
|
|
404
|
+
|
|
405
|
+
For multi-element rows (label + leading tag + badge), only wrap the LABEL in `StyledTextSlot` so the leading tag and badge keep their natural width while the label ellipsizes.
|
|
406
|
+
|
|
407
|
+
## A.10 Border behaviour — honour `intent` when present
|
|
408
|
+
|
|
409
|
+
```ts
|
|
410
|
+
border: ${({ flat, theme, intent }) =>
|
|
411
|
+
flat
|
|
412
|
+
? 'none'
|
|
413
|
+
: `1px solid ${changeLightness(
|
|
414
|
+
intent ? theme.intents[intent] : getMainBackgroundColor(theme),
|
|
415
|
+
0.08
|
|
416
|
+
)}`};
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
When the consumer passes `intent='danger'` and `flat={false}`, the border should be danger-coloured at 0.08 lightness (subtle). This was a real bug in the original `ReqoreCallout` — the border used the theme bg regardless of intent.
|
|
420
|
+
|
|
421
|
+
## A.11 The `raised` 3D effect — shared helper
|
|
422
|
+
|
|
423
|
+
If your component has a card-like surface, accept a `raised?: boolean` prop and apply the `RaisedElement` helper from `src/styles.ts`:
|
|
424
|
+
|
|
425
|
+
```ts
|
|
426
|
+
import { RaisedElement } from '../../styles';
|
|
427
|
+
|
|
428
|
+
// In the styled component:
|
|
429
|
+
${({ raised, flat }) => raised && flat !== false && RaisedElement}
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
`flat !== false` gate (or per-component equivalent) suppresses the highlight when there's already a border, since the border provides surface definition. The helper itself:
|
|
433
|
+
|
|
434
|
+
```ts
|
|
435
|
+
export const RaisedElement = css`
|
|
436
|
+
box-shadow:
|
|
437
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
|
438
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.22);
|
|
439
|
+
`;
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
Theme-neutral additive overlays — works on dark or light themes without per-theme tuning.
|
|
443
|
+
|
|
444
|
+
## A.12 Don't reinvent existing `IReqoreEffect` features
|
|
445
|
+
|
|
446
|
+
`IReqoreEffect` already supports:
|
|
447
|
+
|
|
448
|
+
- `gradient` (linear/radial, animated, with intent border colour)
|
|
449
|
+
- `glow` (colour, blur, opacity, inset, when: hover/focus/active)
|
|
450
|
+
- `frost` (frosted glass with backdrop-filter)
|
|
451
|
+
- `weight`, `italic`, `underline`, `uppercase`, `spaced` (text styling)
|
|
452
|
+
- `opacity`, `blur`, `grayscale`, `sepia`, `invert`, `brightness`, `contrast`, `saturate`
|
|
453
|
+
|
|
454
|
+
If your component needs glow / frost / gradient — pipe `effect` through. Don't add a parallel prop.
|
|
455
|
+
|
|
456
|
+
If a shorthand makes sense (e.g. `ReqoreIcon.glow: boolean | TReqoreEffectColor | { color, blur, opacity }`), add it as convenience, but resolve internally to the existing `IReqoreEffect.glow` semantics.
|
|
457
|
+
|
|
458
|
+
## A.13 Class hooks for testability
|
|
459
|
+
|
|
460
|
+
Always include a `.reqore-<component-name>` class on the root, plus per-part classes on every meaningful sub-element. Tests query by these class names:
|
|
461
|
+
|
|
462
|
+
```
|
|
463
|
+
.reqore-xxx // root
|
|
464
|
+
.reqore-xxx-icon // leading icon if any
|
|
465
|
+
.reqore-xxx-label // label
|
|
466
|
+
.reqore-xxx-description // description
|
|
467
|
+
.reqore-xxx-metadata // tertiary text
|
|
468
|
+
.reqore-xxx-actions // action group
|
|
469
|
+
.reqore-xxx-strip // any decorative strip / accent
|
|
470
|
+
.reqore-xxx-body // content wrapper
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
Used in `__tests__/Xxx.test.tsx`:
|
|
474
|
+
|
|
475
|
+
```ts
|
|
476
|
+
expect(document.querySelector('.reqore-xxx-label')!.textContent).toContain('...');
|
|
477
|
+
expect(document.querySelectorAll('.reqore-xxx-actions').length).toBe(1);
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
## A.14 Required stories matrix
|
|
481
|
+
|
|
482
|
+
Every new surface component should have these stories at minimum (under `src/stories/<Component>/<Component>.stories.tsx`):
|
|
483
|
+
|
|
484
|
+
- `Basic` — minimal config
|
|
485
|
+
- `WithLabel` / `WithBadge` / `WithIcon` — each major optional prop demonstrated separately
|
|
486
|
+
- `Sizes` — `tiny / small / normal / big` (or larger if relevant) in a `ReqoreControlGroup`
|
|
487
|
+
- `Intents` — every intent in a row (`Object.keys(DEFAULT_INTENTS).map(...)`)
|
|
488
|
+
- `Bordered` — `flat={false}` (the bordered case is often the inverse of the default; show it)
|
|
489
|
+
- `Square` — `rounded={false}`
|
|
490
|
+
- `Transparent` — `transparent={true}`
|
|
491
|
+
- `Disabled` — `disabled={true}`
|
|
492
|
+
- `Tooltip` — `tooltip='...'` so the prop is clearly inheritable
|
|
493
|
+
- `Clickable` — `onClick` to demonstrate hover/lift/cursor
|
|
494
|
+
- `WithEffects` — combined `effect` + `labelEffect` + `descriptionEffect`
|
|
495
|
+
- `CustomTheme` — `customTheme={{ main: '#...' }}`
|
|
496
|
+
- `Fixed` — when applicable
|
|
497
|
+
- `Raised` — when supported (see A.11)
|
|
498
|
+
- `NoWrap` (or `Truncated`) — when supported (with a narrow-width decorator so the ellipsis is visible)
|
|
499
|
+
|
|
500
|
+
**Story title pattern**: `'Display/<Component>/Stories'` or `'Data Display/<Component>/Stories'`. Match the existing folder grouping.
|
|
501
|
+
|
|
502
|
+
## A.15 Storybook layout pitfall
|
|
503
|
+
|
|
504
|
+
Reqore's `.storybook/preview.tsx` sets `parameters.layout = 'fullscreen'` globally. **Do not override it to `'padded'` per-story** — that's Storybook's built-in layout that adds white margins around the canvas, which fights the dark Reqore canvas and gives stories an unintentional white background.
|
|
505
|
+
|
|
506
|
+
If your story needs a constrained width (e.g. for `NoWrap` to actually demonstrate ellipsis), use a `decorator` instead:
|
|
507
|
+
|
|
508
|
+
```ts
|
|
509
|
+
decorators: [
|
|
510
|
+
(Story) => (
|
|
511
|
+
<div style={{ width: 480 }}>
|
|
512
|
+
<Story />
|
|
513
|
+
</div>
|
|
514
|
+
),
|
|
515
|
+
],
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
Don't touch `parameters.layout`.
|
|
519
|
+
|
|
520
|
+
## A.16 Required tests matrix
|
|
521
|
+
|
|
522
|
+
Mirror the stories matrix in `__tests__/<Component>.test.tsx`. At minimum:
|
|
523
|
+
|
|
524
|
+
- renders root + label + description
|
|
525
|
+
- doesn't render optional parts when not provided (negative cases)
|
|
526
|
+
- renders with each intent
|
|
527
|
+
- renders with each size
|
|
528
|
+
- renders with `flat={false}` (border case)
|
|
529
|
+
- renders with `rounded={false}`
|
|
530
|
+
- renders with `transparent`
|
|
531
|
+
- renders with `effect`, `labelEffect`, `descriptionEffect` together
|
|
532
|
+
- `onClick` fires when set
|
|
533
|
+
- `disabled` short-circuits interaction (when applicable)
|
|
534
|
+
- badge as string + as object + as array (each renders the right number of `.reqore-button-badge` elements)
|
|
535
|
+
- truncation (`wrap={false}`) — both the negative (wraps by default) and positive case
|
|
536
|
+
- `raised` smoke test when supported
|
|
537
|
+
|
|
538
|
+
Standard render setup:
|
|
539
|
+
|
|
540
|
+
```tsx
|
|
541
|
+
render(
|
|
542
|
+
<ReqoreUIProvider>
|
|
543
|
+
<ReqoreLayoutContent>
|
|
544
|
+
<ReqoreContent>
|
|
545
|
+
<ReqoreXxx ... />
|
|
546
|
+
</ReqoreContent>
|
|
547
|
+
</ReqoreLayoutContent>
|
|
548
|
+
</ReqoreUIProvider>
|
|
549
|
+
);
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
Don't omit the providers — some hooks (`useReqoreTheme`, `useReqoreProperty`) silently return undefined without them and the test passes for the wrong reason.
|
|
553
|
+
|
|
554
|
+
## A.17 Index export + COMPONENTS.md
|
|
555
|
+
|
|
556
|
+
Two non-optional steps for shipping:
|
|
557
|
+
|
|
558
|
+
1. Add to `src/index.tsx` in alphabetical order:
|
|
559
|
+
```ts
|
|
560
|
+
export { default as ReqoreXxx } from './components/Xxx';
|
|
561
|
+
```
|
|
562
|
+
Use `default` if your component is exported as default; named otherwise.
|
|
563
|
+
|
|
564
|
+
2. Add a one-line entry to `src/components/COMPONENTS.md` describing the prop catalogue. Match the depth of existing entries — list the standard prop bag (intent, size, flat, rounded, fluid, transparent, customTheme, tooltip, disabled, effect/labelEffect/descriptionEffect) plus what's component-specific.
|
|
565
|
+
|
|
566
|
+
Both happen in the same PR as the component.
|
|
567
|
+
|
|
568
|
+
## A.18 Don't drop `children` when supporting structured content
|
|
569
|
+
|
|
570
|
+
Real bug from `ReqoreCallout`: when both `label` and `children` could be passed, the structured-content branch (label/description) was rendered and `children` was silently dropped. Result: `<Callout label='Heads up'>{detailedMessage}</Callout>` rendered just "Heads up" with no body.
|
|
571
|
+
|
|
572
|
+
Fix: when supporting both forms, ensure all paths render content. Either:
|
|
573
|
+
- Use `children` as a fallback for `description` when `description` is not set, or
|
|
574
|
+
- Document explicitly that `description` takes precedence and drop `children` in that branch (but log a dev-mode warning), or
|
|
575
|
+
- Render both stacked.
|
|
576
|
+
|
|
577
|
+
Pick one and document it. Silently dropping content is the worst option.
|
|
578
|
+
|
|
579
|
+
## A.19 Component composition — reuse, don't reinvent
|
|
580
|
+
|
|
581
|
+
Before writing new layout primitives, check if these existing components can be the building blocks:
|
|
582
|
+
|
|
583
|
+
| Need | Use |
|
|
584
|
+
|---|---|
|
|
585
|
+
| KPI tile (number + label + trend) | `ReqoreStatistic` |
|
|
586
|
+
| Progress bar (with optional target marker) | `ReqoreProgress` |
|
|
587
|
+
| Inline alert / notice | `ReqoreCallout` (label + description + icon + onClose) |
|
|
588
|
+
| List of issues / alerts (severity strip + label + actions) | `ReqoreSeverityRow` |
|
|
589
|
+
| List of entities / items (icon tile + label + metadata + actions) | `ReqoreEntityRow` |
|
|
590
|
+
| Card with marker + label + description | `ReqoreFeatureCard` |
|
|
591
|
+
| Pricing tier card | `ReqoreTier` |
|
|
592
|
+
| Empty state placeholder | `ReqoreEmptyState` |
|
|
593
|
+
| Container with header + footer + actions | `ReqorePanel` |
|
|
594
|
+
| Icon with optional glow | `ReqoreIcon` (use `glow` prop) |
|
|
595
|
+
| Drawer / side panel | `ReqoreDrawer` (extends `ReqorePanel` — same `bottomActions`, `actions`, `label`, `badge`, `icon`) |
|
|
596
|
+
| Two-column key/value table | `ReqoreKeyValueTable` |
|
|
597
|
+
| Vertical event list | `ReqoreTimeline` |
|
|
598
|
+
| Tag / chip | `ReqoreTag` (use `customTheme={{ main: 'main:lighten:5' }}` for dimmed neutral chips, NOT `intent='muted'` which often looks too dark) |
|
|
599
|
+
|
|
600
|
+
If your "new component" is mostly composition of these, ship it as a thin composer in the consumer repo first. Only promote to Reqore once it's used in 2+ places with the same shape.
|
|
601
|
+
|
|
602
|
+
---
|
|
603
|
+
|
|
604
|
+
# Appendix B — Common review corrections (memorise these)
|
|
605
|
+
|
|
606
|
+
These are real fixes that came back from review. Avoid them in v1:
|
|
607
|
+
|
|
608
|
+
1. **`title` instead of `label`** → reviewer will request rename. Just use `label`.
|
|
609
|
+
2. **`tinted` / `noTint`** → reviewer will request `transparent`. Use `transparent`.
|
|
610
|
+
3. **`trailingTitle` slot for badges** → reviewer will request `badge: TReqoreBadge | TReqoreBadge[]`. Use the standard typing + `ButtonBadge`.
|
|
611
|
+
4. **Bottom Close button when there's already a top-right `X`** → drop the redundant Close. The drawer/modal's built-in close is the only Close affordance.
|
|
612
|
+
5. **`hidable` enabled on a drawer that doesn't need a collapse** → drop it. Renders an extra `>` button stacked above the close `X` and looks weird.
|
|
613
|
+
6. **Bare custom styled headings instead of `<ReqoreH4>` / eyebrow `<ReqoreSpan>`** → use existing typography primitives, with `effect={{ uppercase, spaced, weight: 'bold', opacity: 0.5 }}` for eyebrow/section labels.
|
|
614
|
+
7. **Action buttons inside the body when `bottomActions` exists on the panel/drawer** → use `bottomActions` so the bar sticks at the bottom and doesn't leave a void.
|
|
615
|
+
8. **Action button when the row itself can be clickable** → make the row clickable (`<EntityRow onClick={...} tooltip='...' />`) instead of a trailing icon button.
|
|
616
|
+
9. **`labelEffect.gradient` on every panel** → resist the temptation. One subtle gradient on the page title is enough. Multiple gradients fight for attention.
|
|
617
|
+
10. **`(N)` count in segmented control labels** → use the segmented item's `badge` field instead. Each item supports `badge: TReqoreBadge`.
|
|
618
|
+
11. **`intent='muted'` for "neutral metadata" chips** → too dark on most themes. Use `customTheme={{ main: 'main:lighten:5' }}` for a visible-but-dimmed chip surface.
|
|
619
|
+
12. **Action that fires `onAction(name, payload)` with no destination** → either wire it up, mark it `disabled` with `tooltip='Coming soon'`, or remove the button. Don't ship buttons that do nothing.
|
|
620
|
+
13. **`min-width: 0` missing on the wrapping flex item** → ellipsis won't trigger; the inner element won't shrink below its content. Always set `min-width: 0` on the flex item that contains a truncatable element.
|
|
621
|
+
14. **Forgetting `minimal` on `ReqoreDrawer`** → the drawer's panel chrome is too heavy without it. Convention here is to always pass `minimal`.
|
|
@@ -8,7 +8,8 @@ export interface IReqoreAccordionItem {
|
|
|
8
8
|
/** Unique identifier for the item */
|
|
9
9
|
id?: string;
|
|
10
10
|
/** Title displayed in the header */
|
|
11
|
-
|
|
11
|
+
label: string;
|
|
12
|
+
labelEffect?: IReqoreEffect;
|
|
12
13
|
/** Content displayed when expanded */
|
|
13
14
|
content: React.ReactNode;
|
|
14
15
|
/** Optional icon in the header */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,OAAO,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAUpE,OAAO,EACL,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,OAAO,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAUpE,OAAO,EACL,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,aAAa,EAAgB,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAM5E,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,sCAAsC;IACtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,iCAAiC;IACjC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wCAAwC;IACxC,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACtC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB;IACpB,sBAAsB;IACtB,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD;AAoPD,eAAO,MAAM,eAAe,uKAsH3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -48,9 +48,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
48
48
|
}
|
|
49
49
|
return t;
|
|
50
50
|
};
|
|
51
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
52
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
53
|
-
};
|
|
54
51
|
exports.__esModule = true;
|
|
55
52
|
exports.ReqoreAccordion = void 0;
|
|
56
53
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -62,11 +59,11 @@ var colors_1 = require("../../helpers/colors");
|
|
|
62
59
|
var utils_1 = require("../../helpers/utils");
|
|
63
60
|
var useTheme_1 = require("../../hooks/useTheme");
|
|
64
61
|
var styles_1 = require("../../styles");
|
|
62
|
+
var Button_1 = require("../Button");
|
|
65
63
|
var Effect_1 = require("../Effect");
|
|
64
|
+
var Header_1 = require("../Header");
|
|
66
65
|
var Icon_1 = __importStar(require("../Icon"));
|
|
67
66
|
var Span_1 = require("../Span");
|
|
68
|
-
var Tag_1 = __importDefault(require("../Tag"));
|
|
69
|
-
var group_1 = __importDefault(require("../Tag/group"));
|
|
70
67
|
var TooltipComponent_1 = require("../TooltipComponent");
|
|
71
68
|
var StyledAccordionWrapper = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n border-radius: ", "px;\n overflow: hidden;\n border: ", ";\n\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n border-radius: ", "px;\n overflow: hidden;\n border: ", ";\n\n ", "\n"])), function (_a) {
|
|
72
69
|
var $fluid = _a.$fluid;
|
|
@@ -91,7 +88,7 @@ var StyledAccordionItem = styled_components_1["default"].div(templateObject_3 ||
|
|
|
91
88
|
});
|
|
92
89
|
var StyledAccordionHeader = styled_components_1["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n padding: ", ";\n cursor: pointer;\n user-select: none;\n transition: background-color 0.15s ease-out;\n background-color: ", ";\n color: ", ";\n font-size: ", "px;\n\n ", " {\n transform: scale(", ");\n transition: transform 0.15s ease-out;\n }\n\n &:hover {\n background-color: ", ";\n\n ", " {\n transform: scale(", ");\n }\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n padding: ", ";\n cursor: pointer;\n user-select: none;\n transition: background-color 0.15s ease-out;\n background-color: ", ";\n color: ", ";\n font-size: ", "px;\n\n ", " {\n transform: scale(", ");\n transition: transform 0.15s ease-out;\n }\n\n &:hover {\n background-color: ", ";\n\n ", " {\n transform: scale(", ");\n }\n }\n\n ", "\n"])), function () { return sizes_1.GAP_FROM_SIZE.normal; }, function (_a) {
|
|
93
90
|
var size = _a.size;
|
|
94
|
-
return "".concat(sizes_1.PADDING_FROM_SIZE[size], "px ").concat(sizes_1.PADDING_FROM_SIZE[size] * 1.5, "px");
|
|
91
|
+
return "".concat(sizes_1.PADDING_FROM_SIZE[size] * 1.5, "px ").concat(sizes_1.PADDING_FROM_SIZE[size] * 1.5, "px");
|
|
95
92
|
}, function (_a) {
|
|
96
93
|
var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, minimal = _a.minimal;
|
|
97
94
|
return minimal ? 'transparent' : (0, polished_1.rgba)((0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), 0.03), opacity);
|
|
@@ -108,19 +105,18 @@ var StyledAccordionHeader = styled_components_1["default"].div(templateObject_5
|
|
|
108
105
|
var disabled = _a.disabled;
|
|
109
106
|
return disabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), styles_1.DisabledElement);
|
|
110
107
|
});
|
|
111
|
-
var
|
|
112
|
-
var StyledAccordionChevron = (0, styled_components_1["default"])(Icon_1.StyledIconWrapper)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n transition: transform 0.2s ease-out !important;\n transform: rotate(", ") !important;\n flex-shrink: 0;\n"], ["\n transition: transform 0.2s ease-out !important;\n transform: rotate(", ") !important;\n flex-shrink: 0;\n"])), function (_a) {
|
|
108
|
+
var StyledAccordionChevron = (0, styled_components_1["default"])(Icon_1.StyledIconWrapper)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transition: transform 0.2s ease-out !important;\n transform: rotate(", ") !important;\n flex-shrink: 0;\n"], ["\n transition: transform 0.2s ease-out !important;\n transform: rotate(", ") !important;\n flex-shrink: 0;\n"])), function (_a) {
|
|
113
109
|
var $isOpen = _a.$isOpen;
|
|
114
110
|
return ($isOpen ? '180deg' : '0deg');
|
|
115
111
|
});
|
|
116
|
-
var StyledAccordionContentWrapper = styled_components_1["default"].div(
|
|
112
|
+
var StyledAccordionContentWrapper = styled_components_1["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: grid;\n grid-template-rows: ", ";\n transition: grid-template-rows 0.2s ease-in-out;\n"], ["\n display: grid;\n grid-template-rows: ", ";\n transition: grid-template-rows 0.2s ease-in-out;\n"])), function (_a) {
|
|
117
113
|
var $isOpen = _a.$isOpen;
|
|
118
114
|
return ($isOpen ? '1fr' : '0fr');
|
|
119
115
|
});
|
|
120
|
-
var StyledAccordionContentInner = styled_components_1["default"].div(
|
|
121
|
-
var StyledAccordionContentBody = styled_components_1["default"].div(
|
|
116
|
+
var StyledAccordionContentInner = styled_components_1["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n"], ["\n overflow: hidden;\n"])));
|
|
117
|
+
var StyledAccordionContentBody = styled_components_1["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: ", ";\n font-size: ", "px;\n color: ", ";\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n padding: ", ";\n font-size: ", "px;\n color: ", ";\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), function (_a) {
|
|
122
118
|
var size = _a.size;
|
|
123
|
-
return "".concat(sizes_1.PADDING_FROM_SIZE[size], "px ").concat(sizes_1.PADDING_FROM_SIZE[size] *
|
|
119
|
+
return "".concat(sizes_1.PADDING_FROM_SIZE[size] * 3, "px ").concat(sizes_1.PADDING_FROM_SIZE[size] * 4.6, "px");
|
|
124
120
|
}, function (_a) {
|
|
125
121
|
var size = _a.size;
|
|
126
122
|
return sizes_1.TEXT_FROM_SIZE[size];
|
|
@@ -134,25 +130,12 @@ var StyledAccordionContentBody = styled_components_1["default"].div(templateObje
|
|
|
134
130
|
var theme = _a.theme;
|
|
135
131
|
return (0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), 0.05);
|
|
136
132
|
});
|
|
137
|
-
var AccordionBadge = (0, react_1.memo)(function (_a) {
|
|
138
|
-
var size = _a.size, content = _a.content;
|
|
139
|
-
var renderTag = (0, react_1.useCallback)(function (badge, key) { return ((0, jsx_runtime_1.jsx)(Tag_1["default"], __assign({ size: (0, utils_1.getOneLessSize)(size), asBadge: true, className: 'reqore-accordion-badge', labelAlign: 'center', minimal: true }, (typeof badge === 'string' || typeof badge === 'number'
|
|
140
|
-
? { label: badge }
|
|
141
|
-
: badge)), key)); }, [size]);
|
|
142
|
-
if (!content && content !== 0) {
|
|
143
|
-
return null;
|
|
144
|
-
}
|
|
145
|
-
if (Array.isArray(content)) {
|
|
146
|
-
return ((0, jsx_runtime_1.jsx)(group_1["default"], __assign({ className: 'reqore-accordion-badges' }, { children: content.map(function (badge, index) { return renderTag(badge, index); }) })));
|
|
147
|
-
}
|
|
148
|
-
return renderTag(content, 0);
|
|
149
|
-
});
|
|
150
133
|
var AccordionItemRenderer = (0, react_1.memo)(function (_a) {
|
|
151
134
|
var item = _a.item, index = _a.index, isOpen = _a.isOpen, theme = _a.theme, customTheme = _a.customTheme, size = _a.size, intent = _a.intent, flat = _a.flat, rounded = _a.rounded, minimal = _a.minimal, disabled = _a.disabled, effectiveOpacity = _a.effectiveOpacity, isFirst = _a.isFirst, isLast = _a.isLast, onToggle = _a.onToggle, onKeyDown = _a.onKeyDown;
|
|
152
135
|
var itemIntent = item.intent || intent;
|
|
153
136
|
var itemTheme = (0, useTheme_1.useReqoreTheme)('main', customTheme, itemIntent);
|
|
154
137
|
var isItemDisabled = item.disabled || disabled;
|
|
155
|
-
return ((0, jsx_runtime_1.jsxs)(StyledAccordionItem, __assign({ theme: theme, size: size, disabled: isItemDisabled, intent: itemIntent, flat: flat, isFirst: isFirst, isLast: isLast, rounded: rounded, opacity: effectiveOpacity, className: 'reqore-accordion-item' }, { children: [(0, jsx_runtime_1.jsxs)(StyledAccordionHeader, __assign({ theme: itemTheme, size: size, "$isOpen": isOpen, disabled: isItemDisabled, intent: itemIntent, flat: flat, minimal: minimal, opacity: effectiveOpacity, onClick: function () { return onToggle(index); }, onKeyDown: function (e) { return onKeyDown(e, index); }, tabIndex: isItemDisabled ? undefined : 0, role: 'button', "aria-expanded": isOpen, className: 'reqore-accordion-header' }, { children: [(0, jsx_runtime_1.jsx)(StyledAccordionChevron, __assign({ as: 'span', "$isOpen": isOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowDownSLine', size: (0, utils_1.getOneLessSize)(size) }) })), item.icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: item.icon, size: size, color: item.iconColor, className: 'reqore-accordion-icon' })), (0, jsx_runtime_1.jsx)(
|
|
138
|
+
return ((0, jsx_runtime_1.jsxs)(StyledAccordionItem, __assign({ theme: theme, size: size, disabled: isItemDisabled, intent: itemIntent, flat: flat, isFirst: isFirst, isLast: isLast, rounded: rounded, opacity: effectiveOpacity, className: 'reqore-accordion-item' }, { children: [(0, jsx_runtime_1.jsxs)(StyledAccordionHeader, __assign({ theme: itemTheme, size: size, "$isOpen": isOpen, disabled: isItemDisabled, intent: itemIntent, flat: flat, minimal: minimal, opacity: effectiveOpacity, onClick: function () { return onToggle(index); }, onKeyDown: function (e) { return onKeyDown(e, index); }, tabIndex: isItemDisabled ? undefined : 0, role: 'button', "aria-expanded": isOpen, className: 'reqore-accordion-header' }, { children: [(0, jsx_runtime_1.jsx)(StyledAccordionChevron, __assign({ as: 'span', "$isOpen": isOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowDownSLine', size: (0, utils_1.getOneLessSize)(size) }) })), item.icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: item.icon, size: (0, utils_1.getOneLessSize)(size), color: item.iconColor, className: 'reqore-accordion-icon' })), (0, jsx_runtime_1.jsx)(Header_1.ReqoreHeading, __assign({ size: (0, utils_1.getOneLessSize)(size), effect: item.labelEffect, className: 'reqore-accordion-title' }, { children: item.label })), (item.badge || item.badge === 0) && (0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { content: item.badge, size: size })] })), (0, jsx_runtime_1.jsx)(StyledAccordionContentWrapper, __assign({ theme: theme, size: size, "$isOpen": isOpen }, { children: (0, jsx_runtime_1.jsx)(StyledAccordionContentInner, __assign({ theme: theme, size: size }, { children: (0, jsx_runtime_1.jsx)(StyledAccordionContentBody, __assign({ theme: theme, size: size, className: 'reqore-accordion-content' }, { children: typeof item.content === 'string' ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({ size: size }, { children: item.content }))) : (item.content) })) })) }))] })));
|
|
156
139
|
});
|
|
157
140
|
exports.ReqoreAccordion = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
|
|
158
141
|
var items = _a.items, _b = _a.allowMultiple, allowMultiple = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'normal' : _c, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, fluid = _a.fluid, flat = _a.flat, disabled = _a.disabled, tooltip = _a.tooltip, _d = _a.rounded, rounded = _d === void 0 ? true : _d, minimal = _a.minimal, effect = _a.effect, opacity = _a.opacity, transparent = _a.transparent, onItemToggle = _a.onItemToggle, className = _a.className, rest = __rest(_a, ["items", "allowMultiple", "size", "customTheme", "inheritCustomTheme", "intent", "fluid", "flat", "disabled", "tooltip", "rounded", "minimal", "effect", "opacity", "transparent", "onItemToggle", "className"]);
|
|
@@ -196,5 +179,5 @@ exports.ReqoreAccordion = (0, react_1.memo)((0, react_1.forwardRef)(function (_a
|
|
|
196
179
|
return ((0, jsx_runtime_1.jsx)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { Component: StyledAccordionWrapper, tooltip: tooltip, ref: ref, theme: theme, size: size, "$fluid": fluid, disabled: disabled, rounded: rounded, flat: flat, intent: intent, opacity: effectiveOpacity, effect: transformedEffect, className: "".concat(className || '', " reqore-accordion") }, { children: items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(AccordionItemRenderer, { item: item, index: index, isOpen: !!openItems[index], theme: theme, customTheme: customTheme, size: size, intent: intent, flat: flat, rounded: rounded, minimal: minimal, disabled: disabled, effectiveOpacity: effectiveOpacity, isFirst: index === 0, isLast: index === items.length - 1, onToggle: handleToggle, onKeyDown: handleKeyDown }, item.id || index)); }) })));
|
|
197
180
|
}));
|
|
198
181
|
exports["default"] = exports.ReqoreAccordion;
|
|
199
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9
|
|
182
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
200
183
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -45,6 +45,13 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
|
|
|
45
45
|
rounded?: boolean;
|
|
46
46
|
pill?: boolean;
|
|
47
47
|
circle?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Subtle 3D "raised" effect — inset top highlight + inset bottom shadow.
|
|
50
|
+
* Best paired with `flat={true}` (no border); suppressed when a border is
|
|
51
|
+
* rendered (`flat={false}`) since the border already provides definition,
|
|
52
|
+
* and suppressed when `transparent` since there is no surface to lift.
|
|
53
|
+
*/
|
|
54
|
+
raised?: boolean;
|
|
48
55
|
}
|
|
49
56
|
export interface IReqoreButtonStyle extends IReqoreButtonProps {
|
|
50
57
|
theme: IReqoreTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,EAUL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"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"}
|