@cdek-it/react-native-ui-kit 1.0.0-beta.4 → 1.0.0-beta.6

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.
Files changed (13) hide show
  1. package/README.md +17 -17
  2. package/dist/components/Typography/Anchor.js +8 -2
  3. package/dist/components/Typography/Body.d.ts +1 -1
  4. package/dist/components/Typography/Body.js +6 -6
  5. package/dist/components/Typography/Caption.js +3 -1
  6. package/dist/components/Typography/Service.js +5 -5
  7. package/dist/components/Typography/Subtitle.js +4 -3
  8. package/dist/components/Typography/Title.js +9 -9
  9. package/dist/theme/assets/themeDark.json +1 -1
  10. package/dist/theme/assets/themeLight.json +1 -1
  11. package/dist/theme/darkTheme.js +1 -1
  12. package/dist/theme/lightTheme.js +1 -1
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -38,8 +38,8 @@ UI kit использует следующие виды шрифтов.
38
38
 
39
39
  | Тип шрифта | Используемые начертания | Рекомендуемый шрифт | Рекомендуемый аналог |
40
40
  | ----------- | ---------------------------------------------- | ------------------- | -------------------- |
41
- | `primary` | – regular<br/>– demibold<br/>– demibold italic | TT Fellows | PT Sans |
42
- | `secondary` | – regular<br/>– bold | PT Sans | — |
41
+ | `primary` | – regular<br/>– demibold<br/>– demibold italic | TT Fellows | Noto Sans |
42
+ | `secondary` | – regular<br/>– bold | Noto Sans | — |
43
43
 
44
44
  Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать
45
45
  отдельно. После подключения шрифтов в проект, необходимо указать их в
@@ -84,10 +84,10 @@ UI kit использует следующие виды шрифтов.
84
84
  ],
85
85
  },
86
86
  {
87
- fontFamily: 'PT Sans',
87
+ fontFamily: 'Noto Sans',
88
88
  fontDefinitions: [
89
- { path: './assets/fonts/PTSans-Bold.ttf', weight: 700 },
90
- { path: './assets/fonts/PTSans-Regular.ttf', weight: 400 },
89
+ { path: './assets/NotoSans-Bold.ttf', weight: 700 },
90
+ { path: './assets/NotoSans-Regular.ttf', weight: 400 },
91
91
  ],
92
92
  },
93
93
  ],
@@ -104,19 +104,19 @@ UI kit использует следующие виды шрифтов.
104
104
  2. Создать XML-ресурс для каждого шрифта
105
105
 
106
106
  ```xml
107
- <!-- xml_pt_sans.xml -->
107
+ <!-- xml_noto_sans.xml -->
108
108
  <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
109
- <font app:font="@font/pt_sans_bold" app:fontStyle="normal" app:fontWeight="700"/>
110
- <font app:font="@font/pt_sans_regular" app:fontStyle="normal" app:fontWeight="400"/>
109
+ <font app:font="@font/noto_sans_bold" app:fontStyle="normal" app:fontWeight="700"/>
110
+ <font app:font="@font/noto_sans_regular" app:fontStyle="normal" app:fontWeight="400"/>
111
111
  </font-family>
112
112
  ```
113
113
 
114
114
  ```xml
115
115
  <!-- xml_tt_fellows.xml -->
116
116
  <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
117
- <font app:font="@font/tt_fellows_demi_bold_italic" app:fontStyle="italic" app:fontWeight="600"/>
118
- <font app:font="@font/tt_fellows_demi_bold" app:fontStyle="normal" app:fontWeight="600"/>
119
- <font app:font="@font/tt_fellows_regular" app:fontStyle="normal" app:fontWeight="400"/>
117
+ <font app:font="@font/tt_fellows_demi_bold_italic" app:fontStyle="italic" app:fontWeight="600"/>
118
+ <font app:font="@font/tt_fellows_demi_bold" app:fontStyle="normal" app:fontWeight="600"/>
119
+ <font app:font="@font/tt_fellows_regular" app:fontStyle="normal" app:fontWeight="400"/>
120
120
  </font-family>
121
121
  ```
122
122
 
@@ -130,7 +130,7 @@ UI kit использует следующие виды шрифтов.
130
130
 
131
131
  //подключение шрифтов
132
132
  ReactFontManager.getInstance().addCustomFont(this, "TT Fellows", R.font.xml_tt_fellows)
133
- ReactFontManager.getInstance().addCustomFont(this, "PT Sans", R.font.xml_pt_sans)
133
+ ReactFontManager.getInstance().addCustomFont(this, "Noto Sans", R.font.xml_noto_sans)
134
134
 
135
135
  // остальной код...
136
136
  }
