@meduza/ui-kit-2 0.8.601 → 0.8.603

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 (11) hide show
  1. package/dist/ui-kit-2.cjs.development.js +6 -3
  2. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  3. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  4. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  5. package/dist/ui-kit-2.esm.js +6 -3
  6. package/dist/ui-kit-2.esm.js.map +1 -1
  7. package/dist/ui-kit-game.css +6 -6
  8. package/dist/ui-kit.css +6 -6
  9. package/package.json +1 -1
  10. package/src/Meta/Meta.module.css +6 -6
  11. package/src/Meta/MetaContainer.tsx +129 -122
package/dist/ui-kit-game.css CHANGED
@@ -2335,6 +2335,12 @@
2335
2335
  background-color: #4f4f4f;
2336
2336
  }
2337
2337
 
2338
+ .Meta-module_containerInDynamicBlock__YSh66 {
2339
+ position: absolute;
2340
+ bottom: 20px;
2341
+ left: 54px;
2342
+ }
2343
+
2338
2344
  .Meta-module_root__H-Q4d {
2339
2345
  font-size: 12px;
2340
2346
 
@@ -2346,12 +2352,6 @@
2346
2352
  fill: inherit;
2347
2353
  }
2348
2354
 
2349
- .Meta-module_isInDynamicBlock__iuEI0 {
2350
- position: absolute;
2351
- bottom: 20px;
2352
- left: 54px;
2353
- }
2354
-
2355
2355
  .Meta-module_rich__dCkJK,
2356
2356
  .Meta-module_podcast__MI8gD,
2357
2357
  .Meta-module_episode__0n9CF,
package/dist/ui-kit.css CHANGED
@@ -2335,6 +2335,12 @@
2335
2335
  background-color: #4f4f4f;
2336
2336
  }
2337
2337
 
2338
+ .Meta-module_containerInDynamicBlock__YSh66 {
2339
+ position: absolute;
2340
+ bottom: 20px;
2341
+ left: 54px;
2342
+ }
2343
+
2338
2344
  .Meta-module_root__H-Q4d {
2339
2345
  font-size: 12px;
2340
2346
 
@@ -2346,12 +2352,6 @@
2346
2352
  fill: inherit;
2347
2353
  }
2348
2354
 
2349
- .Meta-module_isInDynamicBlock__iuEI0 {
2350
- position: absolute;
2351
- bottom: 20px;
2352
- left: 54px;
2353
- }
2354
-
2355
2355
  .Meta-module_rich__dCkJK,
2356
2356
  .Meta-module_podcast__MI8gD,
2357
2357
  .Meta-module_episode__0n9CF,
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.8.601",
2
+ "version": "0.8.603",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
package/src/Meta/Meta.module.css CHANGED
@@ -1,3 +1,9 @@
1
+ .containerInDynamicBlock {
2
+ position: absolute;
3
+ bottom: 20px;
4
+ left: 54px;
5
+ }
6
+
1
7
  .root {
2
8
  font-size: 12px;
3
9
 
@@ -9,12 +15,6 @@
9
15
  fill: inherit;
10
16
  }
11
17
 
12
- .isInDynamicBlock {
13
- position: absolute;
14
- bottom: 20px;
15
- left: 54px;
16
- }
17
-
18
18
  .rich,
19
19
  .podcast,
20
20
  .episode,
package/src/Meta/MetaContainer.tsx CHANGED
@@ -9,6 +9,7 @@ import { DocumentItemsCount } from '../DocumentItemsCount'
9
9
  import { BookmarkButton } from '../BookmarkButton'
10
10
  import { Timestamp } from '../Timestamp'
11
11
  import { SvgSymbol } from '../SvgSymbol'
12
+ import { makeClassName, ClassNames } from '../utils/makeClassName'
12
13
 
13
14
  import { TimestampProps } from '../Timestamp/Timestamp.types'
14
15
 
@@ -41,139 +42,145 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
41
42
 
42
43
  const hasSource = !!components.find((item) => item.type === 'source_name')
43
44
 
