@gravity-ui/blog-constructor 1.0.0 → 1.1.2
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/CHANGELOG.md +23 -216
- package/README.md +63 -1
- package/build/cjs/blocks/Author/Author.css +31 -0
- package/build/cjs/blocks/Banner/Banner.css +58 -0
- package/build/cjs/blocks/CTA/CTA.css +56 -0
- package/build/cjs/blocks/ColoredText/ColoredText.css +28 -0
- package/build/cjs/blocks/Layout/Layout.css +22 -0
- package/build/cjs/blocks/Media/Media.css +41 -0
- package/build/cjs/blocks/Meta/Meta.css +7 -0
- package/build/cjs/blocks/YFM/__tests__/YFM.test.d.ts +1 -0
- package/build/cjs/blocks/YFM/__tests__/YFM.test.js +16 -0
- package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.css +76 -0
- package/build/cjs/components/FeedHeader/FeedHeader.css +54 -0
- package/build/cjs/components/FeedHeader/components/Controls/Controls.css +108 -0
- package/build/cjs/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +14 -0
- package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +53 -0
- package/build/cjs/components/Paginator/Paginator.css +54 -0
- package/build/cjs/components/PostCard/PostCard.css +85 -0
- package/build/cjs/components/PostInfo/PostInfo.css +88 -0
- package/build/cjs/components/Posts/Posts.css +28 -0
- package/build/cjs/components/PostsEmpty/PostsEmpty.css +25 -0
- package/build/cjs/components/PostsError/PostError.css +30 -0
- package/build/cjs/components/Search/Search.css +32 -0
- package/build/cjs/components/Wrapper/Wrapper.css +32 -0
- package/build/cjs/containers/BlogPage/BlogPage.css +21 -0
- package/build/cjs/containers/BlogPostPage/BlogPostPage.css +251 -0
- package/build/cjs/models/blocks.d.ts +0 -1
- package/build/esm/blocks/Author/Author.css +31 -0
- package/build/esm/blocks/Banner/Banner.css +58 -0
- package/build/esm/blocks/CTA/CTA.css +56 -0
- package/build/esm/blocks/ColoredText/ColoredText.css +28 -0
- package/build/esm/blocks/Layout/Layout.css +22 -0
- package/build/esm/blocks/Media/Media.css +41 -0
- package/build/esm/blocks/Meta/Meta.css +7 -0
- package/build/esm/blocks/YFM/__tests__/YFM.test.d.ts +1 -0
- package/build/esm/blocks/YFM/__tests__/YFM.test.js +11 -0
- package/build/esm/components/ButtonWithIcon/ButtonWithIcon.css +76 -0
- package/build/esm/components/FeedHeader/FeedHeader.css +54 -0
- package/build/esm/components/FeedHeader/components/Controls/Controls.css +108 -0
- package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +14 -0
- package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +53 -0
- package/build/esm/components/Paginator/Paginator.css +54 -0
- package/build/esm/components/PostCard/PostCard.css +85 -0
- package/build/esm/components/PostInfo/PostInfo.css +88 -0
- package/build/esm/components/Posts/Posts.css +28 -0
- package/build/esm/components/PostsEmpty/PostsEmpty.css +25 -0
- package/build/esm/components/PostsError/PostError.css +30 -0
- package/build/esm/components/Search/Search.css +32 -0
- package/build/esm/components/Wrapper/Wrapper.css +32 -0
- package/build/esm/containers/BlogPage/BlogPage.css +21 -0
- package/build/esm/containers/BlogPostPage/BlogPostPage.css +251 -0
- package/build/esm/models/blocks.d.ts +0 -1
- package/package.json +38 -28
- package/server/models/blocks.d.ts +0 -1
- package/styles/mixins.css +2 -0
- package/styles/mixins.scss +0 -11
- package/styles/root.css +21 -0
- package/styles/storybook/index.scss +1 -1
- package/styles/styles.css +196 -0
- package/styles/variables.css +0 -0
- package/styles/yfm.css +103 -0
package/CHANGELOG.md
CHANGED
@@ -1,231 +1,38 @@
|
|
1
|
-
#
|
1
|
+
# Changelog
|
2
2
|
|
3
|
-
##
|
3
|
+
## [1.1.2](https://github.com/gravity-ui/blog-constructor/compare/v1.1.1...v1.1.2) (2023-03-28)
|
4
4
|
|
5
|
-
- Rewrite storybook on ts
|
6
5
|
|
7
|
-
|
6
|
+
### Bug Fixes
|
8
7
|
|
9
|
-
|
8
|
+
* add info about release ([#19](https://github.com/gravity-ui/blog-constructor/issues/19)) ([8a5824f](https://github.com/gravity-ui/blog-constructor/commit/8a5824f24c4ad85f0f122111f8f5c1e7c36becc5))
|
10
9
|
|
11
|
-
## 0.
|
10
|
+
## [1.1.1](https://github.com/gravity-ui/blog-constructor/compare/v1.1.0...v1.1.1) (2023-03-28)
|
12
11
|
|
13
|
-
### Breaking changes
|
14
12
|
|
15
|
-
|
16
|
-
- Update react to 18.2.0
|
17
|
-
- Update TS to 4.9.3
|
13
|
+
### Bug Fixes
|
18
14
|
|
19
|
-
|
15
|
+
* add info about ci in readme ([#17](https://github.com/gravity-ui/blog-constructor/issues/17)) ([b6cffaa](https://github.com/gravity-ui/blog-constructor/commit/b6cffaa1c255c53cd00d06d4fbe0330e117f42a0))
|
20
16
|
|
21
|
-
|
17
|
+
## 1.1.0 (2023-03-28)
|
22
18
|
|
23
|
-
|
19
|
+
### Features
|
24
20
|
|
25
|
-
|
21
|
+
- add workflows, update @types/react, small refactors, update Select ([#2](https://github.com/gravity-ui/blog-constructor/issues/2)) ([326247a](https://github.com/gravity-ui/blog-constructor/commit/326247abe9411b50c82ed2cfa516ac6cd341bfa7))
|
22
|
+
- Brush up stories, add content for CTA, Layout, Feed blocks. ([#4](https://github.com/gravity-ui/blog-constructor/issues/4)) ([0b73537](https://github.com/gravity-ui/blog-constructor/commit/0b73537b3bae35eca10610963369f3f5d8f9ecbd))
|
23
|
+
- export author type ([9e5ee34](https://github.com/gravity-ui/blog-constructor/commit/9e5ee34c6b4d1b3288cda1258160e22073f9ad9d))
|
24
|
+
- fix button savedOnly color ([#9](https://github.com/gravity-ui/blog-constructor/issues/9)) ([ef3b1ca](https://github.com/gravity-ui/blog-constructor/commit/ef3b1ca9048f1218817ec5c9c6a5b3e05492f062))
|
25
|
+
- init tests ([#1](https://github.com/gravity-ui/blog-constructor/issues/1)) ([f8df32f](https://github.com/gravity-ui/blog-constructor/commit/f8df32f3eccb97abc7bfef222aca1ea56421619b))
|
26
|
+
- **navigation:** pass the PageConstructor's navigation prop ([cb875ff](https://github.com/gravity-ui/blog-constructor/commit/cb875ff708832f5dd9e121d67cfccb387ae2499f))
|
27
|
+
- uninstall doctools/components ([#14](https://github.com/gravity-ui/blog-constructor/issues/14)) ([16dc64c](https://github.com/gravity-ui/blog-constructor/commit/16dc64c3002b614831880dbe5b250c5637031c7d))
|
28
|
+
- update license ([#3](https://github.com/gravity-ui/blog-constructor/issues/3)) ([aa4ee5b](https://github.com/gravity-ui/blog-constructor/commit/aa4ee5bdd01a7db5f6c6c457836658761eee1099))
|
29
|
+
- update readme ([#15](https://github.com/gravity-ui/blog-constructor/issues/15)) ([3dbdf78](https://github.com/gravity-ui/blog-constructor/commit/3dbdf78b35f93024bebbcf64a6f06fb01509ae3e))
|
26
30
|
|
27
|
-
|
31
|
+
### Bug Fixes
|
28
32
|
|
29
|
-
|
33
|
+
- **general:** better deps ([8c22384](https://github.com/gravity-ui/blog-constructor/commit/8c223848e47faf8b9beee6700afce317359ee226))
|
34
|
+
- search input width ([051c145](https://github.com/gravity-ui/blog-constructor/commit/051c14502110306964c4ec9a2bea47cea9364db5))
|
30
35
|
|
31
|
-
|
36
|
+
## 1.0.0
|
32
37
|
|
33
|
-
|
34
|
-
|
35
|
-
- @gravity-ui/uikit 3.9.0
|
36
|
-
|
37
|
-
## 0.16.1
|
38
|
-
|
39
|
-
- Fix for treating page number on fetch
|
40
|
-
|
41
|
-
## 0.16.0
|
42
|
-
|
43
|
-
- Show "-" in filters selector switchers when only one broken filter provided in a query
|
44
|
-
|
45
|
-
## 0.15.1
|
46
|
-
|
47
|
-
- Do not show pointer cursor on save button title hover when the button is not clickable
|
48
|
-
|
49
|
-
## 0.15.0
|
50
|
-
|
51
|
-
- Prevent save button to be clickable when user is not logged in
|
52
|
-
|
53
|
-
## 0.14.0
|
54
|
-
|
55
|
-
- Refactor metaProps in BlogPostPage
|
56
|
-
|
57
|
-
## 0.13.0
|
58
|
-
|
59
|
-
- Remove temporal flag of icon selection
|
60
|
-
|
61
|
-
## 0.12.4
|
62
|
-
|
63
|
-
- Prevent collapse of a custom switcher on a blog feed
|
64
|
-
|
65
|
-
## 0.12.2
|
66
|
-
|
67
|
-
- Update types for getBlogPosts handler
|
68
|
-
|
69
|
-
## 0.12.1
|
70
|
-
|
71
|
-
- Render post card title via dangerouslySetInnerHTML
|
72
|
-
|
73
|
-
## 0.12.0
|
74
|
-
|
75
|
-
- Update page change logic when interactions with blog search panel
|
76
|
-
|
77
|
-
## 0.11.1
|
78
|
-
|
79
|
-
- **BlogYFM**: add `yfm_no-list-reset` class
|
80
|
-
|
81
|
-
## 0.11.0
|
82
|
-
|
83
|
-
- Refactor styles (kebab, prefix, variables)
|
84
|
-
|
85
|
-
## 0.10.2
|
86
|
-
|
87
|
-
- Add teamcity publish
|
88
|
-
|
89
|
-
## 0.10.1
|
90
|
-
|
91
|
-
- BlogPostTag types became Partial, BlogPostTagExtended is deleted
|
92
|
-
|
93
|
-
## 0.10.0
|
94
|
-
|
95
|
-
- add props for show support buttons in paginator
|
96
|
-
|
97
|
-
## 0.9.2
|
98
|
-
|
99
|
-
- added yfm headers weight style
|
100
|
-
|
101
|
-
## 0.9.1
|
102
|
-
|
103
|
-
- add specificity for search input styles
|
104
|
-
|
105
|
-
## 0.9.0
|
106
|
-
|
107
|
-
- add customization for sharing options in blog posts
|
108
|
-
|
109
|
-
## 0.8.0
|
110
|
-
|
111
|
-
- add BlogPage with gravity-ui requirements
|
112
|
-
|
113
|
-
## 0.7.1
|
114
|
-
|
115
|
-
- Add info about publish in readme
|
116
|
-
|
117
|
-
## 0.7.0
|
118
|
-
|
119
|
-
- Change packages @yandex-cloud => @gravity-ui
|
120
|
-
- Remove i18n from peer dependencies
|
121
|
-
|
122
|
-
## 0.6.30
|
123
|
-
|
124
|
-
- add BlogPage
|
125
|
-
|
126
|
-
## 0.5.10
|
127
|
-
|
128
|
-
- fix yfm styles for table
|
129
|
-
|
130
|
-
## 0.5.9
|
131
|
-
|
132
|
-
- fix yfm styles
|
133
|
-
|
134
|
-
## 0.5.8
|
135
|
-
|
136
|
-
- delete selection of blog structure
|
137
|
-
|
138
|
-
## 0.5.7
|
139
|
-
|
140
|
-
- color variables updates
|
141
|
-
|
142
|
-
## 0.5.6
|
143
|
-
|
144
|
-
- change transformPostTags() routine
|
145
|
-
|
146
|
-
## 0.5.5
|
147
|
-
|
148
|
-
- add page-constructor in peer-dependencies
|
149
|
-
|
150
|
-
## 0.5.3
|
151
|
-
|
152
|
-
- fix yfm styles: add css variables to be able to redefine styles in projects
|
153
|
-
|
154
|
-
## 0.5.2
|
155
|
-
|
156
|
-
- condition for likes in cards
|
157
|
-
|
158
|
-
## 0.5.1
|
159
|
-
|
160
|
-
- refactor LocaleContext
|
161
|
-
- refactor RouterContext
|
162
|
-
- now likes is not required props
|
163
|
-
|
164
|
-
## 0.4.3
|
165
|
-
|
166
|
-
- Back previously patch
|
167
|
-
|
168
|
-
## 0.4.2
|
169
|
-
|
170
|
-
- Fix meta
|
171
|
-
|
172
|
-
## 0.4.1
|
173
|
-
|
174
|
-
- Fix share button
|
175
|
-
- now region props is not required in TransformPageContentPropsType
|
176
|
-
|
177
|
-
## 0.4.0
|
178
|
-
|
179
|
-
- Add likes state update conditions
|
180
|
-
|
181
|
-
## 0.3.1
|
182
|
-
|
183
|
-
- Add metaData render condition
|
184
|
-
|
185
|
-
## 0.3.0
|
186
|
-
|
187
|
-
- Update props metaData
|
188
|
-
|
189
|
-
## 0.2.3
|
190
|
-
|
191
|
-
- Update types and namings
|
192
|
-
|
193
|
-
## 0.2.2
|
194
|
-
|
195
|
-
- Update styles
|
196
|
-
|
197
|
-
## 0.2.1
|
198
|
-
|
199
|
-
- Add default color for avatars (grey)
|
200
|
-
|
201
|
-
## 0.2.0
|
202
|
-
|
203
|
-
- Custom hook for likes
|
204
|
-
|
205
|
-
- Change props for BlogPostPage
|
206
|
-
- delete:
|
207
|
-
- data
|
208
|
-
- add:
|
209
|
-
- likes
|
210
|
-
- content
|
211
|
-
- post
|
212
|
-
|
213
|
-
## 0.1.0
|
214
|
-
|
215
|
-
- Refactor business-logic BlogSuggets
|
216
|
-
|
217
|
-
## 0.0.4
|
218
|
-
|
219
|
-
- Delete extra requirements
|
220
|
-
|
221
|
-
## 0.0.3
|
222
|
-
|
223
|
-
- Refactor BlogContextProvider
|
224
|
-
|
225
|
-
## 0.0.2
|
226
|
-
|
227
|
-
- Meta fixes
|
228
|
-
|
229
|
-
## 0.0.1
|
230
|
-
|
231
|
-
- Create first version including Blog Post Page
|
38
|
+
Create public access for blog-constructor library for creating blog format web pages.
|
package/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
# @gravity-ui/blog-constructor ·
|
1
|
+
# @gravity-ui/blog-constructor · [](https://www.npmjs.com/package/@gravity-ui/blog-constructor) [](https://github.com/gravity-ui/blog-constructor/actions/workflows/ci.yml?query=branch:main) [](https://github.com/gravity-ui/blog-constructor/actions/workflows/release.yml?query=branch:main) [](https://preview.yandexcloud.dev/blog-constructor/)
|
2
2
|
|
3
3
|
## Install
|
4
4
|
|
@@ -6,6 +6,68 @@
|
|
6
6
|
npm install @gravity-ui/blog-constructor
|
7
7
|
```
|
8
8
|
|
9
|
+
## Blog-constructor
|
10
|
+
|
11
|
+
`Blog-constructor` is a library based on the [Page-constructor](https://github.com/gravity-ui/page-constructor) library for creating blog format web pages. Blog-constructor uses the [`custom`](https://github.com/gravity-ui/page-constructor#custom-blocks) prop from page-constructor to add the components needed for the blog.
|
12
|
+
|
13
|
+
### Documentation - [storybook](https://preview.yandexcloud.dev/blog-constructor/)
|
14
|
+
|
15
|
+
### Getting started
|
16
|
+
|
17
|
+
The blog-constructor has both client components and server components for import. The blog pages is imported as a React component. To make sure it runs properly, wrap it in `BlogConstructorProvider`:
|
18
|
+
|
19
|
+
```jsx
|
20
|
+
import {BlogPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';
|
21
|
+
|
22
|
+
// Main blog page
|
23
|
+
<BlogConstructorProvider {...providerProps}>
|
24
|
+
<BlogPage
|
25
|
+
content={content}
|
26
|
+
posts={posts}
|
27
|
+
tags={tags}
|
28
|
+
getPosts={handleGetPosts}
|
29
|
+
settings={settings}
|
30
|
+
/>
|
31
|
+
</BlogConstructorProvider>
|
32
|
+
|
33
|
+
---
|
34
|
+
|
35
|
+
import {BlogPostPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';
|
36
|
+
|
37
|
+
// Post page
|
38
|
+
<BlogConstructorProvider {...providerProps}>
|
39
|
+
<BlogPostPage
|
40
|
+
content={content}
|
41
|
+
post={post}
|
42
|
+
suggestedPosts={suggestedPosts}
|
43
|
+
settings={settings}
|
44
|
+
shareOptions={shareOptions}
|
45
|
+
/>
|
46
|
+
</BlogConstructorProvider>
|
47
|
+
|
48
|
+
```
|
49
|
+
|
50
|
+
Also blog-constructor have server components to help you transform your data if you need
|
51
|
+
|
52
|
+
```jsx
|
53
|
+
import {
|
54
|
+
transformPost,
|
55
|
+
sanitizeMeta,
|
56
|
+
createReadableContent,
|
57
|
+
transformPageContent,
|
58
|
+
} from '@gravity-ui/blog-constructor/server';
|
59
|
+
```
|
60
|
+
|
61
|
+
## i18n
|
62
|
+
|
63
|
+
To make sure the i18n library used in your project runs properly, perform its initialization and set the project's current locale value in `lang`. For example:
|
64
|
+
|
65
|
+
```typescript
|
66
|
+
import {configure, Lang} from '@gravity-ui/blog-constructor';
|
67
|
+
|
68
|
+
configure({lang: Lang.En});
|
69
|
+
```
|
70
|
+
|
9
71
|
## Development
|
10
72
|
|
11
73
|
```bash
|
@@ -0,0 +1,31 @@
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
2
|
+
unpredictable css rules order in build */
|
3
|
+
.bc-author__layout {
|
4
|
+
display: flex;
|
5
|
+
align-items: flex-start;
|
6
|
+
flex-direction: row;
|
7
|
+
overflow: hidden;
|
8
|
+
}
|
9
|
+
@media (max-width: 1081px) {
|
10
|
+
.bc-author__layout {
|
11
|
+
width: 50%;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
@media (max-width: 577px) {
|
15
|
+
.bc-author__layout {
|
16
|
+
width: 100%;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
.bc-author__description {
|
20
|
+
color: var(--yc-color-text-primary);
|
21
|
+
}
|
22
|
+
.bc-author__content {
|
23
|
+
display: flex;
|
24
|
+
flex-wrap: wrap;
|
25
|
+
justify-content: flex-start;
|
26
|
+
align-content: flex-start;
|
27
|
+
position: relative;
|
28
|
+
}
|
29
|
+
.bc-author__container {
|
30
|
+
background-color: var(--yc-color-promo-base-silver);
|
31
|
+
}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
2
|
+
unpredictable css rules order in build */
|
3
|
+
.bc-banner {
|
4
|
+
margin-top: 16px;
|
5
|
+
padding-bottom: 16px;
|
6
|
+
}
|
7
|
+
.bc-banner__content {
|
8
|
+
width: 100%;
|
9
|
+
border-radius: var(--bc-border-radius);
|
10
|
+
position: relative;
|
11
|
+
display: flex;
|
12
|
+
flex-direction: row;
|
13
|
+
}
|
14
|
+
.bc-banner__container {
|
15
|
+
width: 100%;
|
16
|
+
border-radius: var(--bc-border-radius);
|
17
|
+
display: flex;
|
18
|
+
min-height: 220px;
|
19
|
+
}
|
20
|
+
.bc-banner__container_offset_large {
|
21
|
+
padding: calc(128px - 96px) 0 16px;
|
22
|
+
margin-bottom: -48px;
|
23
|
+
}
|
24
|
+
.bc-banner__info, .bc-banner__image {
|
25
|
+
flex: 1;
|
26
|
+
}
|
27
|
+
.bc-banner__info {
|
28
|
+
padding: 32px;
|
29
|
+
display: flex;
|
30
|
+
justify-content: space-between;
|
31
|
+
flex-direction: column;
|
32
|
+
align-items: baseline;
|
33
|
+
}
|
34
|
+
.bc-banner__image {
|
35
|
+
margin: var(--pc-image-padding);
|
36
|
+
border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
|
37
|
+
width: calc(100% - 8px);
|
38
|
+
height: calc(100% - 8px);
|
39
|
+
object-fit: cover;
|
40
|
+
}
|
41
|
+
.bc-banner__image-container {
|
42
|
+
height: 100%;
|
43
|
+
}
|
44
|
+
.bc-banner__image-container_image-size_s {
|
45
|
+
width: 25%;
|
46
|
+
}
|
47
|
+
.bc-banner__image-container_image-size_m {
|
48
|
+
width: 50%;
|
49
|
+
}
|
50
|
+
@media (max-width: 577px) {
|
51
|
+
.bc-banner__content {
|
52
|
+
flex-direction: column;
|
53
|
+
}
|
54
|
+
.bc-banner__image-container_image-size_s, .bc-banner__image-container_image-size_m {
|
55
|
+
width: 100%;
|
56
|
+
height: 236px;
|
57
|
+
}
|
58
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
.bc-cta__card {
|
2
|
+
display: flex;
|
3
|
+
background-color: var(--yc-color-base-float);
|
4
|
+
border-radius: var(--bc-border-radius);
|
5
|
+
min-height: 80px;
|
6
|
+
align-content: center;
|
7
|
+
justify-content: center;
|
8
|
+
flex-direction: column;
|
9
|
+
flex-grow: 1;
|
10
|
+
padding: 32px;
|
11
|
+
}
|
12
|
+
.bc-cta__button {
|
13
|
+
display: flex;
|
14
|
+
padding-bottom: 16px;
|
15
|
+
}
|
16
|
+
.bc-cta__content {
|
17
|
+
display: flex;
|
18
|
+
flex-direction: column;
|
19
|
+
}
|
20
|
+
@media (min-width: 577px) {
|
21
|
+
.bc-cta__content {
|
22
|
+
display: flex;
|
23
|
+
flex-direction: row;
|
24
|
+
}
|
25
|
+
.bc-cta__button {
|
26
|
+
padding-bottom: 0px;
|
27
|
+
}
|
28
|
+
.bc-cta__button_layout {
|
29
|
+
width: 100%;
|
30
|
+
max-width: 100%;
|
31
|
+
margin-right: 0px;
|
32
|
+
}
|
33
|
+
.bc-cta__button_layout_2 {
|
34
|
+
width: calc(50% - (16px / 2));
|
35
|
+
max-width: 50%;
|
36
|
+
margin-right: 16px;
|
37
|
+
}
|
38
|
+
.bc-cta__button_layout_2:nth-child(2n) {
|
39
|
+
margin-right: 0px;
|
40
|
+
}
|
41
|
+
.bc-cta__button_layout_3 {
|
42
|
+
width: calc(33.3333333333% - (32px / 3));
|
43
|
+
margin-right: 16px;
|
44
|
+
}
|
45
|
+
.bc-cta__button_layout_3:nth-child(3n) {
|
46
|
+
margin-right: 0px;
|
47
|
+
}
|
48
|
+
.bc-cta__button_layout_4 {
|
49
|
+
width: calc(25% - (48px / 4));
|
50
|
+
max-width: 50%;
|
51
|
+
margin-right: 16px;
|
52
|
+
}
|
53
|
+
.bc-cta__button_layout_4:nth-child(4n) {
|
54
|
+
margin-right: 0px;
|
55
|
+
}
|
56
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
.bc-colored-text__container {
|
2
|
+
display: flex;
|
3
|
+
border-radius: var(--bc-border-radius);
|
4
|
+
overflow: hidden;
|
5
|
+
position: relative;
|
6
|
+
}
|
7
|
+
.bc-colored-text__picture-container {
|
8
|
+
position: absolute;
|
9
|
+
overflow: hidden;
|
10
|
+
width: 100%;
|
11
|
+
height: 100%;
|
12
|
+
border-radius: var(--bc-border-radius);
|
13
|
+
z-index: 1;
|
14
|
+
top: 0;
|
15
|
+
left: 0;
|
16
|
+
}
|
17
|
+
.bc-colored-text__picture {
|
18
|
+
object-fit: cover;
|
19
|
+
height: 100%;
|
20
|
+
width: 100%;
|
21
|
+
}
|
22
|
+
.bc-colored-text__text-content {
|
23
|
+
position: inherit;
|
24
|
+
z-index: 2;
|
25
|
+
height: 100%;
|
26
|
+
width: 100%;
|
27
|
+
padding: 32px;
|
28
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
2
|
+
unpredictable css rules order in build */
|
3
|
+
.bc-layout {
|
4
|
+
margin: 0;
|
5
|
+
padding: 0;
|
6
|
+
}
|
7
|
+
.bc-layout__left-col.bc-layout__left-col {
|
8
|
+
padding: 0;
|
9
|
+
}
|
10
|
+
|
11
|
+
.bc-layout__right-col.bc-layout__right-col {
|
12
|
+
padding: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
.bc-layout__row {
|
16
|
+
padding: 0;
|
17
|
+
margin: 0;
|
18
|
+
}
|
19
|
+
.bc-layout__item {
|
20
|
+
margin: 0;
|
21
|
+
padding: 0 8px;
|
22
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
2
|
+
unpredictable css rules order in build */
|
3
|
+
.bc-media__text-content {
|
4
|
+
padding-top: 16px;
|
5
|
+
}
|
6
|
+
.bc-media__container {
|
7
|
+
position: relative;
|
8
|
+
height: 100%;
|
9
|
+
}
|
10
|
+
.bc-media__border {
|
11
|
+
position: relative;
|
12
|
+
height: 100%;
|
13
|
+
width: 100%;
|
14
|
+
border-radius: calc(var(--bc-border-radius) + 1px);
|
15
|
+
border: 1px solid var(--yc-color-line-generic);
|
16
|
+
overflow: hidden;
|
17
|
+
}
|
18
|
+
.bc-media__content {
|
19
|
+
position: relative;
|
20
|
+
top: 0;
|
21
|
+
right: 0;
|
22
|
+
width: 100%;
|
23
|
+
height: 100%;
|
24
|
+
overflow: hidden;
|
25
|
+
object-fit: cover;
|
26
|
+
border-radius: var(--bc-border-radius);
|
27
|
+
}
|
28
|
+
.bc-media__video {
|
29
|
+
height: 100%;
|
30
|
+
}
|
31
|
+
.bc-media__video > video {
|
32
|
+
width: 100%;
|
33
|
+
height: auto;
|
34
|
+
border-radius: var(--bc-border-radius);
|
35
|
+
}
|
36
|
+
.bc-media__image {
|
37
|
+
width: 100%;
|
38
|
+
height: 100%;
|
39
|
+
object-fit: cover;
|
40
|
+
border-radius: var(--bc-border-radius);
|
41
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
const react_1 = __importDefault(require("react"));
|
7
|
+
const react_2 = require("@testing-library/react");
|
8
|
+
const YFM_1 = require("../YFM");
|
9
|
+
const text = 'YFM block';
|
10
|
+
describe('YFM', () => {
|
11
|
+
test('Has id', async () => {
|
12
|
+
(0, react_2.render)(react_1.default.createElement(YFM_1.YFM, { text: text }));
|
13
|
+
const yfm = react_2.screen.getByText(text);
|
14
|
+
expect(yfm).toHaveClass('yfm');
|
15
|
+
});
|
16
|
+
});
|
@@ -0,0 +1,76 @@
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
2
|
+
unpredictable css rules order in build */
|
3
|
+
.bc-button-with-icon {
|
4
|
+
display: inline-block;
|
5
|
+
margin: 0;
|
6
|
+
padding: 0;
|
7
|
+
font: inherit;
|
8
|
+
border: none;
|
9
|
+
outline: none;
|
10
|
+
color: inherit;
|
11
|
+
background: none;
|
12
|
+
cursor: pointer;
|
13
|
+
outline: none;
|
14
|
+
display: flex;
|
15
|
+
align-items: center;
|
16
|
+
justify-content: center;
|
17
|
+
transition: color 0.2s;
|
18
|
+
}
|
19
|
+
.utilityfocus .bc-button-with-icon:focus {
|
20
|
+
outline: 2px solid #ffdb4d;
|
21
|
+
}
|
22
|
+
.bc-button-with-icon_size_xs {
|
23
|
+
height: 24px;
|
24
|
+
width: 24px;
|
25
|
+
}
|
26
|
+
.bc-button-with-icon_size_s {
|
27
|
+
height: 28px;
|
28
|
+
width: 28px;
|
29
|
+
}
|
30
|
+
.bc-button-with-icon_size_m {
|
31
|
+
height: 32px;
|
32
|
+
width: 32px;
|
33
|
+
}
|
34
|
+
.bc-button-with-icon_size_n {
|
35
|
+
height: 36px;
|
36
|
+
width: 36px;
|
37
|
+
}
|
38
|
+
.bc-button-with-icon_theme_primary {
|
39
|
+
color: var(--www-text-content-color);
|
40
|
+
transition: color 0.2s;
|
41
|
+
}
|
42
|
+
.bc-button-with-icon_theme_primary:hover {
|
43
|
+
color: var(--yc-color-text-primary);
|
44
|
+
}
|
45
|
+
.bc-button-with-icon_theme_secondary {
|
46
|
+
color: var(--yc-color-text-secondary);
|
47
|
+
transition: color 0.2s;
|
48
|
+
}
|
49
|
+
.bc-button-with-icon_theme_secondary:hover {
|
50
|
+
color: var(--www-text-content-color);
|
51
|
+
}
|
52
|
+
.bc-button-with-icon_theme_link {
|
53
|
+
color: var(--www-text-content-color);
|
54
|
+
transition: color 0.2s;
|
55
|
+
}
|
56
|
+
.bc-button-with-icon_theme_link:hover {
|
57
|
+
color: var(--yc-color-text-link-hover);
|
58
|
+
}
|
59
|
+
.bc-button-with-icon_theme_accent {
|
60
|
+
color: var(--yc-color-text-yandex-red);
|
61
|
+
transition: opacity 0.2s;
|
62
|
+
opacity: 0.7;
|
63
|
+
}
|
64
|
+
.bc-button-with-icon_theme_accent:hover {
|
65
|
+
opacity: 1;
|
66
|
+
}
|
67
|
+
.bc-button-with-icon_disabled {
|
68
|
+
cursor: default;
|
69
|
+
color: var(--yc-color-text-secondary);
|
70
|
+
}
|
71
|
+
.bc-button-with-icon_disabled:hover {
|
72
|
+
color: var(--yc-color-text-secondary);
|
73
|
+
}
|
74
|
+
.mobile .bc-button-with-icon:hover {
|
75
|
+
color: inherit;
|
76
|
+
}
|