@@ -152,11 +152,11 @@ UI kit использует следующие виды шрифтов.
152
152
  ```xml
153
153
  <key>UIAppFonts</key>
154
154
  <array>
155
- <string>TTFellows-DemiBold.ttf</string>
156
- <string>TTFellows-DemiBoldItalic.ttf</string>
157
- <string>TTFellows-Regular.ttf</string>
158
- <string>PTSans-Bold.ttf</string>
159
- <string>PTSans-Regular.ttf</string>
155
+ <string>TTFellows-DemiBold.ttf</string>
156
+ <string>TTFellows-DemiBoldItalic.ttf</string>
157
+ <string>TTFellows-Regular.ttf</string>
158
+ <string>NotoSans-Regular.ttf</string>
159
+ <string>NotoSans-Bold.ttf</string>
160
160
  </array>
161
161
  ```
162
162
 
package/dist/components/Typography/Anchor.js CHANGED
@@ -53,10 +53,16 @@ const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({
53
53
  includeFontPadding: false,
54
54
  verticalAlign: 'middle',
55
55
  color: typography.Color.Service['text-info'],
56
- fontFamily: fonts.primary,
56
+ fontFamily: fonts.secondary,
57
+ lineHeight: 15,
58
+ letterSpacing: -0.25,
57
59
  },
58
60
  underlined: { textDecorationLine: 'underline' },
59
- base: { fontSize: typography.Size['text-base'], fontFamily: fonts.secondary },
61
+ base: {
62
+ fontSize: typography.Size['text-base'],
63
+ lineHeight: undefined,
64
+ letterSpacing: 0,
65
+ },
60
66
  visited: { color: typography.Color.Service['text-help'] },
61
67
  icon: {
62
68
  width: typography.Size['text-base'],
package/dist/components/Typography/Body.d.ts CHANGED
@@ -4,6 +4,6 @@ export interface BodyProps extends TextProps {
4
4
  readonly color?: 'default' | 'secondary' | 'primary';
5
5
  readonly disabled?: boolean;
6
6
  readonly paragraph?: boolean;
7
- readonly weight?: 'regular' | 'medium' | 'bold';
7
+ readonly weight?: 'regular' | 'bold';
8
8
  }
9
9
  export declare const Body: ({ base, color, disabled, paragraph, weight, style, ...other }: BodyProps) => import("react").JSX.Element;
package/dist/components/Typography/Body.js CHANGED
@@ -13,19 +13,19 @@ export const Body = ({ base, color = 'default', disabled, paragraph, weight = 'r
13
13
  };
14
14
  const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
15
15
  text: {
16
- fontSize: typography.Size['text-lg'],
16
+ fontSize: typography.Size['text-base'],
17
17
  includeFontPadding: false,
18
18
  verticalAlign: 'middle',
19
19
  fontFamily: fonts.secondary,
20
+ lineHeight: 20,
20
21
  },
21
22
  regular: { fontWeight: 400 },
22
- medium: { fontWeight: 500 },
23
- bold: { fontWeight: 700 },
23
+ bold: { fontWeight: 700, letterSpacing: -0.5 },
24
24
  default: { color: theme.General.textColor },
25
25
  primary: { color: theme.General.primaryColor },
26
26
  secondary: { color: theme.General.textSecondaryColor },
27
- base: { fontSize: typography.Size['text-base'] },
28
- paragraph: { fontSize: typography.Size['text-lg'] },
29
- paragraphBase: { fontSize: typography.Size['text-base'] },
27
+ base: { fontSize: typography.Size['text-sm'], lineHeight: 18 },
28
+ paragraph: { lineHeight: 24 },
29
+ paragraphBase: { lineHeight: 21 },
30
30
  disabled: { opacity: 0.6 },
31
31
  }));
