@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/Operator.mdrules

@@ -1,154 +0,0 @@
----
-description: DSE component skill: Operator
-alwaysApply: false
----
-
-# Skill: Operator
-
-Read-only display of a Pega case operator (creator or updater). Shows the operator's name and relative timestamp. On click, fetches full operator details from Pega and displays them in a popover.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a clickable read-only field displaying a case operator's name and the relative time of their action (created/updated). Clicking the field triggers an async fetch of the operator's profile details (position, organization, reports-to, telephone, email) and shows them in a popover panel.
-
-## Pega Metadata
-
-- **Pega Name:** `Operator`
-- **Registration key:** `Operator` (in `component-map.ts`)
-- **Extends `PConnProps`** — but does NOT call `getPConnect()`. Props are all passed directly.
-
-## Props
-
-The component interface extends `PConnProps` but all rendering data is passed as explicit props:
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | The field label used to identify which operator to display. Must be `'create operator'` or `'update operator'` (case-insensitive). |
-| `displayLabel` | `any` | No | Alternative label (used if `label` doesn't match). Also compared case-insensitively. |
-| `createDateTime` | `string` | Yes | ISO datetime string of when the case was created |
-| `createLabel` | `string` | Yes | Display label for the create operator field |
-| `createOperator` | `{ userName: string; userId: string }` | Yes | Creator's name and ID |
-| `updateDateTime` | `string` | Yes | ISO datetime string of last update |
-| `updateLabel` | `string` | Yes | Display label for the update operator field |
-| `updateOperator` | `{ userName: string; userId: string }` | Yes | Updater's name and ID |
-
-## Behavioral Contract
-
-### 1. Operator Selection
-
-Determine which operator to display based on `label.toLowerCase()` or `displayLabel?.toLowerCase()`:
-- If either is `'create operator'`:
-  - `caseOpLabel = createLabel`
-  - `caseOpName = createOperator.userName`
-  - `caseOpId = createOperator.userId`
-  - `caseTime = createDateTime`
-- If either is `'update operator'`:
-  - `caseOpLabel = updateLabel`
-  - `caseOpName = updateOperator.userName`
-  - `caseOpId = updateOperator.userId`
-  - `caseTime = updateDateTime`
-- Otherwise: `caseOpLabel = '---'`, `caseOpName = '---'`, `caseOpId = ''`, `caseTime = ''`.
-
-### 2. Main Display
-
-Render a read-only TextField (standard variant, no underline, pointer cursor) with:
-- `defaultValue={caseOpName}`
-- `label={caseOpLabel}`
-- `onClick={showOperatorDetails}`
-- `readOnly: true`, `disableUnderline: true`, `cursor: 'pointer'`
-
-Below the TextField, render the relative time: `Utils.generateDateTime(caseTime, 'DateTime-Since')`.
-
-### 3. Popover on Click (`showOperatorDetails`)
-
-When the TextField is clicked:
-1. Call `PCore.getUserApi().getOperatorDetails(caseOpId)` — returns a Promise.
-2. Use `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` to localize field labels.
-3. On resolution, build a fields array with these entries (using `'---'` as fallback for missing values):
-   - Position (`pyPosition`)
-   - Organization (`pyOrganization`)
-   - Reports to (`pyReportToUserName`)
-   - Telephone (`pyTelephone`) — rendered as `<a href={'tel:' + value}>{value}</a>`
-   - Email address (`pyEmailAddress`) — rendered as `<a href={'mailto:' + value}>{value}</a>`
-4. If `res.data.pyOperatorInfo.pyUserName` is empty, use all `'---'` fallbacks.
-5. Set `popoverFields` state with the resolved fields.
-6. Set `popoverAnchorEl` to the clicked element to open the popover.
-
-### 4. Popover Layout
-
-The popover renders when `popoverAnchorEl` is set:
-- Anchor origin: `{ vertical: 'bottom', horizontal: 'center' }`
-- Transform origin: `{ vertical: 'top', horizontal: 'center' }`
-- Max width: `45ch`
-- Content: A `Grid container` with:
-  - `Typography h6` showing `caseOpName` at full width.
-  - One row per field: 6-col `Typography caption` (label) + 6-col `Typography subtitle2` (value).
-
-Closing the popover sets `popoverAnchorEl` to `null`.
-
-## Visual Specifications
-
-Derived from `Operator.tsx` makeStyles:
-
-### Root Container
-
-| Property | Value |
-|----------|-------|
-| Padding | `theme.spacing(1)` (≈ 8px) |
-| Margin | `theme.spacing(1)` |
-
-### Popover Container
-
-| Property | Value |
-|----------|-------|
-| Padding | `theme.spacing(1)` |
-| Margin | `theme.spacing(1)` |
-| Max width | 45ch |
-
-**CSS-only implementation notes:**
-- Main display: read-only text field with label above, value below, pointer cursor on the value element.
-- Time display: secondary muted text below the operator name (e.g., `font-size: 0.75rem; color: var(--text-secondary)`).
-- Popover: `position: absolute; background: var(--bg-paper); border: 1px solid var(--divider); border-radius: 4px; padding: 8px; max-width: 45ch; box-shadow: 0 4px 12px rgba(0,0,0,0.15)`.
-- Operator name in popover: `font-size: 1.25rem; font-weight: 500; margin-bottom: 8px`.
-- Detail rows: `display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: baseline`.
-- Detail label: `font-size: 0.75rem; color: var(--text-secondary)`.
-- Detail value: `font-size: 0.875rem; font-weight: 500`.
-- Close popover on outside click (use `onClose` / blur handler).
-
-## Edge Cases & Special Logic
-
-- If `caseOpId` is empty (label not recognized), do NOT call `getOperatorDetails` — the fetch would fail.
-- If the API response has no `pyOperatorInfo.pyUserName`, fall back to all `'---'` for field values (still open the popover).
-- `Utils.generateDateTime(caseTime, 'DateTime-Since')` handles empty `caseTime` gracefully.
-- State: `popoverFields` starts as empty array `[]`. Check `popoverFields.length === 0` and return `undefined` from `getPopoverGrid()` to render nothing before data loads.
-
-## Dependencies
-
-- `Utils` from `../../helpers/utils` — `Utils.generateDateTime` for relative time display
-- `PCore.getUserApi().getOperatorDetails(userId)` — global Pega runtime API for operator details
-- `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` — for localized field labels in the popover
-
-## Design System Mapping
-
-**UI control type:** Clickable read-only field with async popover detail panel.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with click handler, custom CSS popover/tooltip panel |
-| MUI | Read-only `<TextField>` + `<Popover>` with `<Grid>` detail rows |
-| Ant Design | `<Input readOnly>` + `<Popover>` with `<Descriptions>` |
-| Chakra UI | `<Input isReadOnly>` + `<Popover>` with custom content |
-| Shadcn/ui | `<Input readOnly>` + `<Popover>` + `<PopoverContent>` |
-
-When implementing in a specific design system, map the following:
-- `onClick` on read-only input → trigger async fetch + open popover
-- `PCore.getUserApi().getOperatorDetails()` → call this before showing the popover
-- Popover anchor → position relative to the clicked element
-- `Utils.generateDateTime(caseTime, 'DateTime-Since')` → relative time display (e.g., "2 hours ago")
-- Telephone/email in popover → clickable `<a href='tel:...'>` and `<a href='mailto:...'>` links

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/Pulse.mdrules

@@ -1,88 +0,0 @@
----
-description: DSE component skill: Pulse
-alwaysApply: false
----
-
-# Skill: Pulse
-
-Placeholder activity feed / comments stream card. Currently a stub implementation that renders a card titled "Pulse".
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a card container intended to display an activity feed or comments stream for a Pega case. The current reference implementation is a **stub** — it renders only a Card with the title "Pulse" and placeholder body text. A production implementation would render a real activity feed stream inside the card using the `children` slot.
-
-## Pega Metadata
-
-- **Pega Name:** `Pulse`
-- **Registration key:** `Pulse` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives children via `PropsWithChildren`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | No | Child components (activity stream content) — currently unused in the stub |
-
-> **Note:** The current reference implementation ignores `children` and renders placeholder content. A full implementation would render `children` inside the card body.
-
-## Behavioral Contract
-
-1. Render a `Card` (or equivalent container) with a distinct left border accent.
-2. Render a card header with the title text `"Pulse"` using a heading style (e.g., `h6`).
-3. Render card content body with placeholder text `"Pulse"`.
-4. The left border accent uses the **primary light** color from the design system's theme.
-5. The card has top and bottom margin (1 spacing unit each).
-
-> **Stub note:** Steps 2–3 are placeholder content. In a real implementation, the card header would show a section label and the card body would render the `children` activity stream.
-
-## Visual Specifications
-
-Derived from `Pulse.tsx` makeStyles:
-
-### Card Container
-
-| Property | Value |
-|----------|-------|
-| Margin top | `theme.spacing(1)` (≈ 8px in MUI default) |
-| Margin bottom | `theme.spacing(1)` (≈ 8px) |
-| Border left | `6px solid` |
-| Border left color | `theme.palette.primary.light` (light variant of the primary brand color) |
-
-**CSS-only implementation notes:**
-- Card wrapper: `margin-top: 8px; margin-bottom: 8px; border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.12)`.
-- Card header: `padding: 16px; font-size: 1.25rem; font-weight: 500`.
-- Card body: `padding: 0 16px 16px`.
-- Use a CSS variable `--app-primary-light-color` for the accent border color.
-
-## Edge Cases & Special Logic
-
-- The `children` prop is received but not currently rendered — it is intentional in the stub.
-- The component renders unconditionally (no conditional logic based on props).
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Card with left accent border and header/body sections.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with `border-left: 6px solid` + inner header/body divs |
-| MUI | `<Card><CardHeader title={<Typography variant='h6'>Pulse</Typography>} /><CardContent>` |
-| Ant Design | `<Card title='Pulse'>` with left border via `style` prop |
-| Chakra UI | `<Card>` with `borderLeft='6px solid' borderColor='blue.300'` |
-| Shadcn/ui | `<Card><CardHeader><CardTitle>` |
-
-When implementing in a specific design system, map the following:
-- Left border accent → `borderLeft` / `border-left` on the card root
-- Left border color → primary light color from the design system's palette
-- Card header title typography → design system's heading variant (h6 or equivalent)

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/RichTextEditor.mdrules

@@ -1,211 +0,0 @@
----
-description: DSE component skill: RichTextEditor
-alwaysApply: false
----
-
-# Skill: RichTextEditor
-
-WYSIWYG rich text editor field backed by TinyMCE. Supports editable and read-only modes, optional label, helper text, error/required states, and a file picker for image uploads.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a rich text editing area (WYSIWYG) for Pega case properties that store HTML content. In **edit mode**, uses TinyMCE with a bottom toolbar. In **read-only mode**, renders the HTML content as a read-only `<div>`. Wraps the editor in a `FormControl` with an optional floating label and helper text, consistent with other field components.
-
-The editor is a `forwardRef` component — the ref is connected to the underlying TinyMCE editor instance.
-
-> **Note:** TinyMCE is the reference editor library. In non-MUI or non-TinyMCE implementations, this component can be replaced with an alternative rich text library (Quill, ProseMirror, Slate.js, etc.). The behavioral contract below remains the same regardless of library.
-
-## Pega Metadata
-
-- **Pega Name:** `RichTextEditor`
-- **Registration key:** `RichTextEditor` (in `component-map.ts`)
-- **Does NOT extend PConnProps** — receives all data as explicit field-like props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `string` | No | DOM id for the editor element. Defaults to a generated UID |
-| `defaultValue` | `string` | Yes | Initial HTML content of the editor |
-| `label` | `string` | Yes | Field label displayed above the editor |
-| `labelHidden` | `boolean` | Yes | If `true`, hide the label |
-| `info` | `string` | No | Helper text displayed below the editor |
-| `testId` | `string` | No | Value for `data-test-id` attribute on the FormControl wrapper |
-| `placeholder` | `string` | No | Placeholder text shown in empty editor |
-| `disabled` | `boolean` | Yes | If `true`, editor is in read-only/disabled mode with no toolbar |
-| `required` | `boolean` | Yes | If `true`, marks the field as required |
-| `readOnly` | `boolean` | Yes | If `true`, render as static HTML display (not interactive editor) |
-| `error` | `boolean` | Yes | If `true`, applies error styling to the FormControl |
-| `onBlur` | `React.EventHandler<any>` | Yes | Called when the editor loses focus |
-| `onChange` | `React.EventHandler<any>` | Yes | Called when the editor content changes |
-
-## Behavioral Contract
-
-### 1. Ref Forwarding
-
-The component uses `forwardRef`. Internally, use `useConsolidatedRef(ref)` from `@pega/sdk-react` to create `editorRef` — the TinyMCE editor instance is stored here after initialization.
-
-### 2. UID for id
-
-If `id` is not provided, generate one using `useUID()` from `@pega/sdk-react`.
-
-### 3. Read-Only Mode
-
-If `readOnly` is `true`, render:
-```
-<div
-  key={id}
-  id={id}
-  className='readonly-richtext-editor'
-  dangerouslySetInnerHTML={{ __html: defaultValue || '--' }}
-/>
-```
-Skip the TinyMCE Editor entirely in this case.
-
-### 4. Edit Mode (TinyMCE)
-
-When `readOnly` is `false`, render `<Editor>` from `@tinymce/tinymce-react` with:
-
-| Config | Value |
-|--------|-------|
-| `tinymceScriptSrc` | `'tinymce/tinymce.min.js'` (local script) |
-| `id` | The resolved `id` |
-| `initialValue` | `defaultValue` |
-| `disabled` | `disabled` prop |
-| `onBlur` | `onBlur` prop |
-| `onEditorChange` | `onChange` prop |
-| `onInit` | Store editor in `editorRef.current` |
-
-### 5. TinyMCE `init` Configuration
-
-| Option | Value |
-|--------|-------|
-| `skin` | `'oxide-dark'` (dark mode) / `'oxide'` (light mode) — detect from theme |
-| `menubar` | `false` |
-| `statusbar` | `false` |
-| `branding` | `false` |
-| `min_height` | `130` |
-| `toolbar_location` | `'bottom'` |
-| `plugins` | `['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize']` |
-| `autoresize_bottom_margin` | `0` |
-| `toolbar` | `'blocks \| bold italic strikethrough \| bullist numlist outdent indent \| link image'` (or `false` when `disabled`) |
-| `paste_data_images` | `true` |
-| `file_picker_types` | `'image'` |
-| `file_picker_callback` | See file picker section below |
-| `content_style` | Theme-aware CSS string (see below) |
-| `placeholder` | `placeholder` prop |
-
-### 6. Theme-Aware Content Style
-
-Inject a `content_style` string that uses theme values for the editor body:
-```css
-body {
-  font-family: <theme.typography.fontFamily>;
-  font-size: <theme.typography.fontSize>px;
-  color: <theme.palette.text.primary>;
-  background: <theme.palette.background.paper>;
-}
-a { color: <theme.palette.primary.main>; }
-h1-h6 { color: <theme.palette.text.primary>; font-family: <theme.typography.fontFamily>; }
-blockquote { color: <theme.palette.text.secondary>; border-left: 4px solid <theme.palette.primary.light>; padding-left: 8px; }
-ul, ol { color: <theme.palette.text.primary>; }
-input, textarea, select {
-  background: <theme.palette.background.paper>;
-  color: <theme.palette.text.primary>;
-  border: 1px solid <theme.palette.divider>;
-  border-radius: 4px; padding: 6px 10px; font-size: 1em; font-family: inherit;
-}
-.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-  color: <theme.palette.text.secondary>; opacity: 0.7;
-}
-```
-
-### 7. File Picker Callback
-
-When a user clicks the image upload in the toolbar:
-1. Create a hidden `<input type='file' accept='image/*'>`.
-2. On file selected: read as DataURL using `FileReader`.
-3. On `FileReader.load`: create a blob in TinyMCE's blob cache (`editorRef.current.editorUpload.blobCache`), then call `cb(blobInfo.blobUri(), { title: file.name })`.
-4. Programmatically click the input to open the file dialog.
-
-### 8. readOnly/disabled Transition (after initial mount)
-
-Use `useAfterInitialEffect([readOnly, disabled])` from `@pega/sdk-react`:
-```
-editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design')
-```
-This switches the TinyMCE mode without re-mounting the editor.
-
-### 9. Wrapper Structure
-
-```
-<FormControl variant='standard' data-test-id={testId} error={error} required={required}>
-  {!labelHidden && <InputLabel className='fieldLabel'>{label}</InputLabel>}
-  {richTextComponent}   ← either readOnly div or <Editor>
-  {info && <FormHelperText>{info}</FormHelperText>}
-</FormControl>
-```
-
-## Visual Specifications
-
-Derived from `RichTextEditor.tsx` makeStyles:
-
-### Label
-
-| Property | Value |
-|----------|-------|
-| Position | relative |
-| Transform | `translate(0, 0px) scale(1)` (non-floating — stays at top) |
-| Margin bottom | 5px |
-| Color | `theme.palette.text.secondary` |
-
-**CSS-only implementation notes:**
-- Label: `display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px`.
-- Editor container: `min-height: 130px; border: 1px solid var(--divider); border-radius: 4px`.
-- Toolbar (if CSS-only): render buttons at bottom of the editor area.
-- Read-only display: `div.readonly-richtext-editor { padding: 8px; min-height: 130px; background: var(--bg-paper); color: var(--text-primary) }`.
-- Error state: `border-color: var(--error-color)`.
-- Helper text: `font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px`.
-- Error helper text: `color: var(--error-color)`.
-
-## Edge Cases & Special Logic
-
-- `defaultValue` in read-only mode falls back to `'--'` if empty.
-- `readOnly` and `disabled` are both handled — `readOnly` suppresses the editor entirely; `disabled` keeps the editor mounted but in TinyMCE's `readonly` mode with no toolbar.
-- Mode transitions (readOnly/disabled changing after mount) use `useAfterInitialEffect` — this hook fires on updates but NOT on the initial render, preventing a double-set on mount.
-- The file picker creates a transient `<input type='file'>` element that is never appended to the DOM — it is clicked programmatically.
-- `id` must be stable across renders — use `useUID()` only as a fallback when `id` prop is absent.
-
-## Dependencies
-
-- `Editor` from `@tinymce/tinymce-react` — TinyMCE React wrapper (can be swapped for Quill, ProseMirror, Slate.js, etc.)
-- `useAfterInitialEffect`, `useConsolidatedRef`, `useUID` from `@pega/sdk-react` — SDK hooks
-- `useTheme` from `@mui/material` — for theme-aware content styles
-- `FormControl`, `FormHelperText`, `InputLabel` from `@mui/material` — wrapper structure
-
-## Design System Mapping
-
-**UI control type:** Rich text / WYSIWYG editor field with label, helper text, and error state.
-
-Listed design systems are examples only.
-
-| Design System | Rich Text Library |
-|---|---|
-| Default (CSS only) | `contenteditable` div with custom toolbar, or `<textarea>` |
-| MUI | TinyMCE (`@tinymce/tinymce-react`) wrapped in `<FormControl>` |
-| Ant Design | Quill (`react-quill`) or TinyMCE inside an `<AntForm.Item>` |
-| Chakra UI | Quill or Slate.js inside a `<FormControl>` |
-| Shadcn/ui | Tiptap (`@tiptap/react`) inside a field wrapper |
-
-When implementing in a specific design system, map the following:
-- `defaultValue` → initial HTML content
-- `readOnly={true}` → always render as static HTML `<div>` (no editor instance)
-- `disabled={true}` → editor mounted but read-only (toolbar hidden)
-- `onBlur` / `onChange` → editor's blur and content-change callbacks
-- `error` + `info` → FormControl error state + helper/description text below
-- `labelHidden` → conditionally render the label element
-- File picker → `<input type='file' accept='image/*'>` triggered programmatically

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/WssQuickCreate.mdrules

@@ -1,140 +0,0 @@
----
-description: DSE component skill: WssQuickCreate
-alwaysApply: false
----
-
-# Skill: WssQuickCreate
-
-Quick-launch action grid that displays a heading and a set of labeled buttons, each optionally with an icon, for creating WSS cases.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a titled section of clickable action cards arranged in a responsive CSS grid. Each card contains an optional icon image and a label. Used in workspace/portal contexts to provide quick access to case creation actions.
-
-## Pega Metadata
-
-- **Pega Name:** `WssQuickCreate`
-- **Registration key:** `WssQuickCreate` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `heading` | `string` | Yes | Section title rendered as an `<h1>` |
-| `actions` | `Array<{ label: string; onClick: () => void; icon?: string }>` | No | List of action items; each has a label, click handler, and optional icon URL |
-
-## Behavioral Contract
-
-1. Render the `heading` in an `<h1>` element with `id='quick-links-heading'` and class `quick-links-heading`.
-2. Render a `<ul>` with `id='quick-links'` and class `quick-link-ul-list`.
-3. If `actions` is provided, iterate and render one `<li>` per action.
-4. Each `<li>` has the `quickLinkList` style class (styled card with border, rounded corners, and background color).
-5. Inside each `<li>`, render a `<button>` with class `quick-link-button` and the action's `onClick` handler.
-6. Button content is a `<span class='quick-link-button-span'>` (column flex layout) containing:
-   - If `action.icon` is provided: `<img class='quick-link-icon' src={action.icon} />`
-   - `<span>{action.label}</span>`
-7. If `actions` is not provided or is empty, render only the heading with an empty list.
-
-## Visual Specifications
-
-Derived from `WssQuickCreate.css` and component makeStyles:
-
-### Section Heading
-
-| Property | Value |
-|----------|-------|
-| Tag | `<h1>` |
-| Margin top | 8px |
-
-### Action List
-
-| Property | Value |
-|----------|-------|
-| List style | none |
-| Padding | 0 |
-| Display | grid |
-| Grid template columns | `repeat(auto-fit, minmax(min(20ch, 100%), 1fr))` (responsive columns) |
-| Gap | 1rem |
-
-### Action Card (`<li>`)
-
-| Property | Value |
-|----------|-------|
-| Background (light mode) | `var(--link-button-color)` |
-| Background (dark mode) | `var(--app-background-color)` |
-| Text color | `var(--app-text-color)` |
-| Border radius | 16px |
-| Border | `1px solid var(--app-primary-color)` |
-
-### Action Button
-
-| Property | Value |
-|----------|-------|
-| Text transform | capitalize |
-| Font size | 16px |
-| Color | `var(--app-text-color)` |
-| Height | 10rem |
-| Width | 100% |
-| Background | transparent (inherits card) |
-
-### Button Inner Span
-
-| Property | Value |
-|----------|-------|
-| Display | flex |
-| Flex direction | column |
-| Align items | center |
-| Gap | 0.5rem |
-
-### Icon
-
-| Property | Value |
-|----------|-------|
-| Flex shrink | 0 |
-| Object fit | contain |
-| Width | 3rem |
-| Height | 3rem |
-
-**CSS-only implementation notes:**
-- Action list: `list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr)); gap: 1rem`.
-- Action card: `background: var(--link-button-color); border-radius: 16px; border: 1px solid var(--app-primary-color); color: var(--app-text-color)`.
-- Button: `width: 100%; height: 10rem; background: transparent; border: none; cursor: pointer; text-transform: capitalize; font-size: 16px; color: inherit`.
-- Button content: `display: flex; flex-direction: column; align-items: center; gap: 0.5rem`.
-- Icon: `width: 3rem; height: 3rem; object-fit: contain; flex-shrink: 0`.
-
-## Edge Cases & Special Logic
-
-- If `actions` is `undefined` or empty, render the heading and empty `<ul>` without errors.
-- If `action.icon` is `undefined` or an empty string, render only the label span (no `<img>` element).
-- Labels are displayed as-is (no truncation); the grid layout handles responsive sizing naturally.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-- Icon images are passed as URLs (strings) via `action.icon` — no internal icon system used
-
-## Design System Mapping
-
-**UI control type:** Responsive grid of action cards / quick-launch buttons.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS grid `<ul>` + `<button>` cards with flex icon/label layout |
-| MUI | `<Button>` inside Grid items; use `makeStyles` or `sx` for card styling |
-| Ant Design | `<List>` with `<Card>` items or `<Button>` blocks inside a CSS grid |
-| Chakra UI | `<SimpleGrid>` with `<Button>` children; `flexDir='column'` |
-| Shadcn/ui | Grid of custom `<Button variant='outline'>` cards |
-
-When implementing in a specific design system, map the following:
-- Card border/background → design system's card or outlined button variant
-- Button `onClick` → standard click handler prop
-- Icon + label stacked layout → `flexDirection: 'column'` button content
-- Responsive grid → design system's grid or `SimpleGrid` equivalent