Skip to content

Commit 9470b93

Browse files
NikGurevNikGurev
committed
chore: moved typography under design tokens section
1 parent 9dad233 commit 9470b93

File tree

11 files changed

+175
-465
lines changed

11 files changed

+175
-465
lines changed

‎apps/docs/src/app/components/design-tokens-viewers/data/typography.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
export const docsData = [
2+
'display-big',
3+
'display-big-strong',
4+
'display-normal',
5+
'display-normal-strong',
6+
'display-compact',
7+
'display-compact-strong',
8+
'headline',
9+
'title',
10+
'subheading',
11+
'navbar-title',
12+
'text-big',
13+
'text-big-medium',
14+
'text-big-strong',
15+
'caps-big',
16+
'caps-big-strong',
17+
'mono-big',
18+
'mono-big-strong',
19+
'tabular-big',
20+
'tabular-big-strong',
21+
'italic-big',
22+
'italic-big-strong',
23+
'text-normal',
24+
'text-normal-medium',
25+
'text-normal-strong',
26+
'caps-normal',
27+
'caps-normal-strong',
28+
'mono-normal',
29+
'mono-normal-medium',
30+
'mono-normal-strong',
31+
'mono-codeblock',
32+
'tabular-normal',
33+
'tabular-normal-strong',
34+
'italic-normal',
35+
'italic-normal-strong',
36+
'text-compact',
37+
'text-compact-medium',
38+
'text-compact-strong',
39+
'caps-compact',
40+
'caps-compact-strong',
41+
'mono-compact',
42+
'mono-compact-strong',
43+
'tabular-compact',
44+
'tabular-compact-strong',
45+
'italic-compact',
46+
'italic-compact-strong'
47+
];

