feat!: page-constructor 3.0.0 stable (#374)

Author: Juli Ovechkina

CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [3.0.0](2023-06-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove Preview block ([#235](https://github.com/gravity-ui/page-constructor/issues/235)), use Tabs block
+* remove Simple block ([#228](https://github.com/gravity-ui/page-constructor/issues/228)), use ContentLayout block
+* remove CardWithImage sub-block ([#236](https://github.com/gravity-ui/page-constructor/issues/236)), use LayoutItem sub-block
+* remove Security block ([#321](https://github.com/gravity-ui/page-constructor/issues/321)), use ContentLayout block
+* remove LinkTable block ([#325](https://github.com/gravity-ui/page-constructor/issues/325)), use ContentLayout block
+* remove TutorialCard sub-block ([#331](https://github.com/gravity-ui/page-constructor/issues/331)), use BasicCard sub-block
+* remove hook HeightCalculator ([#328](https://github.com/gravity-ui/page-constructor/issues/328))
+* remove Partner sub-block ([#335](https://github.com/gravity-ui/page-constructor/issues/335)), use BasicCard sub-block
+* remove NewsCard sub-block ([#342](https://github.com/gravity-ui/page-constructor/issues/342)), use BasicCard sub-block
+* remove component Footnotes ([#343](https://github.com/gravity-ui/page-constructor/issues/343)), use ContentLayout block
+* remove component BlockHeader ([#341](https://github.com/gravity-ui/page-constructor/issues/341)), use component Title
+* remove property `fullScreen` from components ([#366](https://github.com/gravity-ui/page-constructor/issues/366)), use property `fullscreen`
+
+
+### refactor
+
+* refactor text-transform functions ([#225](https://github.com/gravity-ui/page-constructor/issues/225))
+
 ## [2.22.2](https://github.com/gravity-ui/page-constructor/compare/v2.22.1...v2.22.2) (2023-06-01)
 
 

README.md

@@ -54,7 +54,6 @@ export interface PageContent extends Animatable {
   blocks: Block[];
   menu?: Menu;
   background?: MediaProps;
-  footnotes?: string[];
 }
 
 interface Custom {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.22.2",
+  "version": "3.0.0-beta.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AnimateBlock, BlockHeader} from '../../components';
+import {AnimateBlock, Title} from '../../components';
 import {Col, GridColumnSizesType, Row} from '../../grid';
 import {CardLayoutBlockProps as CardLayoutBlockParams, WithChildren} from '../../models';
 import {block} from '../../utils';
@@ -24,7 +24,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     children,
 }) => (
     <AnimateBlock className={b()} animate={animated}>
-        {(title || description) && <BlockHeader title={title} description={description} />}
+        {(title || description) && <Title title={title} subtitle={description} />}
         <Row>
             {React.Children.map(children, (child, index) => (
                 <Col key={index} sizes={colSizes} className={b('item')}>

src/blocks/CardLayout/CardLayout.tsx

@@ -17,10 +17,6 @@
 The following blocks are currently supported:
 
 - [`BasicCard` — Basic card](?path=/story/components-cards-basiccard--default&viewMode=docs)
-- [`Partner` — Partner card](?path=/story/components-cards-partner--default&viewMode=docs)
 - [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
 - [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
-- [`CardWithImage` — Card with a picture above the title (deprecated)](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
-- [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-cardwithimage--default&viewMode=docs)
-- [`NewsCard` — News card](?path=/story/components-cards-newscard--default&viewMode=docs)
-- [`TutorialCard` — Card with an icon](?path=/story/components-cards-tutorialcard--default&viewMode=docs)
+- [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-layoutitem--default&viewMode=docs)

src/blocks/CardLayout/README.md

@@ -6,8 +6,8 @@ import {PageConstructor} from '../../../containers/PageConstructor';
 import {
     CardLayoutBlockModel,
     CardLayoutBlockProps,
-    CardWithImageModel,
-    CardWithImageProps,
+    LayoutItemModel,
+    LayoutItemProps,
     SubBlockModels,
 } from '../../../models';
 import CardLayout from '../CardLayout';
@@ -19,10 +19,10 @@ export default {
     component: CardLayout,
 } as Meta;
 
-const createCardArray: (count: number, shared: Partial<CardWithImageProps>) => SubBlockModels[] = (
+const createCardArray: (count: number, shared: LayoutItemProps) => SubBlockModels[] = (
     count,
     shared,
-) => Array.from({length: count}, () => ({...shared} as CardWithImageModel));
+) => Array.from({length: count}, () => ({...shared} as LayoutItemModel));
 
 const DefaultTemplate: Story<CardLayoutBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />

src/blocks/CardLayout/__stories__/CardLayout.stories.tsx

@@ -1,10 +1,14 @@
 {
   "default": {
     "card": {
-      "type": "card-with-image",
-      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png",
-      "title": "Lorem ipsum",
-      "description": "Dolor sit amet"
+      "type": "layout-item",
+      "media": {
+        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+      },
+      "content": {
+        "title": "Lorem ipsum",
+        "text": "Dolor sit amet"
+      }
     },
     "content": {
       "type": "card-layout-block",
@@ -15,10 +19,14 @@
   "colSizes": {
     "four": {
       "card": {
-        "type": "card-with-image",
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_3-12_light.png",
-        "title": "Lorem ipsum",
-        "description": "Dolor sit amet"
+        "type": "layout-item",
+        "media": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_3-12_light.png"
+        },
+        "content": {
+          "title": "Lorem ipsum",
+          "text": "Dolor sit amet"
+        }
       },
       "description": "Four cards in a row on the desktop, three cards in a row on a tablet, two cards in a row on a mobile phone.",
       "colSizes": {
@@ -29,10 +37,14 @@
     },
     "two": {
       "card": {
-        "type": "card-with-image",
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_6-12_light.png",
-        "title": "Lorem ipsum",
-        "description": "Dolor sit amet"
+        "type": "layout-item",
+        "media": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_6-12_light.png"
+        },
+        "content": {
+          "title": "Lorem ipsum",
+          "text": "Dolor sit amet"
+        }
       },
       "description": "Two cards in a row on all devices",
       "colSizes": {

src/blocks/CardLayout/__stories__/data.json

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {AnimateBlock, BlockHeader, HTML} from '../../components/';
+import {AnimateBlock, HTML, Title} from '../../components/';
 import Image from '../../components/Image/Image';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
@@ -30,7 +30,7 @@ export const ExtendedFeaturesBlock = ({
 
     return (
         <AnimateBlock className={b()} animate={animated}>
-            <BlockHeader title={title} description={description} className={b('header')} />
+            <Title title={title} subtitle={description} className={b('header')} />
             <div className={b('items')}>
                 <Row>
                     {items.map(

src/blocks/ExtendedFeatures/ExtendedFeatures.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo, useState} from 'react';
 
 import {CardLayoutBlock} from '..';
-import {AnimateBlock, BlockHeader} from '../../components';
+import {AnimateBlock, Title} from '../../components';
 import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
 import {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';
 import {Col, Row} from '../../grid';
@@ -53,10 +53,10 @@ const FilterBlock: React.FC<FilterBlockProps> = ({
     return (
         <AnimateBlock className={b()} animate={animated}>
             {title && (
-                <BlockHeader
+                <Title
                     className={b('title', {centered: centered})}
                     title={title}
-                    description={description}
+                    subtitle={description}
                 />
             )}
             {tabButtons.length && (