@equinor/eds-core-react 2.0.0 → 2.1.0

package/README.md

@@ -8,7 +8,7 @@ Read the [changelog](https://github.com/equinor/design-system/blob/main/packages
 ## Installation
 
 ```sh
-npm install @equinor/eds-core-react @equinor/eds-tokens styled-components 
+npm install @equinor/eds-core-react styled-components 
 ```
 If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
 ```sh
@@ -20,23 +20,17 @@ npm install typescript --save-dev
  The Equinor typeface is not included and needs to be added to the head of your project. Its available from the EDS CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
+<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
 ```
 
 ### Required Stylesheets
 
-EDS Core React components require css variables and foundation styles for typography and spacing. Import both stylesheets from `@equinor/eds-tokens`:
+EDS Core React components require css variables (colors, spacing and typography).
 
 ```css
 @import '@equinor/eds-tokens/css/variables';
-@import '@equinor/eds-tokens/css/foundation';
 ```
 
-**Why both?**
-- **Variables CSS** (`/css/variables`) provides all design tokens (colors, spacing, typography variables)
-- **Foundation CSS** (`/css/foundation`) provides typography and spacing utility classes used in our components.
-
-For more information about the typography system, see the [Typography component documentation](./src/components/Typography/README.md).
 
 ## Usage
 

package/dist/eds-core-react.cjs

@@ -1443,19 +1443,6 @@ const StyledTypography$1 = styled__default.default.p.withConfig({
 }) => $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline)));
-/**
- * @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}
- */
 const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -1469,7 +1456,6 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
-  edsUtils.useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);
@@ -1545,7 +1531,7 @@ const TypographyNext = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(Component, {
     ref: ref,
     "data-font-family": family,
-    "data-text-size": size,
+    "data-font-size": size,
     "data-baseline": baseline || undefined,
     "data-line-height": lineHeight || undefined,
     "data-font-weight": weight || undefined,

package/dist/esm/components/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useDeprecationWarning, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { quickVariants, typography, colors, link } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -53,19 +53,6 @@ const StyledTypography = styled.p.withConfig({
 }) => $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
-/**
- * @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}
- */
 const Typography = /*#__PURE__*/forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -79,7 +66,6 @@ const Typography = /*#__PURE__*/forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
-  useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);

package/dist/esm/components/Typography/Typography.new.js

@@ -53,7 +53,7 @@ const TypographyNext = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/jsx(Component, {
     ref: ref,
     "data-font-family": family,
-    "data-text-size": size,
+    "data-font-size": size,
     "data-baseline": baseline || undefined,
     "data-line-height": lineHeight || undefined,
     "data-font-weight": weight || undefined,

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

@@ -20,17 +20,4 @@ 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/components/Typography/Typography.new.d.ts

@@ -1,3 +1,4 @@
+import { TypographyNextProps } from './Typography.new.types';
 /**
  * TypographyNext component for flexible typography with baseline grid support.
  *
@@ -35,9 +36,4 @@
  * </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>>;
+export declare const TypographyNext: import("react").ForwardRefExoticComponent<TypographyNextProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ElementType } from 'react';
+import { HTMLAttributes, AnchorHTMLAttributes, ElementType } from 'react';
 import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
 /**
  * Base typography props shared across typography components.
@@ -25,4 +25,4 @@ export type TypographyNextProps = {
     baseline: BaselineAlignment;
     /** Semantic HTML element to render. Defaults to 'span' */
     as?: ElementType;
-} & BaseTypographyProps & HTMLAttributes<HTMLElement>;
+} & BaseTypographyProps & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);

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

@@ -9,22 +9,7 @@ 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 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<(TypographyNextProps & import("react").RefAttributes<HTMLElement>) & import("styled-components/dist/types").BaseObject, TypographyNextProps & import("react").RefAttributes<HTMLElement>>, Partial<TypographyNextProps>>, Partial<TypographyNextProps>>> & string & Omit<import("react").ForwardRefExoticComponent<TypographyNextProps & 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;
@@ -66,12 +51,6 @@ export declare const SizeComparison: ({ component: Component, text, ...component
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -82,8 +82,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "styled-components": "^6",
-    "@equinor/eds-tokens": "^2"
+    "styled-components": "^6"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
@@ -97,12 +96,12 @@
     "downshift": "9.0.10",
     "react-aria": "^3.44.0",
     "@equinor/eds-icons": "^1.0.1",
-    "@equinor/eds-utils": "^2.0.0",
-    "@equinor/eds-tokens": "^2.0.0"
+    "@equinor/eds-tokens": "^2.1.0",
+    "@equinor/eds-utils": "^2.0.0"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",
-    "test": "tsc -p tsconfig.test.json && jest",
+    "test": "tsc -p tsconfig.test.json && jest --ci",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
     "test:visual": "playwright test",