@meduza/ui-kit-2 0.1.19 → 0.1.21

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -0,0 +1,165 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+  z-index: 10;
+
+  display: block;
+  overflow: hidden;
+
+  min-height: 434px;
+
+  text-decoration: none;
+
+  border-radius: 8px;
+  outline-width: 0;
+}
+
+.root::before,
+.root::after {
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  content: '';
+
+  border-radius: 8px;
+}
+
+.root::before {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.root::after {
+  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.overlay,
+.overlayHeader {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  left: 0;
+}
+
+.overlay {
+  bottom: 0;
+
+  height: 295px;
+}
+
+.overlayHeader {
+  top: 0;
+
+  height: 150px;
+
+
+}
+
+.isRich .overlayHeader {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 97%);
+}
+
+.body {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+
+  padding: 15px;
+
+  background-color: #f7f7f7;
+
+  @media $mobile {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    min-height: 295px;
+    padding: 20px;
+
+    background-color: transparent;
+  }
+}
+
+.isCard .body,
+.isRich.hasGradient .body {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  min-height: 295px;
+
+  background-color: transparent;
+}
+
+.isCard {
+  color: #fff;
+  background-color: #191919;
+}
+
+.isCard .cover {
+  position: absolute;
+  top: 17.2811059908%;
+  left: 50%;
+
+  width: 170px;
+
+  transform: translate(-50%, 0);
+}
+
+.isRich {
+  color: #000;
+
+  @media $landscapeTablet {
+    color: #fff;
+  }
+}
+
+.tag {
+  position: absolute;
+  z-index: 10;
+  top: 15px;
+  left: 15px;
+
+  color: #fff;
+
+  @media $mobile {
+    top: 20px;
+    left: 20px;
+  }
+}
+
+/* Themes */
+
+.isRich.dark,
+.isRich.dark .tag {
+  color: #000;
+}
+
+.isRich.light {
+  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/RelatedRichBlock/RelatedRichBlock.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/RelatedRichBlock/RelatedRichBlock.stories.tsx

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

package/src/RelatedRichBlock/RelatedRichBlock.test.tsx

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

package/src/RelatedRichBlock/RelatedRichBlock.types.ts

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

package/src/RelatedRichBlock/index.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react/jsx-no-target-blank */
+import React, { useState, useEffect } from 'react'
+import { RelatedRichBlockProps } from './RelatedRichBlock.types'
+
+import { makeClassName, ClassNames } from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import generateGradient from '../utils/generateGradient'
+import { toCapitalize } from '../utils/converCase'
+
+import { Tag } from '../Tag'
+import { RenderBlocks } from '../RenderBlocks'
+import { Image } from '../Image'
+
+import styles from './RelatedRichBlock.module.css'
+
+import { RelatedBlock } from '../RelatedBlock'
+
+export const RelatedRichBlock: React.FC<RelatedRichBlockProps> = ({
+  block: {
+    only_on: onlyOn,
+    data: {
+      blocks,
+      fallback,
+      url,
+      cover: { urls, gradients, tag, layout, ratio }
+    }
+  },
+  styleContext
+}) => {
+  const style: React.CSSProperties = {}
+  const styleHeader: React.CSSProperties = {}
+
+  const [isRich, setIsRich] = useState(false)
+
+  const cardType = `is${toCapitalize(layout)}`
+
+  useEffect(() => {
+    // setIsRich(Math.random() >= 0.5)
+    setIsRich(true)
+  }, [])
+
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles[cardType], !!layout && !!styles[cardType]],
+    [styles.hasGradient, !!gradients],
+    [styles[onlyOn], !!onlyOn && !!styles[onlyOn]]
+  ]
+
+  let context = ['isInMediaBlock']
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+
+    context = [...styleContext, 'isInMediaBlock']
+  }
+
+  if (gradients) {
+    const theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light']
+
+    classNames = makeStyleContext(classNames, theme, styles)
+
+    styleHeader.backgroundImage = generateGradient(
+      gradients.bg_rgb,
+      'mediaBlockTop'
+    )
+    style.backgroundImage = generateGradient(
+      gradients.bg_rgb,
+      'mediaBlockBottom'
+    )
+  }
+
+  if (!isRich) {
+    return <RelatedBlock block={fallback} />
+  }
+
+  return (
+    <a
+      data-testid="related-rich-block"
+      className={makeClassName(classNames)}
+      href={url}
+      target="_blank"
+    >
+      {layout === 'rich' && (
+        <>
+          <div className={styles.overlay} style={style} />
+          <div className={styles.overlayHeader} style={styleHeader} />
+        </>
+      )}
+
+      <div className={styles.tag}>
+        <Tag size="small" theme="inherit" styleContext="rich">
+          {tag}
+        </Tag>
+      </div>
+      <div className={styles.cover}>
+        <Image optimized={urls} ratio={ratio} display="narrow" />
+      </div>
+      <div className={styles.body}>
+        {blocks.map((item) => (
+          <RenderBlocks key={item.id} block={item} styleContext={context} />
+        ))}
+      </div>
+    </a>
+  )
+}