@meduza/ui-kit-2 0.7.2 → 0.7.3

package/dist/Meta/Meta.mock.d.ts

@@ -0,0 +1,12 @@
+export declare const MetaMock: {
+    type: string;
+    data: {
+        lang: string;
+        components: {
+            type: string;
+            text: string;
+            id: string;
+        }[];
+    };
+    id: string;
+};

package/dist/RelatedBook/RelatedBook.mock.d.ts

@@ -0,0 +1,65 @@
+export declare const RelatedBookMock: {
+    type: string;
+    data: {
+        url: string;
+        cover: {
+            urls: {
+                w325: {
+                    '1x': string;
+                    '2x': string;
+                    '1x_webp': string;
+                    '2x_webp': string;
+                };
+                w600: {
+                    '1x': string;
+                    '2x': string;
+                    '1x_webp': string;
+                    '2x_webp': string;
+                };
+            };
+        };
+        blocks: ({
+            type: string;
+            data: {
+                text: string;
+                theme: string;
+                first?: undefined;
+                second?: undefined;
+                lang?: undefined;
+                components?: undefined;
+            };
+            id: string;
+        } | {
+            type: string;
+            data: {
+                first: string;
+                second: string;
+                text?: undefined;
+                theme?: undefined;
+                lang?: undefined;
+                components?: undefined;
+            };
+            id: string;
+        } | {
+            type: string;
+            data: {
+                lang: string;
+                components: {
+                    type: string;
+                    text: string;
+                    id: string;
+                }[];
+                text?: undefined;
+                theme?: undefined;
+                first?: undefined;
+                second?: undefined;
+            };
+            id: string;
+        })[];
+        theme: {
+            background_color: string;
+            text_color: string;
+        };
+    };
+    id: string;
+};

package/dist/RelatedBook/RelatedBook.types.d.ts

@@ -0,0 +1,4 @@
+export interface RelatedBookProps {
+    block: any;
+    styleContext: any;
+}

package/dist/RelatedBook/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RelatedBookProps } from './RelatedBook.types';
+export declare const RelatedBook: React.FC<RelatedBookProps>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.2",
+  "version": "0.7.3",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/Meta/Meta.mock.ts

@@ -0,0 +1,19 @@
+export const MetaMock = {
+  type: 'meta',
+  data: {
+    lang: 'ru',
+    components: [
+      {
+        type: 'string',
+        text: '42 страницы',
+        id: 'e19bcbc2fc5005393177a48818801a6e04e3a5e94aad52ed99f6d6addd4819e5'
+      },
+      {
+        type: 'string',
+        text: 'Сентябрь, 2023',
+        id: 'c5c779fd7088cda5667daedccd35c31e3fe70233e60941ae42965b7d1863302c'
+      }
+    ]
+  },
+  id: '2-219b4aed9da90196465bd1c697b643ffffa219cbcdd325a8abcedc053c6649b0'
+}

package/src/RelatedBook/RelatedBook.mock.ts

