Skip to content

Commit 1aa2b0e

Browse files
hextionhextion
committed
feat(typography): added Alfa Interface Sans font support
1 parent 0070afd commit 1aa2b0e

22 files changed

+904
-75
lines changed

‎.storybook/public/fonts/alfa-interface-sans_bold.woff2

25.6 KB
Binary file not shown.

‎.storybook/public/fonts/alfa-interface-sans_medium.woff2

25 KB
Binary file not shown.

‎.storybook/public/fonts/alfa-interface-sans_regular.woff2

24.8 KB
Binary file not shown.

‎.storybook/public/global.css

+18
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,24 @@
2222
font-weight: 700;
2323
font-style: normal;
2424
}
25+
@font-face {
26+
font-family: 'Alfa Interface Sans';
27+
src: url('./fonts/alfa-interface-sans_regular.woff2') format('woff2');
28+
font-weight: 400;
29+
font-style: normal;
30+
}
31+
@font-face {
32+
font-family: 'Alfa Interface Sans';
33+
src: url('./fonts/alfa-interface-sans_medium.woff2') format('woff2');
34+
font-weight: 500;
35+
font-style: normal;
36+
}
37+
@font-face {
38+
font-family: 'Alfa Interface Sans';
39+
src: url('./fonts/alfa-interface-sans_bold.woff2') format('woff2');
40+
font-weight: 700;
41+
font-style: normal;
42+
}
2543

