fix(eds-core-react): rename text-icon className to eds-typography-text-icon to prevent conflicts and support using typography component as link (#4233)

* chore(eds-core-react): remove old duplicate typography style that is not used

* feat(eds-core-react): rename text-icon selector to eds-typography-text-icon so that the intend and scope is clearer

* chore(eds-core-react): set the latest eds-tokens as peerDependency

* feat(eds-core-react): support using Typography component as anchor fixes #4232

Author: torleifhalseth

packages/eds-core-react/package.json

@@ -96,7 +96,7 @@
     "react": "^19",
     "react-dom": "^19",
     "styled-components": "^6",
-    "@equinor/eds-tokens": "^2"
+    "@equinor/eds-tokens": "^2.0.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",

packages/eds-core-react/src/components/Typography/Typography.new.stories.tsx

@@ -107,63 +107,71 @@ export const WithIcons: StoryFn = () => {
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> Extra small text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> Extra small
+        text with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="sm"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> Small text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> Small text
+        with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="md"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> Medium text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> Medium text
+        with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="lg"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> Large text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> Large text
+        with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="xl"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> Extra large text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> Extra large
+        text with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="2xl"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> 2XL heading text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> 2XL heading
+        text with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="3xl"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> 3XL heading text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> 3XL heading
+        text with icon
       </TypographyNext>
       <TypographyNext
         family="ui"
         size="4xl"
         baseline="grid"
         style={iconTextStyle}
       >
-        <Icon name="save" className="text-icon" /> 4XL heading text with icon
+        <Icon name="save" className="eds-typography-text-icon" /> 4XL heading
+        text with icon
       </TypographyNext>
     </div>
   )
@@ -173,7 +181,61 @@ WithIcons.parameters = {
   docs: {
     description: {
       story:
-        "Icons can be used alongside TypographyNext by applying the `.text-icon` class. The icon will automatically adapt its size based on the typography component's font-size using CSS custom properties. The icon scales proportionally with the text size.",
+        "Icons can be used alongside TypographyNext by applying the `.eds-typography-text-icon` class. The icon will automatically adapt its size based on the typography component's font-size using CSS custom properties. The icon scales proportionally with the text size.",
+    },
+  },
+}
+
+export const AsLink: StoryFn = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <TypographyNext
+        as="a"
+        href="https://eds.equinor.com"
+        family="ui"
+        size="md"
+        baseline="grid"
+      >
+        Link to EDS documentation
+      </TypographyNext>
+      <TypographyNext
+        as="a"
+        href="https://eds.equinor.com"
+        family="ui"
+        size="lg"
+        baseline="grid"
+      >
+        Large link text
+      </TypographyNext>
+      <TypographyNext
+        as="a"
+        href="https://eds.equinor.com"
+        family="ui"
+        size="sm"
+        baseline="grid"
+      >
+        Small link text
+      </TypographyNext>
+      <TypographyNext
+        as="a"
+        href="https://eds.equinor.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        family="ui"
+        size="md"
+        baseline="grid"
+      >
+        External link (opens in new tab)
+      </TypographyNext>
+    </div>
+  )
+}
+
+AsLink.parameters = {
+  docs: {
+    description: {
+      story:
+        'TypographyNext can be used as a link by setting `as="a"` and providing an `href` prop. All standard anchor attributes are supported, such as `target` and `rel` for external links.',
     },
   },
 }

packages/eds-core-react/src/components/Typography/Typography.new.types.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ElementType } from 'react'
+import { HTMLAttributes, AnchorHTMLAttributes, ElementType } from 'react'
 import {
   FontFamily,
   FontSize,
@@ -35,4 +35,4 @@ export type TypographyNextProps = {
   /** Semantic HTML element to render. Defaults to 'span' */
   as?: ElementType
 } & BaseTypographyProps &
-  HTMLAttributes<HTMLElement>
+  (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>)

packages/eds-core-react/src/components/Typography/Typography.stories.shared.tsx

@@ -316,7 +316,7 @@ export const IconTextRow = ({
 }) => (
   <ComparisonRowItem label={label}>
     <IconTextContainer className={`font-ui text-${size}`}>
-      <Icon name={iconName} className="text-icon" />
+      <Icon name={iconName} className="eds-typography-text-icon" />
       <span className="text-baseline-center">{text}</span>
     </IconTextContainer>
   </ComparisonRowItem>