@@ -0,0 +1,68 @@
+export const RelatedBookMock = {
+  type: 'related_book',
+  data: {
+    url: 'book_landing/2023/09/13/testovyy-avtor',
+    cover: {
+      urls: {
+        w325: {
+          '1x': '//meduza.io/impro/D6driXI8j0K_j-YQVCRUQN8HW49p5I_7pDiKBiI07XI/resizing_type:fit/width:325/height:0/enlarge:1/quality:80/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.png',
+          '2x': '//meduza.io/impro/Z6f_I7RgoLm1qndCIVSeIbosuXLvb5wgQorVhzQbrTA/resizing_type:fit/width:650/height:0/enlarge:1/quality:80/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.png',
+          '1x_webp':
+            '//meduza.io/impro/SB0AN46D0ObVaIwyMv3Wj1VR0y9C2H-uSwyHkPtAbDI/resizing_type:fit/width:325/height:0/enlarge:1/quality:95/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.webp',
+          '2x_webp':
+            '//meduza.io/impro/iR5SsfQPNONtjHRLAdVPHYTpgKsyYZQWuxr4qOQ2WXo/resizing_type:fit/width:650/height:0/enlarge:1/quality:95/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.webp'
+        },
+        w600: {
+          '1x': '//meduza.io/impro/UoG3H-fSGcAX54b2btJT8HK69JHOXOCkR4nfgI5T8BE/resizing_type:fit/width:600/height:0/enlarge:1/quality:80/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.png',
+          '2x': '//meduza.io/impro/yLXyIx4_Bi9O1Gkbv-uxFIk-FmRfYR2DAZ1bpZgxlAs/resizing_type:fit/width:1200/height:0/enlarge:1/quality:80/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.png',
+          '1x_webp':
+            '//meduza.io/impro/LuunCbINkOTFj49bgrU7LfXrFqkmj6endeyG4cyao1U/resizing_type:fit/width:600/height:0/enlarge:1/quality:95/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.webp',
+          '2x_webp':
+            '//meduza.io/impro/PMsuWNtzhy6QCyOwkDXqELMZOAeSdCv_sN_lTYFaFYE/resizing_type:fit/width:1200/height:0/enlarge:1/quality:95/aHR0cHM6Ly9zZWNv/bmQubWVkdXphLmlv/L2ltYWdlL2F0dGFj/aG1lbnRzL2ltYWdl/cy8wMDQvNTYxLzg1/MS9vcmlnaW5hbC9j/bUd3ZVlRNlpmUHpJ/cnczNmdFbFRBLnBu/Zw.webp'
+        }
+      }
+    },
+    blocks: [
+      {
+        type: 'tag',
+        data: {
+          text: 'Читайте также (это заг блока)',
+          theme: 'custom'
+        },
+        id: '0-12a13e7197cca39855b3f53299c6e4148bea63f4a7da0406be27c49f4b211702'
+      },
+      {
+        type: 'rich_title',
+        data: {
+          first: 'Тестовый автор',
+          second: 'Тестовое название книги'
+        },
+        id: '1-87b217057d08b7f1a65dd75fb7a1e4e20a4119d40f7a4562fefc3591d2a02857'
+      },
+      {
+        type: 'meta',
+        data: {
+          lang: 'ru',
+          components: [
+            {
+              type: 'string',
+              text: '300 страниц',
+              id: 'd06a9c997243be8443acd0dd1509a66dab38a112efc35f76933e9761721f88c6'
+            },
+            {
+              type: 'string',
+              text: 'Сентябрь 2023',
+              id: '99a1c1c8d4da9ccb01453d01400cdcd63d989f92f8302e5ae5931e5da061cf9e'
+            }
+          ]
+        },
+        id: '2-cf782d69edb4aa4fef3e01689750394759436881b849faee4021e7a421fcf251'
+      }
+    ],
+    theme: {
+      background_color: '11,36,89',
+      text_color: '255,255,255'
+    }
+  },
+  id: '3-b790d1d4382de253a60ba2e36d274cdd528aa4c5c101c2901ce058f81569e9ec'
+}

package/src/RelatedBook/RelatedBook.module.css