‎apps/docs/src/app/components/design-tokens-viewers/design-tokens-viewer.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@ export class DocsDesignTokensViewer extends DocsComponentViewerComponent {
6363
},
6464
value: DocsStructureTokensTab.Colors
6565
},
66+
{
67+
title: {
68+
ru: 'Типографика',
69+
en: 'Typography'
70+
},
71+
value: DocsStructureTokensTab.Typography
72+
},
6673
{
6774
title: {
6875
ru: 'Тени',

‎apps/docs/src/app/components/design-tokens-viewers/tokens-overview.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,10 @@ export class DocsTokensTable extends DocsLocaleState {
101101
readonly section = input<DocsTokensSectionInfo>();
102102
readonly tab = input.required<DocsStructureTokensTab>();
103103

104-
readonly mapTabToType: Record<DocsStructureTokensTab, 'dimensions' | 'sizes' | 'shadows'> = {
104+
readonly mapTabToType: Record<
105+
Exclude<DocsStructureTokensTab, DocsStructureTokensTab.Typography>,
106+
'dimensions' | 'sizes' | 'shadows'
107+
> = {
105108
[DocsStructureTokensTab.Colors]: 'dimensions',
106109
[DocsStructureTokensTab.BorderRadius]: 'dimensions',
107110
[DocsStructureTokensTab.Palette]: 'dimensions',
@@ -110,7 +113,7 @@ export class DocsTokensTable extends DocsLocaleState {
110113
};
111114

112115
readonly mapTabToCssProp: Record<
113-
DocsStructureTokensTab,
116+
Exclude<DocsStructureTokensTab, DocsStructureTokensTab.Typography>,
114117
'border-radius' | 'background-color' | 'box-shadow' | 'width'
115118
> = {
116119
[DocsStructureTokensTab.Colors]: 'background-color',
@@ -214,7 +217,10 @@ export class DocsTokensOverview extends DocsLocaleState implements AfterViewInit
214217
}
215218
};
216219

217-
protected tokenDataMap: Record<DocsStructureTokensTab, DocsTokensInfoRaw[]> = {
220+
protected tokenDataMap: Record<
221+
Exclude<DocsStructureTokensTab, DocsStructureTokensTab.Typography>,
222+
DocsTokensInfoRaw[]
223+
> = {
218224
[DocsStructureTokensTab.Colors]: colors,
219225
[DocsStructureTokensTab.Shadows]: shadows,
220226
[DocsStructureTokensTab.BorderRadius]: borderRadius,

‎apps/docs/src/app/components/design-tokens-viewers/typography-overview.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Component, signal, viewChild } from '@angular/core';
2+
import { KbqToolTipModule } from '@koobiq/components/tooltip';
3+
import { DocsLocaleState } from '../../services/locale';
4+
import { DocsCodeSnippetDirective } from '../code-snippet/code-snippet';
5+
import { DocsComponentViewerWrapperComponent } from '../component-viewer/component-viewer-wrapper';
6+
7+
import { TitleCasePipe } from '@angular/common';
8+
import { KbqTableModule } from '@koobiq/components/table';
9+
import { docsData } from './data/typography';
10+
11+
export interface DocsTokensSectionInfo {
12+
type: string;
13+
tokens: { token: string; value: string }[];
14+
}
15+
16+
export interface DocsTokensInfo {
17+
type: string;
18+
sections?: DocsTokensSectionInfo[];
19+
tokens?: { token: string; value: string }[];
20+
}
21+
22+
export interface DocsTokensSectionInfoRaw {
23+
type: string;
24+
tokens: string[];
25+
}
26+
27+
@Component({
28+
standalone: true,
29+
selector: 'docs-typography-table',
30+
imports: [
31+
DocsComponentViewerWrapperComponent,
32+
KbqToolTipModule,
33+
DocsCodeSnippetDirective,
34+
KbqTableModule,
35+
TitleCasePipe
36+
],
37+
template: `
38+
<docs-component-viewer-wrapper>
39+
<table kbq-table id="font-classes-table" docs-article>
40+
<thead>
41+
<tr>
42+
<th>Typography Example</th>
43+
<th>CSS Class Name</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
@for (token of tokensInfo(); track token) {
48+
<tr>
49+
<td>
50+
<div [class]="'kbq-' + token">{{ token | titlecase }}</div>
51+
</td>
52+
<td>
53+
<span
54+
docsCodeSnippet
55+
class="kbq-markdown__code"
56+
[kbqTooltip]="localeData.codeSnippet[locale()]"
57+
[kbqTooltipArrow]="false"
58+
>
59+
kbq-{{ token }}
60+
</span>
61+
</td>
62+
</tr>
63+
}
64+
</tbody>
65+
</table>
66+
</docs-component-viewer-wrapper>
67+
`,
68+
host: {
69+
class: 'kbq-markdown'
70+
}
71+
})
72+
export class DocsTypographyTable extends DocsLocaleState {
73+
protected readonly wrapper = viewChild.required(DocsComponentViewerWrapperComponent);
74+
75+
protected readonly tokensInfo = signal<string[]>([]);
76+
77+
protected readonly localeData = {
78+
token: {
79+
ru: 'Токен',
80+
en: 'Token'
81+
},
82+
value: {
83+
ru: 'Значение',
84+
en: 'Value'
85+
},
86+
codeSnippet: {
87+
ru: 'Скопировать',
88+
en: 'Copy'
89+
}
90+
};
91+
92+
constructor() {
93+
super();
94+
95+
this.tokensInfo.set(docsData);
96+
}
97+
}

‎apps/docs/src/app/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from './components/component-viewer/component-viewer.component';
1111
import { DocsDesignTokensViewer } from './components/design-tokens-viewers/design-tokens-viewer';
1212
import { DocsTokensOverview } from './components/design-tokens-viewers/tokens-overview';
13+
import { DocsTypographyTable } from './components/design-tokens-viewers/typography-overview';
1314
import { DocsIconsViewerComponent } from './components/icons-viewer/icons-viewer.component';
1415
import { DocsPageNotFoundComponent } from './components/page-not-found/page-not-found.component';
1516
import { DocsWelcomeComponent } from './components/welcome/welcome.component';
@@ -59,6 +60,7 @@ export const DOCS_ROUTES: Routes = [
5960
children: [
6061
{ path: '', redirectTo: DocsStructureTokensTab.Colors, pathMatch: 'full' },
6162
{ path: DocsStructureTokensTab.Colors, component: DocsTokensOverview, pathMatch: 'full' },
63+
{ path: DocsStructureTokensTab.Typography, component: DocsTypographyTable, pathMatch: 'full' },
6264
{ path: DocsStructureTokensTab.Shadows, component: DocsTokensOverview, pathMatch: 'full' },
6365
{ path: DocsStructureTokensTab.BorderRadius, component: DocsTokensOverview, pathMatch: 'full' },
6466
{ path: DocsStructureTokensTab.Sizes, component: DocsTokensOverview, pathMatch: 'full' },

‎apps/docs/src/app/structure.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ export enum DocsStructureItemTab {
132132

133133
export enum DocsStructureTokensTab {
134134
Colors = 'colors',
135+
Typography = 'typography',
135136
Shadows = 'shadows',
136137
BorderRadius = 'border-radius',
137138
Sizes = 'sizes',

0 commit comments

Comments
 (0)