2644
html {
2745
height: 100%;

‎packages/typography/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"dependencies": {
1818
"@alfalab/core-components-skeleton": "^5.3.0",
1919
"@alfalab/core-components-mq": "^4.4.1",
20+
"@alfalab/core-components-shared": "^0.16.0",
2021
"@alfalab/hooks": "^1.13.1",
2122
"classnames": "^2.5.1",
2223
"react-merge-refs": "^1.1.0",

‎packages/typography/src/docs/Component.stories.tsx

+13-6
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ export const typography_title: Story = {
1818
const VIEW_TYPES = ['xlarge', 'large', 'medium', 'small', 'xsmall'];
1919
const color = select('color', colors, '');
2020
const weight = select('weight', ['regular', 'medium', 'bold', 'semibold', '-'], '-');
21-
const font = select('font', ['styrene', 'system'], 'styrene');
21+
const font = select('font', ['styrene', 'system', 'alfasans'], 'styrene');
22+
const systemCompat = boolean('systemCompat', false);
2223

2324
return (
2425
<>
@@ -28,7 +29,7 @@ export const typography_title: Story = {
2829
view={view}
2930
color={color}
3031
weight={weight}
31-
font={font}
32+
font={font === 'alfasans' ? { font, systemCompat } : font}
3233
key={view}
3334
>
3435
заголовок view='{view}'
@@ -45,7 +46,8 @@ export const typography_title_responsive: Story = {
4546
const VIEW_TYPES = ['xlarge', 'large', 'medium', 'small', 'xsmall'];
4647
const color = select('color', colors, '');
4748
const weight = select('weight', ['regular', 'medium', 'bold', 'semibold', '-'], '-');
48-
const font = select('font', ['styrene', 'system'], 'styrene');
49+
const font = select('font', ['styrene', 'system', 'alfasans'], 'styrene');
50+
const systemCompat = boolean('systemCompat', false);
4951
return (
5052
<>
5153
{VIEW_TYPES.map((view) => (
@@ -54,7 +56,7 @@ export const typography_title_responsive: Story = {
5456
view={view}
5557
color={color}
5658
weight={weight}
57-
font={font}
59+
font={font === 'alfasans' ? { font, systemCompat } : font}
5860
key={view}
5961
>
6062
заголовок view='{view}'
@@ -71,15 +73,16 @@ export const typography_title_mobile: Story = {
7173
const VIEW_TYPES = ['xlarge', 'large', 'medium', 'small', 'xsmall'];
7274
const color = select('color', colors, '');
7375
const weight = select('weight', ['regular', 'medium', 'bold', 'semibold', '-'], '-');
74-
const font = select('font', ['styrene', 'system'], 'styrene');
76+
const font = select('font', ['styrene', 'system', 'alfasans'], 'styrene');
77+
const systemCompat = boolean('systemCompat', false);
7578
return (
7679
<>
7780
{VIEW_TYPES.map((view) => (
7881
<Typography.TitleMobile
7982
view={view}
8083
color={color}
8184
weight={weight}
82-
font={font}
85+
font={font === 'alfasans' ? { font, systemCompat } : font}
8386
key={view}
8487
>
8588
заголовок view='{view}'
@@ -100,11 +103,14 @@ export const typography_text: Story = {
100103
'secondary-large',
101104
'secondary-medium',
102105
'secondary-small',
106+
'component',
103107
'component-primary',
104108
'component-secondary',
105109
'caps',
110+
'tagline',
106111
];
107112
const color = select('color', colors, '');
113+
const font = select('font', ['default', 'alfasans'], 'default');
108114
const tag = select('tag', ['div', 'p', 'span'], 'p');
109115
const weight = select('weight', ['regular', 'medium', 'bold', undefined], 'regular');
110116
const monospace = boolean('monospaceNumbers', false);
@@ -120,6 +126,7 @@ export const typography_text: Story = {
120126
monospaceNumbers={monospace}
121127
key={view}
122128
defaultMargins={defaultMargins}
129+
font={font === 'alfasans' ? 'alfasans' : undefined}
123130
>
124131
{view}. Космологи́ческая сингуля́рность — состояния Вселенной в определённый
125132
момент времени в прошлом, когда плотность энергии (материи) и кривизна

‎packages/typography/src/text/alfasans-index.module.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import '../../../vars/src/alfasans-index.css';
2+
3+
@define-mixin bold {
4+
font-weight: 700;
5+
}
6+
7+
@define-mixin medium {
8+
font-weight: 500;
9+
}
10+
11+
.text {
12+
@each $view in component, caps, tagline {
13+
&.$(view) {
14+
@mixin paragraph_$(view);
15+
}
16+
}
17+
18+
@each $kind in primary, secondary {
19+
@each $size in large, medium, small {
20+
&.$(kind)-$(size) {
21+
@mixin paragraph_$(kind) _$(size);
22+
23+
@each $weight in bold, medium {
24+
&.$(weight) {
25+
@subtract-mixin accent_$(kind)_$(size), paragraph_$(kind)_$(size), $(weight);
26+
}
27+
}
28+
}
29+
}
30+
31+
&.component-$(kind) {
32+
@mixin paragraph_component_$(kind);
33+
34+
@each $weight in bold, medium {
35+
&.$(weight) {
36+
@subtract-mixin accent_component_$(kind), paragraph_component_$(kind), $(weight);
37+
}
38+
}
39+
}
40+
}
41+
42+
@each $weight in bold, medium {
43+
&.$(weight) {
44+
@mixin $(weight);
45+
}
46+
}
47+
}

‎packages/typography/src/text/component.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useSkeleton } from '../hooks';
77
import { TextElementType, TextSkeletonProps } from '../types';
88

99
import colors from '../colors.module.css';
10+
import alfasansStyles from './alfasans-index.module.css';
1011
import styles from './index.module.css';
1112

1213
type NativeProps = HTMLAttributes<HTMLSpanElement>;
@@ -82,6 +83,11 @@ type TextBaseProps = {
8283
* Пропы для скелетона
8384
*/
8485
skeletonProps?: TextSkeletonProps;
86+
87+
/**
88+
* Шрифт текста
89+
*/
90+
font?: 'alfasans' | undefined | null;
8591
};
8692

8793
type TextPTagProps = Omit<TextBaseProps, 'tag' | 'defaultMargins'> & {
@@ -123,6 +129,7 @@ export const Text = forwardRef<TextElementType, TextProps>(
123129
rowLimit,
124130
showSkeleton,
125131
skeletonProps,
132+
font,
126133
...restProps
127134
},
128135
ref,
@@ -153,11 +160,12 @@ export const Text = forwardRef<TextElementType, TextProps>(
153160
[styles.monospace]: monospaceNumbers,
154161
[styles[`rowLimit${rowLimit}`]]: rowLimit,
155162
[styles.transparent]: showSkeleton,
163+
[alfasansStyles.text]: font === 'alfasans',
156164
},
157165
className,
158166
color && colors[color],
159-
styles[view],
160-
weight && styles[weight],
167+
(font === 'alfasans' ? alfasansStyles : styles)[view],
168+
weight && (font === 'alfasans' ? alfasansStyles : styles)[weight],
161169
)}
162170
data-test-id={dataTestId}
163171
ref={mergeRefs([ref, textRef])}

‎packages/typography/src/title-mobile/alfasans-index.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '../../../vars/src/alfasans-index.css';
2+
3+
@each $view in xlarge, large, medium, small, xsmall {
4+
.alfasans-$(view) {
5+
@mixin headline-mobile_$(view);
6+
7+
&.systemCompat {
8+
@subtract-mixin headline-system-mobile_$(view), headline-mobile_$(view);
9+
}
10+
}
11+
}

‎packages/typography/src/title-mobile/component.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import React, { forwardRef } from 'react';
33
import { TitleBase, TitleProps } from '../title/component';
44

55
import commonStyles from '../title/common.module.css';
6+
import alfasansStyles from './alfasans-index.module.css';
67
import styles from './index.module.css';
78

9+
const allStyles =
10+
process.env.NODE_ENV === 'test'
11+
? commonStyles
12+
: { ...commonStyles, ...styles, ...alfasansStyles };
13+
814
export const TitleMobile = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>(
9-
(props, ref) => (
10-
<TitleBase
11-
{...props}
12-
styles={Object.assign(commonStyles, styles)}
13-
ref={ref}
14-
platform='mobile'
15-
/>
16-
),
15+
(props, ref) => <TitleBase {...props} styles={allStyles} ref={ref} platform='mobile' />,
1716
);

‎packages/typography/src/title/alfasans-index.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '../../../vars/src/alfasans-index.css';
2+
3+
@each $view in xlarge, large, medium, small, xsmall {
4+
.alfasans-$(view) {
5+
@mixin headline_$(view);
6+
7+
&.systemCompat {
8+
@subtract-mixin headline-system_$(view), headline_$(view);
9+
}
10+
}
11+
}

‎packages/typography/src/title/component.tsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react';
22
import mergeRefs from 'react-merge-refs';
33
import cn from 'classnames';
44

5+
import { isObject } from '@alfalab/core-components-shared';
6+
57
import { Color } from '../colors';
68
import { useSkeleton } from '../hooks';
79
import { TextSkeletonProps } from '../types';
@@ -19,7 +21,7 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
1921
tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
2022

2123
/**
22-
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
24+
* [Вариант начертания](?path=/docs/guidelines-typography--page)
2325
*/
2426
view?: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
2527

@@ -36,7 +38,7 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
3638
/**
3739
* Шрифт текста
3840
*/
39-
font?: 'styrene' | 'system';
41+
font?: 'styrene' | 'system' | 'alfasans' | { font: 'alfasans'; systemCompat: boolean };
4042

4143
/**
4244
* Добавляет отступы
@@ -93,9 +95,9 @@ export const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>
9395
{
9496
tag: Component = 'div',
9597
view = 'medium',
96-
font = 'styrene',
98+
font: fontProp = 'styrene',
9799
platform,
98-
weight = getDefaultWeight(font, platform),
100+
weight = getDefaultWeight(isObject(fontProp) ? fontProp.font : fontProp, platform),
99101
defaultMargins = false,
100102
color,
101103
className,
@@ -120,6 +122,16 @@ export const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>
120122
return skeleton;
121123
}
122124

125+
let font: string;
126+
let systemCompat: boolean | undefined;
127+
128+
if (isObject(fontProp)) {
129+
font = fontProp.font;
130+
systemCompat = fontProp.systemCompat;
131+
} else {
132+
font = fontProp;
133+
}
134+
123135
return (
124136
<Component
125137
className={cn(
@@ -132,6 +144,7 @@ export const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>
132144
{
133145
[styles[`rowLimit${rowLimit}`]]: rowLimit,
134146
[styles.transparent]: showSkeleton,
147+
[styles.systemCompat]: systemCompat,
135148
},
136149
)}
137150
data-test-id={dataTestId}

‎packages/typography/src/title/index.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import React, { forwardRef } from 'react';
22

33
import { TitleBase, TitleProps } from './component';
44

5+
import alfasansStyles from './alfasans-index.module.css';
56
import commonStyles from './common.module.css';
67
import styles from './index.module.css';
78

9+
const allStyles =
10+
process.env.NODE_ENV === 'test'
11+
? commonStyles
12+
: { ...commonStyles, ...styles, ...alfasansStyles };
13+
814
const Title = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>((props, ref) => (
9-
<TitleBase
10-
{...props}
11-
styles={Object.assign(commonStyles, styles)}
12-
ref={ref}
13-
platform='desktop'
14-
/>
15+
<TitleBase {...props} styles={allStyles} ref={ref} platform='desktop' />
1516
));
1617

1718
export { Title };

‎packages/typography/src/title/utils.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
export function getDefaultWeight(font: 'styrene' | 'system', platform: 'mobile' | 'desktop') {
2-
if (font === 'styrene') {
1+
export function getDefaultWeight(
2+
font: 'styrene' | 'system' | 'alfasans',
3+
platform: 'mobile' | 'desktop',
4+
) {
5+
if (font === 'styrene' || font === 'alfasans') {
36
return 'medium';
47
}
58

‎packages/typography/tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
"@alfalab/core-components-*": ["../*/src"]
1010
}
1111
},
12-
"references": [{ "path": "../skeleton" }, { "path": "../mq" }]
12+
"references": [{ "path": "../skeleton" }, { "path": "../mq" }, { "path": "../shared" }]
1313
}

‎packages/vars/src/alfasans-index.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import './colors.css'; /* deprecated */
2+
@import './colors-bluetint.css';
3+
@import './colors-addons.css';
4+
@import './colors-transparent.css';
5+
@import './shadows-bluetint.css';
6+
@import './border-radius.css';
7+
@import './gaps.css';
8+
@import './alfasans-typography.css';
9+
@import './common.css';
10+
@import './mixins.css';

0 commit comments

Comments
 (0)