@@ -0,0 +1,210 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: 1;
+
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+
+  width: 100%;
+  margin: 16px 0;
+
+  transition: opacity 0.2s;
+  text-decoration: none;
+
+  border-radius: 8px;
+  outline-width: 0;
+  background-color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  @media $portraitTablet {
+    margin: 25px 0;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root:hover {
+  @media $landscapeTablet {
+    z-index: 10;
+
+    opacity: 0.95;
+  }
+}
+
+.container {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+
+  border-radius: inherit;
+}
+
+.imageWrap {
+  position: relative;
+
+  width: 100%;
+
+  border-radius: 8px 8px 0 0;
+
+  @media $landscapeTablet {
+    min-height: 0;
+  }
+}
+
+.container {
+  background-color: var(--bgColor);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.image {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: opacity 350ms ease;
+}
+
+.picture {
+  height: 160px;
+
+  box-shadow:
+    0 0 0 0 rgba(0, 0, 0, 0.1),
+    0 4px 8px 0 rgba(0, 0, 0, 0.1),
+    0 15px 15px 0 rgba(0, 0, 0, 0.09),
+    0 34px 20px 0 rgba(0, 0, 0, 0.05),
+    0 60px 24px 0 rgba(0, 0, 0, 0.01),
+    0 94px 26px 0 rgba(0, 0, 0, 0);
+
+  @media $landscapeTablet {
+    height: 200px;
+  }
+}
+
+.picture img {
+  display: block;
+
+  width: auto;
+  height: 100%;
+
+  object-fit: contain;
+}
+
+.tag {
+  display: flex;
+
+  margin-bottom: 6px;
+}
+
+.contentWrap {
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  width: 100%;
+  padding: 0 15px;
+
+  @media $landscapeTablet {
+    padding: 0 15px;
+  }
+}
+
+.contentWrap {
+  @media $landscapeTablet {
+    justify-content: flex-end;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  padding: $gapSmall 0;
+
+  @media $landscapeTablet {
+    justify-content: flex-end;
+
+    padding: 15px 0;
+  }
+}
+
+.title {
+  max-width: 770px;
+  margin-bottom: 12px;
+
+  @media $mobile {
+    width: 100%;
+    min-width: 0;
+    margin-bottom: 15px;
+  }
+}
+
+.footer {
+  margin-top: auto;
+
+  color: #757575;
+
+  line-height: 14px;
+
+  fill: currentColor;
+}
+
+.imageWrap {
+  padding-top: 50px;
+  padding-bottom: 50px;
+
+  @media $landscapeTablet {
+    position: static;
+
+    flex-shrink: 0;
+
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+}
+
+.content {
+  flex-shrink: 0;
+
+  padding-top: 0;
+
+  @media $landscapeTablet {
+    flex-grow: 0;
+    justify-content: flex-end;
+  }
+}
+
+.center {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.isLight .content {
+  color: #fff;
+}
+
+.isDark .content {
+  --tagColor: rgba(0, 0, 0, 0.6);
+  --metaText: rgba(0, 0, 0, 0.6);
+  --metaFill: currentColor;
+}
+
+.isLight .content {
+  --tagColor: rgba(254, 255, 255, 0.5);
+  --metaText: rgba(254, 255, 255, 0.5);
+  --metaFill: currentColor;
+}

package/src/RelatedBook/RelatedBook.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/RelatedBook/RelatedBook.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { RelatedBook } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './RelatedBook.stories.module.css'
+import { RelatedBookMock } from './RelatedBook.mock'
+
+export default {
+  title: 'Main / RelatedBook',
+  component: RelatedBook,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <RelatedBook block={RelatedBookMock} styleContext={['center']} />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/RelatedBook/RelatedBook.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { RelatedBook } from './'
+import { RelatedBookProps } from './RelatedBook.types'
+
+import styles from './RelatedBook.module.css'
+
+describe('RelatedBook', () => {
+  let props: RelatedBookProps
+
+  const renderComponent = () => render(<RelatedBook {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const relatedBook = getByTestId('related-book')
+
+    expect(relatedBook).toHaveClass(styles.root)
+  })
+})

package/src/RelatedBook/RelatedBook.types.ts

@@ -0,0 +1,4 @@
+export interface RelatedBookProps {
+  block: any
+  styleContext: any
+}

package/src/RelatedBook/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { RelatedBookProps } from './RelatedBook.types'
+import makeClassName, { ClassNames } from '../utils/makeClassName'
+import { Link } from 'react-router-dom'
+
+import styles from './RelatedBook.module.css'
+import { RenderBlocks } from '../RenderBlocks'
+import { Image } from '../Image'
+import makeStyleContext from '../utils/makeStyleContext'
+
+export const RelatedBook: React.FC<RelatedBookProps> = ({
+  block,
+  styleContext
+}) => {
+  const theme = block.data.theme.text_color === '0,0,0' ? 'isDark' : 'isLight'
+
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles[theme], theme],
+    [
+      styles[block.data.onlyOn],
+      !!block.data.onlyOn && !!styles[block.data.onlyOn]
+    ]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  const cssProps = {
+    '--bgColor': `rgb(${block.data.theme.background_color || '0, 0, 0'})`
+  } as React.CSSProperties
+
+  return (
+    <Link
+      to={`/${block.data.url}`}
+      className={makeClassName(classNames)}
+      style={cssProps}
+    >
+      <div className={styles.container}>
+        <div className={styles.imageWrap}>
+          <div className={styles.image}>
+            <picture className={styles.picture}>
+              <Image
+                optimized={block.data.cover.urls}
+                ratio={0}
+                display="narrow"
+                styleContext={['isStatic']}
+                lazy={true}
+              />
+            </picture>
+          </div>
+        </div>
+        <div className={styles.contentWrap}>
+          <div className={styles.content}>
+            {block.data.blocks.map((item) => (
+              <RenderBlocks
+                key={item.id}
+                block={item}
+                styleContext={['isInMediaBlock', 'isInBookRelated', 'isCustom']}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}