45
+ const classNames: ClassNames = [
46
+ [styles.containerInDynamicBlock, styleContext === 'isInDynamicBlock']
47
+ ]
48
+
44
49
  return (
45
- <Meta
46
- styleContext={context}
47
- theme={theme || themeColor}
48
- onlyOn={block.only_on}
49
- hasSource={hasSource}
50
- >
51
- {components.map((component) => {
52
- switch (component.type) {
53
- case 'source_name': {
54
- return (
55
- <MetaItem hasSource={hasSource} bullets key={component.id}>
56
- <>
57
- {lang === 'ru' ? 'Источник: ' : 'Source: '}
58
- {component.url && (
59
- <a
60
- href={component.url}
61
- rel="noopener noreferrer"
62
- target="_blank"
63
- >
64
- {component.text}
65
- </a>
66
- )}
67
- {!component.url && component.text}
68
- </>
69
- </MetaItem>
70
- )
71
- }
72
- case 'duration': {
73
- if (styleContext === 'isInDynamicBlock') {
50
+ <div className={makeClassName(classNames)}>
51
+ <Meta
52
+ styleContext={context}
53
+ theme={theme || themeColor}
54
+ onlyOn={block.only_on}
55
+ hasSource={hasSource}
56
+ >
57
+ {components.map((component) => {
58
+ switch (component.type) {
59
+ case 'source_name': {
74
60
  return (
75
61
  <MetaItem hasSource={hasSource} bullets key={component.id}>
76
- {component.text}
62
+ <>
63
+ {lang === 'ru' ? 'Источник: ' : 'Source: '}
64
+ {component.url && (
65
+ <a
66
+ href={component.url}
67
+ rel="noopener noreferrer"
68
+ target="_blank"
69
+ >
70
+ {component.text}
71
+ </a>
72
+ )}
73
+ {!component.url && component.text}
74
+ </>
77
75
  </MetaItem>
78
76
  )
79
77
  }
80
- return (
81
- <MetaItem hasSource={hasSource} bullets key={component.id}>
82
- <>
83
- <SvgSymbol icon="podcast" size="small" />
84
- {component.text}
85
- </>
86
- </MetaItem>
87
- )
88
- }
89
- case 'datetime': {
90
- const format = ((component.format && toCamel(component.format)) ||
91
- 'date') as TimestampProps['type']
92
-
93
- return (
94
- <MetaItem
95
- hasSource={hasSource}
96
- bullets
97
- key={component.id}
98
- type="datetime"
99
- >
100
- <Timestamp
101
- publishedAt={component.datetime}
102
- type={
103
- styleContext === 'isInDynamicBlock'
104
- ? 'fromNow'
105
- : format || 'date'
106
- }
107
- locale={lang}
108
- />
109
- </MetaItem>
110
- )
111
- }
78
+ case 'duration': {
79
+ if (styleContext === 'isInDynamicBlock') {
80
+ return (
81
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
82
+ {component.text}
83
+ </MetaItem>
84
+ )
85
+ }
86
+ return (
87
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
88
+ <>
89
+ <SvgSymbol icon="podcast" size="small" />
90
+ {component.text}
91
+ </>
92
+ </MetaItem>
93
+ )
94
+ }
95
+ case 'datetime': {
96
+ const format = ((component.format && toCamel(component.format)) ||
97
+ 'date') as TimestampProps['type']
112
98
 
113
- case 'items_count': {
114
- return (
115
- <MetaItem hasSource={hasSource} bullets key={component.id}>
116
- <DocumentItemsCount
117
- items={component.count}
118
- type={isPodcast ? 'podcast' : 'card'}
119
- lang={lang}
99
+ return (
100
+ <MetaItem
101
+ hasSource={hasSource}
102
+ bullets
103
+ key={component.id}
104
+ type="datetime"
120
105
  >
121
- <SvgSymbol icon="card" size="unset" />
122
- </DocumentItemsCount>
123
- </MetaItem>
124
- )
125
- }
126
- case 'broadcast_active': {
127
- return (
128
- <MetaItem hasSource={hasSource} bullets key={component.id}>
129
- <>
130
- <MetaItemLive /> Прямой эфир
131
- </>
132
- </MetaItem>
133
- )
134
- }
135
- case 'broadcast': {
136
- return (
137
- <MetaItem hasSource={hasSource} bullets key={component.id}>
138
- <>
139
- {component.with_icon && <MetaItemLive />}
106
+ <Timestamp
107
+ publishedAt={component.datetime}
108
+ type={
109
+ styleContext === 'isInDynamicBlock'
110
+ ? 'fromNow'
111
+ : format || 'date'
112
+ }
113
+ locale={lang}
114
+ />
115
+ </MetaItem>
116
+ )
117
+ }
140
118
 
141
- {component.label}
142
- </>
143
- </MetaItem>
144
- )
145
- }
146
- case 'string': {
147
- return (
148
- <MetaItem hasSource={hasSource} bullets key={component.id}>
149
- {component.text}
150
- </MetaItem>
151
- )
152
- }
119
+ case 'items_count': {
120
+ return (
121
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
122
+ <DocumentItemsCount
123
+ items={component.count}
124
+ type={isPodcast ? 'podcast' : 'card'}
125
+ lang={lang}
126
+ >
127
+ <SvgSymbol icon="card" size="unset" />
128
+ </DocumentItemsCount>
129
+ </MetaItem>
130
+ )
131
+ }
132
+ case 'broadcast_active': {
133
+ return (
134
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
135
+ <>
136
+ <MetaItemLive /> Прямой эфир
137
+ </>
138
+ </MetaItem>
139
+ )
140
+ }
141
+ case 'broadcast': {
142
+ return (
143
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
144
+ <>
145
+ {component.with_icon && <MetaItemLive />}
153
146
 
154
- default: {
155
- return null
147
+ {component.label}
148
+ </>
149
+ </MetaItem>
150
+ )
151
+ }
152
+ case 'string': {
153
+ return (
154
+ <MetaItem hasSource={hasSource} bullets key={component.id}>
155
+ {component.text}
156
+ </MetaItem>
157
+ )
158
+ }
159
+
160
+ default: {
161
+ return null
162
+ }
156
163
  }
157
- }
158
- })}
159
- {(isRead || isListened) && (
160
- <MetaItem
161
- hasSource={hasSource}
162
- bullets
163
- type={isListened ? 'listened' : 'read'}
164
- >
165
- <SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
166
- </MetaItem>
167
- )}
164
+ })}
165
+ {(isRead || isListened) && (
166
+ <MetaItem
167
+ hasSource={hasSource}
168
+ bullets
169
+ type={isListened ? 'listened' : 'read'}
170
+ >
171
+ <SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
172
+ </MetaItem>
173
+ )}
168
174
 
169
- {isSlides && lang === 'ru' && (
170
- <div className={styles.bookmark}>
171
- <BookmarkButton
172
- isInBookmarks={isInBookmarks}
173
- onClick={(): void => bookmarkAction('bookmark', 'top')}
174
- />
175
- </div>
176
- )}
177
- </Meta>
175
+ {isSlides && lang === 'ru' && (
176
+ <div className={styles.bookmark}>
177
+ <BookmarkButton
178
+ isInBookmarks={isInBookmarks}
179
+ onClick={(): void => bookmarkAction('bookmark', 'top')}
180
+ />
181
+ </div>
182
+ )}
183
+ </Meta>
184
+ </div>
178
185
  )
179
186
  }