Skip to content

Commit

Permalink
feat: added description field to companies block (#692)
Browse files Browse the repository at this point in the history
* feat: added description field to companies block

* feat: use Titel Block instead of h2 and YFMWrapper

* Update src/blocks/Companies/__stories__/Companies.mdx

Co-authored-by: Juli Ovechkina <[email protected]>

* feat: added story with description

* feat: added blockHeaderTransform

* feat: added description to data.json

---------

Co-authored-by: Juli Ovechkina <[email protected]>
  • Loading branch information
VitaliiDC8 and Juli Ovechkina authored Nov 15, 2023
1 parent cee8700 commit f305732
Showing 7 changed files with 40 additions and 7 deletions.
4 changes: 0 additions & 4 deletions src/blocks/Companies/Companies.scss
Original file line number Diff line number Diff line change
@@ -8,10 +8,6 @@ $block: '.#{$ns}companies-block';

text-align: center;

&__title {
@include heading2();
}

&__images {
margin-top: $indentM;
}
6 changes: 3 additions & 3 deletions src/blocks/Companies/Companies.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import {Image} from '../../components';
import {Image, Title} from '../../components';
import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
import {useTheme} from '../../context/theme';
import {CompaniesBlockProps} from '../../models';
@@ -10,14 +10,14 @@ import './Companies.scss';

const b = block('companies-block');

export const CompaniesBlock = ({title, images, animated}: CompaniesBlockProps) => {
export const CompaniesBlock = ({title, description, images, animated}: CompaniesBlockProps) => {
const theme = useTheme();
const themedImages = getThemedValue(images, theme) || {};

return (
<AnimateBlock className={b()} offset={150} animate={animated}>
<div className={b('content')}>
<h2 className={b('title')}>{title}</h2>
<Title title={title} subtitle={description} colSizes={{all: 12, sm: 12}}></Title>
<div className={b('images')}>
<Image {...themedImages} className={b('image')} />
</div>
2 changes: 2 additions & 0 deletions src/blocks/Companies/__stories__/Companies.mdx
Original file line number Diff line number Diff line change
@@ -11,6 +11,8 @@ import * as CompaniesStories from './Companies.stories.tsx';

`title: string` — Title

`description?: string` — text (with YFM support)

`images: ImageDeviceProps` — Images for different screen sizes (see in common types)
</StoryTemplate>

12 changes: 12 additions & 0 deletions src/blocks/Companies/__stories__/Companies.stories.tsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import React from 'react';

import {Meta, StoryFn} from '@storybook/react';

import {yfmTransform} from '../../../../.storybook/utils';
import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
import {CompaniesBlockModel, CompaniesBlockProps} from '../../../models';
import Companies from '../Companies';
@@ -17,6 +18,17 @@ const DefaultTemplate: StoryFn<CompaniesBlockModel> = (args) => (
<PageConstructor content={{blocks: [args]}} />
);

const WithDescriptionTemplate: StoryFn<CompaniesBlockModel> = (args) => (
<PageConstructor content={{blocks: [args]}} />
);

export const Default = DefaultTemplate.bind({});
export const WithDescription = WithDescriptionTemplate.bind({});

const transformedText = yfmTransform(data.withDescription.content.description);

Default.args = data.default.content as CompaniesBlockProps;
WithDescription.args = {
...data.withDescription.content,
description: transformedText,
} as CompaniesBlockProps;
21 changes: 21 additions & 0 deletions src/blocks/Companies/__stories__/data.json
Original file line number Diff line number Diff line change
@@ -18,5 +18,26 @@
}
}
}
},
"withDescription": {
"content": {
"type": "companies-block",
"title": "Page constructor",
"description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"images": {
"light": {
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_light.svg",
"tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_light.svg",
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_light.svg",
"alt": "Page constructor"
},
"dark": {
"desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_dark.svg",
"tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_dark.svg",
"mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_dark.svg",
"alt": "Page constructor"
}
}
}
}
}
1 change: 1 addition & 0 deletions src/models/constructor-items/blocks.ts
Original file line number Diff line number Diff line change
@@ -212,6 +212,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {}

export interface CompaniesBlockProps extends Animatable {
title: string;
description?: string;
images: ThemeSupporting<ImageDeviceProps>;
}

1 change: 1 addition & 0 deletions src/text-transform/config.ts
Original file line number Diff line number Diff line change
@@ -214,6 +214,7 @@ export const config: BlocksConfig = {
},
],
[BlockType.SliderBlock]: blockHeaderTransformer,
[BlockType.CompaniesBlock]: blockHeaderTransformer,
[BlockType.QuestionsBlock]: [
{
fields: ['title'],

0 comments on commit f305732

Please sign in to comment.