@emporix/cockpit-component-library 0.0.4 → 1.0.0

package/README.md

@@ -100,6 +100,86 @@ import { PrimaryButton } from '@emporix/cockpit-component-library'
 | className   | string              | -       | Additional CSS class                           |
 | data-testid | string              | -       | Test ID for testing                            |
 
+### Card
+
+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, Chip, TertiaryButton } from '@emporix/cockpit-component-library'
+import { FiEdit2, FiTrash2 } from 'react-icons/fi'
+
+// Basic usage
+<Card>
+  <h3>Title</h3>
+  <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>
+</Card>
+```
+
+#### Props
+
+| Prop        | Type      | Default | Description                                  |
+| ----------- | --------- | ------- | -------------------------------------------- |
+| children    | ReactNode | -       | Content displayed inside the card (required) |
+| 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`. 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** (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'
+
+<Chip variant="success">submitted</Chip>
+<Chip variant="warning">draft</Chip>
+<Chip variant="info">processed</Chip>
+<Chip variant="error">1 issue</Chip>
+```
+
+#### Props
+
+| Prop        | Type                                          | Default | Description                              |
+| ----------- | --------------------------------------------- | ------- | ---------------------------------------- |
+| variant     | `'success' \| 'warning' \| 'info' \| 'error'` | `info`  | Visual style / semantic color            |
+| children    | ReactNode                                     | -       | Content inside the chip (required)       |
+| className   | string                                        | -       | Additional CSS class on the root element |
+| data-testid | string                                        | -       | Test ID for the root element             |
+
+The root element is a `<span>`. Standard HTML span attributes are forwarded via `ChipProps`.
+
 ### InputText
 
 A text input with optional label and tooltip. Hover and focus styles match the Dropdown component.
@@ -299,6 +379,42 @@ Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to cha
 --focus-ring-box-shadow: 0 0 0 2px rgba(38, 101, 183, 0.35);
 ```
 
+#### Chip (status badge)
+
+Background and text colors per variant for the `Chip` component.
+
+```css
+--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
@@ -461,6 +577,12 @@ The build output includes:
 - TypeScript declarations (`index.d.ts`)
 - CSS styles (`styles.css`)
 
+To publish a new version, run:
+
+```bash
+npm run publish
+```
+
 ## Code Formatting
 
 This project uses Prettier for consistent code formatting. The configuration is defined in `.prettierrc`.

package/dist/components/card/Card.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card content.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Simple card container component used to display nested content.
+ */
+export declare const Card: ({ children, className, "data-testid": testId, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,0DAKlB,SAAS,4CAQX,CAAA"}

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type ChipVariant = 'error' | 'info' | 'success' | 'warning';
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual style: success (green), warning (orange), info (blue), error (red).
+     */
+    variant?: ChipVariant;
+    /**
+     * Label or content inside the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Compact pill-shaped status label with semantic color variants.
+ */
+export declare const Chip: ({ variant, children, className, "data-testid": testId, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAElE,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AASD;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,mEAMlB,SAAS,4CAUX,CAAA"}

package/dist/index.d.ts

@@ -20,4 +20,8 @@ export { InputText } from './components/input/InputText';
 export type { InputTextProps } from './components/input/InputText';
 export { SelectButton } from './components/selectbutton/SelectButton';
 export type { SelectButtonProps, SelectButtonOption, SelectButtonChangeEvent, } from './components/selectbutton/SelectButton';
+export { Card } from './components/card/Card';
+export type { CardProps } from './components/card/Card';
+export { Chip } from './components/chip/Chip';
+export type { ChipProps, ChipVariant } from './components/chip/Chip';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAG/C,OAAO,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGpE,OAAO,qBAAqB,CAAA"}