package/dist/components/Typography/Caption.js CHANGED
@@ -29,7 +29,9 @@ const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({
29
29
  fontSize: typography.Size['text-sm'],
30
30
  includeFontPadding: false,
31
31
  verticalAlign: 'middle',
32
- fontFamily: fonts.primary,
32
+ fontFamily: fonts.secondary,
33
+ lineHeight: 15,
34
+ letterSpacing: -0.25,
33
35
  },
34
36
  textWithIcon: { flexShrink: 1 },
35
37
  default: { color: theme.General.textColor },
package/dist/components/Typography/Service.js CHANGED
@@ -20,7 +20,7 @@ export const Service = ({ variant = 'success', showIcon = true, base = true, Ico
20
20
  iconSize: base ? styles.iconBase : styles.icon,
21
21
  textStyles: [
22
22
  styles.textCommon,
23
- base ? styles.textBase : styles.text,
23
+ base && styles.textBase,
24
24
  iconMap[variant]?.style || styles.info,
25
25
  ],
26
26
  containerStyle: base ? styles.containerBase : styles.container,
@@ -55,12 +55,12 @@ const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({
55
55
  verticalAlign: 'middle',
56
56
  flexShrink: 1,
57
57
  fontWeight: 400,
58
- },
59
- textBase: {
60
- fontSize: typography.Size['text-base'],
58
+ fontSize: typography.Size['text-sm'],
61
59
  fontFamily: fonts.secondary,
60
+ lineHeight: 15,
61
+ letterSpacing: -0.25,
62
62
  },
63
- text: { fontSize: typography.Size['text-sm'], fontFamily: fonts.primary },
63
+ textBase: { lineHeight: undefined, fontSize: typography.Size['text-base'] },
64
64
  warning: { color: typography.Color.Service['text-warning'] },
65
65
  success: { color: typography.Color.Service['text-success'] },
66
66
  info: { color: typography.Color.Service['text-info'] },
package/dist/components/Typography/Subtitle.js CHANGED
@@ -8,12 +8,13 @@ import { StyleSheet } from 'react-native-unistyles';
8
8
  export const Subtitle = memo(({ base = false, color = 'default', style, ...other }) => (<Text style={[styles.text, styles[color], base && styles.base, style]} testID='Subtitle' {...other}/>));
9
9
  const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
10
10
  text: {
11
- fontSize: typography.Size['text-sm'],
11
+ fontSize: typography.Size['text-xs'],
12
12
  fontWeight: 700,
13
13
  textTransform: 'uppercase',
14
- fontFamily: fonts.primary,
14
+ fontFamily: fonts.secondary,
15
+ lineHeight: 15,
15
16
  },
16
- base: { fontSize: typography.Size['text-base'], fontFamily: fonts.secondary },
17
+ base: { lineHeight: 18, fontSize: typography.Size['text-sm'] },
17
18
  default: { color: theme.General.textColor },
18
19
  primary: { color: theme.General.primaryColor },
19
20
  secondary: { color: theme.General.textSecondaryColor },
package/dist/components/Typography/Title.js CHANGED
@@ -9,13 +9,13 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
9
9
  includeFontPadding: false,
10
10
  verticalAlign: 'middle',
11
11
  },
12
- d1: { fontSize: typography.Size['text-6xl'] },
13
- d2: { fontSize: typography.Size['text-5xl'] },
14
- d3: { fontSize: typography.Size['text-4xl'] },
15
- h1: { fontSize: typography.Size['text-3xl'] },
16
- h2: { fontSize: typography.Size['text-2xl'] },
17
- h3: { fontSize: typography.Size['text-xl'] },
18
- h4: { fontSize: typography.Size['text-lg'] },
19
- h5: { fontSize: typography.Size['text-base'] },
20
- h6: { fontSize: typography.Size['text-sm'] },
12
+ d1: { fontSize: typography.Size['text-5xl'] },
13
+ d2: { fontSize: typography.Size['text-4xl'] },
14
+ d3: { fontSize: typography.Size['text-3xl'] },
15
+ h1: { fontSize: typography.Size['text-2xl'] },
16
+ h2: { fontSize: typography.Size['text-xl'] },
17
+ h3: { fontSize: typography.Size['text-lg'] },
18
+ h4: { fontSize: typography.Size['text-base'] },
19
+ h5: { fontSize: typography.Size['text-sm'] },
20
+ h6: { fontSize: typography.Size['text-xs'] },
21
21
  }));
package/dist/theme/assets/themeDark.json CHANGED
@@ -170,7 +170,7 @@
170
170
  "actionIconHoverColor": "#ffffff",
171
171
  "actionIconHoverBorderColor": "rgba(0, 0, 0, 0.0001)",
172
172
  "fontFamily": "TT Fellows, Roboto, Inter, Helvetica, Arial, sans-serif",
173
- "fontFamilySecondary": "PT Sans, Roboto, Inter, Helvetica, Arial, sans-serif",
173
+ "fontFamilySecondary": "Noto Sans, Roboto, Inter, Helvetica, Arial, sans-serif",
174
174
  "fontWeight": "normal",
175
175
  "disabledOpacity": "0.6",
176
176
  "divider": "1px solid $dividerColor",
package/dist/theme/assets/themeLight.json CHANGED
@@ -170,7 +170,7 @@
170
170
  "actionIconHoverColor": "rgba(0, 0, 0, 0.8000)",
171
171
  "actionIconHoverBorderColor": "rgba(255, 255, 255, 0.0001)",
172
172
  "fontFamily": "TT Fellows, Roboto, Inter, Helvetica, Arial, sans-serif",
173
- "fontFamilySecondary": "PT Sans, Roboto, Inter, Helvetica, Arial, sans-serif",
173
+ "fontFamilySecondary": "Noto Sans, Roboto, Inter, Helvetica, Arial, sans-serif",
174
174
  "fontWeight": "normal",
175
175
  "disabledOpacity": "0.6",
176
176
  "divider": "1px solid $dividerColor",
package/dist/theme/darkTheme.js CHANGED
@@ -6,5 +6,5 @@ import { commonTheme } from './commonTheme';
6
6
  export const darkTheme = {
7
7
  theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark },
8
8
  ...commonTheme,
9
- fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
9
+ fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' },
10
10
  };
package/dist/theme/lightTheme.js CHANGED
@@ -6,5 +6,5 @@ import { commonTheme } from './commonTheme';
6
6
  export const lightTheme = {
7
7
  theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight },
8
8
  ...commonTheme,
9
- fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
9
+ fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' },
10
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdek-it/react-native-ui-kit",
3
- "version": "1.0.0-beta.4",
3
+ "version": "1.0.0-beta.6",
4
4
  "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
5
5
  "license": "MIT",
6
6
  "homepage": "https://developer.cdek.ru/design-system",