@entur/typography 1.9.14 → 1.10.0-beta.0

package/README.md

@@ -7,18 +7,115 @@ Entur's official font is Nationale and is created by Playtype Foundry, located i
 This package contains styles and React components for all of our typography.
 
 > 💡 Looking for the [documentation](https://linje.entur.no/komponenter/ressurser/typography)?
+> Looking for the beta [documentation](https://linje.entur.no/komponenter/ressurser/typography-beta)?
 
 ## Installation
 
-```sh
+```bash
 npm install @entur/typography
-# or if you are using Yarn:
+# or
 yarn add @entur/typography
 ```
 
-## Usage
+## 🚀 Quick Start
 
-Please refer to the [documentation](https://linje.entur.no/komponenter/ressurser/typography) for usage information.
+### Using Beta Typography (Recommended)
+
+```typescript
+import { Heading, Text, LinkBeta } from '@entur/typography';
+
+function MyComponent() {
+  return (
+    <div>
+      <Heading as="h1" variant="title-1">
+        My Title
+      </Heading>
+      <Text variant="paragraph">My content</Text>
+      <LinkBeta href="/more">Learn more</LinkBeta>
+    </div>
+  );
+}
+```
+
+### Using Legacy Typography
+
+```typescript
+import { Heading1, Paragraph, Link } from '@entur/typography';
+
+function MyComponent() {
+  return (
+    <div>
+      <Heading1>My Title</Heading1>
+      <Paragraph>My content</Paragraph>
+      <Link href="/more">Learn more</Link>
+    </div>
+  );
+}
+```
+
+## 🔄 Migration
+
+**Migrating from legacy typography?** We've created a comprehensive migration package to help you transition smoothly. Follow our migration guide in our website.
+
+- 🔧 **Migration Helpers** - Drop-in replacements for legacy components
+- 🤖 **Migration Script** - Automated migration tool
+
+### Quick Migration
+
+```bash
+# Option 1: Using npx (recommended)
+npx @entur/typography@latest migrate
+
+# Option 2: With specific options
+npx @entur/typography@latest migrate --dry-run
+
+
+# Option 3: From installed package
+npm install @entur/typography@latest
+npx @entur/typography@latest migrate
+
+# Option 4: Add to your package.json scripts
+# "scripts": { "migrate-typography": "npx @entur/typography@latest migrate" }
+# Then run: npm run migrate-typography -- --dry-run
+```
+
+**Note**: The migration script requires `glob` to be available. If you encounter an error, install it:
+
+```bash
+npm install glob
+# or
+yarn add glob
+```
+
+### Migration Mode
+
+- **🚀 Complete Migration**: Updates imports + component usage
+
+### Update Styles
+
+```scss
+// Replace this
+@import '@entur/typography/dist/styles.css';
+
+// With this
+@import '@entur/typography/src/beta/styles.scss';
+```
+
+## 🎨 Features
+
+### Beta Typography
+
+- **Semantic variants** - Title, subtitle, section, paragraph, etc.
+- **Size variants** - Extra large, large, medium, small, extra small
+- **Weight variants** - Light, regular, medium, semibold, bold
+- **Spacing options** - Configurable margins and padding
+- **Accessibility** - Built-in ARIA support and semantic HTML
+
+### Legacy Typography
+
+- **Individual components** - Heading1-6, Paragraph, Link, etc.
+- **Simple API** - Easy to use with minimal configuration
+- **Backward compatibility** - Existing code continues to work
 
 ## Licenses
 

package/dist/beta/BlockquoteBeta.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type BlockquotePropsBeta = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
+export declare const BlockquoteBeta: ({ className, ...rest }: BlockquotePropsBeta) => React.JSX.Element;
+type BlockquoteFooterPropsBeta = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export declare const BlockquoteFooterBeta: ({ className, ...rest }: BlockquoteFooterPropsBeta) => React.JSX.Element;
+export {};

package/dist/beta/Heading.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { TypographyHeadingVariant, TypographySize, TypographySpacing } from './types';
+import { PolymorphicComponentProps } from '../../../utils';
+type HeadingBaseProps = {
+    /** Visuell variant som bestemmer styling (anbefalt over size) */
+    variant?: TypographyHeadingVariant;
+    /** Visuell tekststørrelse som overstyrer variant-styling */
+    size?: TypographySize;
+    /** Innholdet som skal vises */
+    children: React.ReactNode;
+    /** Ekstra klassenavn for tilpasset styling */
+    className?: string;
+    /** Inline CSS-stiler */
+    style?: React.CSSProperties;
+    /** Spacing around the component */
+    spacing?: TypographySpacing;
+};
+export type HeadingProps<C extends React.ElementType> = PolymorphicComponentProps<C, HeadingBaseProps>;
+export declare const Heading: <C extends React.ElementType = "h1">({ children, as, size, variant, spacing, className, ...rest }: HeadingProps<C>) => React.JSX.Element;
+export {};

package/dist/beta/LinkBeta.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '../../../utils';
+import { TypographySpacing } from './types';
+type LinkBaseProps = {
+    external?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Spacing around the component (same as Text and Heading components) */
+    spacing?: TypographySpacing;
+    ariaLabelExternalIcon?: string;
+};
+export type LinkPropsBeta<C extends React.ElementType> = PolymorphicComponentProps<C, LinkBaseProps>;
+export declare const LinkBeta: <C extends React.ElementType = "a">({ external, ariaLabelExternalIcon, className, spacing, children, as, ...rest }: LinkPropsBeta<C>) => JSX.Element;
+export {};

package/dist/beta/ListItemBeta.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '../../../utils';
+import { TypographySpacing } from './types';
+type ListItemBaseProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Tittel */
+    title?: React.ReactNode;
+    /** Spacing around the component (same as Text and Heading components) */
+    spacing?: TypographySpacing;
+};
+export type ListItemBetaProps<C extends React.ElementType> = PolymorphicComponentProps<C, ListItemBaseProps>;
+export declare const ListItemBeta: <C extends React.ElementType = "li">({ children, className, title, spacing, as, ...rest }: ListItemBetaProps<C>) => JSX.Element;
+export {};

package/dist/beta/NumberedListBeta.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '../../../utils';
+import { TypographySpacing } from './types';
+type NumberedListBaseProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** List type (1, A, a, I, i) */
+    type?: '1' | 'A' | 'a' | 'I' | 'i';
+    /** Spacing around the component (same as Text and Heading components) */
+    spacing?: TypographySpacing;
+};
+export type NumberedListBetaProps<C extends React.ElementType> = PolymorphicComponentProps<C, NumberedListBaseProps>;
+export declare const NumberedListBeta: <C extends React.ElementType = "ol">({ className, type, spacing, as, children, ...rest }: NumberedListBetaProps<C>) => JSX.Element;
+export {};

package/dist/beta/Text.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { TypographySize, TypographyTextVariant, TypographyWeight, TypographySpacing } from './types';
+import { PolymorphicComponentProps } from '../../../utils';
+type TextBaseProps = {
+    /** Visuell tekststørrelse (typografi-token) */
+    size?: TypographySize;
+    /** Fontvekt */
+    weight?: TypographyWeight;
+    /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */
+    variant?: TypographyTextVariant;
+    /** Innhold */
+    children: React.ReactNode;
+    /** Spacing around the component */
+    spacing?: TypographySpacing;
+    /** Ekstra klassenavn */
+    className?: string;
+};
+export type TextProps<C extends React.ElementType> = PolymorphicComponentProps<C, TextBaseProps>;
+export declare const Text: <C extends React.ElementType = "p">({ children, as, size, variant, weight, spacing, className, ...rest }: TextProps<C>) => React.JSX.Element;
+export {};

package/dist/beta/UnorderedListBeta.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '../../../utils';
+import { TypographySpacing } from './types';
+type UnorderedListBaseProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Spacing around the component (same as Text and Heading components) */
+    spacing?: TypographySpacing;
+};
+export type UnorderedListBetaProps<C extends React.ElementType> = PolymorphicComponentProps<C, UnorderedListBaseProps>;
+export declare const UnorderedListBeta: <C extends React.ElementType = "ul">({ className, spacing, as, children, ...rest }: UnorderedListBetaProps<C>) => JSX.Element;
+export {};

package/dist/beta/index.d.ts

@@ -0,0 +1,9 @@
+export { Heading } from './Heading';
+export { Text } from './Text';
+export { LinkBeta } from './LinkBeta';
+export { BlockquoteBeta, BlockquoteFooterBeta } from './BlockquoteBeta';
+export { UnorderedListBeta } from './UnorderedListBeta';
+export { NumberedListBeta } from './NumberedListBeta';
+export { ListItemBeta } from './ListItemBeta';
+export { getHeadingVariantFromSemanticType, getSpacingClasses } from './utils';
+export type { TypographyHeadingVariant, TypographyTextVariant, TypographySize, TypographyWeight, TypographySpacing, } from './types';

package/dist/beta/types.d.ts

@@ -0,0 +1,5 @@
+export type TypographyHeadingVariant = 'title-1' | 'title-2' | 'subtitle-1' | 'subtitle-2' | 'section-1' | 'section-2' | 'label' | 'sublabel';
+export type TypographyTextVariant = 'leading' | 'quote' | 'paragraph' | 'subparagraph' | 'caption' | 'link' | 'label' | 'sublabel' | 'overline' | 'emphasized' | 'code-text' | 'preformatted-text';
+export type TypographySize = 'xs' | 's' | 'm' | 'lg' | 'xl' | '2xl';
+export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold' | '400' | '500' | '600' | '700';
+export type TypographySpacing = 'none' | 'xs2' | 'xs2-top' | 'xs2-bottom' | 'xs' | 'xs-top' | 'xs-bottom' | 'sm' | 'sm-top' | 'sm-bottom' | 'md' | 'md-top' | 'md-bottom' | 'lg' | 'lg-top' | 'lg-bottom' | 'xl' | 'xl-top' | 'xl-bottom';

package/dist/beta/utils.d.ts

@@ -0,0 +1,10 @@
+import { TypographySpacing, TypographyTextVariant } from './types';
+export declare function getHeadingVariantFromSemanticType(semanticType: string | React.ElementType): "title-1" | "title-2" | "subtitle-1" | "subtitle-2" | "paragraph";
+export declare function getSemanticTypeFromTextVariant(variant?: TypographyTextVariant): React.ElementType;
+/**
+ * Generates spacing class names for typography components
+ * @param spacing - The spacing value from TypographySpacing
+ * @param componentPrefix - The CSS class prefix (e.g., 'eds-heading', 'eds-text')
+ * @returns Object with class names for the spacing prop
+ */
+export declare function getSpacingClasses(spacing: TypographySpacing | undefined, componentPrefix: string): Record<string, boolean> | undefined;

package/dist/index.d.ts

@@ -19,3 +19,10 @@ export * from './StrongText';
 export * from './SubLabel';
 export * from './SubParagraph';
 export * from './UnorderedList';
+export * from './beta/Text';
+export * from './beta/Heading';
+export * from './beta/BlockquoteBeta';
+export * from './beta/LinkBeta';
+export * from './beta/UnorderedListBeta';
+export * from './beta/NumberedListBeta';
+export * from './beta/ListItemBeta';