@equinor/eds-core-react 1.0.2 → 1.1.0

package/dist/types/{components → src/components}/Typography/Typography.d.ts

@@ -20,4 +20,17 @@ export type TypographyProps = {
     /** Number of lines. */
     lines?: number;
 } & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+/**
+ * @deprecated Typography component is deprecated and will be removed in a future version.
+ * Please use the new Typography, Heading, or Paragraph components instead.
+ *
+ * Migration guide:
+ * - For headings: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
+ * - For paragraphs: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
+ * - For inline text: Use `<Typography>` for more flexible text styling
+ *
+ * @see {@link TypographyNext}
+ * @see {@link Heading}
+ * @see {@link Paragraph}
+ */
 export declare const Typography: OverridableComponent<TypographyProps, HTMLElement>;

package/dist/types/src/components/Typography/Typography.new.d.ts

@@ -0,0 +1,43 @@
+/**
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
+ */
+export declare const TypographyNext: import("react").ForwardRefExoticComponent<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/types/src/components/Typography/Typography.new.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ElementType } from 'react';
+import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
+/**
+ * Base typography props shared across typography components.
+ * Can be extended for specific typography component needs.
+ */
+export type BaseTypographyProps = {
+    /** Line height variant */
+    lineHeight?: LineHeight;
+    /** Font weight */
+    weight?: FontWeight;
+    /** Letter spacing (tracking) */
+    tracking?: Tracking;
+    /** Enable debug mode to visualize text box */
+    debug?: boolean;
+    /** Children to render */
+    children?: React.ReactNode;
+};
+export type TypographyNextProps = {
+    /** Font family */
+    family: FontFamily;
+    /** Size of the text */
+    size: FontSize;
+    /** Baseline alignment strategy */
+    baseline: BaselineAlignment;
+    /** Semantic HTML element to render. Defaults to 'span' */
+    as?: ElementType;
+} & BaseTypographyProps & HTMLAttributes<HTMLElement>;

package/dist/types/src/components/Typography/Typography.stories.shared.d.ts

