@fvc/typography 3.0.1 → 3.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997

package/README.md

@@ -0,0 +1,230 @@
+# @fvc/typography
+
+`@fvc/typography` provides text rendering primitives on top of Ant Design's `Typography` component. It extends the Ant Design API with design-system props for font family, size, weight, line height, color, alignment, and underline — all applied via CSS custom properties so they compose cleanly with parent themes. Sub-components cover every common text role: `Title`, `Text`, `Paragraph`, and `Link`.
+
+## Installation
+
+```bash
+bun add @fvc/typography
+```
+
+## Peer Dependencies
+
+The package expects these dependencies to be available in the consuming application:
+
+```bash
+bun add react antd @fvc/utils
+```
+
+## Import
+
+```tsx
+import { Typography } from '@fvc/typography';
+```
+
+## Quick Start
+
+```tsx
+import { Typography } from '@fvc/typography';
+
+export function Hero() {
+  return (
+    <>
+      <Typography.Title>Welcome</Typography.Title>
+      <Typography.Text type="gray">Subtitle text here</Typography.Text>
+    </>
+  );
+}
+```
+
+## Common Usage
+
+### Title
+
+```tsx
+<Typography.Title>Page heading</Typography.Title>
+```
+
+### Text
+
+```tsx
+<Typography.Text>Body copy</Typography.Text>
+```
+
+### Paragraph
+
+```tsx
+<Typography.Paragraph>
+  A longer block of text that wraps across multiple lines.
+</Typography.Paragraph>
+```
+
+### Link
+
+```tsx
+<Typography.Link href="https://example.com">Visit site</Typography.Link>
+```
+
+### Font Size and Weight
+
+```tsx
+<Typography.Text size="14" weight="600">
+  Semi-bold small text
+</Typography.Text>
+```
+
+### Type Variants
+
+The `type` prop applies a preset colour from the design token palette.
+
+```tsx
+<Typography.Text type="blue">Blue text</Typography.Text>
+<Typography.Text type="gray">Gray text</Typography.Text>
+<Typography.Text type="label">Label text</Typography.Text>
+```
+
+### Custom Color
+
+```tsx
+<Typography.Text color="#e74c3c">Error message</Typography.Text>
+```
+
+### Font Family
+
+```tsx
+<Typography.Text font="Montserrat" weight="700">
+  Montserrat heading
+</Typography.Text>
+```
+
+### Line Height
+
+```tsx
+<Typography.Text size="16" lineHeight="24">
+  Readable body text
+</Typography.Text>
+```
+
+### Underline
+
+```tsx
+<Typography.Text underline>Underlined text</Typography.Text>
+```
+
+### Text Alignment
+
+```tsx
+<Typography.Paragraph align="center">Centered paragraph</Typography.Paragraph>
+```
+
+## Props
+
+All sub-components share a common set of extended props in addition to their respective Ant Design base props.
+
+### Shared Extended Props
+
+| Prop         | Type                                                                                                                        | Description                                    |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `align`      | `CSSProperties['textAlign']`                                                                                                | Text alignment.                                |
+| `color`      | `string`                                                                                                                    | Arbitrary CSS color value.                     |
+| `font`       | `'Roboto' \| 'Montserrat'`                                                                                                  | Font family.                                   |
+| `lineHeight` | `'base' \| '12' \| '13' \| '14' \| '16' \| '20' \| '24' \| '32' \| number`                                               | Line height in px or a named token.            |
+| `size`       | `'12' \| '13' \| '14' \| '16' \| '20' \| '24' \| '32' \| number`                                                         | Font size in px.                               |
+| `type`       | `'black' \| 'white' \| 'blue' \| 'gray' \| 'green' \| 'light-gray' \| 'dark-gray' \| 'darker-gray' \| 'label' \| 'bold'` | Preset color variant from the design palette.  |
+| `underline`  | `boolean`                                                                                                                   | Adds underline text decoration.                |
+| `weight`     | `'200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900' \| number`                                         | Font weight.                                   |
+| `testId`     | `string`                                                                                                                    | Maps to `data-testid` on the rendered element. |
+
+### `<Typography.Title>`
+
+Extends [Ant Design `TitleProps`](https://ant-design.antgroup.com/components/typography#api) plus the shared props above.
+
+### `<Typography.Text>`
+
+Extends [Ant Design `TextProps`](https://ant-design.antgroup.com/components/typography#api) plus the shared props above.
+
+### `<Typography.Paragraph>`
+
+Extends [Ant Design `ParagraphProps`](https://ant-design.antgroup.com/components/typography#api) plus the shared props above.
+
+### `<Typography.Link>`
+
+Extends [Ant Design `LinkProps`](https://ant-design.antgroup.com/components/typography#api) plus the shared props above.
+
+## TypeScript
+
+The package ships with type definitions. No `@types/` install needed.
+
+```ts
+import type {
+  TypographyProps,
+  TextProps,
+  TitleProps,
+  ParagraphProps,
+  LinkProps,
+} from '@fvc/typography/types';
+```
+
+## Consumer Example
+
+```tsx
+import { Typography } from '@fvc/typography';
+
+export function ArticlePreview({ title, summary, authorUrl, authorName }) {
+  return (
+    <article>
+      <Typography.Title size="24" weight="700">
+        {title}
+      </Typography.Title>
+      <Typography.Paragraph type="gray" size="14" lineHeight="20">
+        {summary}
+      </Typography.Paragraph>
+      <Typography.Link href={authorUrl} font="Montserrat" weight="500">
+        {authorName}
+      </Typography.Link>
+    </article>
+  );
+}
+```
+
+## Testing
+
+```tsx
+<Typography.Text testId="username-label">John Doe</Typography.Text>
+```
+
+```tsx
+screen.getByTestId('username-label');
+```
+
+## CSS Customisation
+
+The component reads the following CSS custom properties from the `@fvc` design token palette. These tokens are provided by `@fvc/utils` — no manual `:root` definition is needed unless you want to override the defaults.
+
+| Token                          | Used for                           |
+| ------------------------------ | ---------------------------------- |
+| `--body-text-color-1000`       | Default text color                 |
+| `--link-on-light-bg-color-500` | Default link color                 |
+| `--text-color`                 | Per-element color override         |
+| `--text-fz`                    | Per-element font size override     |
+| `--text-fw`                    | Per-element font weight override   |
+| `--text-lh`                    | Per-element line height override   |
+| `--text-ff`                    | Per-element font family override   |
+
+To override, set them in your global styles:
+
+```css
+:root {
+  --body-text-color-1000: #1a1a1a;
+  --link-on-light-bg-color-500: #2563eb;
+}
+```
+
+## Development
+
+```bash
+bun run lint
+bun run type-check
+bun run test
+bun run build
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fvc/typography",
-  "version": "3.0.1",
+  "version": "3.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/typography/src/index.d.ts",
   "files": [
@@ -26,8 +26,20 @@
     "type-check": "tsc --noEmit",
     "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
   },
+  "keywords": [
+    "react",
+    "react-component",
+    "fvc",
+    "fe-vis-core",
+    "ui",
+    "typography",
+    "text",
+    "font",
+    "design-system",
+    "antd"
+  ],
   "peerDependencies": {
-    "@fvc/utils": "^3.0.1",
+    "@fvc/utils": "3.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
     "react": "^18.0.0",
     "antd": "^5.0.0"
   }