@entur/typography 1.9.13-beta.3 → 1.10.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -4
- package/dist/BaseHeading.d.ts +18 -0
- package/dist/Blockquote.d.ts +12 -0
- package/dist/CodeText.d.ts +16 -0
- package/dist/EmphasizedText.d.ts +20 -0
- package/dist/Heading1.d.ts +20 -0
- package/dist/Heading2.d.ts +20 -0
- package/dist/Heading3.d.ts +20 -0
- package/dist/Heading4.d.ts +20 -0
- package/dist/Heading5.d.ts +20 -0
- package/dist/Heading6.d.ts +20 -0
- package/dist/Label.d.ts +20 -0
- package/dist/LeadParagraph.d.ts +20 -0
- package/dist/Link.d.ts +22 -0
- package/dist/ListItem.d.ts +11 -0
- package/dist/NumberedList.d.ts +8 -0
- package/dist/Paragraph.d.ts +20 -0
- package/dist/PreformattedText.d.ts +16 -0
- package/dist/SmallText.d.ts +20 -0
- package/dist/StrongText.d.ts +20 -0
- package/dist/SubLabel.d.ts +20 -0
- package/dist/SubParagraph.d.ts +20 -0
- package/dist/UnorderedList.d.ts +8 -0
- package/dist/beta/BlockquoteBeta.d.ts +12 -0
- package/dist/beta/Heading.d.ts +21 -0
- package/dist/beta/LinkBeta.d.ts +16 -0
- package/dist/beta/Text.d.ts +21 -0
- package/dist/beta/index.d.ts +6 -0
- package/dist/beta/types.d.ts +5 -0
- package/dist/beta/utils.d.ts +9 -0
- package/dist/index.d.ts +26 -426
- package/dist/index.js +8 -0
- package/dist/styles.css +838 -2
- package/dist/typography.cjs.development.js +508 -0
- package/dist/typography.cjs.development.js.map +1 -0
- package/dist/typography.cjs.production.min.js +2 -0
- package/dist/typography.cjs.production.min.js.map +1 -0
- package/dist/typography.esm.js +454 -392
- package/dist/typography.esm.js.map +1 -1
- package/package.json +21 -25
- package/scripts/migrate-typography.js +858 -0
- package/dist/typography.cjs.js +0 -416
- package/dist/typography.cjs.js.map +0 -1
package/README.md
CHANGED
|
@@ -7,18 +7,116 @@ Entur's official font is Nationale and is created by Playtype Foundry, located i
|
|
|
7
7
|
This package contains styles and React components for all of our typography.
|
|
8
8
|
|
|
9
9
|
> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/ressurser/typography)?
|
|
10
|
+
> Looking for the beta [documentation](https://linje.entur.no/komponenter/ressurser/typography-beta)?
|
|
10
11
|
|
|
11
12
|
## Installation
|
|
12
13
|
|
|
13
|
-
```
|
|
14
|
+
```bash
|
|
14
15
|
npm install @entur/typography
|
|
15
|
-
# or
|
|
16
|
+
# or
|
|
16
17
|
yarn add @entur/typography
|
|
17
18
|
```
|
|
18
19
|
|
|
19
|
-
##
|
|
20
|
+
## 🚀 Quick Start
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
### Using Beta Typography (Recommended)
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { Heading, Text, LinkBeta } from '@entur/typography';
|
|
26
|
+
|
|
27
|
+
function MyComponent() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<Heading as="h1" variant="title-1">
|
|
31
|
+
My Title
|
|
32
|
+
</Heading>
|
|
33
|
+
<Text variant="paragraph">My content</Text>
|
|
34
|
+
<LinkBeta href="/more">Learn more</LinkBeta>
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Using Legacy Typography
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { Heading1, Paragraph, Link } from '@entur/typography';
|
|
44
|
+
|
|
45
|
+
function MyComponent() {
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<Heading1>My Title</Heading1>
|
|
49
|
+
<Paragraph>My content</Paragraph>
|
|
50
|
+
<Link href="/more">Learn more</Link>
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 🔄 Migration
|
|
57
|
+
|
|
58
|
+
**Migrating from legacy typography?** We've created a comprehensive migration package to help you transition smoothly. Follow our migration guide in our website.
|
|
59
|
+
|
|
60
|
+
- 🔧 **Migration Helpers** - Drop-in replacements for legacy components
|
|
61
|
+
- 🤖 **Migration Script** - Automated migration tool
|
|
62
|
+
|
|
63
|
+
### Quick Migration
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
# Option 1: Using npx (recommended)
|
|
67
|
+
npx @entur/typography@latest migrate
|
|
68
|
+
|
|
69
|
+
# Option 2: With specific options
|
|
70
|
+
npx @entur/typography@latest migrate --dry-run
|
|
71
|
+
npx @entur/typography@latest migrate --import-only
|
|
72
|
+
|
|
73
|
+
# Option 3: From installed package
|
|
74
|
+
npm install @entur/typography@latest
|
|
75
|
+
npx @entur/typography@latest migrate
|
|
76
|
+
|
|
77
|
+
# Option 4: Add to your package.json scripts
|
|
78
|
+
# "scripts": { "migrate-typography": "npx @entur/typography@latest migrate" }
|
|
79
|
+
# Then run: npm run migrate-typography -- --dry-run
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
**Note**: The migration script requires `glob` to be available. If you encounter an error, install it:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npm install glob
|
|
86
|
+
# or
|
|
87
|
+
yarn add glob
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Migration Modes
|
|
91
|
+
|
|
92
|
+
- **🚀 Complete Migration (default)**: Updates imports + component usage
|
|
93
|
+
- **📝 Import-Only Migration**: Updates only import paths (safer for gradual migration)
|
|
94
|
+
|
|
95
|
+
### Update Styles
|
|
96
|
+
|
|
97
|
+
```scss
|
|
98
|
+
// Replace this
|
|
99
|
+
@import '@entur/typography/dist/styles.css';
|
|
100
|
+
|
|
101
|
+
// With this
|
|
102
|
+
@import '@entur/typography/src/beta/styles.scss';
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 🎨 Features
|
|
106
|
+
|
|
107
|
+
### Beta Typography
|
|
108
|
+
|
|
109
|
+
- **Semantic variants** - Title, subtitle, section, paragraph, etc.
|
|
110
|
+
- **Size variants** - Extra large, large, medium, small, extra small
|
|
111
|
+
- **Weight variants** - Light, regular, medium, semibold, bold
|
|
112
|
+
- **Spacing options** - Configurable margins and padding
|
|
113
|
+
- **Accessibility** - Built-in ARIA support and semantic HTML
|
|
114
|
+
|
|
115
|
+
### Legacy Typography
|
|
116
|
+
|
|
117
|
+
- **Individual components** - Heading1-6, Paragraph, Link, etc.
|
|
118
|
+
- **Simple API** - Easy to use with minimal configuration
|
|
119
|
+
- **Backward compatibility** - Existing code continues to work
|
|
22
120
|
|
|
23
121
|
## Licenses
|
|
24
122
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
type BaseHeadingOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres */
|
|
5
|
+
as: string | React.ElementType;
|
|
6
|
+
/** Ekstra klassenavn */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Innholdet */
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/** Hvor du vil ha marginer */
|
|
11
|
+
margin: 'top' | 'bottom' | 'both' | 'none';
|
|
12
|
+
/** Nivået på overskriften */
|
|
13
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
14
|
+
};
|
|
15
|
+
declare const defaultElement = "h1";
|
|
16
|
+
export type BaseHeadingProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BaseHeadingOwnProps>;
|
|
17
|
+
export declare const BaseHeading: <E extends React.ElementType = "h1">({ className, level, margin, as, ...rest }: BaseHeadingProps<E>) => JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type BlockquoteProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
} & React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLElement>, HTMLQuoteElement>;
|
|
6
|
+
export declare const Blockquote: ({ className, ref, ...rest }: BlockquoteProps) => React.JSX.Element;
|
|
7
|
+
type BlockquoteFooterProps = {
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
11
|
+
export declare const BlockquoteFooter: React.FunctionComponent<BlockquoteFooterProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type CodeTextOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "code"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export type CodeTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, CodeTextOwnProps>;
|
|
14
|
+
declare const defaultElement = "code";
|
|
15
|
+
export declare const CodeText: <E extends React.ElementType = "code">({ className, as, ...rest }: CodeTextProps<E>) => JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type EmphasizedTextOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "em"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type EmphasizedTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, EmphasizedTextOwnProps>;
|
|
18
|
+
declare const defaultElement = "em";
|
|
19
|
+
export declare const EmphasizedText: <E extends React.ElementType = "em">({ className, margin, as, ...rest }: EmphasizedTextProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading1OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h1"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
declare const defaultElement = "h1";
|
|
18
|
+
export type Heading1Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading1OwnProps>;
|
|
19
|
+
export declare const Heading1: <E extends React.ElementType = "h1">({ margin, children, as, ...rest }: Heading1Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading2OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h2"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type Heading2Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading2OwnProps>;
|
|
18
|
+
declare const defaultElement = "h2";
|
|
19
|
+
export declare const Heading2: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: Heading2Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading3OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h3"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type Heading3Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading3OwnProps>;
|
|
18
|
+
declare const defaultElement = "h3";
|
|
19
|
+
export declare const Heading3: <E extends React.ElementType = "h3">({ margin, children, as, ...rest }: Heading3Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading4OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h4"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type Heading4Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading4OwnProps>;
|
|
18
|
+
declare const defaultElement = "h4";
|
|
19
|
+
export declare const Heading4: <E extends React.ElementType = "h4">({ margin, children, as, ...rest }: Heading4Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading5OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h5"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type Heading5Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading5OwnProps>;
|
|
18
|
+
declare const defaultElement = "h5";
|
|
19
|
+
export declare const Heading5: <E extends React.ElementType = "h5">({ margin, children, as, ...rest }: Heading5Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type Heading6OwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "h6"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type Heading6Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading6OwnProps>;
|
|
18
|
+
declare const defaultElement = "h6";
|
|
19
|
+
export declare const Heading6: <E extends React.ElementType = "h6">({ margin, children, as, ...rest }: Heading6Props<E>) => JSX.Element;
|
|
20
|
+
export {};
|
package/dist/Label.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type LabelOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "label"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type LabelProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LabelOwnProps>;
|
|
18
|
+
declare const defaultElement = "label";
|
|
19
|
+
export declare const Label: <E extends React.ElementType = "label">({ className, margin, as, ...rest }: LabelProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type LeadParagraphOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "p"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type LeadParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LeadParagraphOwnProps>;
|
|
18
|
+
declare const defaultElement = "p";
|
|
19
|
+
export declare const LeadParagraph: <E extends React.ElementType = "p">({ className, margin, as, ...rest }: LeadParagraphProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
package/dist/Link.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type LinkOwnProps = {
|
|
4
|
+
external?: boolean;
|
|
5
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
6
|
+
* @default "a"
|
|
7
|
+
*/
|
|
8
|
+
as?: string | React.ElementType;
|
|
9
|
+
/** Ekstra klassenavn */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Innholdet */
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
/** Hvor du vil ha marginer
|
|
14
|
+
* @default "both"
|
|
15
|
+
*/
|
|
16
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
17
|
+
ariaLabelExternalIcon?: string;
|
|
18
|
+
};
|
|
19
|
+
export type LinkProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LinkOwnProps>;
|
|
20
|
+
declare const defaultElement = "a";
|
|
21
|
+
export declare const Link: <E extends React.ElementType = "a">({ external, ariaLabelExternalIcon, className, margin, children, as, ...rest }: LinkProps<E>) => JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ListItemProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Innholdet */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
/** Tittel */
|
|
8
|
+
title?: React.ReactNode;
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
};
|
|
11
|
+
export declare const ListItem: React.FC<ListItemProps>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type NumberedListProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Innholdet */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
} & React.OlHTMLAttributes<HTMLOListElement>;
|
|
8
|
+
export declare const NumberedList: React.FC<NumberedListProps>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type ParagraphOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "p"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "bottom"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'bottom' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type ParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, ParagraphOwnProps>;
|
|
18
|
+
declare const defaultElement = "p";
|
|
19
|
+
export declare const Paragraph: <E extends React.ElementType = "p">({ margin, className, as, ...rest }: ParagraphProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type PreformattedTextOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "pre"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export type PreformattedTextProps<T extends React.ElementType> = PolymorphicComponentProps<T, PreformattedTextOwnProps>;
|
|
14
|
+
declare const defaultElement = "pre";
|
|
15
|
+
export declare const PreformattedText: <E extends React.ElementType = "pre">({ className, as, ...rest }: PreformattedTextProps<E>) => JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type SmallTextOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "span"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type SmallTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SmallTextOwnProps>;
|
|
18
|
+
declare const defaultElement = "span";
|
|
19
|
+
export declare const SmallText: <E extends React.ElementType = "span">({ className, margin, as, ...rest }: SmallTextProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type StrongTextOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "strong"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type StrongTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, StrongTextOwnProps>;
|
|
18
|
+
declare const defaultElement = "strong";
|
|
19
|
+
export declare const StrongText: <E extends React.ElementType = "strong">({ className, margin, as, ...rest }: StrongTextProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type SubLabelOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "span"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type SubLabelProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SubLabelOwnProps>;
|
|
18
|
+
declare const defaultElement = "span";
|
|
19
|
+
export declare const SubLabel: <E extends React.ElementType = "span">({ className, margin, as, ...rest }: SubLabelProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
export type SubParagraphOwnProps = {
|
|
4
|
+
/** HTML-elementet eller React-komponenten som rendres
|
|
5
|
+
* @default "p"
|
|
6
|
+
*/
|
|
7
|
+
as?: string | React.ElementType;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Innholdet */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Hvor du vil ha marginer
|
|
13
|
+
* @default "both"
|
|
14
|
+
*/
|
|
15
|
+
margin?: 'top' | 'bottom' | 'both' | 'none';
|
|
16
|
+
};
|
|
17
|
+
export type SubParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SubParagraphOwnProps>;
|
|
18
|
+
declare const defaultElement = "p";
|
|
19
|
+
export declare const SubParagraph: <E extends React.ElementType = "p">({ className, margin, as, ...rest }: SubParagraphProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type UnorderedListProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Innholdet */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
|
|
8
|
+
export declare const UnorderedList: React.FC<UnorderedListProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type BlockquotePropsBeta = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
} & React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
|
|
6
|
+
export declare const BlockquoteBeta: ({ className, ...rest }: BlockquotePropsBeta) => React.JSX.Element;
|
|
7
|
+
type BlockquoteFooterPropsBeta = {
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
11
|
+
export declare const BlockquoteFooterBeta: ({ className, ...rest }: BlockquoteFooterPropsBeta) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyHeadingVariant, TypographySize, TypographySpacing } from './types';
|
|
3
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
4
|
+
import './styles.scss';
|
|
5
|
+
type HeadingBaseProps = {
|
|
6
|
+
/** Visuell variant som bestemmer styling (anbefalt over size) */
|
|
7
|
+
variant?: TypographyHeadingVariant;
|
|
8
|
+
/** Visuell tekststørrelse som overstyrer variant-styling */
|
|
9
|
+
size?: TypographySize;
|
|
10
|
+
/** Innholdet som skal vises */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Ekstra klassenavn for tilpasset styling */
|
|
13
|
+
className?: string;
|
|
14
|
+
/** Inline CSS-stiler */
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
/** Spacing around the component */
|
|
17
|
+
spacing?: TypographySpacing;
|
|
18
|
+
};
|
|
19
|
+
export type HeadingProps<C extends React.ElementType> = PolymorphicComponentProps<C, HeadingBaseProps>;
|
|
20
|
+
export declare const Heading: <C extends React.ElementType = "h1">({ children, as, size, variant, spacing, className, ...rest }: HeadingProps<C>) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
+
import { TypographySpacing } from './types';
|
|
4
|
+
type LinkBaseProps = {
|
|
5
|
+
external?: boolean;
|
|
6
|
+
/** Ekstra klassenavn */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Innholdet */
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/** Spacing around the component (same as Text and Heading components) */
|
|
11
|
+
spacing?: TypographySpacing;
|
|
12
|
+
ariaLabelExternalIcon?: string;
|
|
13
|
+
};
|
|
14
|
+
export type LinkPropsBeta<C extends React.ElementType> = PolymorphicComponentProps<C, LinkBaseProps>;
|
|
15
|
+
export declare const LinkBeta: <C extends React.ElementType = "a">({ external, ariaLabelExternalIcon, className, spacing, children, as, ...rest }: LinkPropsBeta<C>) => JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
import { TypographySize, TypographyTextVariant, TypographyWeight, TypographySpacing } from './types';
|
|
4
|
+
import { PolymorphicComponentProps } from '@entur/utils';
|
|
5
|
+
type TextBaseProps = {
|
|
6
|
+
/** Visuell tekststørrelse (typografi-token) */
|
|
7
|
+
size?: TypographySize;
|
|
8
|
+
/** Fontvekt */
|
|
9
|
+
weight?: TypographyWeight;
|
|
10
|
+
/** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */
|
|
11
|
+
variant?: TypographyTextVariant;
|
|
12
|
+
/** Innhold */
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
/** Spacing around the component */
|
|
15
|
+
spacing?: TypographySpacing;
|
|
16
|
+
/** Ekstra klassenavn */
|
|
17
|
+
className?: string;
|
|
18
|
+
};
|
|
19
|
+
export type TextProps<C extends React.ElementType> = PolymorphicComponentProps<C, TextBaseProps>;
|
|
20
|
+
export declare const Text: <C extends React.ElementType = "p">({ children, as, size, variant, weight, spacing, className, ...rest }: TextProps<C>) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { Heading } from './Heading';
|
|
2
|
+
export { Text } from './Text';
|
|
3
|
+
export { LinkBeta } from './LinkBeta';
|
|
4
|
+
export { BlockquoteBeta, BlockquoteFooterBeta } from './BlockquoteBeta';
|
|
5
|
+
export { getHeadingVariantFromSemanticType, getSpacingClasses } from './utils';
|
|
6
|
+
export type { TypographyHeadingVariant, TypographyTextVariant, TypographySize, TypographyWeight, TypographySpacing, } from './types';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type TypographyHeadingVariant = 'title-1' | 'title-2' | 'subtitle-1' | 'subtitle-2' | 'section-1' | 'section-2' | 'label' | 'sublabel';
|
|
2
|
+
export type TypographyTextVariant = 'leading' | 'quote' | 'paragraph' | 'subparagraph' | 'caption' | 'link' | 'label' | 'sublabel' | 'overline' | 'emphasized' | 'code-text' | 'preformatted-text';
|
|
3
|
+
export type TypographySize = 'xs' | 's' | 'm' | 'lg' | 'xl' | '2xl';
|
|
4
|
+
export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold' | '400' | '500' | '600' | '700';
|
|
5
|
+
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';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TypographySpacing } from './types';
|
|
2
|
+
export declare function getHeadingVariantFromSemanticType(semanticType: string | React.ElementType): "title-1" | "title-2" | "subtitle-1" | "subtitle-2" | "paragraph";
|
|
3
|
+
/**
|
|
4
|
+
* Generates spacing class names for typography components
|
|
5
|
+
* @param spacing - The spacing value from TypographySpacing
|
|
6
|
+
* @param componentPrefix - The CSS class prefix (e.g., 'eds-heading', 'eds-text')
|
|
7
|
+
* @returns Object with class names for the spacing prop
|
|
8
|
+
*/
|
|
9
|
+
export declare function getSpacingClasses(spacing: TypographySpacing | undefined, componentPrefix: string): Record<string, boolean> | undefined;
|