@entur/typography 2.0.0 → 2.0.2-beta.0

package/dist/beta/cjs/components/Text.cjs

@@ -9,7 +9,7 @@ const TypographyText = ({
   as,
   size,
   variant,
-  weight = "medium",
+  weight,
   spacing,
   className,
   ...rest

package/dist/beta/cjs/components/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../src/beta/components/Text.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nimport {\n  getSpacingClasses,\n  getSemanticTypeFromTextVariant,\n} from '../utils/utils';\n\nimport {\n  TypographySize,\n  TypographyTextVariant,\n  TypographyWeight,\n  TypographySpacing,\n} from '../types';\n\nimport './text.scss';\n\ntype TextBaseProps = {\n  /** Visuell tekststørrelse (typografi-token) */\n  size?: TypographySize;\n  /** Fontvekt */\n  weight?: TypographyWeight;\n  /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */\n  variant?: TypographyTextVariant;\n  /** Innhold */\n  children: React.ReactNode;\n  /** Spacing around the component */\n  spacing?: TypographySpacing;\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type TextProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  TextBaseProps\n>;\n\nconst TypographyText = <C extends React.ElementType = 'p'>({\n  children,\n  as,\n  size,\n  variant,\n  weight = 'medium',\n  spacing,\n  className,\n  ...rest\n}: TextProps<C>) => {\n  const BodyElement = as || getSemanticTypeFromTextVariant(variant);\n\n  return (\n    <BodyElement\n      className={classNames(\n        'eds-text',\n        variant && `eds-text--${variant}`,\n        size && `eds-text--${size}`,\n        weight && `eds-text--weight-${weight}`,\n        getSpacingClasses(spacing, 'eds-text'),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </BodyElement>\n  );\n};\n\n// Export as Text to avoid DOM conflicts\nexport const Text = TypographyText;\n"],"names":["getSemanticTypeFromTextVariant","jsx","getSpacingClasses"],"mappings":";;;;;;AAwCA,MAAM,iBAAiB,CAAoC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAc,MAAMA,MAAAA,+BAA+B,OAAO;AAEhE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,aAAa,OAAO;AAAA,QAC/B,QAAQ,aAAa,IAAI;AAAA,QACzB,UAAU,oBAAoB,MAAM;AAAA,QACpCC,MAAAA,kBAAkB,SAAS,UAAU;AAAA,QACrC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,MAAM,OAAO;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../../src/beta/components/Text.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nimport {\n  getSpacingClasses,\n  getSemanticTypeFromTextVariant,\n} from '../utils/utils';\n\nimport {\n  TypographySize,\n  TypographyTextVariant,\n  TypographyWeight,\n  TypographySpacing,\n} from '../types';\n\nimport './text.scss';\n\ntype TextBaseProps = {\n  /** Visuell tekststørrelse (typografi-token) */\n  size?: TypographySize;\n  /** Fontvekt */\n  weight?: TypographyWeight;\n  /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */\n  variant?: TypographyTextVariant;\n  /** Innhold */\n  children: React.ReactNode;\n  /** Spacing around the component */\n  spacing?: TypographySpacing;\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type TextProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  TextBaseProps\n>;\n\nconst TypographyText = <C extends React.ElementType = 'p'>({\n  children,\n  as,\n  size,\n  variant,\n  weight,\n  spacing,\n  className,\n  ...rest\n}: TextProps<C>) => {\n  const BodyElement = as || getSemanticTypeFromTextVariant(variant);\n\n  return (\n    <BodyElement\n      className={classNames(\n        'eds-text',\n        variant && `eds-text--${variant}`,\n        size && `eds-text--${size}`,\n        weight && `eds-text--weight-${weight}`,\n        getSpacingClasses(spacing, 'eds-text'),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </BodyElement>\n  );\n};\n\n// Export as Text to avoid DOM conflicts\nexport const Text = TypographyText;\n"],"names":["getSemanticTypeFromTextVariant","jsx","getSpacingClasses"],"mappings":";;;;;;AAwCA,MAAM,iBAAiB,CAAoC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAc,MAAMA,MAAAA,+BAA+B,OAAO;AAEhE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,aAAa,OAAO;AAAA,QAC/B,QAAQ,aAAa,IAAI;AAAA,QACzB,UAAU,oBAAoB,MAAM;AAAA,QACpCC,MAAAA,kBAAkB,SAAS,UAAU;AAAA,QACrC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,MAAM,OAAO;;"}

package/dist/beta/esm/components/Text.mjs

@@ -7,7 +7,7 @@ const TypographyText = ({
   as,
   size,
   variant,
-  weight = "medium",
+  weight,
   spacing,
   className,
   ...rest

package/dist/beta/esm/components/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","sources":["../../../../src/beta/components/Text.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nimport {\n  getSpacingClasses,\n  getSemanticTypeFromTextVariant,\n} from '../utils/utils';\n\nimport {\n  TypographySize,\n  TypographyTextVariant,\n  TypographyWeight,\n  TypographySpacing,\n} from '../types';\n\nimport './text.scss';\n\ntype TextBaseProps = {\n  /** Visuell tekststørrelse (typografi-token) */\n  size?: TypographySize;\n  /** Fontvekt */\n  weight?: TypographyWeight;\n  /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */\n  variant?: TypographyTextVariant;\n  /** Innhold */\n  children: React.ReactNode;\n  /** Spacing around the component */\n  spacing?: TypographySpacing;\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type TextProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  TextBaseProps\n>;\n\nconst TypographyText = <C extends React.ElementType = 'p'>({\n  children,\n  as,\n  size,\n  variant,\n  weight = 'medium',\n  spacing,\n  className,\n  ...rest\n}: TextProps<C>) => {\n  const BodyElement = as || getSemanticTypeFromTextVariant(variant);\n\n  return (\n    <BodyElement\n      className={classNames(\n        'eds-text',\n        variant && `eds-text--${variant}`,\n        size && `eds-text--${size}`,\n        weight && `eds-text--weight-${weight}`,\n        getSpacingClasses(spacing, 'eds-text'),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </BodyElement>\n  );\n};\n\n// Export as Text to avoid DOM conflicts\nexport const Text = TypographyText;\n"],"names":[],"mappings":";;;;AAwCA,MAAM,iBAAiB,CAAoC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAc,MAAM,+BAA+B,OAAO;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,aAAa,OAAO;AAAA,QAC/B,QAAQ,aAAa,IAAI;AAAA,QACzB,UAAU,oBAAoB,MAAM;AAAA,QACpC,kBAAkB,SAAS,UAAU;AAAA,QACrC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,MAAM,OAAO;"}
+{"version":3,"file":"Text.mjs","sources":["../../../../src/beta/components/Text.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nimport {\n  getSpacingClasses,\n  getSemanticTypeFromTextVariant,\n} from '../utils/utils';\n\nimport {\n  TypographySize,\n  TypographyTextVariant,\n  TypographyWeight,\n  TypographySpacing,\n} from '../types';\n\nimport './text.scss';\n\ntype TextBaseProps = {\n  /** Visuell tekststørrelse (typografi-token) */\n  size?: TypographySize;\n  /** Fontvekt */\n  weight?: TypographyWeight;\n  /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */\n  variant?: TypographyTextVariant;\n  /** Innhold */\n  children: React.ReactNode;\n  /** Spacing around the component */\n  spacing?: TypographySpacing;\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type TextProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  TextBaseProps\n>;\n\nconst TypographyText = <C extends React.ElementType = 'p'>({\n  children,\n  as,\n  size,\n  variant,\n  weight,\n  spacing,\n  className,\n  ...rest\n}: TextProps<C>) => {\n  const BodyElement = as || getSemanticTypeFromTextVariant(variant);\n\n  return (\n    <BodyElement\n      className={classNames(\n        'eds-text',\n        variant && `eds-text--${variant}`,\n        size && `eds-text--${size}`,\n        weight && `eds-text--weight-${weight}`,\n        getSpacingClasses(spacing, 'eds-text'),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </BodyElement>\n  );\n};\n\n// Export as Text to avoid DOM conflicts\nexport const Text = TypographyText;\n"],"names":[],"mappings":";;;;AAwCA,MAAM,iBAAiB,CAAoC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,cAAc,MAAM,+BAA+B,OAAO;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,aAAa,OAAO;AAAA,QAC/B,QAAQ,aAAa,IAAI;AAAA,QACzB,UAAU,oBAAoB,MAAM;AAAA,QACpC,kBAAkB,SAAS,UAAU;AAAA,QACrC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAGO,MAAM,OAAO;"}

package/dist/beta/styles/components/heading.css

@@ -20,7 +20,7 @@
   --basecolors-frame-tint: #f6f6f9;
   --basecolors-shape-accent: #181c56;
   --basecolors-shape-bicycle-contrast: #00db9b;
-  --basecolors-shape-bicycle-default: #388f76;
+  --basecolors-shape-bicycle-default: #33826b;
   --basecolors-shape-bus-contrast: #ff6392;
   --basecolors-shape-bus-default: #c5044e;
   --basecolors-shape-cableway-contrast: #b482fb;
@@ -40,7 +40,7 @@
   --basecolors-shape-metro-contrast: #f08901;
   --basecolors-shape-metro-default: #bf5826;
   --basecolors-shape-mobility-contrast: #00db9b;
-  --basecolors-shape-mobility-default: #388f76;
+  --basecolors-shape-mobility-default: #33826b;
   --basecolors-shape-plane-contrast: #fbafea;
   --basecolors-shape-plane-default: #800664;
   --basecolors-shape-subdued: #626493;

package/dist/beta/styles/components/text.css

@@ -244,7 +244,7 @@ summary {
   --basecolors-frame-tint: #f6f6f9;
   --basecolors-shape-accent: #181c56;
   --basecolors-shape-bicycle-contrast: #00db9b;
-  --basecolors-shape-bicycle-default: #388f76;
+  --basecolors-shape-bicycle-default: #33826b;
   --basecolors-shape-bus-contrast: #ff6392;
   --basecolors-shape-bus-default: #c5044e;
   --basecolors-shape-cableway-contrast: #b482fb;
@@ -264,7 +264,7 @@ summary {
   --basecolors-shape-metro-contrast: #f08901;
   --basecolors-shape-metro-default: #bf5826;
   --basecolors-shape-mobility-contrast: #00db9b;
-  --basecolors-shape-mobility-default: #388f76;
+  --basecolors-shape-mobility-default: #33826b;
   --basecolors-shape-plane-contrast: #fbafea;
   --basecolors-shape-plane-default: #800664;
   --basecolors-shape-subdued: #626493;

package/dist/styles.css

@@ -198,7 +198,7 @@ summary {
   --basecolors-frame-tint: #f6f6f9;
   --basecolors-shape-accent: #181c56;
   --basecolors-shape-bicycle-contrast: #00db9b;
-  --basecolors-shape-bicycle-default: #388f76;
+  --basecolors-shape-bicycle-default: #33826b;
   --basecolors-shape-bus-contrast: #ff6392;
   --basecolors-shape-bus-default: #c5044e;
   --basecolors-shape-cableway-contrast: #b482fb;
@@ -218,7 +218,7 @@ summary {
   --basecolors-shape-metro-contrast: #f08901;
   --basecolors-shape-metro-default: #bf5826;
   --basecolors-shape-mobility-contrast: #00db9b;
-  --basecolors-shape-mobility-default: #388f76;
+  --basecolors-shape-mobility-default: #33826b;
   --basecolors-shape-plane-contrast: #fbafea;
   --basecolors-shape-plane-default: #800664;
   --basecolors-shape-subdued: #626493;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@entur/typography",
-  "version": "2.0.0",
+  "version": "2.0.2-beta.0",
   "license": "SEE LICENSE IN README.md",
-  "type": "module",
   "main": "./dist/typography.cjs.js",
   "module": "./dist/typography.esm.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "migrate": "scripts/migrate-typography.js"
+    "migrate": "scripts/migrate-typography.mjs"
   },
   "exports": {
     ".": {
@@ -55,15 +54,15 @@
     "lint": "eslint src",
     "start": "vite build --config vite.config.main.ts --watch",
     "start:beta": "vite build --config vite.config.beta.ts --watch",
-    "migrate": "./scripts/migrate-typography.js"
+    "migrate": "./scripts/migrate-typography.mjs"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^8.0.2",
-    "@entur/tokens": "^3.19.3",
+    "@entur/icons": "^8.1.0",
+    "@entur/tokens": "^3.20.0",
     "@entur/utils": "^0.12.5",
     "classnames": "^2.5.1",
     "modern-normalize": "^3.0.1"
@@ -84,5 +83,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "b4c13c66884fb73f99465961367af15119a66bda"
+  "gitHead": "4b9f4e324e6efef2fd56407909a5da32bcdf7662"
 }

package/scripts/{migrate-typography.js → migrate-typography.mjs}

@@ -799,14 +799,20 @@ function updateComponents(content) {
   let warnings = [];
 
   Object.entries(COMPONENT_MAPPING).forEach(([oldComponent, mapping]) => {
-    // More robust regex to handle complex JSX
-    const componentRegex = new RegExp(`<${oldComponent}(\\s+[^>]*?)?>`, 'g');
+    // More robust regex to handle complex JSX including self-closing tags
+    const componentRegex = new RegExp(
+      `<${oldComponent}(\\s+[^>]*?)?(?:/>|>)`,
+      'g',
+    );
 
     updatedContent = updatedContent.replace(
       componentRegex,
       (match, propsString) => {
         changes++;
 
+        // Check if this is a self-closing tag
+        const isSelfClosing = match.endsWith('/>');
+
         // Parse existing props
         const {
           props: existingProps,
@@ -862,7 +868,8 @@ function updateComponents(content) {
           );
           const spreadPropsString =
             spreadProps.length > 0 ? ` {...${spreadProps.join(', ...')}}` : '';
-          return `<Heading${propsString}${spreadPropsString}>`;
+          const closingTag = isSelfClosing ? '/>' : '>';
+          return `<Heading${propsString}${spreadPropsString}${closingTag}`;
         }
 
         // Handle Label components with special case for htmlFor prop
@@ -892,7 +899,8 @@ function updateComponents(content) {
 
           // Only add as prop if it has a value
           const asProp = asValue ? ` as="${asValue}"` : '';
-          return `<Text${asProp} variant="${variantValue}"${propsString}${spreadPropsString}>`;
+          const closingTag = isSelfClosing ? '/>' : '>';
+          return `<Text${asProp} variant="${variantValue}"${propsString}${spreadPropsString}${closingTag}`;
         }
 
         // Handle other components
@@ -917,11 +925,12 @@ function updateComponents(content) {
         const otherPropsString = propsToString(finalProps, originalSyntax);
         const spreadPropsString =
           spreadProps.length > 0 ? ` {...${spreadProps.join(', ...')}}` : '';
-        return `<${componentName}${otherPropsString}${spreadPropsString}>`;
+        const closingTag = isSelfClosing ? '/>' : '>';
+        return `<${componentName}${otherPropsString}${spreadPropsString}${closingTag}`;
       },
     );
 
-    // Update closing tags
+    // Update closing tags (only for non-self-closing tags)
     const closingTagRegex = new RegExp(`</${oldComponent}>`, 'g');
     const componentName = mapping.component;
     updatedContent = updatedContent.replace(