@fvc/button 1.2.5 → 1.2.6-next-3607140332290efd627f3fac1cb34e4dcb36274e

package/README.md

@@ -0,0 +1,216 @@
+# @fvc/button
+
+`@fvc/button` provides FE-VIS styled button primitives on top of Ant Design. It keeps the Ant Design button API familiar while adding the design-system behaviour used across FE-VIS applications: a full set of visual variants, shape and size controls, icon support, a loading state with optional loading text, and block layout.
+
+## Installation
+
+```bash
+bun add @fvc/button
+```
+
+## Peer Dependencies
+
+The package expects these dependencies to be available in the consuming application:
+
+```bash
+bun add react antd @fvc/icons
+```
+
+## Import
+
+```tsx
+import { Button } from '@fvc/button';
+```
+
+## Quick Start
+
+```tsx
+import { Button } from '@fvc/button';
+
+export function SaveAction() {
+  return (
+    <Button type="primary" onClick={() => handleSave()}>
+      Save
+    </Button>
+  );
+}
+```
+
+## Variants
+
+| Value | Description |
+| --- | --- |
+| `'default'` | Default styling. |
+| `'primary'` | Primary action — green fill with shadow. |
+| `'secondary'` | Secondary action — green outline. |
+| `'white'` | White background variant. |
+| `'dashed'` | Dashed border. |
+| `'link'` | Inline link appearance. |
+| `'text'` | No border or background. |
+| `'text-black'` | No border or background, black text. |
+| `'danger'` | Destructive action — red outline. |
+| `'danger-light'` | Destructive action — light red fill. |
+| `'transparent'` | Transparent background. |
+| `'dropdown-button'` | Dropdown trigger variant. |
+
+## Common Usage
+
+### Primary and Secondary
+
+```tsx
+<Button type="primary">Submit</Button>
+<Button type="secondary">Cancel</Button>
+```
+
+### Danger
+
+Use `type="danger"` or the `danger` prop for destructive actions.
+
+```tsx
+<Button type="danger">Delete</Button>
+<Button danger type="secondary">Remove</Button>
+```
+
+### Sizes
+
+```tsx
+<Button size="small">Small</Button>
+<Button size="middle">Middle</Button>
+<Button size="large">Large</Button>
+```
+
+### With Icon
+
+```tsx
+import { Delete } from '@fvc/icons';
+
+<Button icon={<Delete />} type="primary">Delete item</Button>
+```
+
+Icon-only buttons use `shape` to control the outline:
+
+```tsx
+<Button icon={<Delete />} shape="circle" />
+<Button icon={<Delete />} shape="round" type="secondary" />
+```
+
+### Loading State
+
+`loading` shows a spinner and suppresses `onClick` until the operation completes. Use `loadingText` to replace the label during loading.
+
+```tsx
+<Button loading type="primary">Saving…</Button>
+<Button loading loadingText="Uploading…" icon={<Upload />} type="secondary" />
+```
+
+### Disabled
+
+```tsx
+<Button disabled type="primary">Unavailable</Button>
+```
+
+### Full-Width
+
+```tsx
+<Button block type="primary">Submit form</Button>
+```
+
+### Transparent Background
+
+```tsx
+<Button bg="transparent" type="primary">Overlay action</Button>
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `type` | [`ButtonType`](#variants) | Visual variant. Defaults to `'default'`. |
+| `shape` | `'round' \| 'circle'` | Button shape. |
+| `bg` | `'transparent'` | Background override. |
+| `size` | `'small' \| 'middle' \| 'large'` | Button size. Defaults to `'middle'`. |
+| `danger` | `boolean` | Applies danger styling; equivalent to `type="danger"`. |
+| `block` | `boolean` | Stretches the button to full container width. |
+| `icon` | `ReactNode` | Icon element, typically from `@fvc/icons`. |
+| `loading` | `boolean` | Shows a spinner and suppresses `onClick`. |
+| `loadingText` | `ReactNode` | Text displayed while `loading` is `true`. |
+| `disabled` | `boolean` | Disables the button and removes it from tab order. |
+| `className` | `string` | Additional CSS class names. |
+| `testId` | `string` | Maps to `data-testid`. |
+| `children` | `ReactNode` | Button label. |
+
+## Consumer Example
+
+```tsx
+import { Button } from '@fvc/button';
+import { Save, Trash } from '@fvc/icons';
+
+export function RecordActions({ saving, onSave, onDelete }) {
+  return (
+    <div>
+      <Button
+        type="primary"
+        icon={<Save />}
+        loading={saving}
+        loadingText="Saving…"
+        onClick={onSave}
+      >
+        Save
+      </Button>
+
+      <Button
+        type="danger"
+        icon={<Trash />}
+        onClick={onDelete}
+      >
+        Delete
+      </Button>
+    </div>
+  );
+}
+```
+
+## Testing
+
+Use `testId` when a stable test selector is needed.
+
+```tsx
+<Button type="primary" testId="save-button">
+  Save
+</Button>
+```
+
+```tsx
+screen.getByTestId('save-button');
+```
+
+## CSS Customisation
+
+The component exposes CSS custom properties for theming. Override them in your global styles:
+
+```css
+:root {
+  --button-primary-text-color: #fff;
+  --button-primary-bg-color: #1a7a4c;
+  --button-primary-border-color: #1a7a4c;
+  --button-primary-hover-bg-color: #15623d;
+
+  --button-height-sm: 24px;
+  --button-height-md: 32px;
+  --button-height-lg: 48px;
+  --button-height-default: 40px;
+
+  --button-round-radius: 100px;
+}
+```
+
+For the full variable list see [`src/variables.scss`](./src/variables.scss).
+
+## Development
+
+```bash
+bun run lint
+bun run type-check
+bun run test
+bun run build
+```

package/package.json

@@ -1,6 +1,16 @@
 {
   "name": "@fvc/button",
-  "version": "1.2.5",
+  "version": "1.2.6-next-3607140332290efd627f3fac1cb34e4dcb36274e",
+  "keywords": [
+    "react",
+    "react-component",
+    "fvc",
+    "fe-vis-core",
+    "ui",
+    "button",
+    "design-system",
+    "antd"
+  ],
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/button/src/index.d.ts",
   "files": [
@@ -27,7 +37,7 @@
     "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
   },
   "peerDependencies": {
-    "@fvc/icons": "^1.0.0",
+    "@fvc/icons": "1.1.4-next-3607140332290efd627f3fac1cb34e4dcb36274e",
     "react": "^18.0.0",
     "antd": "^5.0.0"
   }