@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/RelatedBlock/RelatedBlock.module.css

@@ -0,0 +1,129 @@
+@import '../vars.css';
+
+.root {
+  margin: 16px 0;
+
+  border-radius: 8px;
+  background-color: $platinum;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 4px 0 0 #b78b5c;
+
+  @media $portraitTablet {
+    margin: 25px 0;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root:first-child {
+  margin-top: 0;
+}
+
+.root a {
+  display: block;
+
+  padding: $gapSmall $gapSmall 13px;
+
+  transition: color 0.15s;
+  text-decoration: none;
+
+  color: #000;
+  box-shadow: none;
+
+  font-size: 17px;
+  line-height: 20px;
+
+  @media $portraitTablet {
+    padding: 15px 20px 17px;
+
+    font-size: 19px;
+    line-height: 23px;
+  }
+}
+
+.root a:hover {
+  color: #5c5c5c;
+}
+
+.header {
+  margin: 0;
+  padding: 14px 12px 3px;
+
+  letter-spacing: 1px;
+  text-transform: uppercase;
+
+  color: #7F7F7F;
+
+  font-family: $secondaryFont;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+
+  @media $portraitTablet {
+    padding: 20px 20px 14px;
+
+    font-size: 14px;
+    line-height: 16px;
+  }
+}
+
+.items {
+  margin: 0;
+  padding-left: 0;
+
+  list-style: none;
+}
+
+.items li {
+  padding: 0;
+}
+
+.items li + li {
+  border-top: 1px solid #e6e6e6;
+}
+
+.rich .first {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 18px;
+
+  @media $portraitTablet {
+    font-size: 18px;
+  }
+}
+
+.simple {
+}
+
+.center {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.isInSlideMaterial:first-child {
+  margin-top: 0;
+}
+
+.isInSlideMaterial:last-child {
+  margin-bottom: 0;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}
+

package/src/RelatedBlock/RelatedBlock.stories.module.css

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

package/src/RelatedBlock/RelatedBlock.stories.tsx

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

package/src/RelatedBlock/RelatedBlock.test.tsx

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

package/src/RelatedBlock/RelatedBlock.types.ts

@@ -0,0 +1,4 @@
+export interface RelatedBlockProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/RelatedBlock/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { RelatedBlockProps } from './RelatedBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './RelatedBlock.module.css'
+
+export const RelatedBlock: React.FC<RelatedBlockProps> = ({
+  block: {
+    data: { title, related },
+    only_on: onlyOn
+  },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="related-block" className={makeClassName(classNames)}>
+      <h3 className={styles.header}>{title}</h3>
+      <ul className={styles.items}>
+        {related.map((item, index) => (
+          <li key={item.id || index} className={styles[item.layout]}>
+            <a
+              href={item.full_url || `/${item.url}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className={styles.first}>{item.title}</span>
+              {item.second_title && ' '}
+              {item.second_title && <span>{item.second_title}</span>}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/RenderBlocks/RenderBlocks.stories.module.css

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

package/src/RenderBlocks/RenderBlocks.stories.tsx

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

package/src/RenderBlocks/RenderBlocks.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { RenderBlocks } from './'
+import { RenderBlocksProps } from './RenderBlocks.types'
+import styles from './RenderBlocks.module.css'
+
+describe('Render Blocks', () => {
+  let props: RenderBlocksProps
+
+  const renderComponent = () => render(<RenderBlocks {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const renderBlocks = getByTestId('render-blocks')
+
+    expect(renderBlocks).toHaveClass(styles.root)
+  })
+})

package/src/RenderBlocks/RenderBlocks.types.ts

@@ -0,0 +1,10 @@
+export interface RenderBlocksProps {
+  block: any
+  styleContext?: any
+  isRead?: boolean
+  isListened?: boolean
+  isInBookmarks?: boolean
+  bookmarkAction?: (service: string, place: string) => void
+  lightBox?: () => void
+  lang?: 'ru' | 'en'
+}

package/src/RenderBlocks/index.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { RenderBlocksProps } from './RenderBlocks.types'
+
+import { Tag } from '../Tag'
+import { SimpleTitle } from '../SimpleTitle'
+import { RichTitle } from '../RichTitle'
+import { SimpleBlock } from '../SimpleBlock'
+import { ListBlock } from '../ListBlock'
+import { ChapterBlock } from '../ChapterBlock'
+import { QuoteBlock } from '../QuoteBlock'
+import { CardTitle } from '../CardTitle'
+import { RelatedBlock } from '../RelatedBlock'
+import { SourceBlock } from '../SourceBlock'
+import { EmbedBlockContainer } from '../EmbedBlock'
+import { GroupedBlock } from '../GroupedBlock'
+import { MetaContainer } from '../Meta/MetaContainer'
+import { Table } from '../Table'
+import { MaterialNote } from '../MaterialNote'
+
+export const RenderBlocks: React.FC<RenderBlocksProps> = ({
+  block,
+  styleContext,
+  lang,
+  isRead,
+  isListened,
+  bookmarkAction,
+  isInBookmarks
+}) => {
+  switch (block.type) {
+    case 'tag': {
+      return (
+        <Tag
+          size="large"
+          onlyOn={block.only_on}
+          theme={block.data.theme}
+          styleContext={styleContext}
+        >
+          {block.data.text}
+        </Tag>
+      )
+    }
+
+    case 'simple_title': {
+      return <SimpleTitle block={block} styleContext={styleContext} />
+    }
+
+    case 'rich_title': {
+      return <RichTitle block={block} styleContext={styleContext} />
+    }
+
+    case 'meta': {
+      return (
+        <MetaContainer
+          block={block}
+          lang={block.data.lang}
+          styleContext={styleContext}
+          isRead={isRead}
+          isListened={isListened}
+          isInBookmarks={isInBookmarks}
+          bookmarkAction={bookmarkAction}
+        />
+      )
+    }
+
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'blockquote':
+    case 'p':
+    case 'context_p':
+    case 'lead':
+    case 'lead_hr': {
+      return <SimpleBlock block={block} styleContext={styleContext} />
+    }
+
+    case 'quote':
+      return <QuoteBlock block={block} styleContext={styleContext} />
+
+    case 'ol':
+    case 'ul': {
+      return <ListBlock block={block} styleContext={styleContext} />
+    }
+
+    case 'chapter-subtitle': {
+      return <ChapterBlock block={block} styleContext={styleContext} />
+    }
+
+    case 'card_title': {
+      return <CardTitle block={block} styleContext={styleContext} />
+    }
+
+    case 'related': {
+      return <RelatedBlock block={block} styleContext={styleContext} />
+    }
+
+    case 'source':
+      return <SourceBlock block={block} styleContext={styleContext} />
+
+    case 'table':
+      return <Table block={block} styleContext={styleContext} />
+
+    case 'embed':
+    case 'embed_code':
+    case 'game_embed':
+    case 'image':
+    case 'gif':
+      return (
+        <EmbedBlockContainer
+          block={block}
+          styleContext={styleContext}
+          lang={lang}
+        />
+      )
+    case 'grouped':
+      return <GroupedBlock block={block} styleContext={styleContext} />
+
+    case 'material_note':
+      return <MaterialNote block={block} styleContext={styleContext} />
+
+    default: {
+      return null
+    }
+  }
+}

package/src/RichTitle/RichTitle.module.css

@@ -0,0 +1,85 @@
+@import '../vars.css';
+
+.root {
+  margin: 0 0 18px;
+
+  font-family: $secondaryFont;
+  font-size: 19px;
+  font-weight: 700;
+  line-height: 23px;
+
+  @media $portraitTablet {
+    margin-bottom: 15px;
+
+    font-size: 37px;
+    line-height: 42px;
+  }
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.root span {
+  font-family: $primaryFont;
+  font-size: 20px;
+  font-weight: normal;
+
+  @media $portraitTablet {
+    font-size: 38px;
+  }
+}
+
+.slide,
+.game {
+  @media $mobile {
+    text-align: center;
+  }
+}
+
+.half {
+  @media $landscapeTablet {
+    font-size: 33px;
+    line-height: 36px;
+  }
+}
+
+.half span {
+  @media $landscapeTablet {
+    font-size: 34px;
+  }
+}
+
+.game:first-child {
+  padding-top: 9px;
+}
+
+.featured {
+  letter-spacing: 0.3px;
+
+  font-size: 28px;
+  line-height: 30px;
+}
+
+.featured span {
+  display: block;
+
+  padding-top: 2px;
+
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/RichTitle/RichTitle.stories.module.css

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

package/src/RichTitle/RichTitle.stories.tsx

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

package/src/RichTitle/RichTitle.test.tsx

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

package/src/RichTitle/RichTitle.types.ts

@@ -0,0 +1,4 @@
+export interface RichTitleProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/RichTitle/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { RichTitleProps } from './RichTitle.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './RichTitle.module.css'
+
+export const RichTitle: React.FC<RichTitleProps> = ({
+  block: {
+    only_on: onlyOn,
+    data: { featured, first, second }
+  },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true],
+    [styles.featured, !!featured]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <h1 data-testid="rich-title" className={makeClassName(classNames)}>
+      {first}
+      {second && <span> {second}</span>}
+    </h1>
+  )
+}

package/src/SimpleBlock/FootnoteLink.css

@@ -0,0 +1,34 @@
+/* stylelint-disable declaration-empty-line-before */
+@import '../vars';
+
+span[data-body] {
+  position: relative;
+
+  padding: 0 4px;
+
+  cursor: pointer;
+  white-space: pre-wrap;
+
+  border-radius: 4px;
+  background: #F8F8F8;
+  box-shadow: inset 1px 0 $ash, inset 0 1px $ash, inset -1px 0 $ash, inset 0 -1px $ash;
+
+  @media $portraitTablet {
+    padding-bottom: 1px;
+  }
+}
+
+span[data-body]:hover {
+  background: #F3F3F3;
+  box-shadow: inset 1px 0 #999, inset 0 1px #999, inset -1px 0 #999, inset 0 -1px #999;
+}
+
+.dark span[data-body] {
+  background-color: #5B5B5B;
+  box-shadow: inset 1px 0 #8B8B8B, inset 0 1px #8B8B8B, inset -1px 0 #8B8B8B, inset 0 -1px #8B8B8B;
+}
+
+.dark span[data-body]:hover {
+  background-color: #5B5B5B;
+  box-shadow: inset 1px 0 #747474, inset 0 1px #747474, inset -1px 0 #747474, inset 0 -1px #747474;
+}