@emporix/cockpit-component-library 0.0.5 → 1.0.0

package/README.md

@@ -102,10 +102,11 @@ import { PrimaryButton } from '@emporix/cockpit-component-library'
 
 ### Card
 
-A simple surface container for grouping content. Renders `children` inside a bordered, padded panel. Styling uses existing theme variables (`--color-bg-primary`, `--color-border-light`, `--border-radius-lg`, `--spacing-lg`).
+White panel styled with design tokens (defaults from `src/styles/index.scss`). The root uses a **1px** border (`var(--color-card-border)`), corner radius **`var(--card-radius)`** (default **8px**), padding **`var(--card-padding)`** (default **16px**), and vertical spacing between direct children **`var(--card-section-gap)`** (default **12px**). **`Card.Body`** stacks title, meta, etc. with **`var(--card-body-gap)`** (default **16px**). **`Card.Header`**, **`Card.Meta`**, and **`Card.MetaRow`** share **`var(--card-meta-gap)`** (default **6px**); the header’s leading side (`tag` + children) also uses a fixed **8px** gap between flex items. **`Card.MetaRow`** uses a **20×20px** icon frame with **18×18px** SVGs—pass icons intended for that footprint (or larger icons will scale visually via CSS). Compound parts: **`Card.Body`**, **`Card.Header`** (optional `tag` + `actions`), **`Card.Title`**, **`Card.Meta`** / **`Card.MetaRow`**, **`Card.Footer`**, **`Card.IconButton`**. Use **`Chip`** in the header `tag` slot for status pills (e.g. `<Chip variant="error">Blocker</Chip>`). Override the `--card-*` variables to tune spacing without forking the component (see [Card layout tokens](#card-layout-tokens) under _Theming_).
 
 ```tsx
-import { Card } from '@emporix/cockpit-component-library'
+import { Card, Chip, TertiaryButton } from '@emporix/cockpit-component-library'
+import { FiEdit2, FiTrash2 } from 'react-icons/fi'
 
 // Basic usage
 <Card>
@@ -113,6 +114,32 @@ import { Card } from '@emporix/cockpit-component-library'
   <p>Description or nested components go here.</p>
 </Card>
 
+// Structured card (see Storybook “IssueCard”)
+<Card>
+  <Card.Body>
+    <Card.Header
+      tag={<Chip variant="error">Blocker</Chip>}
+      actions={
+        <>
+          <Card.IconButton type="button" aria-label="Edit">
+            <FiEdit2 />
+          </Card.IconButton>
+          <Card.IconButton type="button" aria-label="Delete">
+            <FiTrash2 />
+          </Card.IconButton>
+        </>
+      }
+    />
+    <Card.Title>Issue headline</Card.Title>
+    <Card.Meta>
+      <Card.MetaRow icon={<span />}>Supporting detail line</Card.MetaRow>
+    </Card.Meta>
+  </Card.Body>
+  <Card.Footer>
+    <TertiaryButton label="Edit" icon={<FiEdit2 />} iconPos="left" />
+  </Card.Footer>
+</Card>
+
 // With custom class and test id
 <Card className="my-card" data-testid="details-card">
   <p>Content</p>
@@ -127,11 +154,11 @@ import { Card } from '@emporix/cockpit-component-library'
 | className   | string    | -       | Additional CSS class on the root element     |
 | data-testid | string    | -       | Test ID for the root element                 |
 
-All standard HTML `div` attributes (e.g. `id`, `role`, `aria-*`, `onClick`) are forwarded to the root element via `CardProps`.
+All standard HTML `div` attributes (e.g. `id`, `role`, `aria-*`, `onClick`) are forwarded to the root element via `CardProps`. Subcomponents accept the usual attributes for their underlying elements (`Card.Title` → `h2`, `Card.IconButton` → `button`, etc.).
 
 ### Chip
 
-A compact, pill-shaped label for statuses (e.g. draft, submitted). Four variants use a light tinted background with darker text: **success** (green), **warning** (orange), **info** (blue), **error** (red). Colors are driven by CSS variables (see [Theming with CSS Variables](#theming-with-css-variables)).
+A compact, pill-shaped label for statuses (e.g. draft, submitted). Four variants use a light tinted background with darker text: **success** (green), **warning** (orange), **info** (blue), **error** (rose / burgundy — same look as Figma card header labels such as “Blocker”). Use **`Chip`** for those header pills instead of a separate card-only primitive. Colors are driven by CSS variables (see [Theming with CSS Variables](#theming-with-css-variables)).
 
 ```tsx
 import { Chip } from '@emporix/cockpit-component-library'
@@ -357,16 +384,37 @@ Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to cha
 Background and text colors per variant for the `Chip` component.
 
 ```css
---color-chip-success-bg: #e6f4ea;
---color-chip-success-text: #1e4620;
---color-chip-warning-bg: #fff8e6;
---color-chip-warning-text: #b45309;
---color-chip-info-bg: #e8f4fc;
---color-chip-info-text: #0b5c8a;
---color-chip-error-bg: #fdecea;
---color-chip-error-text: #b42318;
+--color-chip-success-bg: #ecfdf5;
+--color-chip-success-text: #059669;
+--color-chip-success-border: #a7f3d0;
+--color-chip-warning-bg: #fffbeb;
+--color-chip-warning-text: #d97706;
+--color-chip-warning-border: #fde68a;
+--color-chip-info-bg: #eff6ff;
+--color-chip-info-text: #2563eb;
+--color-chip-info-border: #bfdbfe;
+--color-chip-error-bg: #fef2f2;
+--color-chip-error-text: #dc2626;
+--color-chip-error-border: #fecaca;
 ```
 
+#### Card layout tokens
+
+Used by **`Card`** (`Card.module.scss`). Defaults match `src/styles/index.scss`; override on `:root` or a wrapper to change card rhythm app-wide.
+
+```css
+--color-card-border: #e5e7eb;
+--color-card-heading: #1f2937;
+--color-card-meta-icon: #4b5563;
+--card-radius: 8px;
+--card-padding: 16px;
+--card-section-gap: 12px; /* root: space between top-level sections (e.g. body vs footer) */
+--card-body-gap: 16px; /* Card.Body: space between title, meta, etc. */
+--card-meta-gap: 6px; /* header / meta / meta-row gaps */
+```
+
+**Note:** **`IconCard`** uses **`24px`** padding and **`var(--card-body-gap)`** for its content column—slightly different from **`Card`**’s shell; see `IconCard.module.scss` if you theme both.
+
 #### Spacing
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emporix/cockpit-component-library",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "A React component library for cockipt projects",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -55,6 +55,10 @@
   ],
   "author": "Emporix",
   "license": "MIT",
+  "engines": {
+    "node": ">=18.18.0",
+    "npm": ">=9"
+  },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -80,7 +84,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.0",
+    "jsdom": "^24.1.3",
     "prettier": "^3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -96,6 +100,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "primereact": "^10.9.7",
+    "quill": "^2.0.3",
     "react-icons": "^5.6.0"
   }
 }