@@ -0,0 +1,79 @@
+import { Heading } from './Heading';
+import { Paragraph } from './Paragraph';
+import type { TypographyNextProps } from './Typography.new.types';
+export declare const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog";
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export declare const WEIGHTS: readonly ["lighter", "normal", "bolder"];
+export declare const TRACKING_OPTIONS: readonly ["tight", "normal", "wide"];
+export declare const LINE_HEIGHTS: readonly ["default", "squished"];
+export declare const HEADING_LEVELS: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const ComparisonGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ComparisonRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>, {
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, Partial<TypographyNextProps>>, Partial<TypographyNextProps>>> & string & Omit<import("react").ForwardRefExoticComponent<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const GridBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RealWorldGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const IntroductionGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: string;
+}>> & string;
+export declare const IconTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UsageSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const UsageCategory: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CategoryHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GridShowcaseWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ComparisonSection: ({ title, marginTop, children, }: {
+    title: string;
+    marginTop?: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonRowItem: ({ label, children, }: {
+    label: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingLevelComparison: ({ text, }: {
+    text?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WeightComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Heading | typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const TrackingComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Heading | typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const SizeComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const LineHeightComparison: ({ text, }: {
+    text?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const IconTextRow: ({ label, size, text, iconName, }: {
+    label: string;
+    size: (typeof SIZES)[number];
+    text?: string;
+    iconName?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonRow: ({ label, size, children, ...extraProps }: {
+    label: string;
+    size: string;
+    children: React.ReactNode;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Typography/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Typography';
+export { TypographyNext } from './Typography.new';
+export { Heading } from './Heading';
+export { Paragraph } from './Paragraph';
+export type { TypographyNextProps } from './Typography.new.types';
+export type { HeadingProps } from './Heading.types';
+export type { ParagraphProps } from './Paragraph.types';
+export type { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking, } from './types';

package/dist/types/src/components/Typography/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared typography primitive types used across all typography components
+ */
+export type FontFamily = 'ui' | 'header';
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type LineHeight = 'default' | 'squished';
+export type BaselineAlignment = 'grid' | 'center';
+export type FontWeight = 'lighter' | 'normal' | 'bolder';
+export type Tracking = 'tight' | 'normal' | 'wide';

package/dist/types/src/components/Typography/utils.d.ts

@@ -0,0 +1,15 @@
+import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
+type CreateTypographyClassNamesParams = {
+    family?: FontFamily;
+    size?: FontSize;
+    baseline?: BaselineAlignment;
+    lineHeight?: LineHeight;
+    weight?: FontWeight;
+    tracking?: Tracking;
+    className?: string;
+};
+/**
+ * Builds a className string from typography properties
+ */
+export declare const createTypographyClassNames: ({ family, size, lineHeight, baseline, weight, tracking, className, }: CreateTypographyClassNamesParams) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -25,6 +25,15 @@
   "files": [
     "dist/*"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/eds-core-react.cjs"
+    },
+    "./style": "./dist/style.css",
+    "./style.css": "./dist/style.css"
+  },
   "keywords": [
     "eds",
     "design system",
@@ -32,41 +41,45 @@
     "react"
   ],
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-a11y": "^9.1.5",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-links": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
+    "@playwright/test": "^1.55.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/jest": "^29.5.14",
-    "@types/ramda": "^0.30.2",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@testing-library/user-event": "14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^24.9.1",
+    "@types/ramda": "^0.31.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint-plugin-storybook": "9.1.5",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-storybook": "9.1.13",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
     "postcss": "^8.5.6",
-    "ramda": "^0.31.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.62.0",
-    "react-router-dom": "^6.30.1",
-    "rollup": "^4.50.0",
-    "rollup-plugin-delete": "^2.2.0",
+    "postcss-import": "^16.1.1",
+    "ramda": "^0.32.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-router-dom": "^7.9.4",
+    "rollup": "^4.52.5",
+    "rollup-plugin-delete": "^3.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.1.5",
+    "storybook": "^9.1.13",
     "styled-components": "6.1.19",
-    "tsc-watch": "^6.3.1",
-    "typescript": "^5.9.2"
+    "tsc-watch": "^7.2.0",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^19",
@@ -74,25 +87,29 @@
     "styled-components": "^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.3",
+    "@babel/runtime": "^7.28.4",
     "@floating-ui/react": "^0.27.16",
-    "@internationalized/date": "^3.9.0",
-    "@react-aria/utils": "^3.30.1",
-    "@react-stately/calendar": "^3.8.4",
-    "@react-stately/datepicker": "^3.15.1",
-    "@react-types/shared": "^3.32.0",
+    "@internationalized/date": "^3.10.0",
+    "@react-aria/utils": "^3.31.0",
+    "@react-stately/calendar": "^3.9.0",
+    "@react-stately/datepicker": "^3.15.2",
+    "@react-types/shared": "^3.32.1",
     "@tanstack/react-virtual": "3.13.12",
-    "downshift": "9.0.8",
-    "react-aria": "^3.43.1",
-    "@equinor/eds-icons": "^1.0.0",
-    "@equinor/eds-utils": "1.0.1",
-    "@equinor/eds-tokens": "1.1.3"
+    "downshift": "9.0.10",
+    "react-aria": "^3.44.0",
+    "@equinor/eds-icons": "^1.0.1",
+    "@equinor/eds-tokens": "^1.1.4",
+    "@equinor/eds-utils": "^1.1.0"
   },
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
+    "build": "rollup -c && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.test.json && jest",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
+    "test:visual": "playwright test",
+    "test:visual:ui": "playwright test --ui",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:report": "playwright show-report",
     "storybook": "storybook dev -p 9000 --ci",
     "build:storybook": "storybook build -o storybook-build",
     "types": "tsc -p tsconfig.build.json"

package/dist/types/components/Button/tokens/contained.d.ts

@@ -1,4 +0,0 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;

package/dist/types/components/Button/tokens/outlined.d.ts

@@ -1,4 +0,0 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;

package/dist/types/components/Typography/index.d.ts

@@ -1 +0,0 @@
-export * from './Typography';