@meduza/ui-kit-2 0.4.14 → 0.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.14",
+  "version": "0.5.1",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -51,6 +51,12 @@
       "@commitlint/config-conventional"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsc --noEmit && lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",

package/src/Cover/index.tsx

@@ -38,10 +38,7 @@ export const Cover: React.FC<CoverProps> = ({
 
     classNames = makeStyleContext(classNames, theme, styles)
 
-    style.backgroundImage = generateGradient(
-      gradients.bg_rgb,
-      'mediaBlockBottom'
-    )
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom')
   }
 
   const renderCC = (context?: string): JSX.Element => (
@@ -55,12 +52,7 @@ export const Cover: React.FC<CoverProps> = ({
   return (
     <div data-testid="cover" className={makeClassName(classNames)}>
       <div className={styles.image}>
-        <Image
-          optimized={urls}
-          ratio={mobileRatio}
-          display="narrow"
-          lazy={true}
-        />
+        <Image optimized={urls} ratio={mobileRatio} display="narrow" />
       </div>
       <div className={styles.body} style={style}>
         {blocks.map((item) => (

package/src/DocumentItemsCount/DocumentItemsCount.module.css

@@ -1,6 +1,17 @@
+/* stylelint-disable declaration-empty-line-before */
 @import '../vars';
 
-.root:not(:first-child) {
+.root {
+  display: inline;
+
+  line-height: inherit;
+}
+
+.root svg {
+  vertical-align: top;
+}
+
+.items {
   margin-left: 1px;
 
   vertical-align: top;

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { DocumentItemsCount } from './'
+// import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+
+import styles from './DocumentItemsCount.module.css'
 
 describe('Document Items Count', () => {
+  // let props: DocumentItemsCountProps
+
   const renderComponent = () =>
     render(<DocumentItemsCount type="card" items={4} />)
 
   it('should have root style', () => {
-    const { container } = renderComponent()
+    const { getByTestId } = renderComponent()
+
+    const documentItemsCount = getByTestId('document-items-count')
 
-    expect(container).toBeInTheDocument
+    expect(documentItemsCount).toHaveClass(styles.root)
   })
 })

package/src/DocumentItemsCount/index.tsx

@@ -45,9 +45,9 @@ export const DocumentItemsCount: React.FC<DocumentItemsCountProps> = ({
   )}`
 
   return (
-    <>
+    <div data-testid="document-items-count" className={styles.root}>
       {children}
-      <span className={styles.root}>{itemsCount}</span>
-    </>
+      <span className={styles.items}>{itemsCount}</span>
+    </div>
   )
 }

package/src/Image/Image.module.css

@@ -76,14 +76,3 @@
 .dark {
   background-color: transparent;
 }
-
-.isStatic,
-.isStatic .wrapper,
-.isStatic .wrapper > div {
-  height: 100%;
-}
-
-.isStatic img {
-  height: 100%;
-  position: static;
-}

package/src/Meta/Meta.module.css

@@ -104,11 +104,6 @@
   }
 }
 
-.isCustom {
-  color: var(--metaText);
-  fill: var(--metaFill);
-}
-
 /* VISIBILITY */
 
 .mobile {

package/src/Meta/Meta.stories.module.css

@@ -4,20 +4,4 @@
   display: block;
 
   font-family: $secondaryFont;
-
-  display: flex;
-  flex-flow: column nowrap;
-
-  gap: 40px;
-}
-
-.root h3 {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.layout {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 20px;
 }

package/src/Meta/Meta.stories.tsx

@@ -8,8 +8,6 @@ import { SvgSymbol } from '../SvgSymbol'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 
 import styles from './Meta.stories.module.css'
-import { MetaContainer } from './MetaContainer'
-import { MetaMock } from './Meta.mock'
 
 export default {
   title: 'Main / Meta',
@@ -21,8 +19,8 @@ export default {
 
 const Example: React.FC = () => {
   return (
-    <div className={styles.root}>
-      <div className={styles.layout}>
+    <>
+      <div className={styles.root}>
         <h3>В карточке</h3>
         <Meta>
           <MetaItem>
@@ -40,7 +38,7 @@ const Example: React.FC = () => {
           ))}
         </Meta>
       </div>
-      <div className={styles.layout}>
+      <div className={styles.root}>
         <h3>В материале</h3>
 
         <Meta styleContext="isInMaterial">
@@ -54,53 +52,8 @@ const Example: React.FC = () => {
             <Timestamp publishedAt={1558353600} type="date" locale="en" />
           </MetaItem>
         </Meta>
-        <div className={styles.layout}>
-          <h3>Блочная</h3>
-          <MetaContainer
-            block={MetaMock}
-            lang="ru"
-            styleContext={[]}
-            isRead={false}
-            isListened={false}
-            isInBookmarks={false}
-          />
-        </div>
-        <div
-          className={styles.layout}
-          style={
-            {
-              '--metaText': `pink`,
-              '--metaFill': 'currentColor'
-            } as React.CSSProperties
-          }
-        >
-          <h3>CSS Props</h3>
-
-          <Meta styleContext="isCustom">
-            <MetaItem bullets>
-              <MetaItemLive /> Онлайн
-            </MetaItem>
-            <MetaItem bullets>
-              Источник: <a href="https://meduza.io">Meduza</a>
-            </MetaItem>
-            <MetaItem bullets>
-              <Timestamp publishedAt={1558353600} type="date" locale="en" />
-            </MetaItem>
-          </Meta>
-          <div className={styles.layout}>
-            <h3>Блочная</h3>
-            <MetaContainer
-              block={MetaMock}
-              lang="ru"
-              styleContext={[]}
-              isRead={false}
-              isListened={false}
-              isInBookmarks={false}
-            />
-          </div>
-        </div>
       </div>
-    </div>
+    </>
   )
 }
 

package/src/Meta/MetaContainer.tsx

@@ -133,14 +133,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
 
-          case 'string': {
-            return (
-              <MetaItem bullets key={component.id}>
-                {component.text}
-              </MetaItem>
-            )
-          }
-
           default: {
             return null
           }

package/src/RawHtmlBlock/index.tsx

@@ -6,6 +6,7 @@ import { Spoiler } from '../Spoiler'
 import { HalfBlock } from '../HalfBlock'
 import { Cover } from '../Cover'
 import { RelatedRichBlock } from '../RelatedRichBlock'
+import { ShopRelatedBlock } from '../ShopRelatedBlock'
 import { BlockProvider } from '../utils/BlockContext'
 
 export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
@@ -47,6 +48,10 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
       return <RelatedRichBlock block={block} styleContext={styleContext} />
     }
 
+    case 'related_shop': {
+      return <ShopRelatedBlock block={block} styleContext={styleContext} />
+    }
+
     default: {
       return (
         <BlockProvider value={context}>

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -19,14 +19,6 @@
   }
 }
 
-.root:last-child {
-  margin-bottom: 0;
-}
-
-.root:first-child {
-  margin-top: 0;
-}
-
 .root::after {
   position: absolute;
   top: 0;
@@ -47,9 +39,7 @@
 }
 
 .root::after {
-  box-shadow:
-    inset 0 4px #b88b59,
-    inset 0 5px rgba(0, 0, 0, 0.2),
+  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2),
     inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 

package/src/RenderBlocks/index.tsx

@@ -18,7 +18,6 @@ import { MaterialNote } from '../MaterialNote'
 import { SensitiveBlock } from '../SensitiveBlock'
 import { DonatesTeaser } from '../DonatesTeaser'
 import { AnnouncementInText } from '../AnnouncementInText'
-import { RelatedBook } from '../RelatedBook'
 
 export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   block,
@@ -75,7 +74,7 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'divider':
     case 'lead':
     case 'lead_hr': {
-      return <SimpleBlock block={block} styleContext={styleContext} />
+      return <SimpleBlock block={block} styleContext={styleContext} id={block.id} />
     }
 
     case 'quote':
@@ -97,9 +96,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'related': {
       return <RelatedBlock block={block} styleContext={styleContext} />
     }
-    case 'related_book': {
-      return <RelatedBook block={block} styleContext={styleContext} />
-    }
 
     case 'source':
       return <SourceBlock block={block} styleContext={styleContext} />

package/src/ShopRelatedBlock/ShopRelatedBlock.module.css

@@ -0,0 +1,210 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: 10;
+
+  display: block;
+  overflow: hidden;
+
+  color: #000;
+
+  text-decoration: none;
+
+  border-radius: 8px;
+  outline-width: 0;
+
+  @media $mobile {
+    color: #fff;
+  }
+}
+
+.root:hover {
+  @media $mobile {
+    opacity: 0.95;
+  }
+}
+
+.root::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+
+  border-radius: 8px;
+
+  content: '';
+}
+
+.root::before {
+  display: block;
+
+  width: 100%;
+}
+
+.root::after {
+  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.root,
+.wrapper {
+  margin: 16px 0;
+
+  @media $portraitTablet {
+    margin: 25px 0;
+  }
+}
+
+.overlay,
+.overlayHeader {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.overlay {
+  bottom: 0;
+
+  height: 295px;
+}
+
+.overlayHeader {
+  top: 0;
+
+  height: 150px;
+}
+
+.body {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+
+  padding: 12px 15px;
+
+  background-color: #f7f7f7;
+
+  @media $mobile {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+
+    min-height: 295px;
+    padding: 20px;
+
+    background-color: transparent;
+  }
+}
+
+.hasGradient .body {
+  @media $mobile {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+
+    min-height: 295px;
+
+    background-color: transparent;
+  }
+}
+
+.picture {
+  position: relative;
+}
+
+.picture::after {
+  position: absolute;
+  right: 1px;
+  bottom: 0;
+  left: 1px;
+  z-index: 10;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  content: '';
+
+  @media $mobile {
+    content: '';
+  }
+}
+
+.tag {
+  position: absolute;
+  top: 14px;
+  right: 15px;
+  left: 15px;
+  z-index: 10;
+
+  color: rgba(255, 255, 255, 0.7);
+
+  font-size: 12px;
+
+  @media $landscapeTablet {
+    top: 16px;
+    right: 20px;
+    left: 20px;
+  }
+}
+
+.center {
+  width: 100%;
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 19px;
+  font-family: $secondaryFont;
+  line-height: 23px;
+
+  @media $landscapeTablet {
+    font-size: 1.3rem;
+    line-height: 1.6rem;
+  }
+}
+
+.price {
+  display: block;
+}
+
+/* Themes */
+
+.dark {
+  color: #000;
+}
+
+.dark .tag {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.light {
+  @media $mobile {
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Display */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/ShopRelatedBlock/ShopRelatedBlock.stories.module.css

@@ -0,0 +1,12 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+
+  max-width: 650px;
+  margin: 0 auto;
+}
+
+.card + .card {
+  margin-top: 40px;
+}

package/src/ShopRelatedBlock/ShopRelatedBlock.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ShopRelatedBlock } from '.'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './ShopRelatedBlock.stories.module.css'
+import mock from './mock.json'
+
+export default {
+  title: 'Main / ShopRelatedBlock',
+  component: ShopRelatedBlock,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <div className={styles.card}>
+          <ShopRelatedBlock block={mock.rich} styleContext={['no_mods']} />
+        </div>
+        <div className={styles.card}>
+          <ShopRelatedBlock block={mock.rich_dark} styleContext={['no_mods']} />
+        </div>
+        <div className={styles.card}>
+          <ShopRelatedBlock
+            block={mock.rich_and_featured_mobile}
+            styleContext={['no_mods']}
+          />
+        </div>
+        <div className={styles.card}>
+          <ShopRelatedBlock
+            block={mock.rich_and_featured_desktop}
+            styleContext={['no_mods']}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    {/* <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper> */}
+  </>
+)

package/src/ShopRelatedBlock/ShopRelatedBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ShopRelatedBlock } from '.'
+import { ShopRelatedBlockProps } from './ShopRelatedBlock.types'
+
+import styles from './ShopRelatedBlock.module.css'
+
+describe('Related Rich Block', () => {
+  let props: ShopRelatedBlockProps
+
+  const renderComponent = () => render(<ShopRelatedBlock {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const ShopRelatedBlock = getByTestId('realated-rich-block')
+
+    expect(ShopRelatedBlock).toHaveClass(styles.root)
+  })
+})

package/src/ShopRelatedBlock/ShopRelatedBlock.types.ts

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