feat(Share): create block (#79)

Juli Ovechkina · web-flow · commit bf950c88a3a8 · 2022-12-12T18:26:25.000+03:00
diff --git a/src/blocks/Share/README.md b/src/blocks/Share/README.md
@@ -0,0 +1,10 @@
+`type: share-block`;
+
+`title?: string` — Title
+
+`items?: []` - Share icons
+
+- `telegram`
+- `facebook`
+- `twitter`
+- `vk`
diff --git a/src/blocks/Share/Share.scss b/src/blocks/Share/Share.scss
diff --git a/src/blocks/Share/Share.tsx b/src/blocks/Share/Share.tsx
@@ -3,7 +3,7 @@ import React, {useContext} from 'react';
 import {ShareList, ShareSocialNetwork} from '@gravity-ui/uikit';
 
 import {block, getAbsolutePath} from '../../utils';
-import {PCShareSocialNetwork} from '../../models';
+import {PCShareSocialNetwork, ShareBlockProps} from '../../models';
 import {LocationContext} from '../../context/locationContext';
 import i18n from './i18n';
 
@@ -19,12 +19,7 @@ const pcShareSocialNetwork = {
     [PCShareSocialNetwork.Facebook]: ShareSocialNetwork.Facebook,
 };
 
-export interface ShareProps {
-    items: PCShareSocialNetwork[];
-    title?: string;
-}
-
-const Share = ({items, title}: ShareProps) => {
+const Share = ({items, title}: ShareBlockProps) => {
     const {pathname, hostname} = useContext(LocationContext);
 
     return (
diff --git a/src/blocks/Share/__stories__/Share.stories.tsx b/src/blocks/Share/__stories__/Share.stories.tsx
@@ -0,0 +1,27 @@
+import {Meta, Story} from '@storybook/react/types-6-0';
+import React from 'react';
+import {configure as uikitConfigure, Lang as UIKitLang} from '@gravity-ui/uikit';
+
+import Share from '../Share';
+import {BLOCKS} from '../../../demo/constants';
+import {PageConstructor} from '../../../containers/PageConstructor';
+import {ShareBLockModel, ShareBlockProps} from '../../../models';
+
+import data from './data.json';
+
+export default {
+    component: Share,
+    title: `${BLOCKS}/Share`,
+} as Meta;
+
+uikitConfigure({lang: UIKitLang.En});
+
+const DefaultTemplate: Story<ShareBLockModel> = (args) => (
+    <PageConstructor content={{blocks: [args]}} />
+);
+
+export const Default = DefaultTemplate.bind({});
+export const CustomTitle = DefaultTemplate.bind({});
+
+Default.args = data.default.content as ShareBlockProps;
+CustomTitle.args = data.customTitle.content as ShareBlockProps;
diff --git a/src/blocks/Share/__stories__/data.json b/src/blocks/Share/__stories__/data.json
@@ -1,11 +1,13 @@
 {
   "default": {
     "content": {
+      "type": "share-block",
       "items": ["facebook", "vk", "telegram", "twitter"]
     }
   },
   "customTitle": {
     "content": {
+      "type": "share-block",
       "title": "Share on social networks",
       "items": ["facebook", "vk", "telegram", "twitter"]
     }
diff --git a/src/blocks/Share/i18n/en.json b/src/blocks/Share/i18n/en.json
diff --git a/src/blocks/Share/i18n/index.ts b/src/blocks/Share/i18n/index.ts
diff --git a/src/blocks/Share/i18n/ru.json b/src/blocks/Share/i18n/ru.json
diff --git a/src/blocks/Share/schema.ts b/src/blocks/Share/schema.ts
@@ -0,0 +1,21 @@
+import {filteredArray} from '../../schema/validators/utils';
+import {BaseProps} from '../../schema/validators/common';
+
+export const ShareBlock = {
+    'share-block': {
+        additionalProperties: false,
+        required: ['items'],
+        properties: {
+            ...BaseProps,
+            title: {
+                type: 'string',
+            },
+            items: filteredArray({
+                properties: {
+                    type: 'string',
+                    enum: ['telegram', 'facebook', 'twitter', 'vk'],
+                },
+            }),
+        },
+    },
+};
diff --git a/src/blocks/index.ts b/src/blocks/index.ts
@@ -17,3 +17,4 @@ export {default as IconsBlock} from './Icons/Icons';
 export {default as HeaderSliderBlock} from './HeaderSlider/HeaderSlider';
 export {default as CardLayoutBlock} from './CardLayout/CardLayout';
 export {default as ContentLayoutBlock} from './ContentLayout/ContentLayout';
+export {default as ShareBlock} from './Share/Share';
diff --git a/src/blocks/validators.ts b/src/blocks/validators.ts
@@ -16,3 +16,4 @@ export * from './Security/schema';
 export * from './Simple/schema';
 export * from './Slider/schema';
 export * from './Table/schema';
+export * from './Share/schema';
diff --git a/src/components/Share/README.md b/src/components/Share/README.md
diff --git a/src/components/Share/__stories__/Share.stories.tsx b/src/components/Share/__stories__/Share.stories.tsx
diff --git a/src/constructor-items.ts b/src/constructor-items.ts
@@ -35,6 +35,7 @@ import {
     HeaderSliderBlock,
     CardLayoutBlock,
     ContentLayoutBlock,
+    ShareBlock,
 } from './blocks';
 
 export const blockMap = {
@@ -57,6 +58,7 @@ export const blockMap = {
     [BlockType.HeaderSliderBlock]: HeaderSliderBlock,
     [BlockType.CardLayoutBlock]: CardLayoutBlock,
     [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
+    [BlockType.ShareBlock]: ShareBlock,
 };
 
 export const subBlockMap = {
diff --git a/src/models/components.ts b/src/models/components.ts
@@ -3,10 +3,3 @@ export type ArrowDirection = 'left' | 'right';
 export interface ReactPlayerBlockHandler {
     pause: () => void;
 }
-
-export enum PCShareSocialNetwork {
-    Vk = 'vk',
-    Telegram = 'telegram',
-    Twitter = 'twitter',
-    Facebook = 'facebook',
-}
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -30,7 +30,7 @@ import {
     ImageDeviceProps,
 } from './common';
 import {ThemeSupporting} from '../../utils';
-import {GridColumnSize, GridColumnSizesType} from '../../grid/types';
+import {GridColumnSize, GridColumnSizesType} from '../../grid';
 import {BannerCardProps, SubBlock} from './sub-blocks';
 
 export enum BlockType {
@@ -55,6 +55,7 @@ export enum BlockType {
     IconsBlock = 'icons-block',
     CardLayoutBlock = 'card-layout-block',
     ContentLayoutBlock = 'content-layout-block',
+    ShareBlock = 'share-block',
 }
 
 export const BlockTypes = Object.values(BlockType);
@@ -350,6 +351,18 @@ export interface ContentBlockProps {
     theme?: ContentTheme;
 }
 
+export enum PCShareSocialNetwork {
+    Vk = 'vk',
+    Telegram = 'telegram',
+    Twitter = 'twitter',
+    Facebook = 'facebook',
+}
+
+export interface ShareBlockProps {
+    items: PCShareSocialNetwork[];
+    title?: string;
+}
+
 //block models
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
@@ -435,6 +448,10 @@ export type ContentLayoutBlockModel = {
     type: BlockType.ContentLayoutBlock;
 } & ContentLayoutBlockProps;
 
+export type ShareBLockModel = {
+    type: BlockType.ShareBlock;
+} & ShareBlockProps;
+
 type BlockModels =
     | SliderBlockModel
     | ServiceDemoBlockModel
@@ -456,6 +473,7 @@ type BlockModels =
     | IconsBlockModel
     | HeaderSliderBlockModel
     | CardLayoutBlockModel
-    | ContentLayoutBlockModel;
+    | ContentLayoutBlockModel
+    | ShareBLockModel;
 
 export type Block = BlockModels & BlockBaseProps;
diff --git a/src/schema/index.ts b/src/schema/index.ts
@@ -22,6 +22,7 @@ import {
     HeaderSliderBlock,
     IconsBlock,
     CardLayoutBlock,
+    ShareBlock,
 } from './validators/blocks';
 
 import {
@@ -117,6 +118,7 @@ export function generateDefaultSchema(config?: SchemaCustomConfig) {
                     ...CardLayoutBlock,
                     ...ContentLayoutBlock,
                     ...Divider,
+                    ...ShareBlock,
                     ...getBlocksCases(blocks),
                 },
             }),
diff --git a/src/schema/validators/blocks.ts b/src/schema/validators/blocks.ts
@@ -17,3 +17,4 @@ export * from '../../blocks/HeaderSlider/schema';
 export * from '../../blocks/Icons/schema';
 export * from '../../blocks/CardLayout/schema';
 export * from '../../blocks/ContentLayout/schema';
+export * from '../../blocks/Share/schema';
diff --git a/src/text-transform/blocks.ts b/src/text-transform/blocks.ts
@@ -379,6 +379,12 @@ const config: BlocksConfig = {
             parser: parseContentLayoutTitle,
         },
     ],
+    [BlockType.ShareBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+    ],
 };
 
 function addRandomOrder(block: ConstructorBlock) {

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
`1`	`1`	`{`
`2`	`2`	`"default": {`
`3`	`3`	`"content": {`
	`4`	`+ "type": "share-block",`
`4`	`5`	`"items": ["facebook", "vk", "telegram", "twitter"]`
`5`	`6`	`}`
`6`	`7`	`},`
`7`	`8`	`"customTitle": {`
`8`	`9`	`"content": {`
	`10`	`+ "type": "share-block",`
`9`	`11`	`"title": "Share on social networks",`
`10`	`12`	`"items": ["facebook", "vk", "telegram", "twitter"]`
`11`	`13`	`}`